/* PROVA Officina Sestante · stili in più del sito (P1-P4).
   Si appoggia a stile.css (non toccato): solo variabili, niente colori nuovi. */

html { scroll-padding-top: 88px; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ---------- Menu: bottone grande al telefono e pannello ---------- */
.menu .contenitore { position: relative; }
.menu-apri {
  width: auto; gap: var(--s2); padding: 0 var(--s4);
  border: 2px solid var(--grafite);
  font-family: var(--font-titoli); font-weight: 700; font-size: 1.0625rem;
}
.menu-apri[aria-expanded="true"] { background: var(--grafite); color: var(--testo-su-scuro); }
.menu-apri .icona-chiudi { display: none; }
.menu-apri[aria-expanded="true"] .icona-chiudi { display: block; }
.menu-apri[aria-expanded="true"] .icona-apri { display: none; }
.menu-tel { display: none; }
.menu-tel .finto { margin-left: var(--s1); }
@media (min-width: 960px) {
  .menu nav { margin-left: auto; }
  .menu-tel { display: inline-flex; color: var(--testo); text-decoration: none; }
  .menu-tel .icona { color: var(--petrolio); }
}

.menu-pannello { border-top: 1px solid var(--linea); background: var(--superficie); }
.menu-pannello[hidden] { display: none; }
.menu .menu-pannello ul { display: block; min-height: 0; list-style: none; margin-inline: auto; padding: var(--s2) var(--margine) var(--s4); }
.menu-pannello li + li { border-top: 1px solid var(--linea); }
.menu-pannello a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 60px; color: var(--testo); text-decoration: none;
  font-family: var(--font-titoli); font-weight: 700; font-size: 1.25rem;
}
.menu-pannello a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--giallo); padding-left: var(--s4); }
.menu-pannello a .icona { color: var(--petrolio); }
.menu-pannello .menu-pannello-tel { font-family: var(--font-testo); font-weight: var(--peso-forte); font-size: var(--t-testo); justify-content: flex-start; }
@media (min-width: 960px) { .menu-pannello { display: none !important; } }

/* ---------- Apertura (P1) ---------- */
.apertura { padding-block: var(--s6) var(--s7); }
.apertura .contenitore { display: grid; gap: var(--s6); }
.apertura h1 { margin-bottom: var(--s4); }
.apertura-frase { font-size: var(--t-testo); color: var(--testo-2); max-width: 46ch; }
.apertura-frase strong { color: var(--testo); }
.apertura-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }
.apertura-fatti { display: grid; gap: var(--s3); margin-top: var(--s5); }
.apertura-fatti .oggi { font-weight: var(--peso-forte); }
.illustrazione { width: 100%; height: auto; }
.apertura-disegno { position: relative; }
.apertura-disegno figcaption { margin-top: var(--s2); font-size: var(--t-piccolo); color: var(--testo-2); }
@media (max-width: 899px) {
  .apertura-azioni .bottone { flex: 1 1 auto; }
}
@media (min-width: 900px) {
  .apertura { padding-block: var(--s8) var(--s8); }
  .apertura .contenitore { grid-template-columns: 1.05fr 1fr; align-items: center; gap: var(--s7); }
}

/* ---------- Titoli di sezione ---------- */
.sezione-testa { max-width: 40rem; margin-bottom: var(--s6); }
.sezione-testa h2 { margin-top: 0; }
.sezione-testa p:last-child { margin-bottom: 0; }

/* ---------- Listino (P1) ---------- */
.lavori { padding-block: var(--s8); border-top: 1px solid var(--linea); }
.lavori .contenitore { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .lavori .contenitore { grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
  .lavori .sezione-testa { position: sticky; top: 100px; }
}
.listino {
  list-style: none; margin: 0; padding: 0;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-medio); box-shadow: var(--ombra); overflow: hidden;
}
.listino li + li { border-top: 1px solid var(--linea); }
.listino a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3) var(--s4);
  min-height: 76px; padding: var(--s3) var(--s4);
  color: var(--testo); text-decoration: none;
  transition: background-color .15s;
}
.listino a:hover { background: var(--giallo-tenue); }
.listino a:hover .icona-chevron { transform: translateX(3px); }
.listino .icona-grande { color: var(--petrolio); }
.listino-nome { display: block; font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; }
.listino-nota { display: block; font-size: var(--t-piccolo); color: var(--testo-2); line-height: 1.35; margin-top: 2px; }
.listino-prezzo {
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-titoli); font-weight: 800; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.listino-prezzo small { font-family: var(--font-testo); font-weight: 400; font-size: var(--t-piccolo); color: var(--testo-2); }
.icona-chevron { color: var(--testo-2); transition: transform .2s var(--curva); }
@media (max-width: 479px) {
  .listino a { gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
  .listino-nome { font-size: 1.125rem; }
  .listino-prezzo { flex-direction: column; align-items: flex-end; gap: 0; font-size: 1.25rem; line-height: 1.1; }
  .listino-prezzo .icona-chevron { display: none; }
}
@media (min-width: 768px) {
  .listino a { padding: var(--s4) var(--s5); }
  .listino-prezzo { font-size: 1.5rem; }
}
.nota-prezzi { margin-top: var(--s4); font-size: var(--t-piccolo); color: var(--testo-2); }

/* ---------- Perché fidarsi (P1, fascia scura) ---------- */
.fidarsi { padding-block: var(--s8); }
.fidarsi-promessa { display: grid; gap: var(--s5); padding-bottom: var(--s7); border-bottom: 1px solid var(--grafite-2); }
.fidarsi-promessa h2 { margin: 0; max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.05; }
.fidarsi-promessa h2 .su-giallo { background: var(--giallo); color: var(--grafite); box-shadow: none; padding: 0 .12em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fidarsi-promessa p { color: var(--testo-2-su-scuro); margin: 0; max-width: 52ch; }
@media (min-width: 900px) {
  .fidarsi-promessa { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s7); }
}
.fidarsi-punti { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fidarsi-punti li { display: grid; align-content: start; grid-template-columns: auto 1fr; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--grafite-2); }
.fidarsi-punti .icona { color: var(--giallo); width: 28px; height: 28px; margin-top: 2px; }
.fidarsi-punti h3 { margin: 0 0 var(--s1); }
.fidarsi-punti p { margin: 0; color: var(--testo-2-su-scuro); }
@media (min-width: 900px) {
  .fidarsi-punti { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .fidarsi-punti li { grid-template-columns: 1fr; border-bottom: 0; padding-block: var(--s6) 0; }
}

/* ---------- Tre passi (P1) ---------- */
.passi-sezione { padding-block: var(--s8); }
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); position: relative; }
.passi li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); }
.passi-num {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--giallo); color: var(--grafite); border-radius: var(--r-piccolo);
  font-family: var(--font-titoli); font-weight: 800; font-size: 1.75rem; line-height: 1;
  position: relative; z-index: 1;
}
.passi h3 { margin: var(--s2) 0 var(--s1); }
.passi p { margin: 0; color: var(--testo-2); }
.passi li:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: calc(-1 * var(--s5));
  border-left: 2px dashed var(--bordo-forte);
}
@media (min-width: 900px) {
  .passi { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .passi li { grid-template-columns: 1fr; gap: var(--s4); }
  .passi li:not(:last-child)::before {
    left: 72px; right: calc(-1 * var(--s6)); top: 27px; bottom: auto;
    border-left: 0; border-top: 2px dashed var(--bordo-forte);
  }
  .passi h3 { margin-top: 0; }
}

/* ---------- Orari e dove siamo (P1) ---------- */
.dove { padding-block: var(--s8); border-top: 1px solid var(--linea); }
.dove .contenitore { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .dove .contenitore { grid-template-columns: 5fr 6fr; gap: var(--s8); align-items: start; } }
.dove h2 { margin-top: 0; }
.orari { margin: 0 0 var(--s5); padding: 0; display: grid; border-top: 2px solid var(--grafite); max-width: 30rem; }
.orari div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.orari dt { font-weight: var(--peso-forte); }
.orari dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.orari .oggi-riga { background: var(--giallo-tenue); margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); }
.stato-oggi { display: flex; align-items: center; gap: var(--s2); font-weight: var(--peso-forte); margin-bottom: var(--s4); }
.stato-oggi::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bordo-forte); flex: none; }
.stato-oggi[data-aperto="si"]::before { background: var(--successo); }
.recapiti { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.recapiti a { color: var(--testo); }

.mappa { margin: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--ombra); overflow: hidden; }
.mappa svg { width: 100%; height: auto; }
.mappa figcaption { padding: var(--s3) var(--s4); border-top: 1px solid var(--linea); font-size: var(--t-piccolo); color: var(--testo-2); }
@media (min-width: 900px) { .mappa { max-width: 520px; justify-self: end; width: 100%; } }

/* ---------- Testata delle pagine interne ---------- */
.testata { padding-block: var(--s6) var(--s6); border-bottom: 1px solid var(--linea); }
.testata h1 { max-width: 18ch; }
.testata p { color: var(--testo-2); max-width: 54ch; }
.testata-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 900px) { .testata { padding-block: var(--s8) var(--s7); } }

.salti { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: var(--s5) 0 0; padding: 0; }
.salti a {
  display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0 var(--s4);
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--r-piccolo);
  color: var(--testo); text-decoration: none; font-weight: var(--peso-forte);
}
.salti a:hover { border-color: var(--grafite); background: var(--giallo-tenue); }

/* ---------- Schede dei lavori (P2) ---------- */
.elenco-lavori { padding-block: var(--s7) var(--s8); display: grid; gap: var(--s5); }
.lavoro {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-medio);
  box-shadow: var(--ombra); padding: var(--s5); display: grid; gap: var(--s5);
  scroll-margin-top: 96px;
}
.lavoro-testa { display: grid; gap: var(--s3); align-content: start; }
.lavoro-nome { display: flex; align-items: center; gap: var(--s3); margin: 0; font-size: var(--t-h3); }
.lavoro-nome .icona { color: var(--petrolio); }
@media (min-width: 768px) { .lavoro-nome { font-size: 1.75rem; } }
.lavoro-prezzo { margin: 0; }
.lavoro-prezzo .cifra {
  display: block; font-family: var(--font-titoli); font-weight: 800; font-size: 2.5rem; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.lavoro-prezzo .cifra small { font-size: .5em; letter-spacing: 0; }
.lavoro-prezzo .cifra .da { font-size: .45em; font-weight: 700; letter-spacing: 0; margin-right: .2em; }
.lavoro-prezzo .iva { display: block; margin-top: var(--s2); font-weight: var(--peso-forte); font-size: var(--t-piccolo); }
.lavoro-prezzo .iva span { font-weight: 400; color: var(--testo-2); }
.lavoro h3 { font-size: var(--t-testo); font-family: var(--font-testo); font-weight: var(--peso-forte); letter-spacing: 0; margin: 0 0 var(--s2); }
.compreso { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.compreso li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); }
.compreso .icona { width: 20px; height: 20px; color: var(--successo); margin-top: 3px; }
.lavoro-durata { display: grid; gap: var(--s4); align-content: start; }
.durata { display: flex; gap: var(--s2); align-items: flex-start; margin: 0; }
.durata .icona { color: var(--petrolio); }
.durata strong { display: block; }
.lavoro-nota { margin: 0; font-size: var(--t-piccolo); color: var(--testo-2); }
.lavoro .bottone { justify-self: start; }
@media (max-width: 767px) { .lavoro .bottone { width: 100%; } }
@media (min-width: 900px) {
  .lavoro { grid-template-columns: 4fr 5fr 3.4fr; gap: var(--s6); padding: var(--s6); }
  .lavoro-durata { border-left: 1px solid var(--linea); padding-left: var(--s6); }
}

.avviso-prezzi {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: var(--giallo-tenue); border-radius: var(--r-medio); padding: var(--s4) var(--s5); margin: 0;
  max-width: 46rem;
}
.avviso-prezzi .icona { color: var(--grafite); margin-top: 2px; }

/* ---------- Contatti (P3) ---------- */
.contatti .contenitore { display: grid; gap: var(--s6); padding-block: var(--s6) var(--s8); }
.contatti .contenitore > *, .lavori .contenitore > *, .dove .contenitore > *, .apertura .contenitore > * { min-width: 0; }
@media (min-width: 960px) {
  .contatti .contenitore { grid-template-columns: 7fr 4fr; gap: var(--s8); align-items: start; padding-block: var(--s7) var(--s8); }
  .contatti-lato { position: sticky; top: 100px; }
}
.contatti-intro h1 { margin-bottom: var(--s3); }
.contatti-intro p { color: var(--testo-2); }
.chiama-subito { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s4) 0 var(--s2); }
.chiama-subito .finto { margin: 0; }
@media (max-width: 599px) { .chiama-subito .bottone { width: 100%; } }

.modulo {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-medio);
  box-shadow: var(--ombra); padding: var(--s5); margin-top: var(--s5);
}
@media (min-width: 768px) { .modulo { padding: var(--s6); } }
.modulo h2 { margin-top: 0; font-size: 1.75rem; }
.modulo .campo { max-width: none; }
.due-campi { display: grid; gap: 0 var(--s5); }
@media (min-width: 640px) { .due-campi { grid-template-columns: 1fr 1fr; } }
.facoltativo { font-weight: 400; color: var(--testo-2); }

.gettoni { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0; }
.gettoni legend { font-weight: var(--peso-forte); padding: 0; margin-bottom: var(--s1); }
.gettoni .aiuto { font-size: var(--t-piccolo); color: var(--testo-2); margin: 0 0 var(--s3); }
.gettoni-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 640px) { .gettoni-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gettone { position: relative; display: block; }
.gettone input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gettone > span {
  display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: var(--s2) var(--s3);
  background: var(--superficie); border: 2px solid var(--linea); border-radius: var(--r-piccolo);
  font-weight: var(--peso-forte); line-height: 1.2; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.gettone > span::before {
  content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--bordo-forte); border-radius: 4px; background: var(--superficie);
}
.gettone input[type="radio"] + span::before { border-radius: 50%; }
.gettone > span:hover { border-color: var(--bordo-forte); }
.gettone input:checked + span { border-color: var(--petrolio); background: var(--petrolio-tenue); }
.gettone input:checked + span::before {
  border-color: var(--petrolio); background: var(--petrolio);
  box-shadow: inset 0 0 0 3px var(--petrolio-tenue);
}
.gettone input:focus-visible + span { outline: 3px solid var(--grafite); outline-offset: 2px; }
.gettone-testo { display: block; }
.gettone small { display: block; font-weight: 400; color: var(--testo-2); font-size: var(--t-piccolo); }
.gettoni.ha-errore .gettone > span { border-color: var(--avviso); }
.gettoni .errore { margin-top: var(--s3); }

.consenso { margin: var(--s2) 0 var(--s5); }
.consenso.ha-errore .spunta input { outline: 2px solid var(--avviso); outline-offset: 2px; }
.consenso .errore { margin-top: var(--s2); }
.consenso .spunta span { padding-top: 1px; }

.riepilogo-errori { margin: 0 0 var(--s5); }
.riepilogo-errori[hidden], .errore[hidden] { display: none; }
.modulo-invia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
@media (max-width: 599px) { .modulo-invia .bottone { width: 100%; } }
.modulo-invia p { margin: 0; font-size: var(--t-piccolo); color: var(--testo-2); }

/* campo trappola per i bot: fuori schermo, non si vede e non si tocca */
.trappola { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.esito { margin-top: var(--s5); }
.esito[hidden] { display: none; }
.esito .esito-ok { margin: 0 0 var(--s5); font-size: var(--t-testo); }
.esito h2 { margin-top: 0; font-size: 1.75rem; }
.esito h2:focus { outline: none; }
.riepilogo { margin: 0 0 var(--s5); padding: 0; display: grid; border-top: 1px solid var(--linea); }
.riepilogo div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.riepilogo dt { color: var(--testo-2); }
.riepilogo dd { margin: 0; font-weight: var(--peso-forte); overflow-wrap: anywhere; }
@media (max-width: 479px) { .riepilogo div { grid-template-columns: 1fr; gap: 0; } }

.scheda-contatti h2 { margin-top: 0; font-size: 1.5rem; }
.scheda-contatti .recapiti { margin-bottom: var(--s5); }
.scheda-contatti .orari { max-width: none; }

/* ---------- Privacy (P4) ---------- */
.testo-legale { padding-block: var(--s6) var(--s8); }
.testo-legale h2 { font-size: 1.5rem; margin-top: var(--s6); }
.da-cliente {
  display: block; padding: var(--s4) var(--s5); margin: 0 0 var(--s4);
  background: var(--superficie); border: 2px dashed var(--bordo-forte); border-radius: var(--r-medio);
  font-weight: var(--peso-forte); max-width: 40rem;
}
.da-cliente span { display: block; font-weight: 400; color: var(--testo-2); margin-top: var(--s1); }

/* ---------- Piè di pagina ---------- */
.piede { padding-block: var(--s7) var(--s5); margin-top: auto; }
.piede .contenitore { display: grid; gap: var(--s6); }
@media (min-width: 768px) { .piede-colonne { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s6); } }
.piede-colonne { display: grid; gap: var(--s5); }
.piede .marchio { color: var(--testo-su-scuro); }
.piede .marchio small { color: var(--testo-2-su-scuro); }
.piede h2 { font-size: var(--t-testo); font-family: var(--font-testo); font-weight: var(--peso-forte); letter-spacing: 0; margin: 0 0 var(--s2); color: var(--testo-su-scuro); }
.piede p { color: var(--testo-2-su-scuro); margin: 0 0 var(--s2); }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede-link a { display: inline-flex; align-items: center; min-height: var(--tocco); color: var(--testo-su-scuro); text-decoration-color: var(--giallo); }
.piede-fondo {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--grafite-2);
  color: var(--testo-2-su-scuro); font-size: var(--t-piccolo);
}
.piede-fondo p { margin: 0; font-size: var(--t-piccolo); }
.segno-pagina {
  display: inline-grid; place-items: center; min-width: 2.5rem; padding: 0 var(--s2);
  border: 1px solid var(--testo-2-su-scuro); border-radius: var(--r-piccolo);
  font-family: var(--font-titoli); font-weight: 700; color: var(--testo-su-scuro);
}

/* ---------- Barra in basso al telefono (compare dopo l'apertura) ---------- */
.barra-azioni { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--curva), visibility 0s .3s; }
.barra-azioni.vista { transform: none; visibility: visible; transition: transform .3s var(--curva); }
@media (max-width: 959px) { .con-barra .piede { padding-bottom: calc(var(--s5) + 80px); } }

/* link da toccare nei recapiti: area piena 44 px anche se sono in riga */
.recapiti a, .piede-link a { display: inline-flex; align-items: center; min-height: 44px; }
.recapiti .riga-icona { align-items: center; }