/* ============================================================
   TORNATI PROJECT — stile condiviso
   Palette: Carta fredda #F4F7F9 · Grafite #17222C · Inchiostro #223140
            Arancio termico #F04E23 · Ironbow: #1C0B3A→#8A1E6C→#E4572E→#FFC145
   Tipografia: Archivo (variabile, titoli e testo) · IBM Plex Mono (etichette dati)
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --carta: #f4f7f9;
  --bianco: #ffffff;
  --grafite: #17222c;
  --grafite-2: #1f2d3a;
  --inchiostro: #223140;
  --inchiostro-2: #52616f;
  --linea: #d8e0e6;
  --termico: #f04e23;
  --termico-scuro: #c93a14;
  --caldo: #ffc145;
  --ironbow: linear-gradient(90deg, #1c0b3a 0%, #8a1e6c 34%, #e4572e 70%, #ffc145 100%);
  --raggio: 14px;
  --misura: 1120px;
  --font-testo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-testo);
  font-weight: 430;
  color: var(--inchiostro);
  background: var(--carta);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

.contenitore {
  max-width: var(--misura);
  margin-inline: auto;
  padding-inline: 24px;
}

/* --- etichette mono (stile lettura termocamera) --- */
.etichetta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--termico);
}
.etichetta::before { content: "▸ "; }

/* --- header --- */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
}
.marchio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.marchio strong {
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 17px;
  color: var(--grafite);
}
.marchio span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
}
.testata .cta-mini { display: none; }
@media (min-width: 720px) {
  .testata .cta-mini {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: var(--grafite);
    border: 1.5px solid var(--grafite);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background 0.15s, color 0.15s;
  }
  .testata .cta-mini:hover { background: var(--grafite); color: var(--bianco); }
}

/* --- hero --- */
.hero {
  display: grid;
  gap: 40px;
  padding-block: 40px 72px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; padding-block: 56px 96px; }
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 830;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--grafite);
  margin: 16px 0 18px;
}
.hero .sottotitolo {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--inchiostro-2);
  max-width: 34em;
  margin-bottom: 28px;
}
.riga-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

.bottone {
  display: inline-block;
  background: var(--termico);
  color: #fff;
  font-weight: 800;
  font-size: 16.5px;
  text-decoration: none;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-testo);
  box-shadow: 0 10px 24px rgba(240, 78, 35, 0.28);
  transition: transform 0.15s, background 0.15s;
}
.bottone:hover { background: var(--termico-scuro); transform: translateY(-1px); }

.nota-posti {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--inchiostro-2);
}
.nota-posti b { color: var(--termico); }

/* --- mirino termico (firma della pagina) --- */
.mirino { position: relative; }
.mirino svg { width: 100%; height: auto; border-radius: var(--raggio); box-shadow: 0 24px 60px rgba(23, 34, 44, 0.22); }

/* --- sezioni --- */
.sezione { padding-block: 64px; }
.sezione h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--grafite);
  margin: 14px 0 14px;
  max-width: 22em;
}
.sezione .testo-guida { color: var(--inchiostro-2); max-width: 38em; }

/* problema → soluzione */
.confronto {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}
@media (min-width: 720px) { .confronto { grid-template-columns: 1fr 1fr; } }
.confronto article {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 26px 26px 24px;
}
.confronto article.dopo { border-top: 4px solid var(--termico); }
.confronto article.prima { border-top: 4px solid var(--linea); }
.confronto h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
  margin-bottom: 10px;
}
.confronto .dopo h3 { color: var(--termico); }
.confronto p { color: var(--inchiostro); }

/* come funziona */
.passi {
  display: grid;
  gap: 18px;
  margin-top: 30px;
  counter-reset: passo;
}
@media (min-width: 860px) { .passi { grid-template-columns: repeat(3, 1fr); } }
.passi article {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 26px;
  position: relative;
}
.passi article::before {
  counter-increment: passo;
  content: "0" counter(passo);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--termico);
}
.passi h3 { font-size: 1.12rem; font-weight: 800; color: var(--grafite); margin: 8px 0 8px; }
.passi p { font-size: 15.5px; color: var(--inchiostro-2); }

/* thermal guard — pannello scuro */
.termico-pannello {
  background: var(--grafite);
  color: #dfe7ee;
  border-radius: calc(var(--raggio) + 6px);
  padding: 48px 30px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 860px) { .termico-pannello { padding: 56px 56px; } }
.termico-pannello::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--ironbow);
}
.termico-pannello h2 { color: #fff; }
.termico-pannello .testo-guida { color: #aebac4; }
.griglia-termica { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .griglia-termica { grid-template-columns: 1.1fr 0.9fr; } }
.scala-termica {
  margin-top: 26px;
  border-radius: 10px;
  background: #101820;
  border: 1px solid #2a3947;
  padding: 18px 20px;
}
.scala-termica .barra {
  height: 14px;
  border-radius: 999px;
  background: var(--ironbow);
  margin-bottom: 10px;
}
.scala-termica .gradi {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #8fa0af;
}
.termico-pannello .chiusa {
  margin-top: 22px;
  color: #dfe7ee;
  font-weight: 600;
}

/* offerta pilota */
.pilota {
  background: var(--bianco);
  border: 1.5px solid var(--grafite);
  border-radius: calc(var(--raggio) + 6px);
  padding: 44px 30px;
  text-align: center;
}
@media (min-width: 860px) { .pilota { padding: 56px 64px; } }
.slot-pilota {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 8px;
}
.slot-pilota span {
  width: 46px;
  height: 46px;
  border: 1.5px dashed var(--termico);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--termico);
}
.slot-pilota + p { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--inchiostro-2); margin-bottom: 26px; }
.pilota .testo-guida { margin-inline: auto; }
.pilota h2 { margin-inline: auto; }
.pilota .bottone { margin-top: 26px; }

/* faq */
.faq { display: grid; gap: 14px; margin-top: 30px; max-width: 760px; }
.faq details {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 18px 22px;
}
.faq summary {
  font-weight: 750;
  color: var(--grafite);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--termico); font-size: 18px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--inchiostro-2); font-size: 15.5px; }

/* modulo contatti */
.contatto {
  background: var(--grafite);
  border-radius: calc(var(--raggio) + 6px);
  color: #dfe7ee;
  padding: 48px 30px;
}
@media (min-width: 860px) { .contatto { padding: 56px 64px; } }
.contatto h2 { color: #fff; }
.contatto .testo-guida { color: #aebac4; margin-bottom: 30px; }
.modulo { display: grid; gap: 16px; max-width: 560px; }
.campo label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa0af;
  margin-bottom: 7px;
}
.campo input, .campo select {
  width: 100%;
  background: #101820;
  border: 1px solid #2a3947;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-testo);
  font-size: 16px;
  padding: 13px 14px;
}
.campo input:focus, .campo select:focus {
  outline: 2px solid var(--termico);
  outline-offset: 1px;
  border-color: var(--termico);
}
.modulo .bottone { width: 100%; margin-top: 6px; }
.modulo .privacy-nota { font-size: 13px; color: #8fa0af; }
.modulo .privacy-nota a { color: #dfe7ee; }
.nascosto { display: none; }

/* footer */
.piede {
  padding-block: 40px 48px;
  border-top: 1px solid var(--linea);
  margin-top: 72px;
  font-size: 14px;
  color: var(--inchiostro-2);
}
.piede .riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 14px;
}
.piede a { color: var(--inchiostro); }
.piede .avvertenza { font-size: 12.5px; max-width: 62em; }

/* pagina interna (privacy, home provvisoria) */
.pagina-interna { padding-block: 40px 20px; max-width: 760px; }
.pagina-interna h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 830; line-height: 1.1; color: var(--grafite); margin: 10px 0 20px; }
.pagina-interna h2 { font-size: 1.25rem; font-weight: 800; color: var(--grafite); margin: 30px 0 8px; }
.pagina-interna p, .pagina-interna li { color: var(--inchiostro); margin-bottom: 10px; }
.pagina-interna ul { padding-left: 22px; }

/* home provvisoria */
.home-scura { background: var(--grafite); color: #dfe7ee; min-height: 100vh; display: flex; flex-direction: column; }
.home-scura .testata .marchio strong, .home-scura .piede a { color: #fff; }
.home-scura .testata .marchio span { color: #8fa0af; }
.home-centro { flex: 1; display: grid; place-items: center; padding-block: 60px; }
.home-centro .interno { max-width: 640px; }
.home-centro .barra-ironbow { height: 5px; width: 88px; background: var(--ironbow); border-radius: 999px; margin-bottom: 26px; }
.home-centro h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 830; line-height: 1.08; color: #fff; margin-bottom: 14px; }
.home-centro p { color: #aebac4; margin-bottom: 30px; max-width: 34em; }
.card-servizio {
  display: block;
  background: #101820;
  border: 1px solid #2a3947;
  border-radius: var(--raggio);
  padding: 22px 24px;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.card-servizio:hover { border-color: var(--termico); transform: translateY(-2px); }
.card-servizio strong { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; margin: 4px 0 6px; }
.card-servizio em { font-style: normal; color: #aebac4; font-size: 14.5px; }
.divisioni { margin-top: 26px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #66788a; line-height: 2; }
.home-scura .piede { border-top-color: #2a3947; color: #8fa0af; margin-top: 0; }

/* accessibilità / movimento */
:focus-visible { outline: 2px solid var(--termico); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Estensione v2 — home corporate e pagine vetrina
   ============================================================ */

/* griglia servizi in home */
.griglia-servizi { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 860px) { .griglia-servizi { grid-template-columns: 1fr 1fr; } }
.card-servizio .stato {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa0af;
}
.card-servizio .stato.attivo { color: var(--termico); }
.home-centro .interno { max-width: 880px; }

/* sezioni scure della home */
.home-sezione { padding-block: 40px; border-top: 1px solid #2a3947; }
.home-sezione h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; margin: 10px 0 12px; }
.home-sezione p { color: #aebac4; max-width: 46em; }
.home-sezione a { color: #dfe7ee; }
.contatti-rapidi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contatto-icona {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.contatto-icona:hover span { text-decoration: underline; }
.icona-contatto { width: 21px; height: 21px; flex: 0 0 21px; }
.icona-whatsapp { color: #25d366; }
.icona-telefono { color: var(--termico); }
.icona-email { color: #66b8e8; }
.bottone .icona-contatto { width: 19px; height: 19px; vertical-align: -4px; margin-right: 7px; }

/* pagine vetrina (tema chiaro) */
.vetrina { padding-block: 36px 8px; }
.vetrina h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 830;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--grafite);
  margin: 14px 0 16px;
  max-width: 18em;
}
.vetrina .lede { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--inchiostro-2); max-width: 38em; }

.punti { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 860px) { .punti { grid-template-columns: repeat(var(--colonne, 3), 1fr); } }
.punti article {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--termico);
  border-radius: var(--raggio);
  padding: 26px;
}
.punti h3 { font-size: 1.12rem; font-weight: 800; color: var(--grafite); margin-bottom: 8px; }
.punti p { font-size: 15.5px; color: var(--inchiostro-2); }

/* banda scura con CTA */
.banda {
  background: var(--grafite);
  color: #dfe7ee;
  border-radius: calc(var(--raggio) + 6px);
  padding: 44px 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 860px) { .banda { padding: 52px 56px; } }
.banda::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--ironbow); }
.banda h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; margin-bottom: 10px; }
.banda p { color: #aebac4; max-width: 40em; margin-inline: auto; margin-bottom: 24px; }
.banda .nota { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: #8fa0af; margin-top: 18px; margin-bottom: 0; }

/* navigazione nel footer */
.piede .nav-piede { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px; font-size: 13.5px; }
.piede .nav-piede a { color: var(--inchiostro-2); text-decoration: none; }
.piede .nav-piede a:hover { color: var(--grafite); text-decoration: underline; }
.home-scura .piede .nav-piede a { color: #8fa0af; }
.home-scura .piede .nav-piede a:hover { color: #fff; }