/* =====================================================================
   IMPULSO TERMOIDRAULICA - stile del sito
   Colori, grandezze e spazi si cambiano QUI, in un posto solo.
   ===================================================================== */
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap;
  src: url("/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap;
  src: url("/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  /* colori del logo */
  --petrolio: #0b2a33;
  --petrolio-2: #123b47;
  --acqua: #1f8fbf;
  --acqua-chiara: #5fc3ea;
  --fiamma: #f26b1d;
  --elettrico: #f5b700;
  --testo: #1d2b30;
  --testo-tenue: #5b6b70;
  --carta: #ffffff;
  --carta-2: #f3f7f8;
  --wa: #25d366;

  /* grandezze: si adattano allo schermo da sole */
  --titolo-grande: clamp(2rem, 5.5vw, 3.6rem);
  --titolo: clamp(1.6rem, 3.5vw, 2.4rem);
  --spazio-sezione: clamp(3rem, 8vw, 6rem);
  --larghezza: 1140px;
  --raggio: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem;
  line-height: 1.6; color: var(--testo); background: var(--carta); }
h1, h2, h3 { font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; line-height: 1.15; margin: 0 0 .6em; }
h3 { font-weight: 600; font-size: 1.2rem; }
img { max-width: 100%; height: auto; }
a { color: var(--acqua); }
.contenitore { width: min(100% - 2rem, var(--larghezza)); margin-inline: auto; }

/* ---------- segnaposto dati mancanti ---------- */
.manca { background: #fff3b0; color: #6b5200; border: 1px dashed #d4a800; border-radius: 6px;
  padding: .1em .5em; font-size: .9em; font-weight: 600; }

/* ---------- bottoni ---------- */
.bottone { display: inline-flex; align-items: center; gap: .4em; padding: .8em 1.3em; border-radius: 999px;
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.bottone:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 0 0 / .18); }
.bottone--primario { background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); color: var(--petrolio); }
.bottone--wa { background: var(--wa); color: #fff; }
.bottone--chiaro { background: #fff; color: var(--petrolio); }
.bottone--chiama { background: var(--fiamma); color: #fff; padding: .55em 1.1em; }
.bottone--spento { opacity: .55; cursor: not-allowed; }
.bottone--spento:hover { transform: none; box-shadow: none; }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 10; background: rgb(11 42 51 / .96); backdrop-filter: blur(6px); }
.testata__riga { display: flex; align-items: center; gap: 1.5rem; padding-block: .6rem; }
.testata__logo img { display: block; width: clamp(150px, 22vw, 220px); }
.menu { display: flex; gap: 1.4rem; margin-left: auto; }
.menu a { color: #d9e7ea; text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--elettrico); }
@media (max-width: 820px) { .menu { display: none; } .bottone--chiama { margin-left: auto; } }

/* ---------- apertura ---------- */
.apertura { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at 80% 20%, var(--petrolio-2), var(--petrolio) 60%);
  padding-block: clamp(4rem, 12vw, 8rem); }
.apertura__impulso { position: absolute; inset: auto 0 8% 0; width: 100%; height: 30%; opacity: .35; }
.apertura__testo { position: relative; max-width: 760px; margin-left: max(1rem, (100% - var(--larghezza)) / 2); }
.occhiello { color: var(--acqua-chiara); letter-spacing: .25em; text-transform: uppercase; font-weight: 700; font-size: .85rem; }
.apertura h1 { font-size: var(--titolo-grande); }
.evidenzia { background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apertura__sotto { font-size: 1.15rem; color: #c8d8dc; max-width: 600px; }
.apertura__bottoni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- sezioni ---------- */
.sezione { padding-block: var(--spazio-sezione); }
.sezione h2 { font-size: var(--titolo); }
.sezione__intro { color: var(--testo-tenue); max-width: 620px; margin-top: -.3rem; }
.sezione--scura { background: var(--petrolio); color: #e8f3f2; }
.sezione--scura .sezione__intro { color: #b9c7cb; }
.sezione--chiara { background: var(--carta-2); }

.griglia-schede { display: grid; gap: 1.2rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.scheda { background: #fff; border: 1px solid #e3eaec; border-radius: var(--raggio); padding: 1.5rem; }
.scheda__icona { width: 48px; height: 48px; margin-bottom: .6rem; }
.scheda ul { margin: 0; padding-left: 1.1rem; color: var(--testo-tenue); }

.griglia-punti { display: grid; gap: 1.5rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.punto { border-left: 4px solid var(--elettrico); padding-left: 1rem; display: grid; gap: .3rem; }
.punto strong { font-family: "Montserrat", sans-serif; font-size: 1.1rem; }
.punto span { color: #b9c7cb; }

.griglia-lavori { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lavoro { aspect-ratio: 4 / 3; border-radius: var(--raggio); overflow: hidden; background: var(--carta-2); }
.lavoro--vuoto { display: grid; place-items: center; border: 2px dashed #cfdade; }

.zona { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.zona__sede { font-weight: 600; }
.comuni { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.comuni li { background: #fff; border: 1px solid #dbe5e8; border-radius: 999px; padding: .25em .9em; }

.contatti { text-align: center; }
.contatti .sezione__intro { margin-inline: auto; }
.contatti__bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }

/* ---------- piede ---------- */
.piede { background: #071d23; color: #b9c7cb; padding-top: 3rem; font-size: .95rem; }
.piede h3 { color: #fff; font-size: 1rem; }
.piede a { color: var(--acqua-chiara); }
.piede__griglia { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 2rem; }
.piede__legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  border-top: 1px solid #1d3c45; padding-block: 1.2rem; font-size: .85rem; }

/* ---------- WhatsApp fisso ---------- */
.wa-fisso { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 20; width: 58px; height: 58px;
  border-radius: 50%; background: var(--wa); display: grid; place-items: center; box-shadow: 0 6px 20px rgb(0 0 0 / .3); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bottone { transition: none; } }

/* ---------- pagine di testo (privacy, cookie, ...) ---------- */
.pagina-testo { max-width: 760px; }
.pagina-testo h1 { font-size: var(--titolo); margin-bottom: .2em; }
.pagina-testo h2 { font-size: 1.35rem; margin-top: 2rem; }
.pagina-testo h3 { margin-top: 1.4rem; }
.pagina-testo li { margin-bottom: .4rem; }
.aggiornata { color: var(--testo-tenue); font-size: .9rem; margin-top: 0; }

/* ---------- modulo richiesta preventivo ---------- */
.modulo-pagina { max-width: 820px; }
.modulo fieldset { border: 1px solid #e3eaec; border-radius: var(--raggio); padding: 1.2rem 1.4rem 1.4rem; margin: 0 0 1.4rem; }
.modulo legend { font-family: "Montserrat", sans-serif; font-weight: 800; padding: 0 .4rem; }
.modulo label { display: grid; gap: .35rem; font-weight: 600; margin-bottom: 1rem; }
.modulo input:not([type=checkbox]), .modulo select, .modulo textarea {
  font: inherit; font-weight: 400; padding: .7em .8em; border: 1px solid #c9d6da; border-radius: 10px; background: #fff; width: 100%; }
.modulo input:focus, .modulo select:focus, .modulo textarea:focus { outline: 3px solid rgb(31 143 191 / .3); border-color: var(--acqua); }
.campi-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.facolt { font-weight: 400; color: var(--testo-tenue); font-size: .9em; }
.nota { color: var(--testo-tenue); font-size: .9rem; margin-top: -.4rem; }
.spunta { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.spunta input { margin-top: .35em; width: 1.1em; height: 1.1em; accent-color: var(--acqua); }
.spunta--privacy { margin: 0 0 1.4rem; }
.solo-account { display: none; }
#vuole-account:checked ~ .solo-account, fieldset:has(#vuole-account:checked) .solo-account { display: grid; }
.trappola { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.esito { border-radius: var(--raggio); padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; }
.esito--ok { background: #e7f7ee; border: 1px solid #9fd8b6; }
.esito--errore { background: #fdecec; border: 1px solid #f0b0b0; }
.esito ul { margin: .4rem 0 0; }
.campi-3 { display: grid; gap: 0 1rem; grid-template-columns: 8rem 1fr 6rem; }
@media (max-width: 520px) { .campi-3 { grid-template-columns: 1fr 1fr; } }
.maiuscolo { text-transform: uppercase; }
fieldset:has(#stesso:checked) .altro-indirizzo { display: none; }

/* ---------- accesso e area clienti ---------- */
.scatola-stretta { max-width: 460px; }
.menu__accesso { border: 1px solid #3c6370; border-radius: 999px; padding: .2em .9em; }
.bottone--bordo { border: 1px solid #c9d6da; }
.area-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.area-azioni { display: flex; gap: .6rem; align-items: center; }
.area-azioni form { margin: 0; }
.lista-richieste { display: grid; gap: 1rem; }
.richiesta { border: 1px solid #e3eaec; border-radius: var(--raggio); padding: 1rem 1.3rem; }
.richiesta__testa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.richiesta__info { color: var(--testo-tenue); font-size: .92rem; margin: .3rem 0 .5rem; }
.stato { font-size: .85rem; font-weight: 700; padding: .2em .8em; border-radius: 999px; background: #e8eef0; color: var(--petrolio); }
.stato--nuova { background: #e3f2fb; color: #0f5f86; }
.stato--preventivo_inviato { background: #fff3d1; color: #7a5600; }
.stato--accettato, .stato--in_corso { background: #ffe7d6; color: #8a3a06; }
.stato--completato { background: #e7f7ee; color: #1e6b3d; }
.stato--annullata { background: #f1f1f1; color: #777; }

/* ---------- gestione e preventivi ---------- */
.sezione--gestione { padding-top: 2rem; }
.sezione--gestione h2 { font-size: 1.4rem; }
.tabella-scorre { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabella th { text-align: left; background: var(--carta-2); padding: .6em .7em; font-weight: 700; white-space: nowrap; }
.tabella td { padding: .55em .7em; border-bottom: 1px solid #e6edef; vertical-align: middle; }
.tabella .num { text-align: right; white-space: nowrap; }
.riga-link { cursor: pointer; } .riga-link:hover { background: #f5fafb; }
.riga-urgente td:first-child { border-left: 4px solid var(--fiamma); }
.azioni-riga form { margin: 0; }
.bottone--piccolo { padding: .4em .9em; font-size: .88rem; background: var(--carta-2); color: var(--petrolio); border: 1px solid #cfdade; }
.bottone--piccolo.bottone--primario { background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); border: 0; }
.bottone--elimina { background: none; border: 1px solid #e5a3a3; color: #a33; margin-top: 1rem; }
.zona-chip { display: inline-block; font-size: .78rem; font-weight: 700; background: #e3f2fb; color: #0f5f86; border-radius: 999px; padding: .1em .6em; }
.zona-chip:empty { display: none; }
.stato--prev-bozza { background: #eef1f2; } .stato--prev-inviato { background: #fff3d1; color: #7a5600; }
.stato--prev-accettato { background: #e7f7ee; color: #1e6b3d; } .stato--prev-rifiutato { background: #f1f1f1; color: #888; }
.stato-select { font: inherit; padding: .55em .8em; border-radius: 10px; border: 1px solid #c9d6da; }
.griglia-prev { display: grid; gap: 0 1.4rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.modulo--prev fieldset { background: #fff; }
.tabella-voci input, .tabella-voci select { font: inherit; padding: .4em .5em !important; border-radius: 8px !important; }
.tabella-voci td { padding: .35em .4em; }
.tabella-voci td:nth-child(2) { min-width: 260px; }
.tabella-voci .corto { width: 6.5em !important; text-align: right; }
.tabella-voci .cortissimo { width: 4.2em !important; }
.tabella-voci .codice { color: var(--testo-tenue); }
.voce--materiale td:first-child { border-left: 4px solid var(--acqua); }
.voce--manodopera td:first-child, .voce--uscita td:first-child { border-left: 4px solid var(--fiamma); }
.voce--trasferta td:first-child { border-left: 4px solid var(--elettrico); }
.solo-mio { background: #fffbea; }
.elimina-voce { border: 0; background: none; color: #a33; font-size: 1.1rem; cursor: pointer; }
.aggiungi { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-top: 1rem; }
.cerca-catalogo { position: relative; flex: 1 1 340px; }
.cerca-catalogo input { width: 100%; font: inherit; padding: .65em .9em; border: 2px solid var(--acqua); border-radius: 10px; }
.risultati { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #cfdade;
  border-radius: 10px; box-shadow: 0 10px 30px rgb(0 0 0 / .15); max-height: 360px; overflow-y: auto; }
.risultati button { display: flex; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-bottom: 1px solid #eef2f3; padding: .55em .8em; cursor: pointer; }
.risultati button:hover, .risultati button:focus { background: #eef7fc; }
.risultati small { color: var(--testo-tenue); }
.risultati .nota { padding: .7em; margin: 0; }
.riepilogo { border: 1px solid #e3eaec; border-radius: var(--raggio); padding: 1rem 1.3rem; margin-bottom: 1rem; background: #fff; }
.riepilogo div { display: flex; justify-content: space-between; padding: .25em 0; }
.riepilogo__totale { border-top: 2px solid var(--petrolio); margin-top: .4rem; padding-top: .6rem !important; font-family: "Montserrat", sans-serif; font-size: 1.35rem; }
.riepilogo--mio { background: #fffbea; border-color: #f0dc8a; }

.modulo fieldset { min-width: 0; }   /* senza questo le tabelle larghe allargano tutta la pagina sul telefono */
.area-azioni { flex-wrap: wrap; }
.area-azioni .bottone { white-space: nowrap; }
@media (max-width: 520px) { .griglia-prev { grid-template-columns: 1fr; } }

/* ricarico sotto il minimo */
input.sotto-minimo { border-color: #d33 !important; background: #fdecec !important; color: #a00; }
.riepilogo__costo { border-top: 1px dashed #d9c46a; margin-top: .3rem; padding-top: .5rem !important; font-weight: 700; }
.riepilogo__resta { font-weight: 800; font-size: 1.15rem; color: #1b6b3a; border-bottom: 1px dashed #d9c46a; padding-bottom: .5rem !important; margin-bottom: .3rem; }

/* ---------- chat con Elisa ---------- */
#elisa-chat { position: fixed; right: 1.2rem; bottom: 5.6rem; z-index: 21; }
.elisa-apri { display: flex; align-items: center; gap: .5rem; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: .75rem 1.1rem; border-radius: 999px; color: #fff; background: var(--petrolio); box-shadow: 0 6px 20px rgb(0 0 0 / .3); }
.elisa-apri__punto { width: .65rem; height: .65rem; border-radius: 50%; background: var(--elettrico); box-shadow: 0 0 0 3px rgb(245 183 0 / .3); }
.elisa-pannello { position: fixed; right: 1.2rem; bottom: 1.2rem; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100dvh - 2.4rem));
  display: flex; flex-direction: column; background: var(--carta); border-radius: var(--raggio); box-shadow: 0 12px 40px rgb(0 0 0 / .35); overflow: hidden; }
.elisa-pannello[hidden] { display: none; }
.elisa-testa { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; color: #fff;
  background: linear-gradient(90deg, var(--petrolio), var(--petrolio-2)); border-bottom: 3px solid var(--fiamma); }
.elisa-testa small { display: block; font-size: .78rem; opacity: .8; }
.elisa-chiudi { background: none; border: 0; color: #fff; font-size: 1.2rem; cursor: pointer; padding: .3rem .5rem; }
.elisa-messaggi { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--carta-2); }
.elisa-msg { max-width: 85%; padding: .6rem .85rem; border-radius: 14px; white-space: pre-line; line-height: 1.45; font-size: .95rem; overflow-wrap: anywhere; }
.elisa-msg--elisa { align-self: flex-start; background: #fff; border: 1px solid #dde7ea; border-bottom-left-radius: 4px; }
.elisa-msg--cliente { align-self: flex-end; background: var(--acqua); color: #fff; border-bottom-right-radius: 4px; }
.elisa-msg--urgenza { background: #fff3f0; border: 2px solid #d33; color: #5a0d00; max-width: 100%; }
.elisa-msg--attesa { color: var(--testo-tenue); font-style: italic; }
.elisa-azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; }
.elisa-azioni a { text-decoration: none; font-weight: 700; font-size: .9rem; padding: .45rem .8rem; border-radius: 999px; background: var(--petrolio); color: #fff; }
.elisa-azioni a.wa { background: var(--wa); }
.elisa-azioni a.paga { background: #ffc439; color: #111; }   /* pagamento PayPal (chiamata notturna) */
.elisa-scrivi { display: flex; gap: .4rem; padding: .6rem; border-top: 1px solid #e3eaec; }
.elisa-scrivi input { flex: 1; min-width: 0; font: inherit; padding: .6rem .8rem; border: 1px solid #cfdcdf; border-radius: 999px; }
.elisa-scrivi button { border: 0; border-radius: 50%; width: 2.6rem; height: 2.6rem; cursor: pointer; font-size: 1.1rem;
  background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); color: var(--petrolio); }
.elisa-nota { margin: 0; padding: 0 .8rem .6rem; font-size: .72rem; color: var(--testo-tenue); line-height: 1.35; }
.elisa-modi { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .5rem; background: var(--carta); border-bottom: 1px solid #e3eaec; }
.elisa-modi button { font: inherit; font-size: .85rem; font-weight: 700; padding: .45rem .4rem; border-radius: 10px; cursor: pointer;
  border: 1px solid #cfdcdf; background: #fff; color: var(--testo); line-height: 1.2; }
.elisa-modi button small { display: block; font-weight: 400; font-size: .72rem; color: var(--testo-tenue); }
.elisa-modi button[aria-pressed="true"] { background: var(--petrolio); color: #fff; border-color: var(--petrolio); }
.elisa-modi button[aria-pressed="true"] small { color: #cfe3e8; }
.elisa-msg--daniele { align-self: flex-start; background: #fff7e6; border: 1px solid #f5d28a; border-bottom-left-radius: 4px; }
.elisa-msg--daniele strong { color: var(--fiamma); font-size: .8rem; }
.elisa-inviato { display: block; font-size: .72rem; opacity: .85; margin-top: .2rem; text-align: right; }
.elisa-apri--nuovo .elisa-apri__punto { background: #e23b2e; box-shadow: 0 0 0 4px rgb(226 59 46 / .35); }
.elisa-scelte { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-end; justify-content: flex-end; }
.elisa-scelte button, .elisa-azioni button { font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; border-radius: 999px; padding: .45rem .85rem; }
.elisa-scelte button { border: 2px solid var(--acqua); background: #fff; color: var(--acqua); }
.elisa-azioni button { border: 0; background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); color: var(--petrolio); }
.elisa-modi[hidden] { display: none; }
.elisa-chiusa { align-self: center; font-size: .78rem; color: var(--testo-tenue); padding: .3rem 0; }

/* guida a passi nella chat (es. stima caldaia) */
.elisa-guida { align-self: stretch; display: flex; flex-direction: column; gap: .5rem; }
.elisa-opzioni { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.elisa-opz { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; padding: .55rem; border-radius: .7rem;
             border: 2px solid #d5e2e6; background: #fff; color: var(--petrolio); min-width: 0; }
.elisa-opz img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: .4rem; margin-bottom: .2rem; }
.elisa-opz strong { font-size: .85rem; line-height: 1.2; }
.elisa-opz small { font-size: .72rem; color: var(--testo-tenue); line-height: 1.25; }
.elisa-opz .elisa-prezzo { font-weight: 800; font-size: .95rem; margin-top: auto; padding-top: .2rem; }
.elisa-opz[aria-pressed="true"] { border-color: var(--acqua); box-shadow: 0 0 0 3px rgba(31, 143, 191, .25); }
.elisa-opz:focus-visible, .elisa-avanti:focus-visible { outline: 3px solid var(--elettrico); outline-offset: 2px; }
.elisa-avanti { position: sticky; bottom: .3rem; box-shadow: 0 2px 8px rgba(0,0,0,.18); align-self: flex-end; font: inherit; font-weight: 800; cursor: pointer; border: 0; border-radius: 999px; padding: .55rem 1.1rem;
                background: linear-gradient(90deg, var(--elettrico), var(--fiamma)); color: var(--petrolio); }
.elisa-avanti:disabled { opacity: .45; cursor: default; }