/* ==========================================================================
       CONTATTI — solo quello che serve a questa pagina.
       Colori, intestazione, piede e pulsanti stanno in assets/comune.css,
       che questa pagina carica prima del proprio foglio.
       ========================================================================== */
    .dentro { max-width: none; }

    .apertura { padding-bottom: clamp(26px, 3vw, 38px); }
    .apertura p { margin: 0; font-size: clamp(16px, 1.18vw, 17px); line-height: 1.6; color: var(--testo); max-width: 56ch; }

    /* la colonna del modulo e quella dei recapiti */
    .colonne { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
               gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }

    /* --- modulo ---------------------------------------------------------------- */
    .scheda { background: var(--bianco); border: 1px solid var(--ardesia);
              padding: clamp(24px, 3vw, 40px); }
    .scheda h2 { margin: 0 0 8px 0; font-family: var(--titoli); font-weight: 600;
                 font-size: clamp(24px, 2.18vw, 27px); letter-spacing: 0; color: var(--notte); }
    .scheda-nota { margin: 0 0 clamp(22px, 2.6vw, 30px) 0; font-size: 13px;
                   line-height: 1.6; color: #626C72; }

    .modulo { display: flex; flex-direction: column; gap: 20px; }
    .righe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .campo { display: flex; flex-direction: column; gap: 8px; }
    .campo label { font-size: 15px; font-weight: 600; color: var(--inchiostro); }
    .campo input, .campo select, .campo textarea {
      width: 100%; box-sizing: border-box; padding: 13px 14px; min-height: 48px;
      border: 1px solid #C2C7C9; border-radius: 0; background: var(--bianco);
      font-family: var(--corpo); font-size: 16px; line-height: 1.5; color: var(--inchiostro); }
    .campo textarea { min-height: 132px; resize: vertical; }
    .campo input:focus, .campo select:focus, .campo textarea:focus {
      outline: 3px solid var(--mare); outline-offset: 1px; border-color: var(--mare); }

    .informativa { margin: 0; font-size: 14px; line-height: 1.55; color: var(--testo); }
    .informativa a { color: var(--mare); }
    /* il campo trappola per i programmi che compilano i moduli da soli */
    .trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    /* l'esito dell'invio prende il posto del modulo */
    .esito { display: none; padding: 24px 26px; border-left: 3px solid var(--mare); background: var(--pietra); }
    .esito.vedi { display: block; }
    .esito.male { border-left-color: #B3261E; }
    .esito b { display: block; margin-bottom: 6px; font-family: var(--titoli); font-weight: 600;
               font-size: 20px; color: var(--notte); }
    .esito p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--testo); }

    /* --- recapiti --------------------------------------------------------------- */
    .recapiti { display: flex; flex-direction: column; justify-content: space-between;
                gap: clamp(14px, 1.6vw, 18px); }
    .rec { background: var(--bianco); border: 1px solid var(--ardesia); padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px); }
    .rec-scuro { background: var(--notte); border-color: var(--notte); }
    .rec-titolo { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
                  text-transform: uppercase; color: var(--mare); margin-bottom: 16px; font-weight: 600;}
    .rec-scuro .rec-titolo { color: var(--azzurro); }
    .rec-numero { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--titoli);
                  font-weight: 600; font-size: clamp(26px, 2.18vw, 27px); letter-spacing: 0;
                  color: var(--bianco); text-decoration: none; margin-bottom: 4px; }
    .rec-numero:hover { color: var(--azzurro); }
    .rec-orario { display: block; font-family: var(--mono); font-size: 13px; color: var(--su-scuro); }
    .rec-mail { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(17px, 1.26vw, 17px);
                font-weight: 600; color: var(--notte); text-decoration: none; margin-bottom: 6px;
                word-break: break-word; }
    .rec-mail:hover { color: var(--mare); }
    .rec-dato { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.7;
                color: var(--grigio); word-break: break-word; }
    .rec-indirizzo { display: block; font-size: 17px; line-height: 1.7; color: var(--notte); }

    .rec-in { display: flex; align-items: center; gap: 16px; text-decoration: none; }
    .rec-in svg { flex-shrink: 0; }
    .rec-in b { display: block; font-size: 17px; font-weight: 600; color: var(--notte); }
    .rec-in span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 13px; color: #626C72; }
    .rec-in:hover b { color: var(--mare); }

    /* --- a chi scrivere ---------------------------------------------------------- */
    /* Cinque schede: con auto-fit ne restava una orfana sulla seconda riga.
       Colonne fissate per fascia di larghezza, cosi' le righe sono sempre piene. */
    .persone { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
    .persone .persona-mail { font-size: 15px; line-height: 1.35; }
    /* Le schede sono cinque: su tre colonne l'ultima si allarga su due e la
       seconda riga resta piena, invece di lasciare un buco. */
    @media (max-width: 1240px) { .persone { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                                 .persona:last-child { grid-column: span 2; } }
    @media (max-width: 860px)  { .persone { grid-template-columns: 1fr; }
                                 .persona:last-child { grid-column: auto; } }
    .persona { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--ardesia);
               padding: clamp(22px, 2.4vw, 28px); }
    .persona-ruolo { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
                     text-transform: uppercase; color: var(--mare); margin-bottom: 14px; font-weight: 600;}
    .persona b { font-family: var(--titoli); font-weight: 600; font-size: clamp(21px, 1.68vw, 21px);
                 line-height: 1.15; letter-spacing: 0; color: var(--notte); margin-bottom: 10px; }
    .persona-cosa { font-size: 16px; line-height: 1.55; color: var(--testo); margin-bottom: 16px; }
    .pag .persona-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto;
                         font-size: 16px; font-weight: 600; color: var(--mare); word-break: break-word;
                         text-decoration: underline; text-underline-offset: 3px;
                         word-break: normal; overflow-wrap: normal; hyphens: none; }
    .pag .persona-mail:hover { color: var(--inchiostro); }
    .generica { margin: clamp(16px, 2vw, 22px) 0 0 0; font-size: 16px; color: var(--grigio); }

    /* La mappa e' una fascia larga sotto le due colonne: cosi' le colonne finiscono
       alla stessa altezza e non resta spazio vuoto sotto il modulo. */
    .mappa { box-sizing: border-box; width: 100%; height: clamp(240px, 24vw, 400px); margin-top: clamp(14px, 1.6vw, 18px);
             display: flex; flex-direction: column; align-items: center;
             justify-content: center; gap: 12px; padding: 24px; text-align: center;
             background-image: repeating-linear-gradient(140deg, #D7DADA 0 16px, #DFE1E1 16px 32px); }
    .mappa span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
                  color: var(--notte); background: var(--pietra); padding: 9px 13px; font-weight: 600;}
    .mappa-dove { font-size: 16px; font-weight: 600; color: var(--notte); margin: 0;
                  background: var(--pietra); padding: 9px 13px; }
    .mappa-nota { font-size: 13px; line-height: 1.5; color: var(--grigio); margin: 0; max-width: 42ch; }
    .mappa.mappa-accesa { display: block; padding: 0; background-image: none; }
    .mappa iframe { display: block; width: 100%; height: 100%; border: 0; }

    @media (max-width: 900px) {
      .colonne { grid-template-columns: 1fr; }
      .modulo .btn { width: 100%; }
    }

    @media (max-width: 620px) {
      .scheda-nota, .rec-dato, .rec-orario, .rec-in span, .mappa span { font-size: 14px; }
      .persona-ruolo { font-size: 13px; }
      .rec-titolo { font-size: 13px; }
    }