/* Hi.Tech — stile del sito (proposta A · Monocromo) */

@font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url(font/open-sans-300.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(font/open-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(font/open-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 800; font-style: normal; font-display: swap; src: url(font/open-sans-800.woff2) format("woff2"); }

:root {
  --testo: #303030;
  --titoli: #000000;
  --secondario: #5f5f5f;
  --filetto: #e0e0e0;
  --filetto-chiaro: #e6e6e6;
  --fondo: #ffffff;
  --fondo-alternato: #f4f4f4;
  --scuro: #111111;
  --su-scuro: #d6d6d6;
  --accento: #B8323A;
  --contenitore: 1200px;
  --margine: 24px;
  --font: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--titoli); text-underline-offset: 3px; }
a:hover { color: var(--accento); }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

h1, h2, h3, h4 { color: var(--titoli); font-weight: 800; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 40px); }
h3 { font-size: 20px; }

strong, b { font-weight: 600; }

.contenitore { max-width: var(--contenitore); margin: 0 auto; padding: 0 var(--margine); }

.salta {
  position: absolute; left: var(--margine); top: -60px; z-index: 10;
  background: var(--scuro); color: #fff; padding: 10px 16px;
}
.salta:focus { top: 8px; color: #fff; }

/* Etichette: maiuscoletto spaziato */
.etichetta, .menu > li > a, .menu summary, .pulsante, .piede h2 {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.etichetta { display: block; margin: 0 0 12px; letter-spacing: 0.2em; color: var(--accento); }

/* ---------- Testata e menu ---------- */

.testata { border-bottom: 1px solid var(--filetto-chiaro); background: var(--fondo); position: relative; z-index: 5; }
.testata .contenitore {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 18px;
}
.logo img { height: 48px; width: auto; }

.menu-interruttore { display: none; }
.menu-pulsante { display: none; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; }
.menu a { text-decoration: none; }
.menu > li { position: relative; }
.menu > li > a, .menu summary { display: inline-block; padding: 10px 0; color: var(--titoli); }
.menu summary { cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; margin-left: 8px; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); }
.menu details[open] summary::after { transform: translateY(0) rotate(-135deg); }
.menu summary:hover { color: var(--accento); }
.menu .attiva > a, .menu .attiva summary { text-decoration: underline 2px var(--accento); text-underline-offset: 8px; }
.menu [aria-current="page"] { color: var(--accento); }

.sottomenu {
  list-style: none; margin: 0; padding: 8px 0; min-width: 240px;
  position: absolute; top: 100%; left: -20px;
  background: var(--fondo); border: 1px solid var(--filetto-chiaro);
}
.sottomenu a { display: block; padding: 8px 20px; font-size: 15px; font-weight: 400; }

@media (max-width: 900px) {
  .menu-interruttore { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .menu-pulsante {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    border: 2px solid var(--titoli); color: var(--titoli); cursor: pointer;
    font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .menu-interruttore:focus-visible + .menu-pulsante { outline: 2px solid var(--accento); outline-offset: 3px; }
  .navigazione { display: none; width: 100%; }
  .menu-interruttore:checked ~ .navigazione { display: block; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--filetto-chiaro); }
  .menu > li { border-bottom: 1px solid var(--filetto-chiaro); }
  .menu > li > a, .menu summary { display: block; padding: 12px 0; }
  .menu .attiva > a, .menu .attiva summary { text-decoration: none; color: var(--accento); }
  .sottomenu { position: static; border: 0; padding: 0 0 8px; min-width: 0; }
  .sottomenu a { padding: 8px 16px; }
}

/* ---------- Testate con foto ---------- */

.hero, .testata-pagina {
  position: relative; display: flex; align-items: flex-end; color: #fff;
  background-color: var(--scuro);
  background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .72)), var(--foto, none);
  background-size: cover; background-position: center 35%;
}
.hero { min-height: 600px; }
.testata-pagina { min-height: 360px; }
.hero .contenitore, .testata-pagina .contenitore { width: 100%; padding-top: 96px; padding-bottom: 72px; }
.hero h1, .testata-pagina h1 { color: #fff; max-width: 820px; letter-spacing: -0.01em; line-height: 1.08; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); }
.testata-pagina h1 { font-size: clamp(34px, 5vw, 56px); }
.hero .etichetta, .testata-pagina .etichetta { color: #fff; }
.hero p.introduzione { margin: 24px 0 0; max-width: 620px; font-size: 19px; }
.azioni { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* ---------- Pulsanti ---------- */

.pulsante {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px;
  border: 2px solid currentColor; text-decoration: none;
}
.pulsante--chiaro { background: #fff; border-color: #fff; color: var(--scuro); }
.pulsante--chiaro:hover { background: transparent; color: #fff; }
.pulsante--bordo-chiaro { color: #fff; }
.pulsante--bordo-chiaro:hover { background: #fff; color: var(--scuro); }
.pulsante--scuro { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.pulsante--scuro:hover { background: transparent; color: var(--scuro); }
.banda-scura :focus-visible, .hero :focus-visible, .testata-pagina :focus-visible { outline-color: #fff; }

/* ---------- Sezioni ---------- */

.sezione { padding: 112px 0 96px; }
.sezione--grigia { background: var(--fondo-alternato); }
.sezione--compatta { padding: 72px 0; }
.sezione h2 { margin-bottom: 16px; }
.sezione .introduzione { margin: 0 0 48px; max-width: 720px; }

.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 56px; align-items: start; }
.due-colonne p { margin: 0 0 20px; }
.due-colonne p:last-child { margin-bottom: 0; }

.testo > * { max-width: 780px; }
.testo p, .testo ul, .testo ol { margin: 0 0 20px; }
.testo h2 { font-size: 30px; margin: 56px 0 16px; }
.testo h3 { margin: 40px 0 12px; }
.testo > :first-child { margin-top: 0; }
.testo li { margin-bottom: 6px; }

.figura img { width: 100%; }
.figura figcaption { font-size: 14px; color: var(--secondario); margin-top: 8px; }

/* Contatori */
.contatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 88px; border-top: 1px solid var(--titoli); }
.contatori > div { padding: 28px 24px 0 0; }
.contatori .numero { display: block; font-size: 56px; font-weight: 800; color: var(--titoli); line-height: 1; }
.contatori .nome { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--titoli); }
.contatori p { margin: 6px 0 0; font-size: 15px; color: var(--secondario); }

/* Schede (prodotti) */
.schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.scheda { display: block; height: 100%; background: var(--fondo); padding: 32px 28px; text-decoration: none; border-top: 3px solid var(--titoli); }
.sezione:not(.sezione--grigia) .scheda { background: var(--fondo-alternato); }
.scheda h3 { margin: 0 0 8px; }
.scheda p { margin: 0; font-size: 15px; color: #4a4a4a; }
a.scheda:hover { border-top-color: var(--accento); }
a.scheda:hover h3 { color: var(--accento); }

/* Elenco numerato (servizi) */
.elenco-numerato { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 56px; counter-reset: voce; }
.elenco-numerato li { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--filetto); counter-increment: voce; }
.elenco-numerato li::before { content: counter(voce, decimal-leading-zero); font-weight: 800; color: var(--accento); }
.elenco-numerato h3 { font-size: 19px; }
.elenco-numerato a { text-decoration: none; }
.elenco-numerato p { margin: 4px 0 0; font-size: 15px; }

/* Banda scura */
.banda-scura { background: var(--scuro); color: #fff; }
.banda-scura .contenitore { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.banda-scura h2 { color: #fff; font-size: 36px; margin: 0 0 12px; }
.banda-scura p { margin: 0; color: var(--su-scuro); max-width: 680px; }
.banda-scura a:not(.pulsante) { color: #fff; }

/* Recapiti */
.recapiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px; }
.recapiti h3 { margin-bottom: 8px; }
.recapiti p { margin: 0; }

/* ---------- Piede ---------- */

.piede { border-top: 1px solid var(--filetto-chiaro); font-size: 15px; }
.piede .colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.piede h2 { margin: 0 0 8px; color: var(--titoli); }
.piede p { margin: 0; }
.piede .logo img { height: 44px; }
.piede .firma { padding-bottom: 32px; font-size: 13px; color: #6b6b6b; }

@media (max-width: 600px) {
  .sezione { padding: 72px 0 64px; }
  .hero { min-height: 520px; }
  .contatori { margin-top: 56px; }
  .contatori .numero { font-size: 44px; }
}

/* Moduli dei prodotti */
.moduli { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.modulo { background: var(--fondo-alternato); padding: 32px 28px; border-top: 3px solid var(--titoli); }
.modulo h3 { margin: 0 0 12px; }
.modulo ul { margin: 0; padding-left: 20px; font-size: 15px; }
.modulo li { margin-bottom: 4px; }

/* Citazione */
.citazione { margin: 0; }
.citazione blockquote { margin: 0 0 24px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 300; line-height: 1.45; color: var(--titoli); }
.citazione figcaption { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--titoli); }
.citazione figcaption span { display: block; color: var(--secondario); font-weight: 400; letter-spacing: 0.1em; }

/* Documenti scaricabili */
.documenti { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }

/* Titoli dei recapiti: presenti per la struttura, l'etichetta li rende visibili */
.sr-titolo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Foto delle testate: in classi, non in attributi style (CSP style-src 'self') */
.foto-1034885077 { --foto: url(/media/pagine/foto-1034885077.jpg); }
.foto-1135978331 { --foto: url(/media/pagine/foto-1135978331.jpg); }
.foto-1629206608 { --foto: url(/media/pagine/foto-1629206608.jpg); }
.foto-583591807 { --foto: url(/media/pagine/foto-583591807.jpg); }
.foto-649070965 { --foto: url(/media/pagine/foto-649070965.jpg); }
.foto-739241962 { --foto: url(/media/pagine/foto-739241962.jpg); }
.foto-749534293 { --foto: url(/media/pagine/foto-749534293.jpg); }
.foto-763186900 { --foto: url(/media/pagine/foto-763186900.jpg); }
.foto-niguarda { --foto: url(/media/home/niguarda.jpg); }