/* Innovatec S.r.l. — sito aziendale. Palette: blu notte, calce, giallo cantiere. */
:root {
  --notte: #18263a;
  --notte-2: #23364f;
  --calce: #f3f5f4;
  --bianco: #ffffff;
  --pietra: #5a6672;
  --linea: #d6dcdf;
  --giallo: #f2b705;
  --giallo-scuro: #8a6700;
  --misura: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--calce);
  color: var(--notte);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }

.contenitore { width: min(var(--misura), 100% - 32px); margin-inline: auto; }

h1, h2, h3 { line-height: 1.08; margin: 0; font-weight: 800; font-stretch: 118%; font-variation-settings: "wdth" 118; }
h1 { font-size: clamp(2.4rem, 6.4vw, 5rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-stretch: 108%; font-variation-settings: "wdth" 108; }
p { margin: 0 0 1em; max-width: 64ch; }

/* Testata */
.testata { background: var(--notte); color: var(--bianco); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.2rem; font-variation-settings: "wdth" 120; }
.marchio svg { width: 34px; height: 34px; }
.menu { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.97rem; }
.menu a { text-decoration: none; opacity: 0.85; }
.menu a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--giallo); }

/* Apertura con il metro da muratore */
.apertura { background: var(--notte); color: var(--bianco); padding-block: 72px 0; overflow: hidden; }
.apertura p { font-size: 1.2rem; color: #c9d3dd; margin-top: 24px; }
.apertura .azioni { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.bottone { display: inline-block; padding: 14px 24px; border-radius: 4px; font-weight: 700; text-decoration: none; border: 2px solid var(--giallo); }
.bottone.pieno { background: var(--giallo); color: var(--notte); }
.bottone.vuoto { color: var(--bianco); }
.metro {
  margin-top: 72px;
  height: 64px;
  background:
    repeating-linear-gradient(90deg, var(--notte) 0 2px, transparent 2px 100px) 0 0 / 100% 30px no-repeat,
    repeating-linear-gradient(90deg, var(--notte) 0 1px, transparent 1px 50px) 0 0 / 100% 20px no-repeat,
    repeating-linear-gradient(90deg, var(--notte) 0 1px, transparent 1px 10px) 0 0 / 100% 11px no-repeat,
    var(--giallo);
  position: relative;
  transform-origin: left center;
  animation: srotola 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.metro span { position: absolute; bottom: 8px; font-weight: 700; font-size: 0.8rem; color: var(--notte); }
@keyframes srotola { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .metro { animation: none; } }

/* Sezioni */
section { padding-block: 88px; }
.intro-sezione { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.intro-sezione p { color: var(--pietra); margin: 0; }

.servizi { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--notte); }
.servizio { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--linea); }
.servizio:nth-child(even) { padding-left: 32px; padding-right: 0; border-left: 1px solid var(--linea); }
.servizio h3 { margin-bottom: 12px; }
.servizio p { color: var(--pietra); margin-bottom: 12px; }
.servizio ul { margin: 0; padding-left: 1.1em; color: var(--notte); }
.servizio li { margin-bottom: 4px; }

.metodo { background: var(--bianco); }
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: passo; }
.passi li { counter-increment: passo; border-top: 4px solid var(--giallo); padding-top: 18px; }
.passi li::before { content: counter(passo); font-weight: 800; font-size: 2rem; font-variation-settings: "wdth" 120; display: block; margin-bottom: 6px; }
.passi p { color: var(--pietra); font-size: 0.98rem; }

.relax { background: var(--notte-2); color: var(--bianco); padding-block: 56px; }
.relax .contenitore { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }
.relax svg { width: 72px; height: 72px; }
.relax p { color: #c9d3dd; }
.relax h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px; }

.chi-siamo .colonne { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; }
.dati { border-left: 4px solid var(--giallo); padding-left: 24px; }
.dati dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.dati dt { color: var(--pietra); }
.dati dd { margin: 0; font-weight: 600; }

.contatti { background: var(--bianco); }
.schede-contatto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.schede-contatto div { border-top: 2px solid var(--notte); padding-top: 16px; }
.schede-contatto h3 { font-size: 1rem; color: var(--pietra); font-weight: 600; margin-bottom: 6px; font-variation-settings: "wdth" 100; }
.schede-contatto p, .schede-contatto a { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }

/* Piede */
.piede { background: var(--notte); color: #c9d3dd; padding-block: 40px; font-size: 0.93rem; }
.piede .contenitore { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.piede p { margin: 0; }

/* Pagina privacy */
.documento { padding-block: 56px 88px; }
.documento h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 12px; }
.documento h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.documento .aggiornata { color: var(--pietra); }
.documento h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.documento ul { padding-left: 1.2em; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 860px) {
  .intro-sezione, .chi-siamo .colonne, .relax .contenitore { grid-template-columns: 1fr; gap: 20px; }
  .servizi { grid-template-columns: 1fr; }
  .servizio, .servizio:nth-child(even) { padding: 28px 0; border-left: 0; }
  .passi { grid-template-columns: 1fr 1fr; }
  .schede-contatto { grid-template-columns: 1fr; }
  section { padding-block: 64px; }
}
@media (max-width: 520px) {
  .passi { grid-template-columns: 1fr; }
  .menu { gap: 14px; }
  .apertura { padding-top: 48px; }
}