@font-face { font-family: "Archivo"; src: url("font/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --carta: #f4f7f9;        /* carta da disegno, fredda */
  --bianco: #ffffff;
  --china: #1d3557;        /* inchiostro di china blu */
  --testo: #2b3a4a;
  --secondario: #5b6b7b;
  --griglia: #d6e0e8;
  --blu: #2f5da8;          /* matita blu delle quote */
  --giallo: #f2b705;       /* cartello di cantiere */
  --verde: #1f8a5b;
  --misura: 1.0625rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--carta); color: var(--testo);
  font-family: "Archivo", system-ui, sans-serif; font-size: var(--misura); line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
a { color: var(--blu); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; border-radius: 4px; }
.contenitore { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* intestazione */
.testata { border-bottom: 1px solid var(--griglia); background: var(--carta); position: sticky; top: 0; z-index: 10; }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.marchio { display: flex; align-items: center; gap: 10px; color: var(--china); text-decoration: none; font-weight: 750; font-stretch: 112%; font-size: 1.15rem; letter-spacing: -0.01em; }
.marchio svg { flex: none; }
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { color: var(--testo); text-decoration: none; font-size: 0.95rem; }
.menu a:hover { color: var(--blu); }
.menu .accedi { color: var(--secondario); }
@media (max-width: 720px) { .menu .voce { display: none; } }

.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.bottone.pieno { background: var(--china); color: #fff; }
.bottone.pieno:hover { background: #142744; }
.bottone.vuoto { border-color: var(--china); color: var(--china); background: transparent; }
.bottone.vuoto:hover { background: var(--bianco); }
.bottone.piccolo { padding: 8px 14px; font-size: 0.92rem; white-space: nowrap; }
@media (max-width: 400px) { .menu { gap: 14px; } .marchio { font-size: 1.02rem; } }

/* apertura */
.apertura { padding: 64px 0 72px; background-image: linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.apertura .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.titolo { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 0.98; font-weight: 800; font-stretch: 118%; letter-spacing: -0.035em; color: var(--china); margin: 0 0 22px; }
.titolo .riga2 { display: block; font-weight: 500; font-stretch: 100%; font-size: 0.5em; line-height: 1.15; letter-spacing: -0.015em; margin-top: 14px; color: var(--blu); }
.sottotitolo { font-size: 1.2rem; max-width: 34em; margin: 0 0 30px; color: var(--testo); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.nota-demo { margin-top: 14px; font-size: 0.92rem; color: var(--secondario); }

/* la tavola: la pagina del cantiere disegnata come una tavola tecnica */
.tavola { margin: 0; position: relative; background: var(--bianco); border: 2px solid var(--china); padding: 18px 18px 18px 64px; box-shadow: 10px 10px 0 rgba(29, 53, 87, 0.08); }
.tavola::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--griglia); pointer-events: none; }
.quota { position: absolute; left: 20px; top: 26px; bottom: 98px; width: 22px; }
.quota .linea { position: absolute; left: 10px; top: 0; bottom: 0; border-left: 1.5px solid var(--blu); }
.quota .linea::before, .quota .linea::after { content: ""; position: absolute; left: -6px; width: 11px; border-top: 1.5px solid var(--blu); }
.quota .linea::before { top: 0; } .quota .linea::after { bottom: 0; }
.quota .tacca { position: absolute; left: 4px; width: 13px; height: 13px; border-left: 1.5px solid var(--blu); transform: skewX(-45deg) rotate(0deg); }
.quota .etichetta { position: absolute; left: 50%; transform: translateX(-50%) rotate(-90deg); white-space: nowrap; font-size: 0.72rem; color: var(--blu); background: var(--bianco); padding: 0 6px; font-weight: 600; }
.quota .su { top: 46px; } .quota .giu { bottom: 40px; }
.sezioni { list-style: none; margin: 0; padding: 0; position: relative; }
.sezioni li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 9px 2px; border-bottom: 1px dashed var(--griglia); }
.sezioni li:last-child { border-bottom: 0; }
.sezioni .nome { color: var(--china); font-weight: 600; font-size: 0.98rem; }
.sezioni .cosa { color: var(--secondario); font-size: 0.82rem; text-align: right; }
.sezioni .stato { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 8px; vertical-align: 1px; }
.sezioni .stato.attesa { background: var(--giallo); }
.cartiglio { margin: 14px 0 0 -46px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1.5px solid var(--china); font-size: 0.78rem; }
.cartiglio div { padding: 6px 9px; border-left: 1px solid var(--china); line-height: 1.3; }
.cartiglio div:first-child { border-left: 0; }
.cartiglio small { display: block; color: var(--secondario); font-size: 0.68rem; }
.cartiglio strong { color: var(--china); font-weight: 650; }

@media (max-width: 920px) {
  .apertura .contenitore { grid-template-columns: 1fr; gap: 40px; }
  .apertura { padding: 40px 0 56px; }
}
@media (max-width: 480px) {
  .tavola { padding: 14px 12px 14px 48px; }
  .quota { left: 12px; }
  .sezioni .cosa { display: none; }
  .cartiglio { margin-left: -36px; grid-template-columns: 1fr 1fr; }
  .cartiglio div:last-child { display: none; }
}

/* blocchi */
.blocco { padding: 84px 0; }
.blocco.bianco { background: var(--bianco); border-top: 1px solid var(--griglia); border-bottom: 1px solid var(--griglia); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.08; font-weight: 750; font-stretch: 112%; letter-spacing: -0.025em; color: var(--china); margin: 0 0 16px; max-width: 22em; }
.introduzione { max-width: 40em; color: var(--testo); margin: 0 0 44px; font-size: 1.1rem; }
h3 { font-size: 1.2rem; line-height: 1.25; color: var(--china); margin: 0 0 8px; font-weight: 700; }

.percorso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--china); }
.percorso > div { padding: 22px 22px 8px 0; position: relative; }
.percorso > div::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--carta); border: 2px solid var(--china); }
.blocco.bianco .percorso > div::before { background: var(--bianco); }
.percorso p { margin: 0; color: var(--testo); }
.percorso .fase { color: var(--blu); font-weight: 650; font-size: 0.9rem; margin-bottom: 4px; display: block; }
@media (max-width: 860px) { .percorso { grid-template-columns: 1fr 1fr; row-gap: 26px; } }
@media (max-width: 520px) { .percorso { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--china); } .percorso > div { padding: 0 0 6px 24px; } .percorso > div::before { top: 4px; left: -8px; } }

.differenze { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; }
.differenze article { border-left: 4px solid var(--giallo); padding-left: 20px; }
.differenze p { margin: 0; }
@media (max-width: 760px) { .differenze { grid-template-columns: 1fr; gap: 32px; } }

/* prezzi */
.scelta { display: inline-flex; border: 2px solid var(--china); border-radius: 12px; padding: 4px; margin-bottom: 28px; background: var(--bianco); }
.scelta button { font: inherit; font-weight: 650; border: 0; background: transparent; color: var(--china); padding: 9px 20px; border-radius: 8px; cursor: pointer; }
.scelta button[aria-pressed="true"] { background: var(--china); color: #fff; }
.listino { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--china); background: var(--bianco); }
.piano { padding: 28px 26px 30px; border-left: 1px solid var(--griglia); display: flex; flex-direction: column; }
.piano:first-child { border-left: 0; }
.piano.consigliato { background: #fffbea; box-shadow: inset 0 6px 0 var(--giallo); }
.piano h3 { font-size: 1.45rem; font-stretch: 112%; margin-bottom: 4px; }
.piano .perchi { color: var(--secondario); margin: 0 0 22px; font-size: 0.98rem; min-height: 3.2em; }
.prezzo { font-size: 2.8rem; font-weight: 800; font-stretch: 110%; color: var(--china); line-height: 1; letter-spacing: -0.03em; }
.prezzo .unita { font-size: 1rem; font-weight: 500; color: var(--secondario); letter-spacing: 0; font-stretch: 100%; }
.prezzo-nota { font-size: 0.9rem; color: var(--secondario); margin: 8px 0 22px; min-height: 1.5em; }
.prezzo-nota .lancio { color: var(--verde); font-weight: 650; }
.piano ul { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
.piano li { padding: 7px 0 7px 26px; position: relative; border-top: 1px solid var(--griglia); font-size: 0.98rem; }
.piano li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 6px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.piano .bottone { width: 100%; }
.sotto-listino { margin-top: 20px; color: var(--secondario); font-size: 0.95rem; max-width: 52em; }
.sotto-listino p { margin: 4px 0; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .listino { grid-template-columns: 1fr; } .piano { border-left: 0; border-top: 1px solid var(--griglia); } .piano:first-child { border-top: 0; } .piano .perchi { min-height: 0; } }

/* demo */
.prova { background: var(--china); color: #e8eef5; }
.prova .contenitore { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.prova h2 { color: #fff; }
.prova p { margin: 0; max-width: 34em; }
.prova .bottone.pieno { background: var(--giallo); color: var(--china); }
.prova .bottone.pieno:hover { background: #ffc828; }
.prova .accanto { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.prova .accanto small { color: #b8c6d6; }
@media (max-width: 760px) { .prova .contenitore { grid-template-columns: 1fr; } }

/* domande */
.domande { max-width: 780px; }
details { border-top: 1px solid var(--griglia); padding: 4px 0; }
details:last-child { border-bottom: 1px solid var(--griglia); }
summary { cursor: pointer; padding: 16px 32px 16px 0; font-weight: 650; color: var(--china); list-style: none; position: relative; font-size: 1.08rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.5rem; font-weight: 400; color: var(--blu); }
details[open] summary::after { content: "–"; }
details p { margin: 0 0 18px; max-width: 42em; }

/* contatti e piede */
.contatti .contenitore { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 760px) { .contatti .contenitore { grid-template-columns: 1fr; } }
.piede { border-top: 1px solid var(--griglia); padding: 28px 0 40px; font-size: 0.88rem; color: var(--secondario); }
.piede .contenitore { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.piede a { color: var(--secondario); }

/* schermate */
.schermata { margin: 0; }
.schermata img { display: block; width: 100%; height: auto; border: 2px solid var(--china); background: var(--bianco); box-shadow: 10px 10px 0 rgba(29, 53, 87, 0.08); }
.schermata figcaption { margin-top: 12px; color: var(--secondario); font-size: 0.95rem; max-width: 44em; }
.schermate-doppie { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
@media (max-width: 860px) { .schermate-doppie { grid-template-columns: 1fr; } }

/* pagine di approfondimento */
.articolo { max-width: 760px; }
.articolo h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.04; font-weight: 800; font-stretch: 115%; letter-spacing: -0.03em; color: var(--china); margin: 0 0 18px; }
.articolo h2 { font-size: 1.6rem; margin-top: 44px; }
.articolo p, .articolo li { max-width: 40em; }
.articolo ul { padding-left: 1.2em; }
.articolo li { margin: 6px 0; }
.articolo table { border-collapse: collapse; width: 100%; margin: 12px 0 8px; font-size: 0.98rem; background: var(--bianco); }
.articolo th, .articolo td { text-align: left; padding: 9px 12px; border: 1px solid var(--griglia); vertical-align: top; }
.articolo th { color: var(--china); background: #eef3f7; }
.briciole { font-size: 0.9rem; color: var(--secondario); margin-bottom: 22px; }
.briciole a { color: var(--secondario); }
.altre { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 8px; }