/* =========================================================
   Avv. Maria Mercedes Maniglia — variante "documento"
   Nessuna colonna di margine: la struttura è orizzontale.
   Ogni sezione si apre con un filetto-capitolo che si riempie
   di blu man mano che la pagina avanza.
   ========================================================= */

:root {
    --ink: #054288;
    --ink-deep: #021a36;

    --text-main: #22252A;
    --text-body: #42474E;

    --white: #ffffff;
    /* rosa appena accennato, dalla carta del biglietto da visita */
    --paper: #F8F1EF;
    --paper-deep: #F0E6E3;

    /* bruno-rosato, stessa famiglia della carta */
    --accent: #7E4F4A;

    --rule: rgba(5, 66, 136, 0.16);
    --rule-soft: rgba(34, 37, 42, 0.10);

    --font-display: 'Spectral', Georgia, serif;
    --font-body: 'Archivo', system-ui, sans-serif;

    --sec-pad: clamp(4.5rem, 9vw, 8rem);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    /* regola separata di proposito: ::details-content non rientra in
       *::before/::after, e messo nella lista qui sopra invaliderebbe
       l'intero selettore sui browser che non lo conoscono */
    details::details-content {
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-body);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

p {
    color: var(--text-body);
}

strong {
    color: var(--text-main);
    font-weight: 600;
}

a {
    color: var(--ink);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--ink);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

/* ---------- Navbar ---------- */

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule-soft);
}

.brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover {
    color: var(--ink);
}

.nav-link-custom {
    font-family: var(--font-body);
    /* nel menu a tendina il tocco e' piu' comodo con un corpo pieno */
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-main);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-link-custom:hover {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* Menu a tendina: area di tocco piena, almeno 44px per voce */
@media (max-width: 991.98px) {
    .nav-link-custom {
        display: block;
        padding: 0.6rem 0;
    }
}

/* Da qui la navbar e' su una riga sola: cresce in due tempi, perche'
   fra 992 e 1199 il contenitore si stringe a 960px */
@media (min-width: 992px) {
    .brand {
        font-size: 1.4rem;
    }

    .nav-link-custom {
        font-size: 0.88rem;
    }
}

@media (min-width: 1200px) {
    .brand {
        font-size: 1.55rem;
    }

    .nav-link-custom {
        font-size: 0.95rem;
    }
}

/* ---------- Sezioni ---------- */

/* Bootstrap porterebbe il contenitore a 1320px: troppo per una colonna
   di testo leggibile, lascerebbe vuoto strutturale ai lati */
@media (min-width: 1400px) {
    .container-lg {
        max-width: 1140px;
    }
}

.sec {
    padding: var(--sec-pad) 0;
}

/* l'header e' fisso: senza questo margine il sopratitolo della sezione
   raggiunta da un'ancora finisce appiccicato al bordo inferiore */
.sec[id] {
    scroll-margin-top: 1.5rem;
}

.sec--white {
    background-color: var(--white);
}

.sec--paper {
    background-color: var(--paper);
}

.sec--hero {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
    padding-top: clamp(9rem, 16vw, 13rem);
}

/* Di norma a separare le sezioni basta l'alternanza dei fondi. Dove due
   sezioni adiacenti condividono il tono - oggi solo #genitorialita e
   #consulenze, che sono le due offerte prenotabili e stanno insieme di
   proposito - il confine lo segna un filetto. Scritto come condizione e non
   sul singolo id: se la coppia cambia o si scioglie, il filetto la segue.
   Il padding delle due sezioni lo lascia simmetrico, 128px sopra e sotto */
.sec--white + .sec--white > .container-lg,
.sec--paper + .sec--paper > .container-lg {
    position: relative;
}

/* Sta sul contenitore e non sulla sezione, che e' a tutta pagina: cosi' il
   filetto e' largo quanto il testo, come quelli dentro #percorso e #contatti.
   Risalito di --sec-pad, cioe' esattamente il padding della sezione, per
   cadere sul confine invece che sopra il sopratitolo */
.sec--white + .sec--white > .container-lg::before,
.sec--paper + .sec--paper > .container-lg::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--sec-pad));
    /* rientro pari al padding di .container-lg, che e' meta' della gutter di
       Bootstrap: cosi' il filetto e' largo quanto il testo e non quanto la
       scatola. Se quel padding cambia, va cambiato anche qui */
    left: 12px;
    right: 12px;
    height: 1px;
    background-color: var(--rule);
}

/* sotto i 992 il contenitore passa a 24px di padding, vedi in fondo al foglio */
@media (max-width: 991px) {

    .sec--white + .sec--white > .container-lg::before,
    .sec--paper + .sec--paper > .container-lg::before {
        left: 24px;
        right: 24px;
    }
}

/* ---------- Filetto-capitolo ---------- */

.sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Solo il segmento pieno sotto il sopratitolo, identico in ogni sezione */
.sec-rule {
    width: 88px;
    height: 2px;
    background-color: var(--ink);
}

/* ---------- Tipografia ---------- */

.eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.display-name {
    margin: 0.75rem auto 1.5rem;
    font-size: clamp(2.4rem, 6.5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    max-width: 16ch;
}

/* il margine sotto serviva a staccare il bottone dell'hero, tolto su
   richiesta della cliente. Con :last-child torna da solo se il bottone
   viene rimesso, invece di restare uno spazio orfano */
.lede:last-child {
    margin-bottom: 0;
}

.lede {
    max-width: 34ch;
    margin: 0 auto 2.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-main);
}

.sec-title {
    margin: 0 auto 1.75rem;
    font-size: clamp(1.9rem, 3.8vw, 2.7rem);
    line-height: 1.15;
    max-width: 24ch;
    text-align: center;
}

.sub-title {
    margin: 3.5rem 0 0;
    font-size: 1.35rem;
    text-align: center;
}

/* Blocco centrato, testo allineato a sinistra: il vuoto simmetrico
   si legge come margine, il testo resta scorrevole */
.measure {
    max-width: 62ch;
    margin-inline: auto;
}

.measure p {
    margin-bottom: 1.25rem;
}

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

.measure--center {
    text-align: center;
}

/* Paragrafo singolo: corpo più grande, così la stessa quantità di testo
   occupa più larghezza senza allungare la riga in caratteri */
.measure--lead {
    max-width: 78ch;
    font-size: 1.18rem;
    line-height: 1.6;
}

/* ---------- Hero ---------- */

.sec--hero .container-lg {
    text-align: center;
}

/* ---------- Bottone ---------- */

.btn-ink {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 1px solid var(--ink);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn-ink:hover {
    background-color: transparent;
    color: var(--ink);
}

/* ---------- Consulenze: testo a sinistra, operativo a destra ---------- */

.consulenze-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}

.consulenze-testo p {
    font-size: 1.18rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.consulenze-testo p:last-of-type {
    margin-bottom: 0;
}

/* A colonna singola l'introduttivo si allinea a quelli di percorso e contatti:
   stesso 78ch e stesso centraggio di .measure--lead + .measure--center, che
   qui non si possono riusare come classi perche' a due colonne il testo torna
   a sinistra. Il 78ch e' calcolato sul font del paragrafo, 1.18rem: sono gli
   stessi 858px degli altri due. Se un giorno si stringe .measure--lead verso
   i 90 caratteri, questa regola va stretta insieme. */
@media (max-width: 991px) {
    .consulenze-testo p {
        max-width: 78ch;
        margin-inline: auto;
        text-align: center;
    }

    /* A tutta larghezza il chevron finiva a 682px dal titolo che apre, mentre
       il contenuto della riga ne occupa 262, e il testo dei passi girava a
       ~100 caratteri. 62ch e' la misura di lettura del progetto e riavvicina
       l'accordion ai ~518px che ha nella colonna desktop */
    .consulenze-operativo {
        max-width: 62ch;
        margin-inline: auto;
    }

    /* da inline-block a blocco a larghezza contenuto: si centra da solo
       senza dover centrare il testo del contenitore */
    .consulenze-operativo .btn-ink {
        display: block;
        width: fit-content;
        margin-inline: auto;
    }
}

.consulenze-operativo .btn-ink {
    margin-top: 2.25rem;
}

@media (min-width: 992px) {
    .consulenze-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(3rem, 6vw, 5rem);
    }

    /* i due titoli aprono le rispettive colonne, non la sezione */
    .consulenze-testo .sec-title {
        margin-left: 0;
        text-align: left;
        max-width: 18ch;
    }

    .consulenze-operativo .sub-title {
        margin-top: 0;
        text-align: left;
    }
}

/* ---------- Passi a scomparsa ---------- */

.passi {
    margin-top: 1.75rem;
}

.passi details {
    border-top: 1px solid var(--rule-soft);
}

.passi details:last-of-type {
    border-bottom: 1px solid var(--rule-soft);
}

.passi summary {
    display: flex;
    align-items: baseline;
    gap: 1.15rem;
    padding: 1.15rem 0;
    cursor: pointer;
    /* toglie il triangolino nativo, sostituito dal chevron sotto */
    list-style: none;
}

.passi summary::-webkit-details-marker {
    display: none;
}

.passi summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.passo-num {
    flex: none;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

.passo-titolo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
}

.passi summary::after {
    content: '';
    flex: none;
    align-self: center;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s var(--ease);
}

.passi details[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.passo-corpo {
    padding: 0 0 1.35rem;
}

/* Il rientro allinea il testo al titolo del passo: 1.35rem del numero piu'
   1.15rem del gap del summary. Da 768 in su e' giusto, sotto sono 40px su
   342, il 12% della larghezza sottratto al testo piu' operativo del sito */
@media (min-width: 768px) {
    .passo-corpo {
        padding-left: calc(1.35rem + 1.15rem);
    }
}

/* Apertura morbida. Dove il browser non supporta ::details-content
   l'accordion resta istantaneo, come prima: nessuna regressione.
   Il vantaggio rispetto al JS e' che anima anche la chiusura
   automatica del passo precedente, gestita dal browser via name= */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
    :root {
        interpolate-size: allow-keywords;
    }

    .passi details::details-content {
        block-size: 0;
        overflow: hidden;
        opacity: 0;
        transition:
            block-size 0.35s var(--ease),
            opacity 0.3s var(--ease),
            content-visibility 0.35s allow-discrete;
    }

    .passi details[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

.passo-corpo p {
    margin-bottom: 0.9rem;
}

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

/* ---------- Fasi del percorso ---------- */

.fasi {
    margin: clamp(3.5rem, 6vw, 5.5rem) 0 3rem;
    padding: 0;
    list-style: none;
}

.fase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--rule-soft);
}

.fase:last-child {
    border-bottom: 1px solid var(--rule-soft);
}

.fase-when {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 0.35rem;
}

/* .fase-body non ha un cap di larghezza, di proposito: sotto i 992 il testo
   deve arrivare al filetto, che attraversa tutta la sezione, e fermarlo prima
   lasciava fino a 167px di vuoto a destra. Sopra i 992 le tre fasi sono
   colonne da ~350px, dove un cap a 62ch non morderebbe comunque */

.fase h3 {
    margin: 0 0 0.6rem;
    font-size: 1.35rem;
}

.fase p {
    margin: 0;
}

@media (min-width: 768px) and (max-width: 991px) {
    .fase {
        grid-template-columns: 7rem minmax(0, 1fr);
        row-gap: 0;
        column-gap: 2.75rem;
    }
}

/* Su desktop le tre fasi diventano colonne affiancate: la progressione
   nel tempo si legge da sinistra a destra e occupa tutta la larghezza */
@media (min-width: 992px) {
    .fasi {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    /* la barra sta sotto l'etichetta, non sopra: prima la parola,
       poi la riga, poi il testo della fase */
    .fase {
        display: block;
        padding: 0;
        border-top: none;
    }

    .fase:last-child {
        border-bottom: none;
    }

    .fase-when {
        display: block;
        padding-top: 0;
        padding-bottom: 0.7rem;
        margin-bottom: 1.35rem;
        border-bottom: 2px solid var(--ink);
    }
}

/* ---------- Chi sono ---------- */

.bio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.bio-text {
    max-width: none;
    /* a colonna singola tutta la sezione sta su un asse centrato, foto
       compresa. Torna a sinistra a due colonne, dove il testo affianca la
       foto e il centraggio spezzerebbe la sponda fra le due */
    text-align: center;
}

/* il nome sono 28 caratteri e .sec-title taglia a 24ch: a colonna singola
   c'e' spazio, e andare a capo e' solo la regola generica che stringe.
   Niente nowrap: sotto i ~700px non ci sta e deve poter spezzare.
   Non usare #chi-sono: l'id batterebbe per specificita' il .bio .sec-title
   che a due colonne rimette il cap a 18ch */
.bio .sec-title {
    max-width: none;
}

.bio-text p {
    margin-bottom: 1.25rem;
}

.bio-close {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-main);
}

.bio-figure {
    margin: 0;
}

.bio-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 420px;
    /* A colonna singola la foto si ferma a 420px e a sinistra lascerebbe fino
       a 523px di vuoto a destra. Nessun reset sopra i 992: li' sta in una
       colonna da 380px che riempie, quindi il centraggio e' gia' un no-op */
    margin-inline: auto;
}

@media (min-width: 992px) {
    /* sopratitolo e filetto a sinistra, allineati al titolo sotto */
    #chi-sono .sec-head,
    #consulenze .sec-head {
        align-items: flex-start;
    }

    /* qui il titolo apre la colonna di testo, non la sezione:
       centrarlo lo staccherebbe dal paragrafo che introduce */
    .bio .sec-title {
        margin-left: 0;
        text-align: left;
        max-width: 18ch;
    }

    .bio-text {
        max-width: 62ch;
        text-align: left;
    }

    .bio {
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 4rem;
        align-items: start;
    }

    .bio-figure {
        position: sticky;
        top: 120px;
        border-top: 2px solid var(--ink);
        padding-top: 1.25rem;
    }
}

/* ---------- Card: unica sezione che le tiene ---------- */

.cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card-principio {
    padding: 2.25rem 1.75rem;
    background-color: var(--white);
    border-top: 2px solid var(--ink);
}

/* non chiamarla .mark: in Bootstrap è l'evidenziatore giallo */
.principio-mark {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 1.5rem;
    color: var(--ink);
}

.card-principio h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.card-principio p {
    margin: 0;
}

/* ---------- Aree di attività ---------- */

.aree {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.aree li {
    padding: 1.75rem 0;
    border-top: 1px solid var(--rule-soft);
}

.aree h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.aree p {
    margin: 0;
    max-width: 54ch;
}

@media (min-width: 768px) {
    .aree {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3.5rem;
    }
}

/* ---------- Contatti ---------- */

.contatti {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 2.5rem 0 0;
}

.contatti>div {
    padding: 1.5rem 0;
    border-top: 1px solid var(--rule);
    /* a colonna singola le due voci seguono il resto della sezione, che e'
       centrato: sono un'e-mail e un indirizzo, cioe' testo breve, l'unico
       caso in cui il progetto ammette il centraggio. Da 768 in su tornano a
       sinistra, dove stanno affiancate in due colonne */
    text-align: center;
}

.contatti dt {
    margin-bottom: 0.35rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.contatti dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--text-main);
    /* rete di sicurezza per l'indirizzo e-mail sui 320px: break-word e non
       anywhere, così non spezza mai a metà parola se c'è di meglio */
    overflow-wrap: break-word;
}

.contatti a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.25s var(--ease);
}

.contatti a:hover {
    border-bottom-color: var(--ink);
}

.contatti address {
    margin: 0;
    font-style: normal;
}

@media (min-width: 768px) {
    .contatti>div {
        text-align: left;
    }

    .contatti {
        /* due sole voci: a tutta larghezza il blocco si sfilaccia. Si stringe
           sul contenuto e si centra; il testo resta a sinistra perche' i
           filetti coprono la colonna intera.
           fit-content e non una misura fissa: con 1fr le due colonne si
           pareggiano sulla piu' larga, quindi la larghezza segue il font
           davvero usato e l'indirizzo non puo' andare a capo nemmeno se
           Spectral non e' ancora stato caricato */
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3.5rem;
    }
}

/* ---------- 404 ---------- */

/* La 404 ha una sola sezione: senza questo il footer resta a mezza altezza
   sugli schermi alti, con il fondo del body scoperto sotto. Classe sul body
   e non :has(), cosi' non dipende dal supporto del selettore */
.pagina-404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.pagina-404 main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* cresce insieme a main: se no il gradiente finisce con il contenuto e
   resta una fascia bianca di body scoperto prima del footer */
.sec--404 {
    flex: 1 0 auto;
}

/* il paragrafo e' :last-child dentro .measure, quindi ha margin-bottom 0
   e il bottone gli finiva attaccato */
.sec--404 .btn-ink {
    margin-top: 2.25rem;
}

/* nella 404 l'header ha il solo nome: Bootstrap mette space-between sul
   contenitore della navbar, che con un elemento solo lo spinge a sinistra */
.pagina-404 header .container-lg {
    justify-content: center;
}

/* .navbar-brand di Bootstrap porta margin-right: 1rem, e il flex centra la
   scatola margini compresi: senza azzerarlo il nome resta 8px a sinistra */
.pagina-404 .navbar-brand {
    margin-right: 0;
}

/* ---------- Footer ---------- */

footer {
    padding: 3rem 0;
    background-color: var(--ink-deep);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* ---------- Torna su ---------- */

.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ink);
    background-color: var(--ink);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
        visibility 0.3s var(--ease), background-color 0.25s var(--ease),
        color 0.25s var(--ease);
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background-color: var(--white);
    color: var(--ink);
}

/* ---------- Mobile ---------- */

@media (max-width: 991px) {
    .container-lg {
        padding-left: 24px;
        padding-right: 24px;
    }

    .display-name {
        max-width: none;
    }
}

@media (max-width: 400px) {
    .brand {
        font-size: 1.02rem;
    }
}

@media (max-width: 340px) {
    .brand {
        font-size: 0.88rem;
    }
}

/* ---------- Pagina informativa (privacy policy) ---------- */

.sec--doc {
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

/* testo lungo: misura di lettura stretta e allineata a sinistra, non
   centrata come i paragrafi brevi della home */
.doc {
    max-width: 68ch;
    margin-inline: auto;
    text-align: left;
}

.doc p,
.doc li {
    margin-bottom: 1.15rem;
}

.doc h2 {
    margin: 3rem 0 1.1rem;
    font-size: 1.5rem;
    line-height: 1.25;
}

.doc h3 {
    margin: 2rem 0 0.9rem;
    font-size: 1.15rem;
}

.doc ul {
    padding-left: 1.35rem;
}

.doc li {
    margin-bottom: 0.7rem;
}

.doc a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.25s var(--ease);
}

.doc a:hover {
    border-bottom-color: var(--ink);
}

.doc-intro {
    font-size: 1.12rem;
    line-height: 1.6;
}

.doc-data {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--rule);
}

.doc-dati {
    list-style: none;
    padding-left: 0;
}

.doc-dati li {
    padding-left: 1.1rem;
    border-left: 2px solid var(--rule);
}

/* richiamo sui dati particolari: il fondo carta lo stacca dal corpo del
   testo senza introdurre un colore nuovo nella palette */
.doc-avviso {
    padding: 1.5rem 1.6rem;
    background-color: var(--paper);
    border-left: 3px solid var(--ink);
}

/* la tabella scorre da sola sotto i 520px invece di allargare la pagina */
.doc-tabella-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.doc-tabella {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.doc-tabella th,
.doc-tabella td {
    padding: 0.9rem 1rem 0.9rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule-soft);
}

.doc-tabella th {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom-color: var(--ink);
}

.doc-tabella td:first-child {
    padding-right: 2rem;
    color: var(--text-main);
}

.footer-link {
    margin-top: 0.6rem;
}

.footer-link a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.footer-link a:hover {
    color: #fff;
    border-bottom-color: #fff;
}