/* Sfera Rappresentanze — sito (pubblicato il 25/09/2026)
   Identità: il telaio (la pagina dentro una cornice, come un serramento),
   antracite RAL 7016, alluminio, rovere, vetro. Un solo carattere, Archivo,
   usato anche in larghezza (asse wdth) per i titoli. */

:root {
  --carta: #F7F6F3;
  --vetro: #EDF0F1;
  --alluminio: #C8CBCD;
  --grafite: #565D63;
  --antracite: #2F3438;
  --notte: #1C2024;
  --rovere: #B5803C;
  --rovere-chiaro: #D9A55E;
  --cielo: #9DB6C2;

  --gutter: clamp(20px, 5vw, 64px);
  --misura: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  background: var(--carta);
  color: var(--antracite);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rovere); outline-offset: 3px; }

/* Impaginazione su telefono: righe equilibrate nei titoli, niente parola sola
   in fondo ai paragrafi, gruppi che non si spezzano (nomi, sigle, «post-vendita») */
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.unito { white-space: nowrap; }

.titolo-largo {
  font-variation-settings: 'wdth' 125;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

/* ---------- Telaio fisso: la cornice del sito ---------- */
.telaio {
  position: fixed;
  inset: 12px;
  border: 1.5px solid currentColor;
  pointer-events: none;
  z-index: 40;
  color: var(--alluminio);
  transition: color .5s var(--ease);
}
.telaio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  opacity: .35;
}
body.su-chiaro .telaio { color: var(--antracite); }

/* ---------- Barra di navigazione ---------- */
.barra {
  position: fixed;
  top: 12px; left: 12px; right: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px calc(var(--gutter) - 12px);
  color: var(--carta);
  transition: color .5s var(--ease), background .5s var(--ease), backdrop-filter .5s;
}
body.su-chiaro .barra { color: var(--antracite); }
.barra.compatta { background: color-mix(in srgb, var(--carta) 82%, transparent); backdrop-filter: blur(10px); color: var(--antracite); }
body:not(.su-chiaro) .barra.compatta { background: color-mix(in srgb, var(--notte) 78%, transparent); color: var(--carta); }

.marchio { display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 8px 0; margin: -8px 0; }
/* Simbolo «sfera-finestra»: telaio nel colore della barra, vetro rovere */
.sfera-glifo { width: 44px; height: 44px; flex: none; }
.marchio-testo {
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.2em;
  line-height: 1.15;
}
.marchio-testo small {
  display: block;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.3em;
  opacity: .75;
}
.menu { display: flex; gap: 28px; list-style: none; font-size: 14.5px; font-weight: 500; }
.menu a { text-decoration: none; position: relative; padding: 6px 0; }
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--rovere); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
.menu-apri {
  display: none; background: none; border: 1.5px solid currentColor; color: inherit;
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; cursor: pointer;
  min-height: 44px;
}

/* ---------- Apertura: la finestra 3D ---------- */
.apertura {
  position: relative;
  height: 260vh;
  background: var(--notte);
  color: var(--carta);
}
.apertura-scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
#tela-finestra { position: absolute; inset: 0; width: 100%; height: 100%; }
.apertura-testo {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(56px, 12vh, 120px);
  max-width: min(560px, 86vw);
  z-index: 2;
  will-change: opacity, transform;
}
.apertura-testo h1 {
  font-size: clamp(38px, 5.2vw, 78px);
}
.apertura-testo p {
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--alluminio);
  max-width: 46ch;
}
.suggerimento-scorri {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(56px, 12vh, 120px);
  z-index: 2;
  font-size: 13px;
  color: var(--alluminio);
  display: flex; align-items: center; gap: 12px;
}
.suggerimento-scorri span {
  width: 1.5px; height: 44px; background: var(--alluminio); position: relative; overflow: hidden;
}
.suggerimento-scorri span::after {
  content: ""; position: absolute; left: 0; top: -44px; width: 100%; height: 44px; background: var(--rovere-chiaro);
  animation: scorri 1.8s var(--ease) infinite;
}
@keyframes scorri { to { top: 44px; } }
.apertura-dopo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 var(--gutter);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.apertura-dopo p {
  font-size: clamp(30px, 4.6vw, 64px);
  max-width: 17ch;
  color: var(--carta);
  text-shadow: 0 2px 30px rgba(28, 32, 36, .45);
}

/* ---------- Sezioni generiche ---------- */
.sezione { padding: clamp(96px, 14vh, 160px) var(--gutter); }
.contenuto { max-width: var(--misura); margin: 0 auto; }
.sezione h2 {
  font-size: clamp(34px, 5vw, 68px);
  max-width: 18ch;
}
.sezione .introduzione {
  margin-top: 24px;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--grafite);
  max-width: 58ch;
}

/* Rivela al passaggio: parole che salgono dal traverso */
.riga-rivela { display: block; overflow: hidden; padding-bottom: .06em; }
.riga-rivela > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.visto .riga-rivela > span { transform: none; }
.visto .riga-rivela:nth-child(2) > span { transition-delay: .08s; }
.visto .riga-rivela:nth-child(3) > span { transition-delay: .16s; }

/* ---------- Per chi lavoriamo ---------- */
.clienti-griglia {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--antracite);
}
.cliente-tipo {
  padding: 32px 32px 40px 0;
  position: relative;
}
.cliente-tipo + .cliente-tipo { padding-left: 32px; border-left: 1px solid var(--alluminio); }
.cliente-tipo h3 {
  font-size: 26px;
  font-variation-settings: 'wdth' 115;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.cliente-tipo p { margin-top: 12px; color: var(--grafite); }
.cliente-tipo ul { margin-top: 18px; list-style: none; display: grid; gap: 8px; font-size: 15.5px; }
.cliente-tipo li { padding-left: 20px; position: relative; }
.cliente-tipo li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  border: 2px solid var(--rovere);
}
.cliente-icona { width: 64px; height: 64px; margin-bottom: 22px; color: var(--antracite); }
.cliente-icona .traccia { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s var(--ease); }
.visto .cliente-icona .traccia { stroke-dashoffset: 0; }

/* ---------- Marchi: il campionario ---------- */
.marchi {
  background: var(--vetro);
  padding-bottom: 0;
}
.marchi-intestazione { padding-bottom: 40px; }
.campionario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 64px);
  max-width: var(--misura);
  margin: 0 auto;
}
.campionario-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  order: 2;
}
.palco-cornice {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 78vh;
  border: 1.5px solid var(--antracite);
  background:
    linear-gradient(var(--alluminio), var(--alluminio)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--alluminio), var(--alluminio)) 0 50% / 100% 1px no-repeat,
    var(--carta);
}
.palco-cornice::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--alluminio); pointer-events: none;
}
#tela-campioni { position: absolute; inset: 0; width: 100%; height: 100%; }
.palco-didascalia {
  position: absolute; left: 18px; bottom: 16px; right: 18px;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--grafite);
}
.palco-didascalia strong { color: var(--antracite); font-weight: 600; }

.marchi-elenco { order: 1; }
.marchio-scheda {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh 0;
  opacity: .28;
  transition: opacity .6s var(--ease);
}
.marchio-scheda.attiva { opacity: 1; }
.marchio-nome {
  margin-top: 26px;
  font-size: clamp(36px, 4.4vw, 64px);
  font-variation-settings: 'wdth' 125;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: .95;
  color: var(--antracite);
}
/* Loghi: targhe bianche, come la targhetta sul campione */
.marchio-targa, .marchi-targhe a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--alluminio);
  box-shadow: 0 1px 0 var(--alluminio);
}
.marchio-targa { align-self: flex-start; height: 116px; width: min(340px, 100%); padding: 18px 28px; }
/* Il logo riempie la targa senza mai uscirne, qualunque sia la sua forma */
.marchio-targa img, .marchi-targhe img { width: 100%; height: 100%; object-fit: contain; }
.marchi-targhe {
  list-style: none;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.marchi-targhe a {
  height: 84px; padding: 14px 16px;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.marchi-targhe a:hover, .marchi-targhe a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--antracite);
  box-shadow: 0 6px 0 var(--rovere);
}
.marchio-scheda { scroll-margin-top: 90px; }
.marchio-sede { margin-top: 14px; font-size: 15px; color: var(--grafite); }
.marchio-sede b { color: var(--rovere); font-weight: 600; }
.marchio-descrizione { margin-top: 22px; font-size: 18px; max-width: 46ch; }
.marchio-linee { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.marchio-linee li {
  font-size: 13.5px; font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--antracite);
  background: var(--carta);
}
.marchio-punti { margin-top: 22px; display: grid; gap: 6px; list-style: none; font-size: 15px; color: var(--grafite); }
.marchio-punti li { padding-left: 18px; position: relative; }
.marchio-punti li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--rovere); }
.marchio-link {
  margin-top: 20px;
  align-self: flex-start;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--rovere);
  padding: 14px 0 6px;
}
.marchio-link:hover { color: var(--rovere); }

/* ---------- Metodo (sequenza vera: numerata) ---------- */
.metodo { background: var(--carta); }
.passi {
  margin-top: 80px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  counter-reset: passo;
}
.passi::before {
  content: ""; position: absolute; top: 27px; left: 0; right: 0; height: 1.5px;
  background: var(--antracite);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.8s var(--ease);
}
.visto .passi::before { transform: scaleX(1); }
.passo { padding-right: 28px; position: relative; }
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 1.5px solid var(--antracite);
  background: var(--carta);
  font-weight: 700; font-size: 20px;
  position: relative;
  transform: scale(.6); opacity: 0;
  transition: transform .7s var(--ease), opacity .7s, background .3s, color .3s;
}
.visto .passo::before { transform: none; opacity: 1; }
.visto .passo:nth-child(2)::before { transition-delay: .35s; }
.visto .passo:nth-child(3)::before { transition-delay: .7s; }
.visto .passo:nth-child(4)::before { transition-delay: 1.05s; }
.passo:hover::before { background: var(--antracite); color: var(--carta); }
.passo h3 { margin-top: 24px; font-size: 21px; font-variation-settings: 'wdth' 112; font-weight: 650; }
.passo p { margin-top: 10px; color: var(--grafite); font-size: 15.5px; }

/* ---------- Servizi: pannelli che ruotano come ante ---------- */
.servizi { background: var(--antracite); color: var(--carta); }
.servizi .introduzione { color: var(--alluminio); }
.ante {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  perspective: 1400px;
  background: var(--grafite);
  border: 2px solid var(--grafite);
}
.anta {
  background: var(--antracite);
  padding: 36px 30px 40px;
  min-height: 260px;
  transform-origin: left center;
  transform: rotateY(-72deg);
  opacity: 0;
  transition: transform 1.1s var(--ease), opacity .8s, background .35s;
}
.visto .anta { transform: none; opacity: 1; }
.visto .anta:nth-child(2) { transition-delay: .12s; }
.visto .anta:nth-child(3) { transition-delay: .24s; }
.visto .anta:nth-child(4) { transition-delay: .36s; }
.visto .anta:nth-child(5) { transition-delay: .48s; }
.visto .anta:nth-child(6) { transition-delay: .6s; }
.anta:hover { background: #363C41; }
.anta svg { width: 40px; height: 40px; color: var(--rovere-chiaro); }
.anta h3 { margin-top: 22px; font-size: 21px; font-variation-settings: 'wdth' 112; font-weight: 650; }
.anta p { margin-top: 10px; color: var(--alluminio); font-size: 15.5px; }

/* ---------- Territorio: nomi che scorrono ---------- */
.territorio { background: var(--carta); overflow: hidden; }
.nastri { margin-top: 64px; display: grid; gap: 6px; }
.nastro {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-size: clamp(44px, 8vw, 120px);
  font-variation-settings: 'wdth' 125;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.nastro span { padding-right: .5em; display: flex; align-items: center; gap: .5em; }
.nastro span::after {
  content: ""; width: .32em; height: .32em; border: .07em solid var(--rovere); border-radius: 50%;
}
.nastro-abruzzo { color: var(--antracite); animation: nastro 38s linear infinite; }
.nastro-marche { color: transparent; -webkit-text-stroke: 1.5px var(--antracite); animation: nastro 44s linear infinite reverse; }
@keyframes nastro { to { transform: translateX(-50%); } }
.territorio-dati {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1.5px solid var(--antracite);
}
.territorio-dati div { padding: 26px 24px 0 0; }
.territorio-dati div + div { padding-left: 24px; border-left: 1px solid var(--alluminio); }
.territorio-dati dt { font-size: 14px; color: var(--rovere); font-weight: 600; }
.territorio-dati dd { margin-top: 6px; font-size: 17px; }

/* ---------- Contatti ---------- */
.contatti {
  background: var(--notte);
  color: var(--carta);
  position: relative;
  overflow: hidden;
}
.contatti-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.contatti h2 { color: var(--carta); }
.contatti .introduzione { color: var(--alluminio); }
.email-grande {
  display: inline-block;
  margin-top: 40px;
  font-size: clamp(20px, 2.3vw, 32px);
  font-variation-settings: 'wdth' 112;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid var(--rovere);
  padding: 6px 0 4px;
}
.email-grande:hover { color: var(--rovere-chiaro); }
.modulo { display: grid; gap: 18px; }
.modulo label { display: grid; gap: 6px; font-size: 14px; color: var(--alluminio); }
.modulo input, .modulo select, .modulo textarea {
  font: inherit; font-size: 16px;
  color: var(--carta);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--grafite);
  padding: 10px 0;
  min-height: 44px;
  transition: border-color .3s;
}
.modulo select option { color: var(--antracite); }
.modulo textarea { resize: vertical; min-height: 110px; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: none; border-bottom-color: var(--rovere-chiaro); }
.modulo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bottone {
  justify-self: start;
  margin-top: 8px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  background: var(--carta); color: var(--antracite);
  border: 0; padding: 15px 30px; min-height: 48px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.bottone:hover { background: var(--rovere); color: var(--carta); }
.bottone:active { transform: scale(.97); }
.modulo-nota { font-size: 13px; color: var(--alluminio); }

footer {
  background: var(--notte);
  color: var(--alluminio);
  padding: 28px var(--gutter) 40px;
  font-size: 13px;
  border-top: 1px solid #30363B;
}
footer .contenuto { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a, .modulo-nota a { color: inherit; text-underline-offset: 3px; }
footer a:hover, .modulo-nota a:hover { color: var(--rovere-chiaro); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .campionario { grid-template-columns: minmax(0, 1fr); }
  .campionario-palco {
    order: 1;
    top: 64px;
    height: auto;
    z-index: 3;
    padding: 8px 0;
    background: var(--vetro);
  }
  .palco-cornice { max-height: none; aspect-ratio: 16 / 10; }
  .marchi-elenco { order: 2; }
  .marchio-scheda { min-height: auto; padding: 56px 0; opacity: 1; }
  .marchi-targhe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .marchio-scheda { scroll-margin-top: calc(64px + 62.5vw * 0.9); }
  .marchio-targa { height: 88px; width: 250px; padding: 14px 20px; }
  .passi { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .passi::before { top: 0; bottom: 0; left: 27px; right: auto; width: 1.5px; height: auto; transform: scaleY(0); transform-origin: top; }
  .visto .passi::before { transform: scaleY(1); }
  .passo { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-right: 0; }
  .passo h3 { margin-top: 12px; }
  .passo p { grid-column: 2; }
  .ante { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contatti-griglia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .telaio { inset: 6px; }
  .barra { top: 6px; left: 6px; right: 6px; padding: 12px 16px; }
  /* La mail grande resta su una riga anche sui telefoni stretti (se proprio non ci sta,
     va a capo solo dopo la @, grazie al <wbr> nell'HTML) */
  .email-grande { font-size: min(20px, calc((100vw - 64px) / 15.2)); }
  /* Sul telefono il marchio resta alla misura di prima (andava bene) */
  .marchio { gap: 12px; }
  .sfera-glifo { width: 26px; height: 26px; }
  .marchio-testo { font-size: 16px; }
  .marchio-testo small { font-size: 9.5px; }
  .menu { display: none; }
  .menu.aperto {
    display: grid; position: fixed; top: 70px; left: 6px; right: 6px;
    background: var(--carta); color: var(--antracite);
    padding: 16px 20px; gap: 4px; border: 1.5px solid var(--antracite);
  }
  .menu.aperto a { display: block; padding: 12px 0; font-size: 17px; }
  .menu-apri { display: block; }
  .clienti-griglia, .territorio-dati { grid-template-columns: minmax(0, 1fr); }
  .cliente-tipo, .cliente-tipo + .cliente-tipo { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--alluminio); }
  .territorio-dati div, .territorio-dati div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--alluminio); }
  .ante { grid-template-columns: minmax(0, 1fr); }
  .anta { min-height: 0; }
  .modulo-riga { grid-template-columns: minmax(0, 1fr); }
  .suggerimento-scorri { display: none; }
  .apertura { height: 220vh; }
  .palco-didascalia { font-size: 12px; left: 14px; right: 14px; bottom: 10px; }
  .palco-didascalia span { display: none; }
  .apertura-scena::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    background: linear-gradient(to top, var(--notte) 55%, transparent);
    pointer-events: none; z-index: 1; opacity: var(--velo, 1);
  }
  .apertura-testo { bottom: 40px; }
}

/* ---------- Movimento ridotto: tutto fermo, tutto leggibile ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .riga-rivela > span, .anta, .passo::before { transform: none !important; opacity: 1 !important; }
  .passi::before { transform: none !important; }
  .cliente-icona .traccia { stroke-dashoffset: 0 !important; }
  .marchio-scheda { opacity: 1; }
  .apertura { height: auto; }
  .apertura-scena { position: relative; }
}