/* ==========================================================================
   Antoni e Landi Srl — foglio di stile
   --------------------------------------------------------------------------
   1  Token            7  Media e cornice      13 FAQ
   2  Base             8  Card e tessere       14 Modulo contatti
   3  Layout           9  Sezioni ricorrenti   15 Footer
   4  Tipografia       10 Processo (bus)       16 Pagine specifiche
   5  Pulsanti         11 Righe servizio       17 Barra mobile
   6  Header e nav     12 Progetti             18 Responsive
   --------------------------------------------------------------------------
   Due elementi grafici derivano dal logo:
   - l'angolo in basso a destra arrotondato (la cornice del monogramma);
   - il "tubo", tratto cavo con estremità tonde (i tratti della A e della L).
   ========================================================================== */

/* 1 · Token ---------------------------------------------------------------- */
:root {
  --blu: #3580ff;
  --blu-scuro: #1f63d8;
  --blu-tenue: #e9f1ff;
  --nebbia: #f4f6f9;
  --bianco: #fff;
  --inchiostro: #0f1d31;
  --grafite: #4a586b;
  --grigio: #637084;
  --linea: #dfe5ee;
  --linea-forte: #c9d3e0;
  --su-scuro: #b9c4d4;
  --su-scuro-tenue: #8d9aad;
  --linea-scura: rgba(255, 255, 255, .14);
  --errore: #b3261e;

  --f-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-testo: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --r: 4px;
  --angolo-s: 16px;
  --angolo-m: 32px;
  --angolo-l: 64px;
  --forma-s: var(--r) var(--r) var(--angolo-s) var(--r);
  --forma-m: var(--r) var(--r) var(--angolo-m) var(--r);
  --forma-l: var(--r) var(--r) var(--angolo-l) var(--r);

  --contenitore: 1240px;
  --margine: clamp(20px, 4vw, 40px);
  --sezione: clamp(72px, 9vw, 128px);
  --header-h: 84px;
  --ombra: 0 1px 2px rgba(15, 29, 49, .05), 0 22px 44px -26px rgba(15, 29, 49, .32);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* 2 · Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

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

body {
  margin: 0;
  background: var(--bianco);
  color: var(--grafite);
  font-family: var(--f-testo);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.nav-aperta { overflow: hidden; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

a { color: var(--blu-scuro); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--inchiostro); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-display);
  color: var(--inchiostro);
  letter-spacing: -.02em;
  text-wrap: balance;
}

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
p { text-wrap: pretty; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }
::selection { background: var(--blu); color: #fff; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--inchiostro);
  color: #fff;
  border-radius: var(--forma-s);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 16px; color: #fff; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icona { width: 20px; height: 20px; flex: none; }

/* 3 · Layout --------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  margin-inline: auto;
  padding-inline: var(--margine);
}

.sezione { padding-block: var(--sezione); overflow-x: clip; }
.sezione--nebbia { background: var(--nebbia); }
.sezione--scura { background: var(--inchiostro); color: var(--su-scuro); }
.sezione--scura h2, .sezione--scura h3, .sezione--scura h4 { color: #fff; }
.sezione--compatta { padding-block: clamp(48px, 6vw, 80px); }
.sezione--attaccata { padding-top: 0; }

.griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.griglia-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 28px); }
.griglia-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.griglia-settori { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }

.intestazione {
  display: grid;
  gap: 18px;
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.intestazione p:not(.occhiello) { font-size: 1.0625rem; }
.intestazione--divisa {
  max-width: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: 20px clamp(32px, 6vw, 96px);
}
.intestazione--divisa > div { display: grid; gap: 18px; }
.sezione--scura .intestazione p:not(.occhiello) { color: var(--su-scuro); }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dopo-griglia { margin-top: clamp(32px, 4vw, 48px); }

/* 4 · Tipografia ----------------------------------------------------------- */
h1 { font-weight: 300; font-size: clamp(2.35rem, 5.3vw, 4.4rem); line-height: 1.03; letter-spacing: -.038em; }
h2 { font-weight: 300; font-size: clamp(1.9rem, 3.5vw, 2.95rem); line-height: 1.08; letter-spacing: -.032em; }
h3 { font-weight: 400; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.24; letter-spacing: -.02em; }
h4 { font-weight: 500; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; }

.evidenza { color: var(--blu); }
.sezione--scura .evidenza { color: #6ea3ff; }

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blu-scuro);
}
/* il "tubo": tratto cavo con estremità tonde, come nel monogramma */
.occhiello::before {
  content: "";
  flex: none;
  width: 24px;
  height: 9px;
  border: 1.5px solid var(--blu);
  border-radius: 99px;
}
.sezione--scura .occhiello, .site-footer .occhiello { color: #8db6ff; }

.lead { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: var(--grafite); }
.sezione--scura .lead { color: var(--su-scuro); }
.testo-ridotto { font-size: .9375rem; }
.mono { font-family: var(--f-mono); }

.prosa { display: grid; gap: 18px; }
.prosa p { max-width: 68ch; }

/* 5 · Pulsanti ------------------------------------------------------------- */
.btn {
  --btn-sfondo: var(--blu);
  --btn-testo: #fff;
  --btn-bordo: var(--blu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--btn-bordo);
  border-radius: var(--forma-s);
  background: var(--btn-sfondo);
  color: var(--btn-testo);
  font-family: var(--f-testo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva);
}
.btn:hover { --btn-sfondo: var(--blu-scuro); --btn-bordo: var(--blu-scuro); --btn-testo: #fff; color: var(--btn-testo); }
.btn .icona { width: 18px; height: 18px; }

.btn--secondario { --btn-sfondo: transparent; --btn-testo: var(--inchiostro); --btn-bordo: var(--linea-forte); }
.btn--secondario:hover { --btn-sfondo: transparent; --btn-testo: var(--inchiostro); --btn-bordo: var(--inchiostro); }

.btn--chiaro { --btn-sfondo: #fff; --btn-testo: var(--inchiostro); --btn-bordo: #fff; }
.btn--chiaro:hover { --btn-sfondo: var(--nebbia); --btn-testo: var(--inchiostro); --btn-bordo: var(--nebbia); }

.btn--contorno-chiaro { --btn-sfondo: transparent; --btn-testo: #fff; --btn-bordo: rgba(255, 255, 255, .4); }
.btn--contorno-chiaro:hover { --btn-sfondo: rgba(255, 255, 255, .06); --btn-testo: #fff; --btn-bordo: #fff; }

.btn--piccolo { min-height: 44px; padding: 0 18px; font-size: .9375rem; }

.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--blu-scuro);
  text-decoration: none;
}
.link-freccia svg { width: 22px; height: 11px; transition: transform .25s var(--curva); }
.link-freccia:hover { color: var(--inchiostro); }
.link-freccia:hover svg { transform: translateX(4px); }
.sezione--scura .link-freccia { color: #8db6ff; }
.sezione--scura .link-freccia:hover { color: #fff; }

/* 6 · Header e navigazione ------------------------------------------------- */
.topbar {
  background: var(--blu);
  font-family: var(--f-mono);
  font-size: .78125rem;
  font-weight: 500;
  color: #fff;
}
.topbar__riga { display: flex; align-items: center; gap: 8px 28px; min-height: 42px; flex-wrap: wrap; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.topbar .icona { width: 14px; height: 14px; color: #fff; }
.topbar__destra { margin-left: auto; display: flex; gap: 28px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .3s var(--curva);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.6) blur(12px); }
}
.site-header.scrollato { box-shadow: 0 12px 32px -24px rgba(15, 29, 49, .4); }

.header__riga { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.marchio { flex: none; display: block; line-height: 0; }
.marchio img { width: auto; height: 58px; }

.nav { display: flex; align-items: stretch; align-self: stretch; gap: 20px; margin-left: auto; }
.nav__lista { display: flex; align-items: stretch; list-style: none; }
.nav__voce { position: relative; display: flex; }

.nav__link {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--inchiostro);
  font-family: var(--f-testo);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* pannello blu che scende dall'alto: passaggio del mouse, menu aperto e pagina corrente */
.nav__link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 86%;
  background: var(--blu);
  border-radius: 0 0 6px 6px;
  transform: translateY(-120%);
  transition: transform .4s cubic-bezier(.1, .1, .25, .9);
}
.nav__voce:hover > .nav__link,
.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"],
.nav__link.attivo { color: #fff; transition: color .4s ease-out; }
.nav__voce:hover > .nav__link::before,
.nav__link:hover::before,
.nav__link:focus-visible::before,
.nav__link[aria-expanded="true"]::before,
.nav__link[aria-current="page"]::before,
.nav__link.attivo::before { transform: translateY(0); }
.nav__link:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: -2px; }
.nav__chevron { width: 10px; height: 10px; transition: transform .2s var(--curva); }
.nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.sottomenu {
  position: absolute;
  top: calc(100% + 14px);
  left: -8px;
  z-index: 110;
  min-width: 370px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--forma-m);
  box-shadow: var(--ombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--curva), transform .18s var(--curva), visibility 0s linear .18s;
}
.sottomenu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.sottomenu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--curva), transform .18s var(--curva); }

.sottomenu--ampio {
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: min(1060px, calc(100vw - 48px));
  transform: translate(-50%, 6px);
}
.sottomenu--ampio.aperto { transform: translate(-50%, 0); }

.sottomenu a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r);
  color: var(--inchiostro);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: padding .35s cubic-bezier(.1, .1, .25, .9), background-color .3s ease-out, color .3s ease-out;
}
/* come nel menu principale: la voce scivola a destra e si colora */
.sottomenu a:hover, .sottomenu a[aria-current="page"] { padding-left: 26px; padding-right: 2px; }
.sottomenu a:hover { background: var(--nebbia); color: var(--blu-scuro); }
.sottomenu a[aria-current="page"] { background: var(--blu-tenue); color: var(--blu-scuro); }
.sottomenu small { display: block; margin-top: 3px; font-size: .8125rem; font-weight: 400; line-height: 1.45; color: var(--grigio); }
.sottomenu .icona { width: 26px; height: 26px; margin-top: -2px; color: var(--blu); }
.sottomenu .sottomenu__tutte {
  grid-column: 1 / -1;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--angolo-m) 0;
  color: var(--blu-scuro);
  font-weight: 600;
}
.sottomenu__tutte svg { width: 22px; height: 11px; }

.nav__cta { flex: none; align-self: center; }

.hamburger {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea);
  border-radius: var(--forma-s);
  background: #fff;
  color: var(--inchiostro);
  cursor: pointer;
}
.hamburger__linee, .hamburger__linee::before, .hamburger__linee::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--curva), background-color .2s;
}
.hamburger__linee { position: relative; }
.hamburger__linee::before, .hamburger__linee::after { content: ""; position: absolute; left: 0; }
.hamburger__linee::before { top: -6px; }
.hamburger__linee::after { top: 6px; }
.hamburger[aria-expanded="true"] .hamburger__linee { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__linee::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__linee::after { transform: translateY(-6px) rotate(-45deg); }

/* 7 · Media e cornice ------------------------------------------------------ */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--forma-l);
  background: var(--nebbia);
}
.media picture, .card__media picture { width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.foto--prodotto { mix-blend-mode: multiply; }
.media--panorama { aspect-ratio: 12 / 5; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--21x9 { aspect-ratio: 21 / 9; }
.media--m { border-radius: var(--forma-m); }

/* cornice sottile con l'angolo arrotondato del logo, sfalsata verso il basso a destra */
.cornice { position: relative; isolation: isolate; margin: 0 20px 20px 0; }
.cornice::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  z-index: -1;
  border: 1.5px solid var(--blu);
  border-radius: var(--r) var(--r) calc(var(--angolo-l) + 8px) var(--r);
  pointer-events: none;
}

/* 8 · Card e tessere ------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--forma-m);
  transition: box-shadow .3s var(--curva), border-color .3s var(--curva);
}
.sezione--nebbia .card { border-color: transparent; }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nebbia); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--curva); }
.card__media--3x2 { aspect-ratio: 3 / 2; }
.card__corpo { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 26px 28px; }
.card__corpo p:not(.card__meta) { font-size: .96875rem; line-height: 1.65; }
.card__meta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--blu-scuro); }
.card h3 { font-size: clamp(1.2rem, 1.6vw, 1.375rem); }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:hover { color: inherit; }
.card__fondo { margin-top: auto; padding-top: 6px; }
.card--link:hover { box-shadow: var(--ombra); border-color: transparent; }
.card--link:hover .card__media img { transform: scale(1.04); }
.card--link:hover .link-freccia svg { transform: translateX(4px); }
.card--link:focus-within { box-shadow: 0 0 0 2px var(--blu); }
.card--link .card__link:focus-visible { outline: none; }

.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px 26px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--forma-m);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva);
}
.sezione--nebbia .tessera { border-color: transparent; }
a.tessera:hover { color: inherit; border-color: transparent; box-shadow: var(--ombra); transform: translateY(-2px); }
.tessera h3 { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.tessera p:not(.card__meta) { font-size: .9375rem; line-height: 1.6; }
.tessera__icona {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r) var(--r) 16px var(--r);
  background: var(--blu);
  color: #fff;
}
.tessera__icona .icona { width: 30px; height: 30px; }
.tessera__freccia { margin-top: auto; padding-top: 4px; color: var(--blu); }
.tessera__freccia svg { width: 22px; height: 11px; transition: transform .25s var(--curva); }
a.tessera:hover .tessera__freccia svg { transform: translateX(4px); }

/* 9 · Sezioni ricorrenti --------------------------------------------------- */

/* Hero della home: slider a piena larghezza con foto di sfondo */
.hero-slider { position: relative; isolation: isolate; background: var(--inchiostro); overflow: clip; }
.hero-slider__pista { display: grid; }

.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(520px, 74vh, 720px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--curva), visibility 0s .9s;
}
.hero-slide.is-attiva { z-index: 1; opacity: 1; visibility: visible; transition: opacity .9s var(--curva); }
/* senza JavaScript resta visibile solo la prima diapositiva */
.hero-slide__sfondo { position: absolute; inset: 0; overflow: hidden; }
.hero-slide__sfondo picture, .hero-slide__sfondo img { width: 100%; height: 100%; }
.hero-slide__sfondo img { object-fit: cover; transform: scale(1.001); }
.hero-slide.is-attiva .hero-slide__sfondo img { animation: hero-zoom 14s var(--curva) forwards; }
@keyframes hero-zoom { from { transform: scale(1.001); } to { transform: scale(1.09); } }

.hero-slide__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 17, 30, .9) 0%, rgba(8, 17, 30, .74) 40%, rgba(8, 17, 30, .26) 72%, rgba(8, 17, 30, .06) 100%),
    linear-gradient(0deg, rgba(8, 17, 30, .66) 0%, rgba(8, 17, 30, .08) 46%, rgba(8, 17, 30, .22) 100%);
}

.hero-slide__contenuto {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2.2vw, 28px);
  max-width: calc(var(--contenitore) + 2 * var(--margine));
  padding-block: clamp(72px, 9vw, 112px) clamp(132px, 15vw, 176px);
  color: #fff;
}
.hero-slide__contenuto .lead { max-width: 54ch; color: rgba(255, 255, 255, .84); }
.hero-slide__contenuto .occhiello { color: #9dc0ff; }
.hero-slide__contenuto .occhiello::before { border-color: #9dc0ff; }
.hero-slide .evidenza { color: #7fabff; }
.hero-slide h1, .hero-slide__titolo {
  margin: 0;
  max-width: 20ch;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.35rem, 5.3vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.038em;
  color: #fff;
  text-wrap: balance;
}
.hero-slide__contenuto .btn--contorno-chiaro { backdrop-filter: blur(2px); }
.hero-slide .btn--secondario { --btn-sfondo: transparent; --btn-testo: #fff; --btn-bordo: rgba(255, 255, 255, .4); backdrop-filter: blur(2px); }
.hero-slide .btn--secondario:hover { --btn-sfondo: rgba(255, 255, 255, .08); --btn-testo: #fff; --btn-bordo: #fff; }

/* comandi: puntini con etichetta a sinistra, frecce e contatore a destra */
.hero-slider__comandi { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.hero-slider__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-slider__punti { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.hero-punto {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .62);
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .25s var(--curva);
}
.hero-punto:hover, .hero-punto.is-attiva { color: #fff; }
.hero-punto__barra { position: relative; display: block; width: clamp(44px, 9vw, 92px); height: 2px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.hero-punto__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: #fff;
}
.hero-punto.is-attiva .hero-punto__barra::after { transform: scaleX(1); }
/* con lo scorrimento automatico attivo la barra segna il tempo che manca */
.js .hero-slider.in-moto .hero-punto.is-attiva .hero-punto__barra::after {
  animation: hero-avanza var(--durata, 7s) linear forwards;
}
.js .hero-slider.in-moto.in-pausa .hero-punto.is-attiva .hero-punto__barra::after { animation-play-state: paused; }
@keyframes hero-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-slider__frecce { display: flex; align-items: center; gap: 12px; }
.hero-slider__conta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.hero-slider__conta b { font-weight: 500; color: #fff; }

.hero-freccia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--forma-s);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--curva), border-color .2s var(--curva);
}
.hero-freccia:hover { background: var(--blu); border-color: var(--blu); }
.hero-freccia svg { width: 22px; height: 11px; }
.hero-freccia--indietro svg { transform: rotate(180deg); }
.hero-slider :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* variante a diapositiva unica delle pagine interne: piu' bassa e senza comandi */
.hero-slider--pagina .hero-slide { min-height: clamp(400px, 54vh, 540px); }
.hero-slider--pagina .hero-slide__contenuto { padding-block: clamp(52px, 6vw, 84px); gap: clamp(16px, 1.8vw, 22px); }
.hero-slider--pagina .hero-slide.is-attiva .hero-slide__sfondo img { animation-duration: 22s; }
.hero-slider--pagina h1 { font-size: clamp(2.2rem, 4.6vw, 3.75rem); max-width: 22ch; }
.hero-slider--pagina .briciole { margin-bottom: 0; }
.hero-slider--pagina .briciole ol { color: rgba(255, 255, 255, .62); }
.hero-slider--pagina .briciole li + li::before { color: rgba(255, 255, 255, .42); }
.hero-slider--pagina .briciole a { color: rgba(255, 255, 255, .8); }
.hero-slider--pagina .briciole a:hover { color: #fff; text-decoration: underline; }

/* fascia sotto lo slider: assistenza e riferimenti normativi */
.fascia-hero { background: var(--nebbia); border-bottom: 1px solid var(--linea); }
.fascia-hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(26px, 3vw, 36px);
}
.fascia-hero__assistenza { display: grid; gap: 6px; justify-items: start; }
.fascia-hero__assistenza h2 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.fascia-hero__norme { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
@media (min-width: 961px) {
  .fascia-hero__norme { padding-left: clamp(32px, 4vw, 56px); border-left: 1px solid var(--linea); }
}

.hero__email {
  max-width: 100%;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--inchiostro);
  text-decoration: none;
}
.hero__email .icona { width: 22px; height: 22px; color: var(--blu); flex-shrink: 0; }
.hero__email:hover { color: var(--blu-scuro); }
.hero__orari { font-family: var(--f-mono); font-size: .75rem; color: var(--grigio); }

.norme__etichetta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--forma-s);
  background: #fff;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--inchiostro);
}
.sezione--nebbia .chip, .fascia-hero .chip { border-color: transparent; }
.sezione--scura .chip { background: transparent; border-color: var(--linea-scura); color: #fff; }

/* Page hero delle pagine interne */
.page-hero { padding-block: clamp(32px, 4vw, 56px) clamp(64px, 8vw, 112px); background: var(--nebbia); overflow-x: clip; }
.page-hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
}
.page-hero__testo { display: grid; justify-items: start; gap: 24px; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.75rem); }
.page-hero .lead { max-width: 60ch; }
.page-hero--semplice .page-hero__griglia { grid-template-columns: minmax(0, 1fr); }
.page-hero--semplice .page-hero__testo { max-width: 860px; }

.briciole { margin-bottom: clamp(28px, 4vw, 48px); }
.briciole ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .03em; color: var(--grigio); }
.briciole li { display: inline-flex; align-items: center; gap: 10px; }
.briciole li + li::before { content: "/"; color: #9aa6b6; }
.briciole a { color: var(--grafite); text-decoration: none; }
.briciole a:hover { color: var(--blu-scuro); text-decoration: underline; }

/* Split testo + immagine */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px clamp(40px, 7vw, 112px);
  align-items: center;
}
.split--testo-largo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.split__testo { display: grid; justify-items: start; gap: 22px; }
.split__media { position: relative; }

/* Banda di richiamo: pannello di testo + foto a filo del bordo destro */
.richiamo { padding-block: clamp(64px, 8vw, 120px) 0; overflow-x: clip; }
.richiamo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  min-height: clamp(460px, 44vw, 640px);
}
.richiamo__testo {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: clamp(40px, 6vw, 88px);
  background: var(--nebbia);
  padding-block: clamp(40px, 4.6vw, 68px) clamp(44px, 5vw, 76px);
  padding-inline: max(var(--margine), calc((100vw - var(--contenitore)) / 2)) clamp(32px, 4vw, 64px);
  border-radius: 0 var(--angolo-m) var(--angolo-m) 0;
}
.richiamo__blocco { display: grid; justify-items: start; gap: 22px; }
.richiamo__blocco h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.richiamo__testo .lead { max-width: 44ch; }
.richiamo__media { position: relative; }
.richiamo__media .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--angolo-m) 0 0 var(--angolo-m);
}

/* Doppia immagine sovrapposta */
.composizione { position: relative; padding: 0 0 clamp(64px, 8vw, 110px) 0; }
.composizione__principale { width: 78%; }
.composizione__secondaria {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 8px solid var(--nebbia);
  border-radius: var(--r) var(--r) calc(var(--angolo-m) + 8px) var(--r);
}
.sezione:not(.sezione--nebbia) .composizione__secondaria { border-color: #fff; }
.composizione__secondaria .media { border-radius: var(--forma-m); }

/* Elenco con spunta */
.spunte { display: grid; gap: 14px; list-style: none; }
.spunte li { position: relative; padding-left: 36px; line-height: 1.6; }
.spunte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 22px;
  height: 22px;
  border-radius: 3px 3px 9px 3px;
  background: var(--blu-tenue);
}
.spunte li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(.12em + 6px);
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--blu-scuro);
  border-bottom: 2px solid var(--blu-scuro);
  transform: rotate(-45deg);
}
.spunte strong { color: var(--inchiostro); font-weight: 600; }
.sezione--scura .spunte li::before { background: rgba(53, 128, 255, .18); }
.sezione--scura .spunte li::after { border-color: #8db6ff; }
.sezione--scura .spunte strong { color: #fff; }

/* Motivi / punti di forza */
.motivi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; list-style: none; }
.motivo { display: grid; gap: 8px; padding-block: 22px 26px; border-top: 1px solid var(--linea); }
.motivo h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.motivo p { font-size: .96875rem; line-height: 1.65; }

/* Cartiglio: i dati dell'impresa come nel riquadro di una tavola tecnica */
.titolo-tecnico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  background: #fff;
  border: 1.5px solid var(--inchiostro);
  border-radius: var(--r) var(--r) var(--angolo-m) var(--r);
  overflow: hidden;
}
.titolo-tecnico > div { padding: 18px 22px 20px; border-right: 1px solid var(--linea-forte); border-bottom: 1px solid var(--linea-forte); }
.titolo-tecnico > div:nth-child(2n) { border-right: 0; }
.titolo-tecnico > .largo { grid-column: 1 / -1; border-right: 0; }
.titolo-tecnico > div:last-child { border-bottom: 0; }
.titolo-tecnico dt { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.titolo-tecnico dd { margin-top: 6px; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.025em; color: var(--inchiostro); }
.titolo-tecnico .largo dd { font-size: 1.0625rem; font-weight: 400; line-height: 1.45; letter-spacing: -.01em; }

/* Blocchi informativi (sede, area, dati) */
.dati { display: grid; list-style: none; border-top: 1px solid var(--linea); }
.dati li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 24px; padding-block: 20px; border-bottom: 1px solid var(--linea); }
.dati__chiave { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); padding-top: 4px; }
.dati__valore { color: var(--inchiostro); }
.dati__valore a { text-decoration: none; font-family: var(--f-display); font-size: 1.125rem; letter-spacing: -.01em; }

/* Galleria a tre */
.galleria { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.galleria .media { height: clamp(220px, 26vw, 340px); border-radius: var(--forma-m); }

/* Applicazioni per settore (pagine competenza) */
.applicazioni .tessera { padding: 32px 30px 28px; }
.applicazioni .tessera h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 400; letter-spacing: -.02em; }
.applicazioni .tessera p:not(.card__meta) { font-size: 1rem; }

/* Riferimenti normativi (pagine competenza) */
.norme-blocco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(40px, 7vw, 112px); align-items: center; }
.norme-blocco__elenco { display: grid; gap: 16px; padding: 28px; background: var(--nebbia); border-radius: var(--forma-m); }
.norme-blocco__elenco .chip { background: #fff; border-color: transparent; }

/* Riferimenti normativi (home): registro tecnico a tutta larghezza.
   Le righe interne sono il fondo che traspare dal gap di 1px. */
.norme-registro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--linea-forte);
  border: 1.5px solid var(--inchiostro);
  border-radius: var(--forma-m);
  overflow: hidden;
}
.norme-registro > li { display: grid; align-content: start; gap: 10px; padding: 24px 24px 28px; background: #fff; }
.norme-registro__ambito { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.norme-registro__codice {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--inchiostro);
}
.norme-registro__voce { font-size: .9375rem; line-height: 1.55; color: var(--grafite); }
.norme-registro--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }

html:not(.js) .filtri, html:not(.js) .filtri__conteggio { display: none; }

/* Nastro di immagini scorrevoli: a cavallo fra la sezione chiara e quella scura.
   Il taglio del fondo cade a metà delle foto, che così sconfinano nel blocco scuro. */
.nastro {
  --nastro-h: clamp(240px, 34vw, 640px);
  --nastro-gap: clamp(12px, 1.1vw, 20px);
  --nastro-taglio: calc(var(--nastro-h) / 2);
  padding-bottom: clamp(24px, 3vw, 44px);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--nebbia) 0 var(--nastro-taglio), var(--inchiostro) var(--nastro-taglio) 100%);
}
.nastro__pista {
  display: flex;
  gap: var(--nastro-gap);
  width: max-content;
  animation: nastro-scorri 72s linear infinite;
}
.nastro:hover .nastro__pista,
.nastro:focus-within .nastro__pista { animation-play-state: paused; }

.nastro__gruppo { display: flex; gap: var(--nastro-gap); margin: 0; padding: 0; list-style: none; }
.nastro__voce { flex: none; height: var(--nastro-h); aspect-ratio: 71 / 100; }
.nastro__voce .media { width: 100%; height: 100%; border-radius: var(--forma-m); }

@keyframes nastro-scorri {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (var(--nastro-gap) / 2)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .nastro { overflow-x: auto; }
  .nastro__gruppo[aria-hidden="true"] { display: none; }
}

/* 10 · Processo (bus) ------------------------------------------------------ */
.processo { position: relative; }
.processo__fasi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; list-style: none; }
.processo--4 .processo__fasi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.processo__bus {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 16px;
  border: 1.5px solid var(--blu);
  border-radius: 99px;
  pointer-events: none;
}
.js .processo__bus { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--curva); }
.js .processo.visibile .processo__bus { clip-path: inset(0 0 0 0); }
.fase { position: relative; display: grid; align-content: start; gap: 10px; }
.fase__numero { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; color: var(--blu-scuro); height: 20px; }
.sezione--scura .fase__numero { color: #8db6ff; }
.fase__nodo { position: relative; display: block; height: 16px; margin: 8px 0 22px; }
.fase__nodo::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blu);
}
.js .fase__nodo::before { transform: scale(0); transition: transform .4s var(--curva); }
.js .processo.visibile .fase__nodo::before { transform: scale(1); }
.js .processo.visibile .fase:nth-child(2) .fase__nodo::before { transition-delay: .3s; }
.js .processo.visibile .fase:nth-child(3) .fase__nodo::before { transition-delay: .65s; }
.js .processo.visibile .fase:nth-child(4) .fase__nodo::before { transition-delay: 1s; }
.js .processo.visibile .fase:nth-child(5) .fase__nodo::before { transition-delay: 1.35s; }
.fase h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; }
.fase p { font-size: .9375rem; line-height: 1.6; }
.sezione--scura .fase p { color: var(--su-scuro); }

/* 11 · Righe servizio (pagine settore) ------------------------------------- */
.righe { display: grid; }
.riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--linea);
}
.riga:first-child { padding-top: 0; border-top: 0; }
.riga:last-child { padding-bottom: 0; }
.riga--inversa .riga__media { order: -1; }
.riga__testo { display: grid; justify-items: start; gap: 20px; }
.riga__testo h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* Settori (card grandi in home) */
.settore .card__media { aspect-ratio: 5 / 4; }
.griglia-settori .settore .card__media { aspect-ratio: 4 / 3; }
.griglia-settori .settore .card__corpo { gap: 10px; padding: 22px 22px 24px; }
.griglia-settori .settore h3 { font-size: clamp(1.1rem, 1.3vw, 1.25rem); }
.griglia-settori .settore p:not(.card__meta) { font-size: .9375rem; line-height: 1.6; }

/* 12 · Progetti ------------------------------------------------------------ */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtro {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--forma-s);
  background: #fff;
  color: var(--inchiostro);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filtro:hover { border-color: var(--inchiostro); }
.filtro[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.filtri__conteggio { margin-bottom: 28px; font-family: var(--f-mono); font-size: .8125rem; color: var(--grigio); }

.scheda-progetto dl { display: grid; gap: 10px; margin-top: 4px; }
.scheda-progetto dt { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.scheda-progetto dd { font-size: .9375rem; line-height: 1.6; margin-top: -6px; }
.cartiglio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; width: 100%; border-top: 1px dashed var(--linea-forte); list-style: none; }
.cartiglio li { font-family: var(--f-mono); font-size: .75rem; color: var(--inchiostro); background: var(--nebbia); padding: 4px 9px; border-radius: 3px 3px 8px 3px; }
.sezione--nebbia .cartiglio li { background: var(--blu-tenue); }

/* 13 · FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  position: relative;
  padding: 24px 76px 24px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--inchiostro);
}
.faq summary::-webkit-details-marker { display: none; }
/* indicatore a interruttore: tubo con levetta */
.faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 27px;
  width: 38px;
  height: 20px;
  border: 1.5px solid var(--linea-forte);
  border-radius: 99px;
  transition: border-color .25s var(--curva), background-color .25s var(--curva);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 32px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grigio);
  transition: transform .25s var(--curva), background-color .25s var(--curva);
}
.faq summary:hover::after { border-color: var(--blu); }
.faq details[open] summary::after { border-color: var(--blu); background: var(--blu-tenue); }
.faq details[open] summary::before { background: var(--blu); transform: translateX(16px); }
.faq__risposta { padding: 0 76px 28px 0; }
.faq__risposta p + p { margin-top: 12px; }

/* 14 · Modulo contatti ----------------------------------------------------- */
.contatti { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 56px clamp(40px, 6vw, 96px); align-items: start; }
.modulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.campo { display: grid; gap: 8px; align-content: start; min-width: 0; }
.campo--pieno { grid-column: 1 / -1; }
fieldset.campo { margin: 0; padding: 0; border: 0; }
.etichetta { font-size: .9375rem; font-weight: 600; color: var(--inchiostro); padding: 0; }
.etichetta .facoltativo { font-weight: 400; color: var(--grigio); }
.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--linea-forte);
  border-radius: var(--r);
  background: #fff;
  color: var(--inchiostro);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #8894a5; }
.input:hover { border-color: #aab6c6; }
.input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(53, 128, 255, .22); }
select.input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230f1d31' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
textarea.input { min-height: 150px; resize: vertical; }
input[type="file"].input { padding: 11px; font-size: .9375rem; }
.campo__aiuto { font-size: .8125rem; color: var(--grigio); }
.campo__errore { display: none; font-size: .875rem; font-weight: 500; color: var(--errore); }
.errore .input { border-color: var(--errore); }
.errore .campo__errore { display: block; }

/* campo-trappola (honeypot): invisibile e non raggiungibile da tastiera, per i moduli automatici */
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consenso { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.55; }
.consenso input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blu); }
.errore .consenso { color: var(--errore); }
.modulo__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.modulo__stato { font-size: .9375rem; color: var(--grafite); }
.modulo__stato.ok { color: var(--inchiostro); font-weight: 500; }

.contatti__lato { display: grid; gap: 32px; }
.mappa {
  display: grid;
  gap: 14px;
  padding: 28px;
  background: var(--nebbia);
  border-radius: var(--forma-m);
}
.mappa__indirizzo { display: flex; gap: 14px; color: var(--inchiostro); font-family: var(--f-display); font-size: 1.125rem; line-height: 1.4; letter-spacing: -.01em; }
.mappa__indirizzo .icona { width: 26px; height: 26px; color: var(--blu); }

/* 15 · Footer -------------------------------------------------------------- */
.site-footer { background: var(--inchiostro); color: var(--su-scuro); font-size: .9375rem; overflow-x: clip; }
.site-footer a { color: var(--su-scuro); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .btn { color: var(--btn-testo); }

.prefooter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(64px, 8vw, 112px);
  border-bottom: 1px solid var(--linea-scura);
}
.prefooter__blocco { display: grid; justify-items: start; align-content: start; gap: 18px; padding-right: clamp(24px, 5vw, 72px); }
.prefooter__blocco + .prefooter__blocco { padding-left: clamp(24px, 5vw, 72px); padding-right: 0; border-left: 1px solid var(--linea-scura); }
.prefooter h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.prefooter p:not(.occhiello) { max-width: 46ch; }
.prefooter .azioni { margin-top: 8px; }

.footer__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; gap: 40px; padding-block: 64px; }
.footer__marchio img { width: auto; height: 46px; }
.footer__marchio p { margin-top: 22px; max-width: 36ch; }
.footer__titolo { margin-bottom: 18px; font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.footer__lista { display: grid; gap: 10px; list-style: none; }
.footer__contatti li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contatti .icona { width: 18px; height: 18px; margin-top: 3px; color: var(--blu); }
.footer__fondo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-block: 24px;
  border-top: 1px solid var(--linea-scura);
  font-size: .8125rem;
  color: var(--su-scuro-tenue);
}
.footer__fondo a { color: var(--su-scuro-tenue); }
.footer__fondo .spinta { margin-left: auto; }

/* 16 · Pagine specifiche --------------------------------------------------- */
.testo-legale { max-width: 780px; }
.testo-legale h2 { margin: 48px 0 14px; font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 400; }
.testo-legale h2:first-child { margin-top: 0; }
.testo-legale p, .testo-legale ul { margin-bottom: 16px; }
.testo-legale ul { padding-left: 22px; }
.testo-legale li + li { margin-top: 6px; }
.testo-legale strong { color: var(--inchiostro); }

.errore-404 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.errore-404__codice { font-family: var(--f-mono); font-size: .875rem; color: var(--blu-scuro); }
.errore-404 .media { background: #fff; }
.errore-404 .media img { object-fit: contain; }

.schermo-minimo { min-height: 100svh; display: grid; place-items: center; padding: var(--margine); text-align: center; }
.schermo-minimo__contenuto { display: grid; justify-items: center; gap: 20px; max-width: 46ch; }
.marchio--minimo img { width: clamp(220px, 32vw, 320px); height: auto; margin-bottom: 12px; }
.schermo-minimo h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; }
.schermo-minimo__invito { margin-top: 12px; font-weight: 600; color: var(--inchiostro); }
.schermo-minimo__email { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.0625rem; }

/* 17 · Barra mobile -------------------------------------------------------- */
.barra-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1.3fr;
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  background: #fff;
  color: var(--inchiostro);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.barra-mobile .icona { width: 18px; height: 18px; color: var(--blu); }
.barra-mobile a:last-child { background: var(--blu); color: #fff; }

/* 18 · Responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
  .nav__link { padding-inline: 14px; }
}

@media (max-width: 1180px) {
  .nav__link { padding-inline: 10px; }
  .nav { gap: 14px; }
}

@media (max-width: 1100px) {
  :root { --header-h: 72px; }
  .topbar { display: none; }
  .marchio img { height: 48px; }
  .hamburger { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--margine) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid var(--linea);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--curva), transform .2s var(--curva), visibility 0s linear .2s;
  }
  .site-header.nav-aperta .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--curva), transform .2s var(--curva); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__voce { display: block; border-bottom: 1px solid var(--linea); }
  .nav__link { width: 100%; height: auto; justify-content: space-between; padding: 18px 2px; font-size: 1.0625rem; }
  .nav__link::before { display: none; }
  .nav__voce:hover > .nav__link,
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link[aria-expanded="true"],
  .nav__link[aria-current="page"],
  .nav__link.attivo { color: var(--blu-scuro); }
  .nav__link:focus-visible { outline-color: var(--blu); outline-offset: 2px; }
  .sottomenu a:hover, .sottomenu a[aria-current="page"] { padding-left: 14px; padding-right: 14px; }
  .nav__chevron { width: 12px; height: 12px; }

  .sottomenu, .sottomenu--ampio {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 14px;
    padding: 6px;
    border: 0;
    border-radius: var(--forma-m);
    background: var(--nebbia);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .sottomenu.aperto, .sottomenu--ampio.aperto { display: grid; transform: none; }
  .sottomenu::before { display: none; }
  .sottomenu a:hover { background: #fff; }
  .nav__cta { margin-top: 28px; }

  .griglia-4, .griglia-settori { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .page-hero__griglia, .split, .split--testo-largo, .riga, .contatti, .errore-404, .intestazione--divisa { grid-template-columns: minmax(0, 1fr); }
  .riga__media, .riga--inversa .riga__media { order: -1; }
  .split--media-dopo .split__media { order: 2; }
  .griglia-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .processo__fasi, .processo--4 .processo__fasi { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 46px; }
  .processo__bus { top: 0; bottom: 0; left: 0; right: auto; width: 16px; height: auto; }
  .js .processo__bus { clip-path: inset(0 0 100% 0); }
  .fase__nodo { position: absolute; left: -46px; top: 0; margin: 0; width: 16px; height: 16px; }
  .fase__nodo::before { top: 3px; left: 3px; }
  .fase__numero { height: auto; }
  .prefooter { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .prefooter__blocco, .prefooter__blocco + .prefooter__blocco { padding: 0; border: 0; }
  .prefooter__blocco + .prefooter__blocco { padding-top: 48px; border-top: 1px solid var(--linea-scura); }
  .page-hero__media { max-width: 640px; }
  .norme-blocco { grid-template-columns: minmax(0, 1fr); }
  .norme-registro, .norme-registro--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fascia-hero__griglia { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-slide__contenuto > * { max-width: 24ch; }
}

@media (max-width: 900px) {
  .richiamo { padding-block: clamp(48px, 8vw, 72px) 0; }
  .richiamo__griglia { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; }
  .richiamo__testo {
    gap: 26px;
    padding-inline: var(--margine);
    padding-block: clamp(40px, 8vw, 64px);
    border-radius: 0;
  }
  .richiamo__media { position: relative; aspect-ratio: 3 / 2; }
  .richiamo__media .media { position: absolute; border-radius: 0; }

  .barra-mobile { display: grid; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

}

@media (max-width: 640px) {
  :root { --angolo-l: 40px; --angolo-m: 24px; }
  body { font-size: 1rem; }
  .griglia-2, .griglia-3, .griglia-4, .griglia-settori, .motivi, .modulo, .galleria { grid-template-columns: minmax(0, 1fr); }
  .footer__griglia { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 48px; }
  .media--panorama { aspect-ratio: 4 / 3; }
  .cornice { margin: 0 12px 12px 0; }
  .cornice::before { inset: 12px -12px -12px 12px; }
  .composizione { padding-bottom: 72px; }
  .composizione__principale { width: 86%; }
  .composizione__secondaria { width: 52%; border-width: 6px; }
  .dati li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .norme-registro, .norme-registro--tre { grid-template-columns: minmax(0, 1fr); }
  .norme-registro > li { padding: 20px 20px 22px; }
  .faq summary { padding-right: 58px; }
  .faq__risposta { padding-right: 0; }
  .btn { width: 100%; }
  .azioni { width: 100%; }
  .nav__cta { width: 100%; }
  .filtri { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); padding-bottom: 4px; scrollbar-width: none; }
  .filtro { flex: none; }
  .footer__fondo .spinta { margin-left: 0; }
  .galleria .media { height: 240px; }

  .hero-slide { min-height: clamp(480px, 82vh, 600px); }
  .hero-slider--pagina .hero-slide { min-height: clamp(340px, 46vh, 420px); }
  .hero-slider--pagina .hero-slide__contenuto { padding-block: clamp(36px, 9vw, 56px); }
  .hero-slider--pagina h1 { font-size: clamp(1.95rem, 8vw, 2.5rem); }
  .hero-slide__contenuto { padding-block: clamp(44px, 11vw, 68px) 112px; gap: 16px; }
  .hero-slide__contenuto > * { max-width: none; }
  .hero-slide h1, .hero-slide__titolo { font-size: clamp(2rem, 8.4vw, 2.6rem); line-height: 1.08; }
  .hero-slide__contenuto .lead { font-size: 1rem; line-height: 1.6; }
  .hero-slide__velo { background: linear-gradient(0deg, rgba(8, 17, 30, .94) 12%, rgba(8, 17, 30, .58) 62%, rgba(8, 17, 30, .4) 100%); }
  .hero-slider__riga { gap: 14px; }
  .hero-punto__testo {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hero-punto__barra { width: 100%; min-width: 36px; }
  .hero-slider__punti { flex: 1; gap: 10px; flex-wrap: nowrap; }
  .hero-punto { flex: 1; }
  .hero-slider__conta { display: none; }
  .hero-freccia { width: 44px; height: 44px; }
  .hero-slide .azioni .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js .processo__bus { clip-path: none; }
  .js .fase__nodo::before { transform: none; }
  .hero-slide.is-attiva .hero-slide__sfondo img { transform: scale(1.001); }
  .hero-punto.is-attiva .hero-punto__barra::after { transform: scaleX(1); }
}

@media print {
  .topbar, .site-header, .barra-mobile, .prefooter, .hamburger { display: none !important; }
  body { padding: 0; color: #000; }
}