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

/*
    La pagina alla radice. Eredita da corporate.css i colori, la scala di larghezza, le
    schede, i moduli, l'intestazione e il piede: qui c'e' solo cio' che questa pagina ha e
    le altre no, cioe' il primo schermo, la demo, le rotaie di schede, i portali, i partner e
    le domande.

    L'accento resta il blu elettrico #0066ff, che e' gia' il valore predefinito di
    corporate.css: questa pagina non dichiara data-prodotto e quindi lo eredita.
*/

/* --- Primo schermo ------------------------------------------------------------------ */
/*
    Un titolo fermo.

    Prima qui partivano quattro animazioni insieme: due titoli in dissolvenza legati allo
    scorrimento, una parola che si scriveva da sola, cinque quadratini colorati che
    galleggiavano e il riquadro che pulsava di blu. La pagina restava inoltre bloccata per
    l'ottanta per cento di altezza in piu' mentre il titolo cambiava, ed e' da li' che
    veniva buona parte degli scatti dello scorrimento.
*/
.hero {
    /*
        L'aria sopra il titolo cresce con lo schermo ma parte bassa: su un telefono da 844
        pixel di altezza, 11vh sommati all'intestazione facevano centottanta pixel di niente
        prima della prima parola, cioe' un quarto dello schermo speso per non dire nulla.
    */
    padding: calc(var(--header-h) + clamp(28px, 8vh, 140px)) 0 clamp(48px, 8vh, 110px);
    text-align: center;
}

/*
    Il titolo si prende lo schermo.

    Era finito a sinistra con meta' pagina vuota a destra, e a 390 pixel scendeva a 2,6rem
    contro i 2,85rem della pagina che c'era prima: piu' piccolo, in un primo schermo piu'
    vuoto. Qui e' centrato e parte da 2,9rem, e la misura massima cresce con lo schermo.
*/
.hero h1 {
    font-size: clamp(2.9rem, 7vw, 5.2rem);
    max-width: 18ch;
    margin: 0 auto clamp(20px, 2.6vw, 30px);
}
/*
    Sul telefono il sottotitolo partiva da 1,04rem, cioe' la stessa misura delle guide
    che stanno sotto ai titoli di sezione. Alla larghezza di un telefono diventa un
    blocco di cinque righe alto quanto il titolo, e i due si leggono come due paragrafi
    di pari peso invece che come titolo e sottotitolo. Il minimo scende a 0,95rem, cioe'
    sotto le guide di sezione, e la gerarchia si legge. Il massimo non cambia: su schermo
    largo il sottotitolo era gia' giusto.
*/
.hero-lead {
    max-width: 62ch;
    margin: 0 auto clamp(28px, 3.6vw, 42px);
    color: var(--text-secondary);
    font-size: clamp(0.95rem, 1.5vw, 1.24rem);
    line-height: 1.6;
}
.hero-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

/* --- Demo --------------------------------------------------------------------------- */
/*
    QUESTA E' L'INTERFACCIA DEL VISUALIZZATORE, NON UNA SOMIGLIANZA.

    Le regole qui sotto sono quelle di dist/viewer.html: stessa disposizione (misure e
    passeggiata in alto a sinistra, capsula delle informazioni in alto a destra,
    rastrelliera degli strumenti sulla destra, dock in basso), stessi raggi (32 per la
    capsula, 22 per i gruppi, 20 per i tasti, la pillola per il dock), stesso vetro e stessi
    colori degli strumenti. Chi guarda la demo deve vedere cio' che vedra' il suo cliente,
    non una versione da vetrina.

    Due cose in meno, e sono volute: il tasto della realta' aumentata, che serve una sessione
    vera su un telefono, e la fila di tasti di servizio in alto (tema, lingua, aiuto), che
    qui li ha gia' la pagina. Tutto il resto c'e', e cio' che non si puo' provare dentro una
    vetrina apre il visualizzatore invece di fingere.

    Le tre misure non sono un adattamento a caso: sono le tre soglie del visualizzatore.
    Sotto i 600 pixel la rastrelliera scende in basso a destra e diventa orizzontale, la
    capsula prende tutta la larghezza e le misure vanno in basso a sinistra, esattamente
    come fa lui.
*/
/*
    LA GUIDA STA SOTTO IL RIQUADRO, ED E' UNA RIGA SOLA.

    Stava accanto al titolo, cioe' prima di aver visto la scena: si leggeva "accendi il
    righello" senza sapere dove fosse. Sotto ha senso, perche' arriva quando si e' appena
    finito di guardare. Su schermo largo e' una riga di tre voci piu' il tasto; su telefono
    le tre voci si incolonnano e il tasto prende la larghezza.

    Ogni voce porta la tinta della sua icona, e le tre insieme sono le stesse della fila di
    schede piu' sotto: il colore lega le due sezioni senza doverlo scrivere.
*/
.demo-guida {
    margin-top: var(--sp-2);
    padding: clamp(16px, 1.8vw, 22px);
    border: 0.5px solid var(--vetro-bordo);
    border-radius: var(--radius-lg);
    /*
        Due capi, non quattro. Con tre tinte piu' il trasparente il riquadro prendeva una
        banda calda in mezzo che non e' un colore del sito, e si leggeva come una fotografia
        sbiadita. Qui e' la stessa scala delle domande: si parte dall'accento e si arriva al
        secondo capo, e basta.
    */
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--scala-a) 14%, transparent),
            color-mix(in srgb, var(--scala-b) 10%, transparent) 90%),
        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);
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 32px);
}
[data-theme="light"] .demo-guida {
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--scala-a) 15%, transparent),
            color-mix(in srgb, var(--scala-b) 11%, transparent) 90%),
        rgba(255, 255, 255, 0.6);
}
.demo-guida ul {
    list-style: none; margin: 0; padding: 0;
    flex: 1 1 auto; min-width: 0;
    display: flex; gap: clamp(16px, 2.4vw, 32px);
}
.demo-guida li {
    flex: 1 1 0; min-width: 0;
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center;
}
.demo-guida li .material-symbols-outlined {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tinta) 26%, transparent);
    color: var(--text);
    font-size: 20px;
}
.demo-guida li span:not(.material-symbols-outlined) { color: var(--text-secondary); font-size: var(--t-corpo); }
.demo-guida .btn { flex: none; }

@media (max-width: 1000px) {
    .demo-guida { flex-direction: column; align-items: stretch; gap: 16px; }
    .demo-guida ul { flex-direction: column; gap: 12px; }
    .demo-guida .btn { width: 100%; justify-content: center; }
}

.demo-scena {
    position: relative;
    margin-top: var(--sp-3);
    /*
        Piu' bassa dell'altezza utile, non dell'altezza della finestra.

        L'intestazione e' agganciata in alto e sta sopra la pagina: una scena alta quanto la
        finestra si fa coprire il proprio angolo in alto, cioe' la capsula delle informazioni
        e il tasto della passeggiata. Togliendo l'intestazione e un margine, quando la sezione
        e' in vista la scena e' tutta sotto di lei e i comandi si raggiungono.
    */
    min-height: clamp(480px, calc(100vh - var(--header-h) - 120px), 720px);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--surface), transparent 70%),
        var(--bg);
    /*
        IL DITO CHE SCORRE DEVE SCORRERE LA PAGINA.

        `pan-y` lo dice al browser una volta sola: il movimento verticale e' della pagina,
        tutto il resto e' del modello.
    */
    touch-action: pan-y;
}
/*
    Il modello entra in dissolvenza, come nel visualizzatore.

    Li' e' `opacity: 0` con una transizione da 1,2s che parte quando il modello e' pronto:
    senza, il riquadro passa dal cerchio che gira al modello di colpo, e su una scansione da
    quattordici megabyte quel salto e' la prima cosa che si vede del prodotto. Insieme al
    modello entrano i pannelli, che prima stavano appoggiati sopra un riquadro vuoto.
*/
.demo-scena model-viewer {
    width: 100%; height: 100%; position: absolute; inset: 0;
    --poster-color: transparent;
    --min-hotspot-opacity: 0;
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.demo-scena.pronto model-viewer { opacity: 1; }
/*
    I pannelli entrano quando c'e' qualcosa sotto, ma anche se il modello non arriva: i dati
    dell'immobile vengono dalla scheda, non dal file 3D, e un riquadro vuoto con i comandi
    spenti si legge come un prodotto rotto invece che come un modello in ritardo.
*/
.demo-ui { opacity: 0; transition: opacity 0.6s var(--ease) 0.35s; }
.demo-scena.pronto .demo-ui, .demo-scena.risposta .demo-ui { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .demo-scena model-viewer, .demo-ui { transition: none; }
}

.demo-attesa {
    position: absolute; inset: 0;
    display: grid; place-content: center; gap: 10px; justify-items: center;
    color: var(--text-tertiary); font-size: 13px;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.4s var(--ease);
}
.demo-scena.pronto .demo-attesa { opacity: 0; }
.demo-giro {
    width: 26px; height: 26px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-testo);
    border-radius: 50%;
    animation: demoGiro 0.9s linear infinite;
}
@keyframes demoGiro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-giro { animation: none; } }

/* Il vetro del prodotto, con i suoi valori, presi da viewer.html. */
.vetro-prodotto {
    background: 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);
    border: 0.5px solid var(--vetro-bordo);
    box-shadow: var(--shadow-md);
    color: var(--text);
}

/* Lo strato dei comandi: non prende i clic, li prendono i suoi figli. */
.demo-ui {
    position: absolute; inset: 0;
    padding: 12px;
    display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
    z-index: 5;
}
.demo-ui > * > *, .demo-ui > * { pointer-events: none; }
.demo-alto { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.demo-sinistra { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; pointer-events: auto; }

/*
    Il nome accanto al pallino: da solo, un omino che cammina non dice cosa fa, e "Walk Mode"
    si chiama cosi' in tutte e due le lingue, quindi non c'e' niente da tradurre.
*/
.demo-passeggia {
    height: 44px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 16px 0 12px;
    cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    white-space: nowrap;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.demo-passeggia:hover { transform: translateY(-1px); }
.demo-passeggia:active { transform: scale(0.92); }

.demo-misure {
    min-width: 148px;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.demo-misura { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.demo-misura span { font-weight: 600; color: var(--text-secondary); font-size: 10px; letter-spacing: 0.5px; }
.demo-misura b { font-weight: 650; font-size: 15px; font-variant-numeric: tabular-nums; }

/* La capsula delle informazioni: 240 di larghezza e raggio 32, come nel visualizzatore. */
.demo-capsula {
    /* 228 invece dei 240 del visualizzatore: qui dentro ci sono tre righe e nessuna
       etichetta sotto le icone dei consumi, quindi la larghezza in piu' restava vuota fra
       il nome della voce e il suo valore. */
    width: 228px; max-width: 100%;
    border-radius: 32px;
    padding: 6px;
    overflow: hidden;
    pointer-events: auto;
}
.demo-schede {
    display: flex; position: relative;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    padding: 4px 6px; border-radius: 26px; margin: 4px 6px 8px;
}
.demo-schede-cursore {
    position: absolute; top: 4px; left: 6px;
    width: calc(50% - 6px); height: calc(100% - 8px);
    background: var(--bg);
    border-radius: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.demo-schede button {
    flex: 1; padding: 6px 0;
    border: 0; border-radius: 22px; background: none;
    color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 650;
    cursor: pointer; position: relative; z-index: 1;
    transition: color 0.3s var(--ease);
}
.demo-schede button[aria-selected="true"] { color: var(--text); }

.demo-quadro { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.demo-quadro[hidden] { display: none; }
.demo-riga { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; line-height: 1.25; }
.demo-riga[hidden] { display: none; }
.demo-riga span { color: var(--text-secondary); }
.demo-riga b { font-weight: 650; font-variant-numeric: tabular-nums; }
.demo-riga-prezzo { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--vetro-bordo); }
.demo-riga-prezzo b { color: var(--accent-testo); font-weight: 750; }
/* La classe energetica e' una targhetta colorata, come nel visualizzatore. */
.demo-classe-tag {
    color: #fff; font-weight: 750; font-size: 12px;
    padding: 3px 11px; border-radius: 12px;
    background: var(--classe-colore, var(--accent));
}

.demo-modi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 6px; }
.demo-modo {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0; font: inherit; color: inherit;
    min-width: 0; cursor: pointer; opacity: 0.6;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.demo-modo.attivo { opacity: 1; transform: translateY(-2px); }
.demo-modo-tasto {
    width: 38px; height: 38px; border-radius: 14px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border: 2px solid transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.demo-modo-tasto .material-symbols-outlined { font-size: 20px; }
/* I tre colori sono quelli del visualizzatore, uno per consumo. */
.demo-modo.attivo.heat .demo-modo-tasto { background: rgba(255, 159, 10, 0.16); border-color: #ff9f0a; color: #ff9f0a; }
.demo-modo.attivo.cool .demo-modo-tasto { background: rgba(50, 173, 230, 0.16); border-color: #32ade6; color: #32ade6; }
.demo-modo.attivo.elec .demo-modo-tasto { background: rgba(255, 214, 10, 0.16); border-color: #d6a800; color: #d6a800; }

.demo-conto { text-align: right; padding-top: 5px; border-top: 1px solid var(--vetro-bordo); }
.demo-conto-modo { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.demo-conto-grande { font-size: 21px; font-weight: 750; letter-spacing: -0.035em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.demo-conto-sotto { font-size: 8px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.demo-conto-giorno { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }
.demo-conto-fonte { font-size: 9px; color: var(--text-tertiary); margin-top: 2px; }
.demo-conto-fonte a { color: var(--accent-testo); text-decoration: underline; pointer-events: auto; }

/* La rastrelliera: gruppi di vetro in colonna sulla destra, tasti da 48. */
/*
    La rastrelliera sta sotto la capsula, e ci sta per struttura.

    Nel visualizzatore e' a 280 pixel dall'alto e non incontra niente, perche' li' la scena
    e' alta quanto la finestra. Qui la scena e' un riquadro dentro una pagina ed e' piu'
    bassa: un numero scritto a mano finirebbe sopra la capsula ogni volta che la capsula
    cambia altezza, e cambia, perche' le due schede hanno contenuti diversi. Stando nella
    stessa colonna la relazione fra le due e' dichiarata invece che calcolata.
*/
.demo-destra { position: relative; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
/*
    La rastrelliera pende dalla capsula invece di stare sotto di lei nel flusso: se
    contribuisse all'altezza della colonna, aprendo i tasti di annulla e cancella la colonna
    crescerebbe e spingerebbe il dock fuori dal riquadro. Cosi' la sua cima resta agganciata
    al fondo della capsula e il dock non si accorge di niente.
*/
.demo-rastrelliera {
    position: absolute; top: 100%; right: 0; margin-top: 14px;
    display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.demo-gruppo { display: flex; flex-direction: column; padding: 6px; border-radius: 22px; gap: 8px; pointer-events: auto; }
.demo-gruppo-modifica { visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease); }
.demo-scena.misurando .demo-gruppo-modifica { visibility: visible; opacity: 1; }
/* Con il righello acceso il puntatore dice che si sta segnando, non trascinando. */
.demo-scena.misura-attiva model-viewer { cursor: crosshair; }
.demo-strumento {
    /* 44 invece dei 48 del visualizzatore: la scena e' un riquadro dentro una pagina, e a
       48 la rastrelliera con annulla e cancella aperti non ci sta sotto la capsula. */
    width: 44px; height: 44px; border-radius: 16px;
    border: 0; background: none;
    display: grid; place-items: center;
    cursor: pointer; color: var(--text);
    transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.demo-strumento:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.demo-strumento:active { transform: scale(0.88); }
.demo-strumento[aria-pressed="true"] {
    background: var(--colore-righello);
    transform: scale(1.05);
    border: 0.5px solid var(--vetro-bordo);
}
.demo-strumento-rosso { background: #ff3b30; color: #fff; border-radius: 16px; }
.demo-strumento-rosso:hover { background: #e0332a; }

/* Il dock in basso, come nel visualizzatore ma senza il tasto della realta' aumentata. */
.demo-dock { display: flex; justify-content: center; gap: 12px; }
.demo-pillola {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 999px;
    border: 0; font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; pointer-events: auto;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s var(--ease);
}
.demo-pillola:active { transform: scale(0.96); }
.demo-pillola .material-symbols-outlined { font-size: 20px; }
.demo-pillola-portale { background: var(--tinta); color: var(--su-tinta); cursor: default; }

/*
    LE TRE MISURE SONO QUELLE DEL VISUALIZZATORE.

    Sotto i 600 la rastrelliera scende in basso a destra e si mette in riga, la capsula
    prende la larghezza e le misure vanno in basso a sinistra: e' esattamente cio' che fa
    viewer.html, quindi chi guarda la demo dal telefono vede l'interfaccia che avra' dal
    telefono, non una versione da desktop rimpicciolita.
*/
@media (max-width: 1024px) {
    .demo-rastrelliera { gap: 10px; }
}
/*
    SUL TELEFONO E' LA DISPOSIZIONE DEL VISUALIZZATORE, NON UNA VERSIONE STRETTA.

    In `viewer.html` sotto i 600 pixel succedono quattro cose insieme: la capsula prende
    tutta la larghezza in alto, il riquadro delle misure si stacca e va in basso a sinistra
    sopra il dock, la rastrelliera scende in basso a destra e si gira in riga, e il dock si
    allarga al 96 per cento con i tasti che si dividono lo spazio. Qui sono le stesse
    quattro, con le stesse misure.
*/
@media (max-width: 600px) {
    .demo-scena { min-height: clamp(460px, calc(100vh - var(--header-h) - 90px), 620px); }
    .demo-ui { padding: 10px; }
    .demo-alto { align-items: flex-start; }
    .demo-capsula { width: 100%; max-width: 320px; }
    /* Su 390 pixel il nome accanto al pallino e la capsula si dividono la riga: senza queste
       due misure "Walk Mode" andava a capo e il tasto diventava alto il doppio. */
    .demo-passeggia { font-size: 12px; gap: 6px; padding: 0 12px 0 10px; height: 40px; }
    .demo-passeggia .material-symbols-outlined { font-size: 20px; }
    /* `static` di proposito: la rastrelliera qui si aggancia alla scena, non alla capsula.
       Restando la capsula il suo riferimento, `bottom: 68px` la portava dentro la capsula. */
    .demo-destra { width: 100%; align-items: stretch; position: static; }

    /* Il riquadro delle misure lascia la colonna di sinistra e si appoggia sopra il dock. */
    .demo-sinistra { position: static; }
    .demo-misure {
        position: absolute; left: 10px; bottom: 68px;
        min-width: 0; padding: 8px 12px; gap: 0;
    }
    .demo-misura { flex-direction: column; align-items: flex-start; gap: 0; }

    .demo-rastrelliera {
        position: absolute; bottom: 68px; right: 10px;
        flex-direction: row-reverse; align-items: flex-end; gap: 8px;
        top: auto; margin-top: 0;
    }
    .demo-gruppo { flex-direction: column; padding: 5px; gap: 6px; }
    .demo-strumento { width: 42px; height: 42px; border-radius: 14px; }
    .demo-strumento .material-symbols-outlined { font-size: 21px; }

    .demo-dock { gap: 6px; }
    .demo-pillola { flex: 1; justify-content: center; padding: 12px 10px; font-size: 12px; }
    .demo-pillola .material-symbols-outlined { font-size: 18px; }
}

/* --- Dashboard: quattro cose che fa -------------------------------------------------- */
.quadretti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--sp-3); }
/*
    Vetro anche qui, con la stessa punta di accento delle schede della rotaia: sono quattro
    riquadri della stessa famiglia, e la superficie piatta li faceva sembrare un'altra
    sezione. La tinta e' l'accento della pagina, uguale per tutti e quattro, perche' qui non
    c'e' un colore per voce da distinguere.
*/
.quadretto {
    display: flex; flex-direction: column; gap: 12px;
    padding: var(--pad-scheda);
    border: 0.5px solid var(--vetro-bordo);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
        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);
}
[data-theme="light"] .quadretto {
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 66%),
        rgba(255, 255, 255, 0.62);
}
.quadretto .scheda-icona { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--vetro-bordo); }
.quadretto h3 { font-size: 1.16rem; font-weight: 550; letter-spacing: -0.02em; margin: 0; }
.quadretto p { margin: 0; color: var(--text-secondary); font-size: var(--t-corpo); }
@media (max-width: 720px) { .quadretti { grid-template-columns: minmax(0, 1fr); } }

/* --- Portali ------------------------------------------------------------------------ */
/*
    Erano sei pillole piccole con un quadratino colorato accanto. Adesso sono riquadri
    grandi con il nome del portale scritto nel suo colore di marca, quelli che stanno gia'
    in config.js, e scorrono in continuo. La fila si ferma sotto il puntatore, cosi' si
    legge, e sta ferma del tutto con prefers-reduced-motion.
*/
.portali-guscio {
    margin-top: var(--sp-3);
    /* Come le rotaie: la fila esce di mezza gutter per lato e arriva al bordo utile. */
    margin-inline: calc(var(--gutter) / -2);
    overflow: hidden;
    /* Sfuma ai due lati invece di tagliare di netto: si capisce che la fila continua. La
       sfumatura e' stretta, due punti e mezzo per lato: piu' larga si mangiava mezza pillola
       e sembrava un difetto invece di un bordo. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.portali {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: portaliScorre 38s linear infinite;
}
.portali-guscio:hover .portali { animation-play-state: paused; }
@keyframes portaliScorre { to { transform: translateX(-50%); } }
/*
    Sul telefono la sfumatura ai lati sparisce: su 390 pixel due punti e mezzo per lato sono
    dieci pixel, cioe' un pezzo di pillola sbiadito invece di un bordo, e la fila si legge
    gia' come continua perche' la pillola successiva entra da sola.
*/
@media (max-width: 600px) {
    .portali-guscio { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
    .portali { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .portali-guscio { -webkit-mask-image: none; mask-image: none; }
    /* Ferma, la seconda copia della fila sarebbe un elenco ripetuto due volte. */
    .portali .copia { display: none; }
}
.portale {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 22px 36px;
    /* L'unica forma tonda della pagina, e sta qui perche' e' una fila che passa: il bordo
       continuo si legge come un movimento, gli angoli vivi come una tabella che scorre. */
    border-radius: 999px;
    border: 0;
    /*
        LE STESSE PILLOLE DEL VISUALIZZATORE, COLORE PER COLORE.

        Fondo e testo sono quelli che `dist/viewer.html` dichiara per il proprio tasto del
        portale: bianco su Immobiliare, Casa.it e Newhome, quasi nero su Idealista e
        ImmoScout24. Un portale deve avere lo stesso aspetto nella vetrina e dentro il
        prodotto, altrimenti chi apre il modello vede un tasto che non riconosce.

        Un solo valore e' diverso, e si vede solo affiancando i due file: l'arancione di
        Homegate. Con il bianco sopra sta a 2,94, sotto la soglia anche per il testo grande;
        un passo piu' scuro lo porta a 3,40 e lascia il bianco dov'e'.
    */
    background: var(--tinta);
    color: var(--su-tinta);
    /*
        Testo grande davvero, non solo grosso a vedersi: da 19 pixel in su e in grassetto,
        una scritta rientra nella soglia AA per il testo grande, che e' 3 invece di 4,5. E'
        quello che permette di tenere il bianco sul rosso di Casa.it come fa il
        visualizzatore, invece di scurirlo e avere due prodotti che colorano lo stesso
        portale in due modi.
    */
    font-size: clamp(1.2rem, 1.7vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.portale .material-symbols-outlined { font-size: 26px; }

/* --- Finestra ----------------------------------------------------------------------- */
.finestra { border: 0; padding: 0; background: none; max-width: min(520px, calc(100% - 32px)); }
/*
    I due tasti stanno staccati dal testo, non appoggiati sotto l'ultima riga: fra un
    paragrafo e cio' che si puo' fare ci va uno stacco, altrimenti si legge come una riga in
    piu'. Il riquadro ha la stessa forma della finestra che si apre da una scheda, quindi da
    qui in giu' e' tutto in comune con lei.
*/
.finestra-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-2); }

/* --- Il righello della demo ---------------------------------------------------------- */
/*
    LA MISURA E' DISEGNATA COME NEL VISUALIZZATORE.

    Non basta il numero: nel prodotto la misura e' un punto, una linea fra i due punti e una
    targhetta di vetro a meta' strada, e la linea ha due tratti sovrapposti, uno scuro e
    sfocato sotto e uno chiaro sopra, perche' su un modello chiaro una linea sola sparisce.
    Le classi e i valori sono quelli di viewer.html.

    I punti restano agganciati al modello: li riposiziona model-viewer. La linea e la
    targhetta no, quindi si ridisegnano a ogni movimento della telecamera leggendo dove sono
    finiti i punti.
*/
.demo-linee, .demo-etichette {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.demo-linee { z-index: 2; }
.demo-etichette { z-index: 3; }

.linea-sotto { stroke: rgba(0, 0, 0, 0.3); stroke-width: 8px; stroke-linecap: round; filter: blur(2px); }
.linea-sopra {
    stroke: var(--colore-linea);
    stroke-width: 4px; stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.misura-punto {
    width: 12px; height: 12px; padding: 0;
    background: var(--punto-dentro);
    border: 2px solid var(--colore-righello-pieno);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: default;
}

.misura-targhetta {
    position: absolute; left: 0; top: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 20px;
    background: 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);
    border: 0.5px solid var(--vetro-bordo);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: var(--text);
    font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.misura-targhetta.visibile { opacity: 1; }
.misura-targhetta::before {
    content: ''; width: 8px; height: 8px; flex: none;
    border-radius: 50%; background: var(--colore-righello-pieno);
}