/* ============================================================
   PAGINE INTERNE · affissioni-6x3 / camion-vela / azienda / contatti
   Estende style.css (fondazione gessato) + i pattern condivisi di
   impianti.css (imp-hero). SOLO ciò che le 4 pagine aggiungono:
   CTA in hero, lista formati, blocco NAP, form preventivo, mappa.
   NON tocca style.css/impianti.css: quelli hanno altri proprietari.
   ============================================================ */

/* ---------- CTA dentro l'imp-hero (le pagine servizio hanno la chiamata subito) ---------- */
.imp-hero .cta-row{margin-top:2rem}

/* Su mobile l'overlay 97° di impianti.css lascia chiara la fascia bassa-destra e il
   sottotitolo ci finisce sopra (visto in QA 02/09): qui il velo diventa verticale.
   Vale solo per le 4 pagine che caricano questo foglio, non per /impianti-pubblicitari/. */
@media (max-width:760px){
  .imp-hero .grad{background:linear-gradient(180deg,
    color-mix(in srgb,var(--notte) 62%,transparent),
    color-mix(in srgb,var(--notte) 55%,transparent) 40%,
    color-mix(in srgb,var(--notte) 86%,transparent) 82%)}
}
/* «MONTEGRANARO» a 2.4rem stretch 118% arriva al bordo del wrap a 390px: un gradino sotto */
@media (max-width:420px){
  .imp-hero h1{font-size:clamp(1.45rem, 1rem + 4.2vw, 2rem)}
}
/* #1762 (manifest #1753, note mobile DUR-202): nei due hero nuovi il cartellone con la
   creatività GM sta a DESTRA del frame — col crop centrale su viewport stretti sparirebbe */
@media (max-width:760px){
  .pg-affissioni-6x3 .imp-hero .bg img{object-position:72% 38%}
  .pg-contatti .imp-hero .bg img{object-position:70% 38%}
}

/* ---------- lista formati (affissioni-6x3): righe-cucitura come lo svc-list,
     ma statiche e con la descrizione SEMPRE visibile (anche mobile) ---------- */
.fmt-list{margin-top:clamp(1.8rem,4vw,2.8rem)}
.fmt-row{display:flex;align-items:baseline;gap:clamp(1rem,3vw,2rem);
  padding:clamp(.9rem,2vw,1.3rem) 0;
  border-bottom:2px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.fmt-row:first-child{border-top:2px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.fmt-row b{font-family:var(--font-num);font-weight:400;flex:none;
  font-size:clamp(1.15rem,1rem + 1vw,1.7rem);color:var(--blu-deep);min-width:9ch}
.fmt-row span{color:color-mix(in srgb,var(--ink) 80%,transparent);font-size:.98rem}
@media (max-width:760px){
  .fmt-row{flex-direction:column;gap:.25rem}
  .fmt-row b{min-width:0}
}

/* ---------- fascia referenze: il nastro-cimosa riusato come striscia insegne ---------- */
.ref-zone{background:var(--gesso-2)}
.ref-zone .wrap{padding-top:var(--pad-y)}
.ref-zone .tape-zone{background:transparent}

/* ---------- blocco NAP (contatti) ---------- */
.nap{margin-top:clamp(1.6rem,3vw,2.4rem);display:grid;gap:.9rem;max-width:44ch}
.nap p{line-height:1.55}
.nap .nap-name{font-family:var(--font-display);font-stretch:110%;font-weight:800;
  font-size:1.15rem;text-transform:uppercase;font-style:italic}
.nap .nap-piva{font-size:.85rem;color:color-mix(in srgb,var(--ink) 60%,transparent)}
.nap a{color:var(--blu-deep);font-weight:700}

/* ---------- form preventivo (contatti): scheda-carta col bordo cucitura ---------- */
.qform{background:var(--carta);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 24px 60px -30px rgba(10,28,86,.35)}
.qform h2{font-family:var(--font-display);font-style:italic;font-weight:800;font-stretch:112%;
  text-transform:uppercase;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin-bottom:1.2rem}
.qform label{display:block;margin-bottom:1rem}
.qform .lbl{display:block;font-family:var(--font-num);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blu-deep);margin-bottom:.35rem}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--gesso);
  border:0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);
  border-radius:var(--r-card) var(--r-card) 0 0;padding:.75rem .9rem;
  transition:border-color .25s var(--ease),background .25s}
.qform input:focus,.qform textarea:focus{outline:none;background:#fff;
  border-bottom-color:var(--blu)}
.qform textarea{min-height:120px;resize:vertical}
.qform .priv{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;
  color:color-mix(in srgb,var(--ink) 75%,transparent);cursor:pointer}
.qform .priv input{margin-top:.3rem;accent-color:var(--blu);width:16px;height:16px;flex:none}
.qform .btn-invia{margin-top:1.3rem;display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;padding:.95rem 1.9rem;border-radius:var(--r-pill);
  background:var(--blu);color:#fff;transition:transform .3s var(--ease),background .3s}
.qform .btn-invia:hover{transform:translateY(-2px);background:var(--blu-deep)}
.qform .form-note{margin-top:.9rem;font-size:.8rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.qform .form-esito{display:none;margin-top:1rem;font-size:.95rem;padding:.8rem 1rem;
  border-radius:var(--r-card);background:var(--gesso)}
.qform .form-esito.show{display:block}

/* layout contatti: colonna consigli+NAP · colonna form */
.contatti-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:1020px){.contatti-grid{grid-template-columns:1fr}}
.tre-cose{margin-top:1.4rem;display:grid;gap:1.1rem}
.tre-cose li{display:flex;gap:1rem;align-items:flex-start}
.tre-cose .n{font-family:var(--font-num);color:var(--blu-vivo);font-size:.85rem;
  width:2.2rem;height:2.2rem;flex:none;display:grid;place-items:center;border-radius:50%;
  box-shadow:inset 0 0 0 1.6px color-mix(in srgb,var(--blu) 45%,transparent);color:var(--blu-deep)}
.tre-cose b{display:block}
.tre-cose p{font-size:.95rem;color:color-mix(in srgb,var(--ink) 78%,transparent)}

/* ---------- galleria camion-vela: 6 scene → 3+3 (la 4+2 lascia il buco a destra) ---------- */
@media (min-width:1021px){
  .pg-camion-vela .gal-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- mappa sede (contatti) ---------- */
.mappa-sede{width:100%;aspect-ratio:16/7;border:0;border-radius:var(--r-card);
  box-shadow:0 24px 60px -30px rgba(10,28,86,.45);display:block;background:var(--gesso-2)}
@media (max-width:760px){.mappa-sede{aspect-ratio:4/3}}

/* ---------- area invio file (/invio-file/): estensioni al pattern qform ---------- */
.qform input[type=file]{width:100%;font:inherit;font-size:.9rem;color:var(--ink);
  background:var(--gesso);border:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);
  border-radius:var(--r-card);padding:.9rem;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s}
.qform input[type=file]:hover,.qform input[type=file]:focus{outline:none;background:#fff;border-color:var(--blu)}
.qform input[type=file]::file-selector-button{font:inherit;font-weight:800;font-size:.82rem;
  color:#fff;background:var(--blu);border:0;border-radius:var(--r-pill);
  padding:.5rem 1.1rem;margin-right:.9rem;cursor:pointer}
.qform .file-hint{display:block;margin-top:.4rem;font-size:.78rem;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.file-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.35rem}
.file-list li{font-size:.85rem;padding:.45rem .8rem;border-radius:var(--r-card);
  background:var(--gesso);border-left:3px solid var(--blu)}
.file-list li.no{border-left-color:#b3261e;color:#8c1d18}
.qform .form-esito.err{background:#fdeeee;color:#8c1d18}
/* honeypot: fuori dal flusso e invisibile, ma non display:none (i bot lo saltano) */
.qform .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* mappa Google della sede dietro consenso (smarti-cookie, 04/11/2026): finché l'iframe
   non ha src, al suo posto un riquadro con il link diretto a Google Maps */
.mappa-box{position:relative}
.mappa-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  padding:1.5rem;text-align:center;border-radius:var(--r-card);background:var(--carta);border:1px dashed rgba(22,35,63,.25);color:var(--ink)}
.mappa-ph a{color:var(--blu);font-weight:600}
.mappa-sede[src] + .mappa-ph{display:none}