/* ============================================================================
   Componenti.
   Ogni blocco è autonomo e non conosce il contesto in cui viene inserito.
   Nessun valore letterale: tutto passa dai token in tokens.css.
   ========================================================================= */

/* ── Intestazione ─────────────────────────────────────────────────────────
   Il sito attuale ha il menu bianco su fondo chiaro e in più punti diventa
   illeggibile. Qui l'intestazione porta sempre con sé il proprio fondo scuro:
   pieno sulle pagine interne, velato sopra l'immagine dell'hero. In entrambi
   i casi il testo bianco ha un fondo scuro sotto e il contrasto non dipende
   da cosa scorre dietro.                                                   */

.intestazione {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--grafite);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    --anello: var(--azzurro);
}

/* Sopra l'hero l'intestazione si apre sull'immagine, restando comunque scura:
   il velo di grafite al 66% tiene il bianco sopra 4.5:1 anche con del bianco
   pieno sotto, cioè su qualsiasi fotografia o scheda passi dietro. */
body.con-hero .intestazione {
    background: color-mix(in srgb, var(--grafite) 66%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.intestazione__contenuto {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--altezza-intestazione);
}

.marchio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    color: var(--su-scuro);
    text-decoration: none;
}

.marchio svg { flex: 0 0 auto; }

/* Il segno caricato dal pannello si misura in altezza e non in larghezza: le
   proporzioni del file non sono note in anticipo, e vincolare il lato lungo
   è l'unico modo perché un marchio verticale e uno orizzontale occupino la
   stessa riga senza deformarsi. */
.marchio__segno {
    flex: 0 0 auto;
    width: auto;
    height: 48px;
}

.marchio__nome {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.marchio__qualifica {
    display: block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--azzurro);
}

.navigazione {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigazione a {
    color: var(--su-scuro);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.navigazione a:hover,
.navigazione a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* La pagina corrente è segnalata da un filetto, non dal solo colore:
   il colore da solo non è un mezzo di comunicazione accessibile. */
.navigazione a[aria-current='page'] {
    text-decoration: underline;
    text-decoration-color: var(--azzurro);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.social a {
    display: grid;
    place-items: center;
    /* 40px è il bersaglio minimo comodo da toccare: l'icona resta di 19px
       ma l'area cliccabile no. */
    width: 40px;
    height: 40px;
    color: var(--su-scuro);
    opacity: .85;
}

.social a:hover,
.social a:focus-visible { opacity: 1; }

/* ── Menu su viewport ridotta ─────────────────────────────────────────────
   Nel prototipo la navigazione veniva semplicemente nascosta sotto 820px,
   lasciando il sito senza menu su telefono. Qui diventa un pannello a
   comparsa governato da aria-expanded.                                    */

.apri-menu {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--raggio-piccolo);
    color: var(--su-scuro);
    cursor: pointer;
}

.apri-menu:hover { border-color: var(--azzurro); }

/* Il pannello è fisso sotto l'intestazione, non un blocco nel flusso della
   pagina. In flusso aveva due difetti:
   - sulla home l'hero risale di un'altezza di intestazione con un margine
     negativo, ed essendo posizionato e successivo nel documento veniva
     disegnato sopra gli ultimi 74px del pannello — cioè sopra «Contatti»;
   - il pannello stava in cima al documento, quindi aprendo il menu dopo aver
     fatto scorrere la pagina compariva fuori dallo schermo.
   Fisso e con uno z-index appena sotto l'intestazione, sta sopra qualsiasi
   contenuto e sempre in vista; se è più alto dello schermo scorre da sé. */
.menu-mobile {
    position: fixed;
    top: var(--altezza-intestazione);
    left: 0;
    right: 0;
    z-index: 49;
    max-height: calc(100vh - var(--altezza-intestazione));
    max-height: calc(100dvh - var(--altezza-intestazione));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--grafite);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    --anello: var(--azzurro);
}

.menu-mobile ul {
    margin: 0;
    padding: 8px 0 20px;
    list-style: none;
}

.menu-mobile a {
    display: block;
    padding: 14px 0;
    color: var(--su-scuro);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

@media (max-width: 860px) {
    .navigazione { display: none; }
    .apri-menu { display: grid; }
}

@media (min-width: 861px) {
    /* Se la finestra viene allargata mentre il pannello è aperto, il menu
       desktop torna disponibile e il pannello non deve restare visibile. */
    .menu-mobile { display: none !important; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: min(88vh, 720px);
    /* Risale sotto l'intestazione velata e recupera lo spazio con il padding,
       così l'immagine parte dal bordo superiore della finestra. */
    margin-top: calc(-1 * var(--altezza-intestazione));
    padding-top: var(--altezza-intestazione);
    overflow: hidden;
    --anello: var(--azzurro);
}

.hero__sfondo {
    position: absolute;
    inset: 0;
    /* Gradiente di riserva: senza fotografia l'hero resta presentabile. */
    background: linear-gradient(135deg, var(--azzurro-scuro) 0%, var(--inchiostro) 40%, var(--grafite) 100%);
    background-size: cover;
    background-position: center;
}

/* Due sovrapposizioni incrociate invece di un nero piatto: una verticale che
   àncora titolo e piè dell'immagine, una diagonale che scurisce la colonna in
   cui sta il testo. Sommate arrivano a ~78% dietro il titolo, che tiene il
   bianco sopra 7:1 anche se la fotografia in quel punto è molto chiara. */
.hero__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--grafite) 72%, transparent) 0%,
            color-mix(in srgb, var(--grafite) 42%, transparent) 45%,
            color-mix(in srgb, var(--grafite) 82%, transparent) 100%),
        linear-gradient(100deg,
            color-mix(in srgb, var(--grafite) 62%, transparent) 0%,
            color-mix(in srgb, var(--grafite) 28%, transparent) 55%,
            transparent 100%);
}

.hero__contenuto {
    position: relative;
    z-index: 2;
    padding-block: clamp(80px, 12vw, 120px);
}

.hero h1 {
    max-width: 16ch;
    color: var(--su-scuro);
}

.hero__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero__sottotitolo {
    max-width: 52ch;
    margin: 26px 0 34px;
    color: var(--su-scuro);
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
}

/* ── Testata delle pagine interne ─────────────────────────────────────────
   Le pagine senza hero hanno bisogno di un attacco che dia gerarchia senza
   rubare una schermata intera: fondo velo, occhiello, titolo, sommario.    */

.testata {
    padding-block: clamp(48px, 6vw, 80px);
    background: var(--velo);
    border-bottom: 1px solid var(--filetto);
}

.testata h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); max-width: 24ch; }
.testata .lead { max-width: var(--larghezza-lettura); margin-top: 20px; }

/* Con il logo la testata si divide: il testo a sinistra, il logo a destra
   nello spazio che il titolo lascia libero. Il logo si misura in altezza come
   il segno dell'intestazione, per la stessa ragione. Sotto gli 860px lo
   spazio non c'è più, e sotto il titolo il logo spingerebbe in basso la
   pagina senza aggiungere nulla: il nome è già nell'intestazione, e il logo
   nel piè di pagina. */
.testata--con-logo .contenitore {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-blocco);
}

.testata__logo {
    flex: 0 0 auto;
    width: auto;
    height: 150px;
}

@media (max-width: 860px) {
    .testata__logo { display: none; }
}

/* ── Pulsanti ─────────────────────────────────────────────────────────────
   Tre livelli con un significato ciascuno e nessuna sovrapposizione:
   primario  = l'azione che vogliamo far compiere (una sola per schermata)
   secondario = approfondimento facoltativo
   chiaro    = primario quando il fondo è scuro                            */

.pulsante {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--raggio-pulsante);
    font-family: var(--font-testo);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transizione), color var(--transizione), transform var(--transizione);
}

.pulsante:hover { transform: translateY(-1px); }

.pulsante--primario {
    background: var(--rosa-antico);
    border-color: var(--rosa-antico);
    color: var(--su-scuro);
}

.pulsante--primario:hover {
    background: var(--rosa-antico-scuro);
    border-color: var(--rosa-antico-scuro);
}

.pulsante--secondario {
    background: transparent;
    border-color: var(--rosa-antico-scuro);
    color: var(--rosa-antico-scuro);
}

.pulsante--secondario:hover { background: var(--velo); }

.pulsante--chiaro {
    background: var(--su-scuro);
    border-color: var(--su-scuro);
    color: var(--inchiostro);
}

.pulsante--chiaro:hover {
    background: var(--azzurro);
    border-color: var(--azzurro);
    color: var(--grafite);
}

/* Il secondario per i fondi scuri: lo stesso contorno del secondario, in
   bianco. Il testo è il bianco del titolo dell'hero, sullo stesso velo, quindi
   il contrasto è quello già verificato per il titolo. */
.pulsante--secondario-su-scuro {
    background: transparent;
    border-color: var(--su-scuro);
    color: var(--su-scuro);
}

.pulsante--secondario-su-scuro:hover {
    background: color-mix(in srgb, var(--su-scuro) 14%, transparent);
}

.pulsante__freccia { transition: transform var(--transizione); }
.pulsante:hover .pulsante__freccia { transform: translateX(3px); }

/* ── Figure ───────────────────────────────────────────────────────────────
   Il raggio asimmetrico è il motivo ereditato dal sito attuale: è l'unica
   forma che il sito ripete, e ripeterla è ciò che la rende riconoscibile. */

.figura {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: var(--raggio-grande) 6px var(--raggio-grande) 6px;
    aspect-ratio: 4 / 3;
}

.figura--ritratto { aspect-ratio: 4 / 5; }

.figura__immagine {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Segnaposto: dichiara quale scatto va inserito e perché, così le pagine
   restano leggibili prima che il materiale fotografico sia disponibile e
   nessuna casella resta vuota per dimenticanza. */
.figura__segnaposto {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 24px;
    /* Il rosa antico è troppo chiaro sotto il testo: il gradiente parte dalla
       variante scura mescolata a metà con la grafite, e anche nell'angolo più
       chiaro il titolo in azzurro e il testo restano sopra 4.5:1. */
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--rosa-antico-scuro) 50%, var(--grafite)) 0%,
        color-mix(in srgb, var(--rosa-antico-scuro) 25%, var(--grafite)) 55%,
        var(--grafite) 100%);
    text-align: center;
}

/* `salvia` è il valore salvato nelle pagine dal pannello, nato con la palette
   precedente; il fondo è l'azzurro. */
.figura__segnaposto--salvia {
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--azzurro-scuro) 50%, var(--grafite)) 0%,
        color-mix(in srgb, var(--azzurro-scuro) 25%, var(--grafite)) 55%,
        var(--grafite) 100%);
}

.figura__segnaposto p {
    max-width: 30ch;
    margin: 0;
    color: var(--su-scuro-attenuato);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .03em;
    line-height: 1.7;
}

.figura__segnaposto strong {
    display: block;
    margin-bottom: 6px;
    color: var(--azzurro);
    font-weight: 500;
}

/* ── Tracciato ────────────────────────────────────────────────────────────
   Elemento firma del sito: la linea verticale con i marcatori ad anello
   trasforma l'elenco dei servizi nel percorso di cui parlano i testi.     */

.tracciato { position: relative; }

.tracciato::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 0;
    width: 1px;
    /* L'azzurro pieno della palette: la linea è decorazione, a dire che le
       tappe sono un percorso bastano gli anelli e i numeri. */
    background: linear-gradient(180deg, var(--azzurro) 0%, var(--azzurro) 82%, transparent 100%);
}

.tappa {
    position: relative;
    padding-left: clamp(34px, 5vw, 64px);
}

.tappa::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 9px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--azzurro-scuro);
    border-radius: 50%;
    background: var(--carta);
}

.sezione--velo .tappa::before { background: var(--velo); }

.tappa + .tappa { margin-top: var(--spazio-sezione); }

.tappa__numero {
    display: block;
    margin-bottom: 10px;
    color: var(--azzurro-scuro);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
}

.tappa h3 + p,
.tappa__corpo { margin-top: 12px; }

/* ── Schede ─────────────────────────────────────────────────────────────── */

.griglia {
    display: grid;
    gap: 20px;
    margin-top: var(--spazio-blocco);
}

.griglia--due { grid-template-columns: repeat(2, 1fr); }
.griglia--tre { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
    .griglia--due,
    .griglia--tre { grid-template-columns: 1fr; }
}

.scheda {
    padding: 26px 24px;
    background: var(--carta);
    border: 1px solid var(--filetto);
    border-radius: var(--raggio-medio) 6px var(--raggio-medio) 6px;
}

/* Su fondo velo la scheda si stacca col bianco invece che col bordo. */
.sezione--velo .scheda {
    background: #FFFFFF;
    border-color: transparent;
}

/* La fotografia esce dai margini della scheda e ne occupa il bordo alto: dentro
   il riempimento sembrerebbe un francobollo incollato sul testo. Il raggio
   ripete quello della scheda sui due angoli superiori, così l'immagine
   continua la forma del contenitore invece di sovrapporsi. */
.scheda--illustrata { padding-top: 0; }

/* Ogni scheda alta quanto il suo contenuto. Nelle griglie di solo testo lo
   stiramento è quello che si vuole — le schede paiono una fila sola — ma
   accanto a una scheda illustrata produrrebbe una colonna di vuoto. */
.griglia--illustrata { align-items: start; }

.scheda__immagine {
    /* `max-width: none` annulla la regola generale su `img` in base.css: senza,
       la larghezza resterebbe quella del testo e la fotografia sborderebbe solo
       a sinistra, lasciando una striscia bianca a destra. */
    width: calc(100% + 48px);
    max-width: none;
    margin: 0 -24px 22px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raggio-medio) 6px 0 0;
}

.scheda__numero {
    display: block;
    margin-bottom: 12px;
    color: var(--azzurro-scuro);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
}

/* ── Dialogo ──────────────────────────────────────────────────────────────
   Le schede lette come battute: la prima a sinistra, la risposta a destra.
   La nuvoletta è il raggio asimmetrico del sito con l'angolo stretto dalla
   parte di chi parla, senza codine disegnate: la forma è già quella che il
   sito ripete ovunque. La risposta è piena, in rosa antico, perché si legga
   come una voce diversa anche senza guardarne la posizione. */

.dialogo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: var(--spazio-blocco);
}

.dialogo__battuta {
    align-self: flex-start;
    max-width: 75%;
    padding: 20px 26px;
    background: #FFFFFF;
    border-radius: var(--raggio-medio) var(--raggio-medio) var(--raggio-medio) 6px;
}

.dialogo__battuta:nth-child(even) {
    align-self: flex-end;
    background: var(--rosa-antico);
    color: var(--su-scuro);             /* 4.7:1 */
    border-radius: var(--raggio-medio) var(--raggio-medio) 6px var(--raggio-medio);
}

.dialogo__battuta h3 { font-size: 1.125rem; }
.dialogo__battuta h3 + p { margin-top: 8px; }
.dialogo__battuta p { margin: 0; font-size: 1rem; }

@media (max-width: 760px) {
    .dialogo__battuta { max-width: 88%; }
}

/* ── Banda scura ────────────────────────────────────────────────────────── */

.banda {
    position: relative;
    overflow: hidden;
    padding-block: calc(var(--spazio-sezione) * 1.1);
    background: var(--grafite);
    color: var(--su-scuro);
    --anello: var(--azzurro);
}

/* Il bagliore schiarisce la grafite, e sotto c'è l'occhiello in azzurro: al
   55% di rosa antico scuro l'occhiello resta sopra 4.5:1 anche nel punto più
   intenso. */
.banda::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(90% 130% at var(--bagliore-origine, 12% 0%), color-mix(in srgb, var(--rosa-antico-scuro) 55%, transparent) 0%, transparent 62%);
}

.banda__contenuto {
    position: relative;
    z-index: 2;
}

.banda__premessa {
    max-width: 44ch;
    margin-bottom: 22px;
    color: var(--su-scuro-attenuato);
}

.banda__citazione {
    max-width: 24ch;
    margin: 0 0 30px;
    font-size: clamp(1.375rem, 2.9vw, 2.125rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.32;
}

/* Variante centrata, scelta dal pannello sezione per sezione. Il bagliore si
   sposta al centro insieme al testo: lasciato nell'angolo, illuminerebbe uno
   spazio vuoto. Le colonne strette di premessa e citazione restano strette,
   centrate invece che allineate a sinistra. */
.banda--centrata {
    --bagliore-origine: 50% 0%;
    text-align: center;
}

.banda--centrata .banda__premessa,
.banda--centrata .banda__citazione { margin-inline: auto; }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   <details> nativo: apertura da tastiera, indicizzabile, nessun JavaScript. */

.faq {
    margin-top: var(--spazio-blocco);
    border-top: 1px solid var(--filetto);
}

.faq__voce { border-bottom: 1px solid var(--filetto); }

.faq__domanda {
    position: relative;
    padding: 22px 44px 22px 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
}

.faq__domanda::-webkit-details-marker { display: none; }

.faq__domanda::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rosa-antico);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}

.faq__voce[open] .faq__domanda::after { content: '\2212'; }

.faq__domanda:hover { color: var(--rosa-antico-scuro); }

.faq__risposta {
    max-width: 70ch;
    padding: 0 0 24px;
}

.faq__risposta p { color: var(--inchiostro-attenuato); }
.faq__risposta strong { color: var(--inchiostro); }

/* ── Sedi ─────────────────────────────────────────────────────────────────── */

/* Quante colonne quante sedi, finché ognuna ha almeno 260px; sotto, vanno a
   capo. Le sedi si aggiungono e si tolgono dal pannello: con un numero fisso di
   colonne la terza restava sola su una riga. */
.sedi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
    margin-top: var(--spazio-blocco);
}

.sede {
    padding: 30px 28px;
    background: var(--rosa-antico);
    border-radius: 32px 6px 32px 6px;
    color: var(--su-scuro);
    --anello: var(--su-scuro);
}

/* Sul rosa antico regge solo il bianco (4.7:1): il velo, com'era prima, si
   fermerebbe a 3.7:1 su un testo di piccolo corpo. */
.sede .etichetta { color: var(--su-scuro); }
.sede h3 { margin-bottom: 8px; }

.sede p {
    margin: 0;
    color: var(--su-scuro);
    font-size: .9375rem;
}

.sede a { color: var(--su-scuro); }

/* ── Elenchi e righe di contatto ──────────────────────────────────────────── */

.elenco-tratteggiato {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.elenco-tratteggiato li {
    position: relative;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--filetto);
    font-size: .9375rem;
}

.elenco-tratteggiato li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 9px;
    height: 1px;
    background: var(--azzurro-scuro);
}

.riga-contatto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--filetto);
}

.riga-contatto svg {
    flex: 0 0 auto;
    color: var(--rosa-antico);
}

.riga-contatto a { font-weight: 600; }

/* ── Modulo di contatto ───────────────────────────────────────────────────
   Il CSS incorporato del plugin form è disattivato in user/config/plugins/form.yaml:
   lo stile del modulo vive qui, così esiste un solo posto in cui cambiarlo.  */

.modulo { margin-top: var(--spazio-blocco); }

.modulo .form-field { margin-bottom: 22px; }

.modulo .form-label label,
.modulo label {
    display: block;
    margin-bottom: 7px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

/* L'asterisco da solo non dice nulla a chi usa uno screen reader: il testo
   completo è nell'attributo aria-label del campo, questo è il segnale visivo. */
.modulo .required { color: var(--rosa-antico-scuro); }

.modulo input[type='text'],
.modulo input[type='email'],
.modulo input[type='tel'],
.modulo textarea,
.modulo select {
    width: 100%;
    padding: 13px 16px;
    background: #FFFFFF;
    border: 1px solid var(--filetto);
    border-radius: var(--raggio-piccolo);
    color: var(--inchiostro);
    font-family: var(--font-testo);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transizione);
}

.modulo textarea {
    min-height: 160px;
    resize: vertical;
}

.modulo input:hover,
.modulo textarea:hover { border-color: var(--inchiostro-attenuato); }

.modulo input:focus,
.modulo textarea:focus {
    border-color: var(--rosa-antico);
    outline: 2px solid var(--rosa-antico);
    outline-offset: 1px;
}

.modulo input::placeholder,
.modulo textarea::placeholder { color: var(--inchiostro-attenuato); }

.modulo .form-description,
.modulo .form-extra-wrapper {
    display: block;
    margin-top: 7px;
    color: var(--inchiostro-attenuato);
    font-size: .8125rem;
    line-height: 1.5;
}

/* Errore di campo: bordo, icona testuale e messaggio accanto al campo.
   Mai il solo colore rosso. */
.modulo .form-field.has-errors input,
.modulo .form-field.has-errors textarea { border-color: var(--rosa-antico); }

.modulo .form-errors {
    margin-top: 7px;
    color: var(--rosa-antico-scuro);
    font-size: .8125rem;
    font-weight: 600;
}

.modulo .form-errors p { margin: 0; }

/* Consenso privacy: la casella e la sua etichetta stanno su una riga sola,
   con il testo allineato al primo rigo e non centrato sulla casella. */
.modulo .form-field[data-grav-field='checkbox'] .form-input-wrapper,
.modulo .form-field[data-grav-field='checkbox'] label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    font-size: .9375rem;
    line-height: 1.55;
}

.modulo input[type='checkbox'] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--rosa-antico);
}

.modulo .buttons { margin-top: var(--spazio-blocco); }

/* ── Avvisi ───────────────────────────────────────────────────────────────
   Esito dell'invio. Il messaggio è il solo segnale che l'utente riceve dopo
   aver premuto invia, quindi non può essere una riga discreta.             */

.avvisi { margin-bottom: var(--spazio-blocco); }

.avviso {
    padding: 18px 22px;
    border-left: 4px solid var(--azzurro-scuro);
    border-radius: var(--raggio-piccolo);
    background: #FFFFFF;
    font-size: .9375rem;
}

.avviso p:last-child { margin-bottom: 0; }

.avviso--errore { border-left-color: var(--rosa-antico); }

/* ── Contenuto redazionale ────────────────────────────────────────────────
   Stile del testo scritto in markdown dal pannello: vale per la pagina
   "Chi sono", per le informative e per qualsiasi pagina futura.            */

.contenuto { max-width: var(--larghezza-lettura); }

.contenuto > * + * { margin-top: 1.1em; }

.contenuto h2 { margin-top: var(--spazio-blocco); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.contenuto h3 { margin-top: var(--spazio-blocco); }

.contenuto ul,
.contenuto ol { padding-left: 22px; }
.contenuto li + li { margin-top: 6px; }

.contenuto blockquote {
    margin: var(--spazio-blocco) 0;
    padding-left: 24px;
    border-left: 2px solid var(--azzurro-scuro);
    color: var(--inchiostro-attenuato);
    font-size: 1.125rem;
    font-style: italic;
}

.contenuto hr {
    margin-block: var(--spazio-blocco);
    border: 0;
    border-top: 1px solid var(--filetto);
}

/* ── Piè di pagina ──────────────────────────────────────────────────────── */

.piede {
    padding-block: 56px 36px;
    background: var(--grafite);
    color: var(--su-scuro-attenuato);
    font-size: .875rem;
    --anello: var(--azzurro);
}

.piede__griglia {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 36px;
}

@media (max-width: 760px) {
    .piede__griglia { grid-template-columns: 1fr; }
}

/* Il logo con la scritta apre il piè di pagina su tutta la riga, come la riga
   legale lo chiude. È la versione per i fondi scuri: quella con la scritta
   grigia sulla grafite non si leggerebbe. */
.piede__marchio {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
    height: 120px;
}

.piede__titolo {
    margin: 0 0 14px;
    color: var(--azzurro);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.piede a {
    color: var(--su-scuro-attenuato);
    text-decoration: none;
}

.piede a:hover,
.piede a:focus-visible {
    color: var(--su-scuro);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.piede ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.piede li { margin-bottom: 8px; }

.piede__legale {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: space-between;
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    color: var(--su-scuro-quieto);
    font-size: .8125rem;
}

.piede__legale a { color: var(--su-scuro-quieto); }

/* ── Rifiniture dei componenti ────────────────────────────────────────────── */

/* Il titolo di una scheda è un terzo livello ma in un contenitore piccolo:
   la misura piena di h3 lo farebbe competere col titolo della sezione. */
.scheda h3 { font-size: 1.125rem; }
.scheda h3 + p { margin-top: 10px; }
.scheda p { margin-bottom: 0; font-size: .9375rem; }

/* I browser rendono <address> in corsivo per impostazione predefinita: qui il
   corsivo è deciso dal markup (<em>), non dall'elemento contenitore. */
.sede address {
    margin: 0;
    font-style: normal;
    font-size: .9375rem;
}

.sede address em { font-style: italic; }

/* La pagina corrente va segnalata anche fuori dalla navigazione principale. */
.menu-mobile a[aria-current='page'],
.piede a[aria-current='page'] {
    text-decoration: underline;
    text-decoration-color: var(--azzurro);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ── Intestazione su schermi molto stretti ────────────────────────────────
   A 320px il marchio, le due icone social e il bottone del menu non stanno
   sulla stessa riga. Cedono le icone social, che sono replicate nel piè di
   pagina, e la qualifica sotto il nome: restano il marchio e l'accesso al
   menu, che sono le due cose indispensabili. Il segno si accorcia di poco:
   è largo il doppio della sua altezza, e a 48px a 320px il nome andava a
   capo. */

@media (max-width: 480px) {
    .intestazione .social { display: none; }
    .marchio__qualifica { display: none; }
    .marchio__segno { height: 40px; }
    .intestazione__contenuto { gap: 16px; }
}