/** Copyright (c) 2026 Protocol-Z. All rights reserved. Proprietary and Confidential. **/

/*
    Sistema visivo delle pagine pubbliche: sito aziendale, Z Marine, legali, 404.
    Dashboard e viewer non lo usano: sono applicazioni, hanno il loro CSS in linea.
*/

:root {
    --bg: #06070a;
    --bg-elev: #0d0f14;
    --bg-sunken: #030405;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --text: #f6f7f9;
    --text-secondary: #9aa3ae;
    --text-tertiary: #7d8691;
    /*
        L'accento come colore del testo non e' l'accento come colore di un fondo. Su fondo
        scuro #0066ff a corpo piccolo sta a 4,17 contro 1, sotto la soglia AA: i numeri dei
        passi, le etichette in maiuscoletto e i collegamenti nel piede erano tutti li'.
        Questo e' lo stesso blu schiarito quanto basta; il fondo dei pulsanti resta --accent.
    */
    --accent-testo: #2b7fff;

    --accent: #0066ff;
    --accent-hover: #2b7fff;
    --accent-soft: rgba(0, 102, 255, 0.14);
    --accent-soft-strong: rgba(0, 102, 255, 0.24);
    --on-accent: #ffffff;

    --success: #1fcb84;
    --danger: #ff4d43;

    /*
        RAGGI CONTENUTI, NON ARROTONDATI.

        Misurati sul CSS vero di vercel.com, novecento kilobyte di regole: i raggi ricorrenti
        sono 6, 8 e 12 pixel, e il valore da pillola compare solo sui pulsanti e sulle
        etichette. Una scheda con l'angolo molto tondo si legge come un widget; con l'angolo
        piccolo si legge come un pannello, ed e' quello che rende quel sito quello che e'.
    */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /*
        IL VETRO E' UNO SOLO, ED E' QUELLO DEL PRODOTTO.

        Questi valori vengono da dist/viewer.html: sono il vetro che l'utente vede davvero
        quando apre un immobile. Averne una seconda versione nella vetrina vorrebbe dire che
        la prossima correzione ne aggiorna una sola, e che la demo somiglia al visualizzatore
        senza esserlo. Il vetro va dove ha una ragione fisica, cioe' dove qualcosa sta sopra
        qualcos'altro: le schede della rotaia, la finestra che si apre, il pannello sopra il
        modello, l'intestazione quando scorre. Da nessun'altra parte.
    */
    --vetro-bg: rgba(25, 25, 30, 0.45);
    --vetro-bordo: rgba(255, 255, 255, 0.08);
    --vetro-sfoca: 25px;
    --vetro-satura: 180%;
    /*
        I colori della misura, presi da viewer.html: la linea bianca con il tratto scuro
        sotto, il punto bianco con il bordo del colore dello strumento. Sul tema scuro il
        righello e' il blu di sistema piu' acceso, come li'.
    */
    --colore-righello: rgba(10, 132, 255, 0.55);
    --colore-righello-pieno: #0a84ff;
    --colore-linea: #ffffff;
    --punto-dentro: #ffffff;

    /* Una sola curva per tutto: entrate morbide, uscite decise. */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.44);
    --shadow-accent: 0 12px 30px rgba(0, 102, 255, 0.3);

    --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --header-h: 72px;

    /*
        LA LARGHEZZA CRESCE A SCALINI, IL TESTO NO.

        Fermarsi a 1200px su qualunque schermo lascia, su un monitor da 3440px, una colonna
        stretta in mezzo a due fasce vuote larghe un terzo di schermo per parte. Allargare
        tutto fino ai bordi e' l'errore opposto: una riga di testo lunga 200 caratteri non
        si legge, l'occhio perde il capo riga.

        Quindi cresce il contenitore, non la misura del testo: griglie, immagini e sequenze
        usano lo spazio in piu', mentre i paragrafi restano sotto i 75 caratteri per riga
        grazie ai `max-width` in `ch` dichiarati sui blocchi di testo.

        I margini laterali crescono insieme: a 40px su uno schermo largo il contenuto sembra
        incollato ai bordi.
    */
    --maxw: 1200px;
    /*
        Il primo schermo respira piu' del resto.

        Dove lo sfondo arriva ai bordi (l'acqua di Z Marine, l'alone del sito aziendale) un
        blocco di testo largo 1200px in mezzo a un monitor da 3440 sembra staccato da cio' che
        gli sta dietro: il velo che lo protegge finisce prima, e il titolo galleggia. Il primo
        schermo usa quindi un contenitore piu' largo, mentre la misura del testo resta quella
        di sempre, dichiarata in caratteri.
    */
    --maxw-largo: 1200px;
    --gutter: 40px;

    /*
        La misura del carattere segue il contenitore, non la finestra.

        Le clamp qui sotto hanno un tetto, e su uno schermo largo il tetto lo toccano subito:
        il contenitore cresce e il testo resta fermo, quindi il titolo sembra rimpicciolirsi
        man mano che lo schermo si allarga. Il tetto sale insieme a --maxw, di poco: un terzo
        di larghezza in piu' non vuole un terzo di corpo in piu', o il titolo diventa un
        cartellone.
    */
    --t-hero: clamp(2.6rem, 5.6vw, 4.6rem);
    --t-sezione: clamp(1.95rem, 4.2vw, 3.1rem);
    --t-guida: clamp(1.02rem, 1.4vw, 1.14rem);
    --t-scheda: 1.5rem;
    --t-corpo: 15px;
    --pad-scheda: 26px 24px 24px;

    /* Scala verticale: quattro valori, ogni blocco ne usa uno. */
    --sp-1: clamp(12px, 1.4vw, 18px);
    --sp-2: clamp(22px, 2.8vw, 34px);
    --sp-3: clamp(38px, 4.6vw, 60px);
    --sp-4: clamp(64px, 7vw, 104px);
}

/*
    UN COLORE PER PRODOTTO.

    L'attributo sta sul <body> della pagina, non nel CSS di ogni sito: cosi' le pagine
    condividono lo stesso foglio e cambiano solo accento e alone. Il valore chiaro serve al
    tema chiaro, dove lo stesso colore su fondo bianco sarebbe illeggibile a testo piccolo.

    Qui c'e' solo Z Marine perche' e' l'unico prodotto con una marca propria pubblicata: la
    radice usa il blu elettrico che e' gia' il valore predefinito piu' sopra. Un prodotto
    nuovo aggiunge il proprio blocco quando esce, non prima.
*/
[data-prodotto="z-marine"] {
    --accent: #00c9b1;
    --accent-hover: #29e0c9;
    --accent-soft: rgba(0, 201, 177, 0.14);
    --accent-soft-strong: rgba(0, 201, 177, 0.24);
    --accent-testo: #00c9b1;
    /* Sul teal chiaro il testo bianco sta a 2,1 contro 1: il pulsante prende l'inchiostro
       scuro della marca, che sullo stesso fondo sta a 7,88. */
    --on-accent: #04222a;
    --shadow-accent: 0 12px 30px rgba(0, 201, 177, 0.26);
    --blu-profondo: #04203a;
}

[data-theme="light"] {
    --bg: #ffffff;
    --bg-elev: #f7f8fa;
    --bg-sunken: #eef0f4;
    --surface: rgba(9, 17, 33, 0.032);
    --surface-strong: rgba(9, 17, 33, 0.062);
    --border: rgba(9, 17, 33, 0.1);
    --border-strong: rgba(9, 17, 33, 0.18);
    --text: #08090b;
    --text-secondary: #545c66;
    --text-tertiary: #6b737d;
    --accent-testo: #0058e0;
    --accent-soft: rgba(0, 102, 255, 0.08);
    --accent-soft-strong: rgba(0, 102, 255, 0.15);
    --vetro-bg: rgba(255, 255, 255, 0.35);
    --vetro-bordo: rgba(255, 255, 255, 0.4);
    --colore-righello: rgba(0, 122, 255, 0.45);
    --colore-righello-pieno: #007aff;
    --colore-linea: #ffffff;
    --punto-dentro: #ffffff;
    --shadow-sm: 0 1px 3px rgba(9, 17, 33, 0.06);
    --shadow-md: 0 12px 32px rgba(9, 17, 33, 0.08);
    --shadow-lg: 0 28px 70px rgba(9, 17, 33, 0.1);
    --shadow-accent: 0 12px 28px rgba(0, 102, 255, 0.18);
}

/* Col tema chiaro gli accenti scendono di luminosita', altrimenti il testo piccolo
   dell'accento su fondo bianco non si legge. */
/* Discendente e non composto: il tema sta su <html>, il prodotto sul <body>. */
[data-theme="light"] [data-prodotto="z-marine"] { --accent: #00756b; --accent-testo: #00756b; --on-accent: #ffffff; --accent-soft: rgba(0, 134, 122, 0.09); --accent-soft-strong: rgba(0, 134, 122, 0.16); }

*, *::before, *::after { box-sizing: border-box; }

/*
    IL QUADRATO BLU AL CLIC.

    Il contorno di sistema serve a chi naviga da tastiera e non si tocca. Quello che
    dava fastidio e' il riquadro che compare cliccando col dito o col mouse, che a chi
    usa la tastiera non serve e a tutti gli altri sembra un errore. Si toglie solo
    quello: `:focus-visible` continua a disegnare il contorno, nel colore del prodotto.
*/
:focus:not(:focus-visible) { outline: none; }
* { -webkit-tap-highlight-color: transparent; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

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; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

:root {
    --w-normale: min(100% - var(--gutter), var(--maxw));
    --w-largo: min(100% - var(--gutter), var(--maxw-largo));
}

.wrap { width: var(--w-normale); margin-inline: auto; position: relative; z-index: 1; }

/*
    Il primo schermo e' piu' largo delle sezioni sotto, ma parte dallo stesso bordo
    sinistro: il riempimento recupera la meta' di differenza che il centraggio gli
    metterebbe a sinistra, e la larghezza in piu' va tutta a destra, dove sta il disegno.
    Senza, dai 1920 in su il titolo partiva ottanta pixel piu' a sinistra di ogni altra
    sezione, e a colpo d'occhio sembrava un errore di impaginazione.
*/
.wrap-largo {
    width: var(--w-largo);
    padding-left: calc((var(--w-largo) - var(--w-normale)) / 2);
}

@media (min-width: 1600px) {
    :root { --maxw: 1400px; --gutter: 64px; --t-hero: 5rem; --t-sezione: 3.4rem; --t-guida: 1.2rem; --t-scheda: 1.6rem; --t-corpo: 15.5px; --pad-scheda: 30px 28px 28px; --maxw-largo: 1560px; }
}
@media (min-width: 2000px) {
    :root { --maxw: 1600px; --gutter: 96px; --t-hero: 5.5rem; --t-sezione: 3.7rem; --t-guida: 1.26rem; --t-scheda: 1.7rem; --t-corpo: 16px; --pad-scheda: 34px 32px 32px; --maxw-largo: 1900px; }
}
@media (min-width: 2560px) {
    :root { --maxw: 1760px; --gutter: 128px; --t-hero: 5.9rem; --t-sezione: 3.9rem; --t-guida: 1.3rem; --t-scheda: 1.78rem; --t-corpo: 16.5px; --pad-scheda: 38px 36px 34px; --maxw-largo: 2200px; }
}

a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; }

/* Alone tenue in cima. Statico: non costa nulla in animazione. */
.bg-glow {
    position: fixed;
    inset: -20% 0 auto 0;
    height: 66vh;
    background: radial-gradient(58% 58% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Senza, chi naviga da tastiera riattraversa l'intestazione a ogni pagina. */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* --- Intestazione ------------------------------------------------------------------- */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-bottom: 1px solid var(--border);
    /* Livello proprio, dichiarato. Un'intestazione agganciata con lo sfondo sfocato, sopra una
       pagina che anima una trasformazione, su Safari puo' perdere i clic sui suoi stessi tasti:
       succede quando il livello dell'intestazione viene ricomposto insieme a quello che ha
       sotto. Dichiarandolo, la mappa dei clic resta la sua. */
    transform: translateZ(0);
}

/*
    L'intestazione e' agganciata in alto e copre i primi 72 pixel: senza questo, arrivando a
    una sezione da un'ancora o da uno scorrimento programmato il suo titolo finisce sotto di
    lei. Vale per le sezioni e per i riquadri che si portano in vista.
*/
main section, .demo-scena, [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
/* Il file ha rapporto 2,28: si fissa l'altezza e la larghezza segue. */
.brand img { height: 24px; width: auto; display: block; }
/* La marca di Z Marine e' vettoriale e prende il colore dal testo: stessa altezza
   dell'immagine del gruppo, larghezza libera perche' il profilo e' molto lungo. */
.brand-segno { display: inline-flex; align-items: center; color: var(--accent); }
.brand-segno svg { height: 17px; width: auto; display: block; }
@media (max-width: 560px) { .brand-segno svg { height: 15px; } }

.head-actions { flex: none; display: flex; align-items: center; gap: 8px; }
header .btn, .icon-btn { white-space: nowrap; }

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-strong); border-color: var(--border-strong); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/*
    MICRO ANIMAZIONI DELLE ICONE.

    Girano solo i meridiani, quindi la sfera ruota su se stessa invece di rotolare.

    TRE CORREZIONI, E SERVONO TUTTE E TRE. La prima: senza `perspective` un `rotateY` non e'
    una rotazione ma uno schiacciamento, a novanta gradi i meridiani spariscono del tutto e
    poi tornano specchiati; con la prospettiva il lato lontano rimpicciolisce e si legge come
    una sfera. La seconda: il fotogramma di partenza va dichiarato, altrimenti l'animazione
    parte dal valore calcolato in quel momento, che al passaggio del puntatore e' meta' giro, e
    ogni ciclo fa uno scatto. La terza: transizione e animazione non possono insistere sulla
    stessa proprieta', quindi a tendina aperta la transizione si spegne.
*/
.mondo-meridiani {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.9s var(--ease);
}
.icon-btn:hover .mondo-meridiani,
.icon-btn:focus-visible .mondo-meridiani { transform: perspective(60px) rotateY(180deg); }
#lang-toggle[aria-expanded="true"] .mondo-meridiani {
    transition: none;
    animation: mondoGira 6s linear infinite;
}
@keyframes mondoGira {
    from { transform: perspective(60px) rotateY(0deg); }
    to { transform: perspective(60px) rotateY(360deg); }
}

/* Il sole e la luna del tema non si scambiano di colpo: escono ruotando. */
#theme-toggle svg { transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
    .mondo-meridiani { transition: none; animation: none !important; }
}

.icon-btn svg { width: 17px; height: 17px; flex: none; }

/* Tasto tema: le due icone si scambiano ruotando, non sparendo di colpo. */
#theme-toggle { overflow: hidden; }
#theme-toggle svg { position: absolute; transition: transform 0.5s var(--ease), opacity 0.35s var(--ease); }
.ico-sun { transform: rotate(0) scale(1); opacity: 1; }
.ico-moon { transform: rotate(-70deg) scale(0.5); opacity: 0; }
[data-theme="light"] .ico-sun { transform: rotate(70deg) scale(0.5); opacity: 0; }
[data-theme="light"] .ico-moon { transform: rotate(0) scale(1); opacity: 1; }

/* --- Tendina lingua ----------------------------------------------------------------- */
/* Una tendina e non uno scambio automatico: le lingue possono diventare piu' di due. */
/* La tendina e' un contenitore in linea: senza `display: flex` il pulsante dentro
   ereditava la riga di testo e restava un paio di pixel piu' basso di quello del tema. */
.lang { position: relative; display: flex; }
.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    padding: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    box-shadow: var(--shadow-md);
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    visibility: hidden;
}
.lang.aperta .lang-menu { opacity: 1; transform: none; visibility: visible; }
.lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-menu a:hover { background: var(--surface); color: var(--text); }
.lang-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-menu a[aria-current="true"] { color: var(--accent-testo); }
.lang-menu .spunta { width: 15px; height: 15px; opacity: 0; }
.lang-menu a[aria-current="true"] .spunta { opacity: 1; }

/* --- Pulsanti ----------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-strong); border-color: var(--border-strong); }

/* La freccia sta nel proprio disco: il pulsante resta un oggetto solo. */
.btn .pallino {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: -8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: transform 0.4s var(--ease);
}
.btn-ghost .pallino { background: var(--surface-strong); }
.btn .pallino svg { width: 12px; height: 12px; }
.btn:hover .pallino { transform: translate(2px, -2px); }

/* --- Blocchi di testo --------------------------------------------------------------- */
section { padding: var(--sp-4) 0 0; }
section:last-of-type { padding-bottom: var(--sp-4); }

.display { font-weight: 600; letter-spacing: -0.04em; line-height: 1.04; }
h2.section-title { font-size: var(--t-sezione); letter-spacing: -0.035em; max-width: 22ch; }
p.section-lead { color: var(--text-secondary); max-width: 68ch; margin: var(--sp-1) 0 0; font-size: var(--t-guida); }

/* --- Schede ------------------------------------------------------------------------- */
/* Guscio esterno e nucleo interno con raggio piu' piccolo: curve concentriche. */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 7px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.card-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--pad-scheda);
    border-radius: calc(var(--radius-lg) - 7px);
    background: var(--bg-elev);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .card-inner { background: #ffffff; box-shadow: var(--shadow-sm); }
a.card:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-strong); }
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.card h3 { font-size: var(--t-scheda); margin: 14px 0 10px; }
.card p { color: var(--text-secondary); font-size: var(--t-corpo); margin: 0 0 var(--sp-2); flex: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.card-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-testo);
    flex: none;
}
.card-icon .material-symbols-outlined { font-size: 22px; }

/* --- Moduli ------------------------------------------------------------------------- */
.campo { display: grid; gap: 6px; margin-bottom: 13px; }
.campo label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.campo input, .campo textarea, .campo select {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
[data-theme="light"] .campo input,
[data-theme="light"] .campo textarea,
[data-theme="light"] .campo select { background: #ffffff; }
.campo textarea { resize: vertical; min-height: 88px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--text-tertiary); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}
/* L'errore sta sul campo: con cinque campi "controlla i dati" non dice quale. */
.campo.errato input, .campo.errato textarea, .campo.errato select { border-color: var(--danger); }
.campo .errore { font-family: var(--font); font-size: 13px; color: var(--danger); letter-spacing: 0; text-transform: none; font-weight: 400; }
.campo:not(.errato) .errore { display: none; }

.form-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

/* Consenso: senza spunta il modulo non parte. */
.consenso { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 18px; }
.consenso input[type="checkbox"] {
    appearance: none;
    width: 20px; height: 20px;
    margin: 1px 0 0;
    flex: none;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consenso input[type="checkbox"]::after {
    content: "";
    width: 10px; height: 6px;
    border-left: 2px solid var(--on-accent);
    border-bottom: 2px solid var(--on-accent);
    transform: rotate(-45deg) scale(0.5);
    opacity: 0;
    transition: transform 0.2s var(--ease), opacity 0.15s var(--ease);
}
.consenso input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.consenso input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.consenso input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consenso label { font-size: 14px; color: var(--text-secondary); line-height: 1.5; cursor: pointer; }
.consenso a { color: var(--accent-testo); text-decoration: underline; text-underline-offset: 2px; }
.consenso.errato input[type="checkbox"] { border-color: var(--danger); }
.consenso .errore { display: block; font-size: 13px; color: var(--danger); margin-top: 4px; }
.consenso:not(.errato) .errore { display: none; }

.form-esito { margin: 14px 0 0; font-size: 14.5px; min-height: 1.4em; }
.form-esito.ok { color: var(--success); }
.form-esito.ko { color: var(--danger); }
.form-esito a { color: inherit; text-decoration: underline; }

/* --- Comparsa allo scorrimento ------------------------------------------------------ */
/* La classe che nasconde la mette il JavaScript: senza JavaScript la pagina resta leggibile. */
/*
    L'ENTRATA E' UN SEGNO, NON UN EFFETTO.

    Ventiquattro pixel in sette decimi di secondo su ogni blocco della pagina si legge come
    una pagina che fatica: chi scorre veloce vede il testo inseguirlo. Adesso il movimento e'
    piu' corto e piu' svelto, e non ce l'hanno piu' i sottotitoli, che arrivavano con una
    dissolvenza loro subito dopo quella del titolo a cui appartengono.
*/
.js-anim .rivela { opacity: 0; transform: translateY(14px); }
.rivela {
    transition: opacity 0.45s var(--ease), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ritardo, 0s);
}
.rivela.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js-anim .rivela { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    /* Solo icona: la sigla accanto al mappamondo e' ridondante e a 390px la barra sforava. */
    .head-actions { gap: 6px; }
    .icon-btn { padding: 0; width: 40px; justify-content: center; }
    .icon-btn .lang-code { display: none; }
    .btn { padding: 0 16px; font-size: 14px; }
    .brand-nome { font-size: 15px; }
    body { font-size: 16px; }
}

/*
    Sotto i 420 pixel il nome scritto sparisce e resta il segno.

    Diceva `.brand span`, ma anche il segno di Z Marine e' uno span: su telefono spariva
    tutto e l'intestazione restava senza marca. Adesso la regola nomina il testo.
*/
@media (max-width: 420px) {
    .brand-nome { display: none; }
}

/* --- Blocchi condivisi dalle pagine di prodotto ------------------------------------- */
/* --- Partner ------------------------------------------------------------------------ */
/*
    La fascia scorreva all'infinito e i loghi erano allineati sul riquadro, non sulla loro
    altezza ottica, quindi ballavano. Adesso e' una griglia ferma: c'e' tutto quello che
    c'era, e si legge invece di passare.
*/
/*
    OTTO CELLE, E LE COLONNE DEVONO DIVIDERE OTTO.

    Con `auto-fit` e una larghezza minima il numero di colonne lo decide la finestra, e a
    tre, cinque, sei o sette colonne l'ultima riga resta mezza vuota: uno o due riquadri
    grigi accanto ai marchi, che si leggono come un pezzo che manca. Le tre soglie qui sono
    tutte divisori di otto, quindi la griglia e' sempre piena a qualunque larghezza.
*/
.partner-griglia {
    margin-top: var(--sp-3);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
@media (max-width: 1100px) { .partner-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partner-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-cella {
    position: relative;
    display: grid;
    place-items: center;
    padding: 26px 18px;
    background: var(--bg);
    min-height: 92px;
    border: 0;
    font: inherit;
    width: 100%;
}
/* La sola cella che si apre lo dice con un segno piccolo, non con un colore diverso. */
.partner-apre { cursor: pointer; }
.partner-piu {
    position: absolute; top: 10px; right: 10px;
    font-size: 16px; color: var(--text-tertiary);
    transition: color 0.25s var(--ease);
}
.partner-apre:hover .partner-piu, .partner-apre:focus-visible .partner-piu { color: var(--accent-testo); }
.partner-apre:focus-visible { outline: 2px solid var(--accent-testo); outline-offset: -2px; }
/*
    I MARCHI SI INVERTONO SUL TEMA IN CUI SPARIREBBERO, E LE TINTE SI RIPORTANO AL POSTO.

    Sette file su otto sono scritte quasi nere su fondo trasparente, e Cubish e' bianco:
    lasciati come sono, ognuno sparisce su un tema. Portarli in grigio e alzare la
    luminosita', che e' quello che fa il sito in produzione, non basta: `brightness`
    moltiplica, e il nero moltiplicato resta nero. Provato sui file veri, su fondo scuro la
    scritta di Amazon e quella di Cloudflare sparivano lo stesso.

    Invertire funziona, ma da solo cambia anche le tinte: l'arancione di Amazon diventa
    azzurro. Ruotando la tonalita' di mezzo giro dopo l'inversione le tinte tornano dove
    erano, e si ottengono tutte e due le cose: la scritta si legge e il marchio resta il suo.
    E' il modo standard di portare un'immagine su un fondo dell'altro colore.

    A riposo restano in grigio, perche' sono otto fornitori e non otto marchi che gridano.
    Il colore torna al passaggio del mouse.
*/
.partner-cella img {
    max-width: 118px;
    max-height: 30px;
    width: auto;
    height: auto;
    opacity: 0.72;
    filter: grayscale(1) invert(1) contrast(1.08);
    transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}
[data-theme="light"] .partner-cella img { filter: grayscale(1) contrast(1.05); opacity: 0.55; }
/* Cubish e' l'unico chiaro: gli tocca l'inverso, tema per tema. */
.partner-cella img.partner-chiaro { filter: grayscale(1) contrast(1.05); opacity: 0.82; }
[data-theme="light"] .partner-cella img.partner-chiaro { filter: grayscale(1) invert(1) contrast(1.08); opacity: 0.6; }

/*
    Al passaggio del mouse il marchio torna com'e', con i suoi colori e la sua scritta: la
    fila in grigio dice che sono otto fornitori, chi si ferma su uno vuole vedere quale.
*/
.partner-cella:hover img,
.partner-cella:focus-visible img {
    opacity: 1;
    filter: invert(1) hue-rotate(180deg) saturate(1.35);
}
[data-theme="light"] .partner-cella:hover img,
[data-theme="light"] .partner-cella:focus-visible img { opacity: 1; filter: none; }
.partner-cella:hover img.partner-chiaro,
.partner-cella:focus-visible img.partner-chiaro { opacity: 1; filter: none; }
[data-theme="light"] .partner-cella:hover img.partner-chiaro,
[data-theme="light"] .partner-cella:focus-visible img.partner-chiaro {
    opacity: 1;
    filter: invert(1) hue-rotate(180deg) saturate(1.2);
}
/*
    I marchi di piu' colori tornano ai loro senza passare da nessun filtro. Invertire e
    riportare la tonalita' indietro rimette a posto una tinta sola: su Amazon e Cloudflare,
    che sono arancione e basta, funziona e si nota appena; su Google e Microsoft, che ne
    hanno quattro, le altre finiscono dove capita e il rosso diventa una cosa che non e'.
    La loro scritta e' grigio medio, quindi si legge lo stesso nei due temi.
*/
.partner-cella:hover img.partner-tinte,
.partner-cella:focus-visible img.partner-tinte,
[data-theme="light"] .partner-cella:hover img.partner-tinte,
[data-theme="light"] .partner-cella:focus-visible img.partner-tinte { opacity: 1; filter: none; }
.partner-cella span { color: var(--text-tertiary); font-size: 14px; font-weight: 550; letter-spacing: -0.01em; }

/*
    LE DOMANDE FREQUENTI, UNA VOLTA SOLA.

    Erano due blocchi quasi identici, uno in home.css e uno in z-marine.css, e infatti gia'
    divergevano di un decimo di rem sul titolo. Qui e' una regola sola per tutte e due le
    pagine.

    Ogni domanda porta la sua icona: in un elenco di undici voci chiuse e' l'unica cosa che
    si vede prima di leggere, e il colore che cambia con la voce toglie l'effetto muro. Le
    icone le sceglie tools/build-site.mjs, una per domanda.
*/
.domande, .faq-elenco { margin-top: var(--sp-3); border-top: 1px solid var(--border); }
.domande details, .faq-elenco details { border-bottom: 1px solid var(--border); }
.domande summary, .faq-elenco summary {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 4px; cursor: pointer; list-style: none;
    font-size: clamp(1.02rem, 1.6vw, 1.16rem); font-weight: 520; letter-spacing: -0.015em;
}
.domande summary::-webkit-details-marker,
.faq-elenco summary::-webkit-details-marker { display: none; }
/*
    La tinta di ogni domanda la scrive la build: e' la scala delle schede percorsa dall'alto
    in basso, quattro capi e i passaggi in mezzo. Qui restano solo i due capi che servono al
    riquadro della guida sotto la demo.
*/
:root { --scala-a: #0066ff; --scala-b: #1fcb84; }
[data-prodotto="z-marine"] { --scala-a: #00c9b1; --scala-b: #3a8dde; }
.domanda-icona {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tinta, var(--accent)) 22%, transparent);
    color: var(--text);
    font-size: 20px;
}
/* Il testo prende lo spazio che avanza, cosi' la freccia resta all'estremo destro. */
.domande summary > span:not(.domanda-icona),
.faq-elenco summary > span:not(.domanda-icona) { flex: 1 1 auto; min-width: 0; }
.domande summary::after, .faq-elenco summary::after {
    content: ""; flex: none; width: 11px; height: 11px;
    border-right: 1.8px solid var(--text-tertiary); border-bottom: 1.8px solid var(--text-tertiary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.22s var(--ease);
}
.domande details[open] summary::after,
.faq-elenco details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
/*
    Aprendo, e passandoci sopra, cambia colore la sola domanda: il riquadro dell'icona tiene
    la sua tinta e l'icona il colore del testo. Colorando tutto il `summary` diventava blu
    anche il simbolo dentro il riquadro, e la riga si leggeva come un errore.
*/
.domande summary:hover > span:not(.domanda-icona),
.faq-elenco summary:hover > span:not(.domanda-icona),
.domande details[open] summary > span:not(.domanda-icona),
.faq-elenco details[open] summary > span:not(.domanda-icona) { color: var(--accent-testo); }
.domande p, .faq-elenco p {
    margin: 0; padding: 0 4px 22px 54px;
    max-width: 70ch; color: var(--text-secondary); font-size: var(--t-corpo);
}
@media (max-width: 560px) {
    .domande p, .faq-elenco p { padding-left: 4px; }
}


/*
    LA ROTAIA E LA FINESTRA DELLA SCHEDA STANNO QUI, NON IN UNA PAGINA.

    Le usa la pagina alla radice e le usa Z Marine, e sono lo stesso componente: fila che
    scorre di lato, frecce solo dove c'e' un puntatore, scheda di vetro che si apre in una
    finestra al centro. Tenerne due copie vuol dire che la prossima correzione ne sistema una.
*/

/* --- La rotaia -------------------------------------------------------------------- */
/*
    LE SCHEDE SCORRONO DI LATO, E SU DESKTOP ANCHE.

    Erano diventate una pila che si impilava con lo scorrimento. Su desktop non si capiva
    che ci fosse dell'altro, e su telefono le schede erano alte quanto lo schermo. Qui
    tornano a scorrere di lato in tutte e due i casi: con il dito sul telefono, con le
    frecce e con la tastiera su desktop. L'ultima scheda si intravede sul bordo destro,
    che e' il modo in cui una fila dice di continuare senza scriverlo.
*/
/*
    LA FILA ARRIVA AL BORDO, LA PRIMA SCHEDA RESTA ALLINEATA AL TESTO.

    La rotaia sta dentro `.wrap`, che e' centrato e largo `100% - gutter`: le schede
    finivano dove finisce il testo, con una striscia vuota a destra, e su telefono si
    perdevano venti pixel per parte che sono un decimo di scheda. Uscendo di mezza gutter
    per lato la fila occupa tutta la larghezza utile e l'ultima scheda continua oltre il
    bordo, che e' il modo in cui una fila dice di proseguire. Il riempimento rimette dentro
    la prima scheda, quindi il margine sinistro resta quello del titolo sopra.

    Niente `vw`: con la barra di scorrimento visibile `100vw` e' piu' larga della pagina e
    la finestra prende scorrimento orizzontale. La gutter invece e' la stessa misura che
    usa `.wrap`, quindi i due conti non possono divergere.
*/
.rotaia-guscio {
    position: relative;
    margin-top: var(--sp-3);
    margin-inline: calc(var(--gutter) / -2);
}

.rotaia {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Il riempimento laterale allinea la prima scheda al testo della sezione. Lo stesso
       valore va su `scroll-padding`, altrimenti lo scatto porta la scheda contro il bordo
       invece che al margine del testo. */
    padding: 4px calc(var(--gutter) / 2) var(--sp-1);
    scroll-padding-inline: calc(var(--gutter) / 2);
}
.rotaia::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .rotaia { scroll-behavior: auto; } }

.scheda {
    flex: 0 0 clamp(260px, 78vw, 340px);
    scroll-snap-align: start;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pad-scheda);
    min-height: 260px;
    text-align: left;
    border: 0.5px solid var(--vetro-bordo);
    border-radius: var(--radius-lg);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    /*
        Vetro, con dentro una punta del colore della scheda. Il colore sta nel fondo e non
        nel testo, cosi' le sei schede si distinguono a colpo d'occhio senza che il testo
        debba cambiare colore e senza rifare il conto del contrasto per ognuna.
    */
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--tinta, var(--accent)) 26%, transparent), transparent 62%),
        var(--vetro-bg);
    backdrop-filter: blur(var(--vetro-sfoca)) saturate(var(--vetro-satura)) brightness(1.05);
    -webkit-backdrop-filter: blur(var(--vetro-sfoca)) saturate(var(--vetro-satura)) brightness(1.05);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.scheda:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.scheda:focus-visible { outline: 2px solid var(--accent-testo); outline-offset: 3px; }
/*
    SUL TEMA CHIARO IL VETRO SPEGNE LA TINTA.

    Il fondo del vetro chiaro e' bianco al 35 per cento, e sopra un fondo pagina bianco una
    tinta al 26 per cento arriva a un grigio colorato: le sei schede si distinguevano appena
    fra loro. Qui la tinta sale e il vetro sotto diventa piu' coperto, cosi' il colore resta
    quello di marca invece di essere una sua ombra. Il testo e' comunque rimisurato dalla
    prova sul contrasto, che compone gli strati traslucidi.
*/
[data-theme="light"] .scheda {
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--tinta, var(--accent)) 30%, transparent),
            color-mix(in srgb, var(--tinta, var(--accent)) 6%, transparent) 72%),
        rgba(255, 255, 255, 0.62);
    border-color: color-mix(in srgb, var(--tinta, var(--accent)) 26%, transparent);
}

.scheda-icona {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--vetro-bordo);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tinta, var(--accent)) 22%, transparent);
}
.scheda-icona .material-symbols-outlined { font-size: 22px; }
.scheda h3 { font-size: var(--t-scheda); letter-spacing: -0.025em; margin: 0; }
.scheda p { margin: 0; color: var(--text-secondary); font-size: var(--t-corpo); }
/* La freccia dice che la scheda si apre. Sta in fondo, dove finisce di leggere. */
.scheda-apri {
    margin-top: auto; padding-top: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-tertiary); font-size: 13px;
}
.scheda:hover .scheda-apri { color: var(--text); }
.scheda-apri .material-symbols-outlined { font-size: 17px; transition: transform 0.3s var(--ease); }
.scheda:hover .scheda-apri .material-symbols-outlined { transform: translate(2px, -2px); }

/* Le frecce compaiono solo dove c'e' un puntatore: sul telefono si scorre con il dito. */
.rotaia-freccia {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    display: none;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    z-index: 5;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.rotaia-freccia:hover { background: var(--surface-strong); border-color: var(--text-tertiary); }
.rotaia-freccia[disabled] { opacity: 0.3; cursor: default; }
.rotaia-freccia.prima { left: -20px; }
.rotaia-freccia.dopo { right: -20px; }
@media (hover: hover) and (min-width: 900px) { .rotaia-freccia { display: grid; } }

/* --- La finestra della scheda ------------------------------------------------------ */
/*
    <dialog> e non un div: il browser sa gia' chiudere con Escape, mettere il fondo dietro
    inerte e riportare il fuoco alla scheda da cui si e' partiti. Scriverlo a mano vuol dire
    riscrivere quelle tre cose e sbagliarne una.
*/
.foglio { border: 0; padding: 0; background: none; max-width: min(560px, calc(100% - 28px)); color: var(--text); }

/*
    L'APERTURA E LA CHIUSURA SONO ANIMATE, E LO FA IL CSS.

    Una `<dialog>` aperta con showModal() compare e sparisce di colpo, perche' passa da
    `display: none` a `display: block`: non c'e' niente da interpolare. Le tre parti che
    servono sono `@starting-style`, che dichiara da dove parte alla prima comparsa, e le due
    proprieta' discrete `overlay` e `display` messe in transizione con `allow-discrete`, che
    tengono l'elemento dipinto finche' l'uscita non e' finita. Senza quelle due la chiusura
    salta comunque, anche con la transizione dichiarata.

    Niente JavaScript e niente classi da togliere a timer: un timer che non torna con la
    durata del CSS e' il modo in cui queste animazioni si rompono sei mesi dopo.
*/
.foglio, .finestra {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition:
        opacity 0.24s var(--ease),
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        overlay 0.34s allow-discrete,
        display 0.34s allow-discrete;
}
.foglio[open], .finestra[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style {
    .foglio[open], .finestra[open] { opacity: 0; transform: translateY(14px) scale(0.97); }
}

.foglio::backdrop, .finestra::backdrop {
    background: rgba(3, 5, 9, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.foglio[open]::backdrop, .finestra[open]::backdrop { opacity: 1; }
@starting-style {
    .foglio[open]::backdrop, .finestra[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .foglio, .finestra, .foglio::backdrop, .finestra::backdrop { transition: none; transform: none; }
}
.foglio-corpo {
    position: relative;
    padding: clamp(26px, 3.6vw, 40px);
    border: 0.5px solid var(--vetro-bordo);
    border-radius: var(--radius-xl);
    /*
        Qui dentro c'e' da leggere, quindi il vetro e' piu' fitto che sulla scheda chiusa:
        un fondo semitrasparente sopra un testo lungo lo rende faticoso, e il contrasto
        misurato scende sotto la soglia. La punta di colore resta, come firma.
    */
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--tinta, var(--accent)) 20%, transparent), transparent 55%),
        color-mix(in srgb, var(--bg-elev) 92%, transparent);
    backdrop-filter: blur(var(--vetro-sfoca)) saturate(var(--vetro-satura));
    -webkit-backdrop-filter: blur(var(--vetro-sfoca)) saturate(var(--vetro-satura));
    box-shadow: var(--shadow-lg);
}
.foglio-icona {
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 1px solid var(--vetro-bordo); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--tinta, var(--accent)) 24%, transparent);
    margin-bottom: 16px;
}
.foglio h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.03em; margin: 0 0 12px; }
.foglio p { margin: 0; color: var(--text-secondary); font-size: var(--t-corpo); max-width: 56ch; }
.foglio-chiudi {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid var(--vetro-bordo); border-radius: 50%;
    background: none; color: var(--text-secondary); cursor: pointer;
}
.foglio-chiudi:hover { background: var(--surface-strong); color: var(--text); }


/* --- Contatto ---------------------------------------------------------------------- */
/*
    Il modulo si stringe e si arrotonda.

    Occupava piu' spazio di quanto ne chiedessero cinque campi: quarantaquattro pixel di
    riempimento e trentadue di stacco fra le due colonne su una scheda gia' larga. Qui il
    riempimento scende, lo stacco anche, e il raggio sale a ventiquattro, che e' l'unica
    scheda del sito abbastanza grande da reggerlo. I campi seguono, da sei a dieci.
*/
.contact {
    margin-top: var(--sp-3);
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(20px, 2.4vw, 34px);
    padding: clamp(20px, 2.6vw, 32px);
    border-radius: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
}
@media (max-width: 820px) { .contact { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } }
.contact-testo { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-testo p { margin: 0; color: var(--text-secondary); font-size: var(--t-corpo); }
/*
    Stava incollato al fondo della colonna con `margin-top: auto`: sul desktop la colonna e'
    alta quanto il modulo accanto, quindi fra il paragrafo e l'indirizzo restavano trecento
    pixel di niente. Adesso segue il testo.
*/
.contact-diretto { margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.contact-diretto b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; margin-bottom: 6px; }
.contact-diretto a { color: var(--accent-testo); font-weight: 500; text-decoration: none; }
.contact-diretto a:hover { text-decoration: underline; }