/* Copia statica della vetrina vmercury.it (Wix, novembre 2026).
   Misure prese dal DOM del sito originale a 1440px (desktop) e 320px (mobile Wix).
   Font: Barlow al posto di Barlow Wix; Nunito Sans al posto di Avenir LT 35 Light (proprietario);
   Montserrat al posto di Lulo Clean (proprietario); Helvetica/Arial di sistema per i titoli. */

@font-face { font-family: 'Barlow'; font-weight: 200; font-style: normal; font-display: swap; src: url('../fonts/barlow-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/nunito-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

:root {
  --nero: #212121;
  --bianco: #ffffff;
  --arancio: #ff5020;
  --bottone: #403939;
  --testo: #212121;
  --f-titoli: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-barlow: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --f-testo: 'Nunito Sans', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --f-bottone: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --larghezza: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bianco); color: var(--testo); font-family: var(--f-testo); font-weight: 300; font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: 8px; background: #fff; color: #116dff; padding: 8px 14px; border-radius: 24px; z-index: 100; }
.salta:focus { left: 8px; }

.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; position: relative; }

/* ---------- Testata ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: var(--nero); height: 64px; }
.testata .contenitore { height: 64px; display: flex; align-items: center; justify-content: center; }
.testata__logo { display: none; }
.menu { list-style: none; padding: 0; margin: 7px 0 0; display: flex; }
.menu a { display: block; padding: 0 18px; font-size: 16px; line-height: 50px; color: var(--bianco); text-decoration: none; }
.menu a:hover, .menu a.attivo { color: var(--arancio); }
.menu__apri { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 719px; background: var(--nero) url('../img/hero-1440.jpg') center / cover no-repeat; overflow: hidden; }
.webp .hero { background-image: url('../img/hero-1440.webp'); }
@media (min-width: 1441px) { .hero { background-image: url('../img/hero-1920.jpg'); } .webp .hero { background-image: url('../img/hero-1920.webp'); } }
.hero__testo { position: absolute; left: 24px; top: 265px; color: var(--bianco); max-width: 762px; }
.hero__titolo { font-family: var(--f-barlow); font-weight: 700; font-size: 80px; line-height: 1.2; }
.hero__sotto { margin-top: 17px; font-size: 30px; line-height: 1.2; font-weight: 300; }
.bottone { display: inline-flex; align-items: center; justify-content: center; width: 332px; height: 51px; margin-top: 38px; border-radius: 100px; background: var(--bottone); color: var(--bianco); text-decoration: none; font-family: var(--f-bottone); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.bottone:hover { background: #2f2a2a; }

/* ---------- Lavori ---------- */
.lavori { background: var(--bianco); padding: 24px 0 35px; }
.titolo { font-family: var(--f-titoli); font-weight: 700; font-size: 62px; line-height: 1.21; letter-spacing: 0.01em; text-align: center; color: var(--testo); }
.lavori .titolo { max-width: 1000px; margin: 0 auto; white-space: nowrap; }
.riga { width: 134px; height: 0; margin: 17px auto 0; border-top: 1px solid var(--testo); }
.lavori__testo { max-width: 700px; margin: 25px auto 0; white-space: nowrap; font-family: var(--f-titoli); font-weight: 400; font-size: 20px; line-height: 1.22; letter-spacing: 0.01em; text-align: center; }
.lavori__testo b { font-weight: 700; }
.galleria { display: grid; grid-template-columns: repeat(3, 313px); gap: 13px; width: 965px; margin: 44px auto 0; }
.galleria__colonna { display: flex; flex-direction: column; gap: 13px; }
.galleria img { width: 100%; height: auto; }

/* ---------- Clienti ---------- */
.clienti { background: var(--nero); height: 168px; }
.clienti .contenitore { height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; }
.clienti img { width: 150px; height: auto; }

/* ---------- Servizi ---------- */
.servizi { background: var(--bianco); padding: 44px 0 95px; }
.servizi .titolo { line-height: 78.4px; }
.riga--corta { width: 60px; margin-top: 18px; }
.servizi__testo { max-width: 960px; margin: 21px auto 0; white-space: nowrap; font-family: var(--f-barlow); font-weight: 200; font-size: 20px; line-height: 28px; text-align: center; }
.servizi__griglia { display: grid; grid-template-columns: repeat(3, 324px); justify-content: space-between; margin: 97px 0 0; padding: 0 80px 0 77px; }
.servizio__intesta { display: flex; align-items: flex-start; gap: 44px; padding-left: 23px; }
.servizio__icona { width: 38px; height: 38px; flex: none; margin-top: 7px; }
.servizio__icona svg { width: 100%; height: 100%; }
.servizio__titolo { font-family: var(--f-barlow); font-weight: 700; font-size: 20px; line-height: 28px; }
.servizio__testo { margin-top: 40px; font-size: 19px; line-height: 28px; text-align: justify; }
.servizio__testo b { font-weight: 700; }

/* ---------- Contatti ---------- */
.contatti { background: var(--bianco); }
.contatti .contenitore { display: grid; grid-template-columns: 480px 1fr; min-height: 414px; }
.contatti__sinistra { background: var(--nero); color: var(--bianco); padding: 36px 0 0 93px; }
.contatti__logo { width: 66px; height: auto; }
.contatti__titolo { margin-top: 27px; font-family: var(--f-barlow); font-weight: 500; font-size: 30px; line-height: 1.2; }
.contatti__indirizzo { margin-top: 42px; font-size: 16px; line-height: 28.8px; font-style: normal; }
.contatti__telefono { margin-top: 25px; font-size: 16px; line-height: 1.2; }
.contatti__email { margin-top: 6px; font-size: 16px; line-height: 1.2; }
.contatti__email a, .contatti__telefono a { color: var(--bianco); text-decoration: none; }
.social { list-style: none; padding: 0; margin: 19px 0 0 -6px; display: flex; gap: 5px; }
.social img { width: 25px; height: 25px; }
.contatti__destra { padding: 28px 0 0; display: flex; justify-content: center; }
.modulo { width: 611px; }
.modulo__riga { display: flex; gap: 27px; }
.modulo__campo { flex: 1; }
.modulo label { display: block; font-size: 14px; line-height: 1; color: var(--testo); margin-bottom: 9px; }
.modulo input, .modulo textarea { display: block; width: 100%; height: 37px; border: 1px solid var(--testo); border-radius: 0; background: var(--bianco); padding: 0 10px; font: 300 14px var(--f-testo); color: var(--testo); }
.modulo textarea { height: 86px; padding: 8px 10px; resize: vertical; }
.modulo input:focus, .modulo textarea:focus { outline: 2px solid var(--arancio); outline-offset: -1px; }
.modulo__campo + .modulo__campo--largo, .modulo__campo--largo { margin-top: 21px; }
.modulo__campo--messaggio { margin-top: 20px; }
.modulo__invia { display: block; width: 100%; height: 36px; margin-top: 20px; border: 0; background: var(--arancio); color: var(--bianco); font: 300 14px var(--f-testo); cursor: pointer; }
.modulo__invia:hover { background: #e6461a; }
.modulo__invia[disabled] { opacity: 0.6; cursor: wait; }
.modulo__esito { margin-top: 13px; font-size: 14px; line-height: 1.4; min-height: 17px; }
.modulo__esito--errore { color: #c0392b; }
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Piede ---------- */
.piede { background: var(--nero); color: var(--bianco); min-height: 312px; display: flex; align-items: flex-end; }
.piede .contenitore { display: flex; justify-content: space-between; width: 971px; max-width: calc(100% - 32px); padding-bottom: 5px; font-size: 14px; line-height: 1.2; }
.piede a { color: var(--bianco); }

/* ---------- Pagina privacy ---------- */
.pagina { background: var(--bianco); padding: 50px 0 90px; }
.pagina__corpo { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.pagina__titolo { font-family: var(--f-barlow); font-weight: 700; font-size: 48px; line-height: 1.2; text-align: center; color: var(--testo); }
.pagina__corpo p { margin: 0; font-size: 16.5px; line-height: 1.37; }
.pagina__corpo .pagina__titolo + p { margin-top: 38px; }
.pagina__corpo a { color: var(--testo); }

/* ---------- Mobile (Wix mostra un layout a parte sotto i 768px) ---------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .testata .contenitore { justify-content: center; }
  .testata__logo { display: block; width: 60px; height: auto; }
  .menu__apri { display: block; position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; }
  .menu__apri span { display: block; width: 26px; height: 2px; background: var(--bianco); margin: 6px auto; transition: transform .2s, opacity .2s; }
  .menu__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu { display: none; position: fixed; inset: 64px 0 0; margin: 0; background: var(--nero); flex-direction: column; align-items: center; padding-top: 40px; }
  .menu.aperto { display: flex; }
  .menu a { font-size: 22px; line-height: 64px; }

  .hero { height: auto; aspect-ratio: 320 / 269; min-height: 269px; background-image: url('../img/hero-980.jpg'); background-position: center; }
  .webp .hero { background-image: url('../img/hero-980.webp'); }
  .hero__testo { left: 6.25%; right: 6.25%; top: 19%; max-width: none; }
  .hero__titolo { font-size: clamp(35px, 10.9vw, 60px); }
  .hero__sotto { margin-top: 8px; font-size: clamp(19px, 5.9vw, 30px); }
  .bottone { width: 140px; height: 37px; margin-top: clamp(20px, 8vw, 40px); font-size: 10.7px; }

  .lavori { padding: 22px 0 10px; }
  .titolo { font-size: 29px; line-height: 1.23; padding: 0 20px; white-space: normal; max-width: none; }
  .lavori__testo, .servizi__testo { white-space: normal; }
  .riga { width: calc(100% - 40px); margin-top: 10px; }
  .lavori__testo { margin: 18px auto 0; padding: 0 20px; font-size: 17px; line-height: 1.5; max-width: 300px; }
  .galleria { grid-template-columns: repeat(3, 1fr); width: calc(100% - 40px); margin-top: 10px; gap: 13px; }
  .galleria__colonna { gap: 13px; }

  .clienti { height: auto; padding: 44px 0 44px; }
  .clienti .contenitore { display: flex; flex-direction: column; align-items: center; gap: 48px; }
  .clienti img { width: 110px; }

  .servizi { padding: 40px 0 40px; }
  .servizi .titolo { font-size: 33px; line-height: 43.4px; max-width: 220px; margin: 0 auto; }
  .riga--corta { width: 60px; margin-top: 17px; }
  .servizi__testo { margin-top: 20px; padding: 0 20px; font-size: 18px; line-height: 25.2px; }
  .servizi__griglia { display: block; margin-top: 54px; padding: 0 20px; }
  .servizio + .servizio { margin-top: 33px; }
  .servizio__intesta { display: block; padding: 0; }
  .servizio__icona { width: 30px; height: 30px; margin: 0 auto; }
  .servizio__titolo { margin-top: 11px; font-size: 18px; line-height: 25.2px; }
  .servizio__testo { margin-top: 16px; font-size: 17px; line-height: 25.2px; }

  .contatti .contenitore { display: block; min-height: 0; }
  .contatti__sinistra { padding: 27px 20px 40px; text-align: left; }
  .contatti__logo { width: 60px; margin: 0 auto; }
  .contatti__titolo { margin-top: 10px; }
  .contatti__indirizzo { margin-top: 14px; }
  .contatti__telefono { margin-top: 16px; }
  .contatti__email { margin-top: 10px; }
  .social { justify-content: center; margin: 14px 0 0; }
  .contatti__destra { padding: 30px 22px 40px; display: block; }
  .modulo { width: 100%; }
  .modulo__riga { display: block; }
  .modulo label { font-size: 16px; margin-bottom: 9px; }
  .modulo input, .modulo textarea { height: 39px; font-size: 16px; }
  .modulo textarea { height: 85px; }
  .modulo__campo + .modulo__campo, .modulo__campo--largo, .modulo__campo--messaggio { margin-top: 19px; }
  .modulo__invia { height: 42px; margin-top: 13px; font-size: 14px; }

  .piede { min-height: 90px; }
  .piede .contenitore { flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; padding: 0 16px 8px; }

  .pagina { padding: 36px 0 60px; }
  .pagina__titolo { font-size: 34px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* Il sito Wix non ha un layout tablet: scala le misure del desktop. */
  .hero { height: 56vw; }
  .hero__testo { top: 37%; }
  .hero__titolo { font-size: 5.5vw; }
  .hero__sotto { font-size: 2.1vw; }
  .titolo { font-size: 4.3vw; }
  .galleria { grid-template-columns: repeat(3, 1fr); width: calc(100% - 48px); }
  .servizi__griglia { grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0 32px; }
  .contatti .contenitore { grid-template-columns: 40% 1fr; }
  .contatti__sinistra { padding-left: 32px; }
  .modulo { width: calc(100% - 64px); }
}

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