/* TOSCA — sistema visivo del sito.
   Stava dentro index.html; e' stato messo qui il 07/09/2026 per poterlo usare
   anche dalle altre pagine senza copiarlo. Da qui in avanti i colori, i
   caratteri e le misure si cambiano in un posto solo.
   Il file viene servito compresso e tenuto in cache 7 giorni (vedi .htaccess). */

    /* ==========================================================================
       TOSCA — Sistema visivo
       Sartoriale italiano: avorio, cipria, inchiostro. Filetti, non ombre.
       ========================================================================== */

    :root {
        /* Inchiostri */
        --inchiostro:       #2E2A38;
        --inchiostro-soft:  #4A4455;
        --grigio:           #5A5468;
        --grigio-tenue:     #746E82;

        /* Fondi */
        --bianco:           #FFFFFF;
        --avorio:           #FCFAF8;
        --greige:           #F4EFEB;
        --rosa-velo:        #FBF2F4;

        /* Cipria */
        --rosa:             #E9899F;
        --rosa-scuro:       #C4708B;
        --rosa-profondo:    #A84D6C;
        --rosa-linea:       #EFD9DF;

        /* Filetti */
        --linea:            #E7E1DD;
        --linea-forte:      #D8D0CB;

        /* Misure */
        --header-h:         78px;
        --r:                6px;
        --r-lg:             10px;

        /* Caratteri */
        --display: 'Cormorant Garamond', 'Times New Roman', serif;
        --testo:   'Poppins', 'Helvetica Neue', Arial, sans-serif;
    }

    /* ===== RESET ===== */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-h) + 24px);
        -webkit-text-size-adjust: 100%;
        background: var(--avorio);
    }

    body {
        font-family: var(--testo);
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.75;
        color: var(--grigio);
        background: var(--avorio);
        padding-top: var(--header-h);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    img { max-width: 100%; height: auto; display: block; }
    a   { color: inherit; text-decoration: none; transition: color .3s ease; }
    ul, ol { list-style: none; padding: 0; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    strong { font-weight: 600; color: var(--inchiostro); }
    /* Come <strong>, ma per i campi che il JS riempie a pagina aperta: da
       fermi sarebbero tag di grassetto vuoti, e i motori li segnalano. */
    .forte { font-weight: 600; color: var(--inchiostro); }
    em { font-style: italic; }

    ::selection { background: var(--rosa-linea); color: var(--inchiostro); }
    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: var(--greige); }
    ::-webkit-scrollbar-thumb { background: var(--rosa-linea); border-radius: 9px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--rosa); }

    /* ===== TIPOGRAFIA ===== */
    h1, h2, h3 {
        font-family: var(--display);
        font-weight: 300;
        color: var(--inchiostro);
        line-height: 1.08;
        letter-spacing: -0.005em;
    }

    h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); }
    h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
    h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 400; }

    h4 {
        font-family: var(--testo);
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--inchiostro);
        line-height: 1.45;
    }

    .corsivo { font-style: italic; color: var(--rosa-profondo); }

    p + p { margin-top: 1.1em; }

    .occhiello {
        display: inline-block;
        font-family: var(--testo);
        font-size: .74rem;
        font-weight: 500;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
    }

    .guida {
        font-size: 1.22rem;
        font-weight: 400;
        line-height: 1.8;
        color: var(--inchiostro-soft);
    }

    .minuscolo {
        font-size: .82rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        font-weight: 400;
        color: var(--grigio-tenue);
    }

    /* ===== SEGNI (icone a filo) ===== */
    .ic {
        width: 1em;
        height: 1em;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.3;
        stroke-linecap: round;
        stroke-linejoin: round;
        overflow: visible;
    }

    /* I marchi sono PNG con fondo quasi bianco: il multiply lo fa sparire */
    .marchio img,
    .scatto--marchio img,
    .confronto-lato--oggi img,
    .footer-placca img { mix-blend-mode: multiply; }

    /* ===== IMPIANTO ===== */
    .contenitore {
        width: min(1180px, 100% - 56px);
        margin-inline: auto;
    }

    .sezione { padding: clamp(72px, 10vw, 138px) 0; }
    .sezione--avorio { background: var(--avorio); }
    .sezione--bianca { background: var(--bianco); }
    .sezione--greige { background: var(--greige); }
    .sezione--velo   { background: var(--rosa-velo); }

    .filetto {
        height: 1px;
        background: var(--linea);
        border: 0;
    }

    .filetto-corto {
        width: 54px;
        height: 1px;
        background: var(--rosa);
        border: 0;
        margin: 26px 0;
    }

    .filetto-corto.centrato { margin-inline: auto; }

    .testata {
        max-width: 660px;
        margin: 0 auto clamp(48px, 7vw, 76px);
        text-align: center;
    }

    .testata h2 { margin-top: 18px; }
    .testata .guida { margin-top: 22px; }

    /* ===== BOTTONI ===== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 17px 34px;
        font-family: var(--testo);
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 2px;
        cursor: pointer;
        transition: all .35s cubic-bezier(.2,.7,.3,1);
        text-align: center;
    }

    .btn--pieno {
        background: var(--rosa-profondo);
        color: var(--bianco);
        border-color: var(--rosa-profondo);
    }
    .btn--pieno:hover {
        background: var(--inchiostro);
        border-color: var(--inchiostro);
        color: var(--bianco);
    }

    .btn--filo {
        background: transparent;
        color: var(--inchiostro);
        border-color: var(--linea-forte);
    }
    .btn--filo:hover {
        border-color: var(--inchiostro);
        background: var(--inchiostro);
        color: var(--bianco);
    }

    .btn--chiaro {
        background: var(--bianco);
        color: var(--inchiostro);
        border-color: var(--bianco);
    }
    .btn--chiaro:hover { background: var(--rosa-velo); border-color: var(--rosa-velo); }

    .btn--largo { padding: 19px 44px; }
    .btn--mini  { padding: 13px 24px; font-size: .72rem; }

    .link-freccia {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
        border-bottom: 1px solid var(--rosa-linea);
        padding-bottom: 7px;
    }
    .link-freccia span { transition: transform .35s ease; }
    .link-freccia:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
    .link-freccia:hover span { transform: translateX(6px); }

    /* ===== TESTATA DEL SITO ===== */
    .site-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: var(--header-h);
        z-index: 900;
        /* Fondo pieno: il multiply del marchio ha bisogno di una base opaca */
        background: var(--avorio);
        border-bottom: 1px solid var(--linea);
    }

    .header-inner {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
    }

    .marchio {
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .marchio img { height: 30px; width: auto; }
    /* La piastra accanto alla scritta: e' la stessa che sta sulla scheda del
       browser e sul telefono, e da sola si riconosce da lontano.
       E' piu' alta del file della scritta (34 contro 30) perche' li' dentro
       l'inchiostro riempie meno di meta' tela: sotto i 30 px le celle della
       griglia impastano e la T non si legge piu'.
       Niente multiply: il fondo e' gia' trasparente e il chiaro della piastra,
       moltiplicato, si sporcherebbe. */
    .marchio .marchio-piastra {
        height: 34px;
        mix-blend-mode: normal;
    }

    /* Sul telefono la piastra resta ancorata a sinistra e la scritta va al
       centro dello schermo, fra il marchio e il panino.
       La soglia e' 640px, la stessa a cui la testata si abbassa a 68px, non i
       1100 del menu: gia' a mille pixel fra la piastra e la scritta restano
       quattrocento pixel di vuoto e le due meta' del marchio smettono di
       leggersi insieme. Sul telefono le distanze sono corte e invece funziona.
       Un margine automatico non basterebbe a centrarla: la metterebbe in mezzo
       fra la piastra da 34px e il panino da 40, cioe' tre pixel fuori asse.
       Percio' la scritta esce dal flusso e si aggancia a meta' della testata,
       che essendo fixed fa da riferimento. Resta dentro il link: cliccarla
       porta ancora in cima. */
    @media (max-width: 640px) {
        .marchio .marchio-scritta {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .nav {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .nav a {
        position: relative;
        font-size: .78rem;
        font-weight: 400;
        letter-spacing: .19em;
        text-transform: uppercase;
        color: var(--inchiostro-soft);
        padding: 8px 0;
    }

    .nav a::after {
        content: '';
        position: absolute;
        left: 0; bottom: 2px;
        width: 0; height: 1px;
        background: var(--rosa);
        transition: width .35s cubic-bezier(.2,.7,.3,1);
    }
    .nav a:hover { color: var(--inchiostro); }
    .nav a:hover::after { width: 100%; }

    .header-azioni { display: flex; align-items: center; gap: 14px; }

    .nav-toggle {
        display: none;
        width: 40px; height: 40px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;
    }
    .nav-toggle span {
        display: block;
        width: 22px; height: 1px;
        background: var(--inchiostro);
        transition: all .3s ease;
    }
    .nav-toggle span:nth-child(2) { width: 15px; }
    .nav-toggle.aperto span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
    .nav-toggle.aperto span:nth-child(2) { opacity: 0; }
    .nav-toggle.aperto span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); width: 22px; }

    @media (max-width: 1100px) {
        .nav {
            position: fixed;
            top: var(--header-h); left: 0; right: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            background: var(--avorio);
            border-bottom: 1px solid var(--linea);
            padding: 8px 28px 28px;
            transform: translateY(-14px);
            opacity: 0;
            visibility: hidden;
            transition: all .3s ease;
        }
        .nav.aperta { transform: translateY(0); opacity: 1; visibility: visible; }
        .nav a { padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: .78rem; }
        .nav a:last-child { border-bottom: 0; }
        .nav-toggle { display: flex; }
        .header-azioni .btn { display: none; }
    }

    /* ===== APERTURA ===== */
    .apertura {
        position: relative;
        padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 118px);
        overflow: hidden;
        background:
            radial-gradient(60% 70% at 88% 12%, rgba(233,137,159,.13) 0%, rgba(233,137,159,0) 62%),
            radial-gradient(50% 60% at 4% 84%, rgba(244,239,235,.9) 0%, rgba(244,239,235,0) 60%),
            var(--avorio);
    }

    .apertura-griglia {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        gap: clamp(40px, 6vw, 88px);
        align-items: center;
    }

    /* L'occhiello di apertura: più grande, con "centro estetico" in evidenza */
    .occhiello--apertura {
        font-size: .95rem;
        font-weight: 400;
        letter-spacing: .15em;
        line-height: 2.1;
        color: var(--inchiostro-soft);
    }

    .occhiello--apertura b {
        display: inline-block;
        padding: 5px 14px;
        margin-left: 5px;
        font-weight: 600;
        letter-spacing: .15em;
        color: var(--rosa-profondo);
        background: var(--rosa-velo);
        border: 1px solid var(--rosa-linea);
        border-radius: 999px;
    }

    @media (max-width: 560px) {
        /* Sul telefono la pagina si apriva con 56px di vuoto fra il filetto
           della testata e la prima riga: su uno schermo alto 844px e' quasi un
           decimo di schermata buttato prima ancora di dire di cosa si tratta.
           Il minimo del clamp qui sopra e' tarato sul desktop, dove attorno al
           titolo c'e' spazio; qui si stringe. Solo in alto: il respiro sotto,
           prima del manifesto, resta com'era. */
        .apertura { padding-top: 20px; }

        .occhiello--apertura {
            font-size: .84rem;
            letter-spacing: .13em;
        }
        .occhiello--apertura b { margin-left: 0; letter-spacing: .13em; }
    }

    /* Le tre parole che devono arrivare per prime: Agenda, Cassa, estetiste */
    .titolone {
        margin-top: 24px;
        line-height: .94;
    }

    .titolone .parolone {
        font-size: clamp(3.3rem, 8.6vw, 6.2rem);
        font-weight: 400;
        letter-spacing: -.02em;
    }

    /* Uno spazio vero, ma alto un pixel: fra due inline-block gli spazi
       normali vengono tolti in fase di disegno, e chi legge la pagina (i
       motori di ricerca compresi) si ritrovava "AgendaeCassa" come parola
       unica. Con questo la riga resta larga uguale al mezzo pixel, e le tre
       parole tornano tre. */
    .titolone .stacco { font-size: 1px; }

    .titolone .cong {
        display: inline-block;
        padding: 0 .32em;
        font-size: clamp(1.4rem, 2.8vw, 2.1rem);
        font-style: italic;
        color: var(--rosa);
        vertical-align: .42em;
    }

    .titolone .coda {
        display: block;
        margin-top: .16em;
        font-size: clamp(1.55rem, 3.6vw, 2.6rem);
        font-style: italic;
        font-weight: 300;
        color: var(--inchiostro-soft);
        line-height: 1.15;
    }

    .titolone .coda .corsivo {
        color: var(--rosa-profondo);
        font-weight: 400;
    }

    @media (max-width: 480px) {
        .titolone .cong { padding: 0 .22em; }
    }

    .apertura-sotto {
        margin-top: 30px;
        max-width: 460px;
        font-size: 1.26rem;
        font-weight: 400;
        line-height: 1.8;
        color: var(--inchiostro-soft);
    }

    /* "Agenda e Cassa" da solo fa credere che TOSCA finisca lì: questa riga
       tiene il titolo sulle due funzioni forti e dice che c'è il resto. */
    .apertura-oltre {
        margin-top: 20px;
        max-width: 500px;
        font-size: 1.03rem;
        line-height: 1.72;
        color: var(--grigio-tenue);
    }

    .apertura-oltre b {
        font-weight: 500;
        color: var(--rosa-profondo);
    }

    .apertura-azioni {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 42px;
    }

    .apertura-garanzie {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 32px;
        margin-top: 46px;
        padding-top: 30px;
        border-top: 1px solid var(--linea);
    }

    .apertura-garanzie li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: .95rem;
        letter-spacing: .01em;
        color: var(--grigio);
    }

    .apertura-garanzie li::before {
        content: '';
        width: 5px; height: 5px;
        border-radius: 50%;
        background: var(--rosa);
        flex: 0 0 5px;
    }

    /* ===== IL PALCO — l'apertura in movimento =====
       Un solo riquadro, tanti fotogrammi: il marchio, l'agenda, la foto di un
       centro vero, la cassa, il report, le prenotazioni, i pacchetti. Ogni
       fotogramma porta con sé il proprio scatto e la propria didascalia, e si
       muove piano. L'ORDINE DEL GIRO NON È QUELLO DEL DOCUMENTO: lo decide
       l'elenco SEQUENZA nello script, per nome (data-nome). */
    /* Quanto dura un fotogramma. Lo stesso numero sta anche nello script.
       DIMEZZATA rispetto ai 7200ms di prima: il carrello percorre la stessa
       strada in meta' tempo, quindi si vede che si muove. Toccando questo
       numero si toccano insieme la permanenza in scena e la velocita' del
       carrello — sono la stessa cosa, il carrello dura var(--durata). */
    .teatro { position: relative; --durata: 3600ms; }

    .palco {
        position: relative;
        overflow: hidden;
        aspect-ratio: 4 / 3.4;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    /* Le lastre si dissolvono una nell'altra, come in pellicola: nessuno scatto */
    .fotogramma {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transition: opacity .7s ease, visibility 0s linear .7s;
    }

    .fotogramma.attivo {
        opacity: 1;
        visibility: visible;
        z-index: 2;
        transition: opacity .8s ease, visibility 0s linear 0s;
    }

    /* Lo scatto */
    .scatto {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        background: var(--greige);
    }

    .scatto-lastra { position: absolute; inset: 0; opacity: 0; }

    .scatto-lastra img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Si clicca il riquadro intero, didascalia compresa (vedi pagina.js).
       Il marchio non ha niente da ingrandire, quindi non promette la lente. */
    .fotogramma:not(.fotogramma--marchio) { cursor: zoom-in; }

    @media (hover: none) and (max-width: 1024px) {
        .fotogramma:not(.fotogramma--marchio) { cursor: default; }
    }

    /* IL CARRELLO — si muove con transform, non con object-position.
       object-position sposta la foto solo lungo l'asse in cui sborda dal
       riquadro: quanto si muove dipendeva quindi da quanto il formato dello
       scatto somigliava per caso a quello della cornice, e la cornice cambia
       proporzioni fra desktop e telefono. Alcuni fotogrammi correvano, quello
       dei conti restava fermo. Con transform la corsa è identica ovunque.

       Vincolo da rispettare toccando questi numeri: scala x traslazione deve
       restare sotto (scala - 1) / 2, altrimenti sotto la foto si scopre il
       fondo del riquadro. */
    @keyframes carrello-lato {
        from { transform: scale(1.32) translate(-7%, 0); }
        to   { transform: scale(1.20) translate(7%, 0); }
    }

    @keyframes carrello-giu {
        from { transform: scale(1.32) translate(0, -5.5%); }
        to   { transform: scale(1.20) translate(0, 5.5%); }
    }

    /* La macchina da presa indietreggia: si parte stretti e si allarga. Serve
       alla foto del centro — si apre sullo schermo e scopre chi ci sta intorno
       — e a qualunque scatto più piccolo del riquadro, che ingrandito si
       vedrebbe sgranato. */
    @keyframes carrello-zoom {
        from { transform: scale(1.26); }
        to   { transform: scale(1.03); }
    }

    /* Il respiro corto: si parte appena stretti e ci si allarga fino al vero.
       Serve agli scatti già ritagliati sul riquadro, dove ogni pezzo di
       cruscotto sta a filo del bordo: con la corsa piena del carrello-zoom la
       fila di riquadri in alto veniva segata a metà per il primo secondo.
       Il 12% di partenza è il massimo che quella fila regge. */
    @keyframes carrello-quadro {
        from { transform: scale(1.12); }
        to   { transform: scale(1.005); }
    }

    /* La lastra si limita ad aprirsi: tutto il movimento sta nella foto sotto,
       così le due scale non si moltiplicano fra loro. */
    @keyframes entra-lastra {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .fotogramma.attivo .scatto-lastra {
        animation: entra-lastra .7s ease both;
    }

    /* Ogni fotogramma sceglie da che parte va la macchina da presa, così il
       giro non ripete sei volte lo stesso movimento. */
    .fotogramma.attivo .scatto-lastra img {
        animation: carrello-lato var(--durata, 3600ms) cubic-bezier(.42,0,.3,1) both;
    }

    .fotogramma--giu.attivo    .scatto-lastra img { animation-name: carrello-giu; }
    .fotogramma--zoom.attivo   .scatto-lastra img { animation-name: carrello-zoom; }
    .fotogramma--quadro.attivo .scatto-lastra img { animation-name: carrello-quadro; }

    /* Lo scatto dei pacchetti è molto più largo del riquadro: centrato
       taglierebbe via la colonna delle clienti, che è la prima che si legge. */
    .fotogramma--sinistra .scatto-lastra img { object-position: left center; }

    /* NOTA sul report: il cruscotto intero (screenshot-report.png, usato più
       giù nel capitolo dei conti) è largo più del doppio del riquadro, e nel
       taglio ci finiva meno di metà schermata, con la fila di riquadri in alto
       segata a metà. Per il palco se ne tiene una versione già ritagliata sulla
       metà che conta — screenshot-report-riquadro.png, l'incasso del giorno con
       la torta — nelle proporzioni del riquadro. Rifacendola: stesse
       proporzioni, o il carrello ricomincia a segare. */

    /* La foto del centro è in verticale dentro un riquadro orizzontale: sopra e
       sotto se ne perde un terzo. Centrata taglierebbe lo schermo, che è il
       motivo per cui la foto sta lì: il taglio scende un po' più in basso, sulle
       mani e sul monitor. */
    .fotogramma--foto .scatto-lastra img { object-position: center 58%; }

    /* L'insegna d'apertura dura quanto una schermata: con le schermate
       dimezzate, i 4500ms di prima ne facevano il fotogramma piu' lento
       della fila — e l'apertura e' la prima cosa che si vede. */
    .fotogramma--marchio { --durata: 3600ms; }

    /* Niente carrello sul marchio: si muove solo il logo.
       ATTENZIONE: il PNG del marchio è in mix-blend-mode: multiply, quindi
       prende il colore di quello che ha dietro. Qualunque fondo colorato che
       si muove o cambia opacità gli tinge sopra — il logo diventa rosa.
       Dietro al marchio ci va fondo bianco, e basta. */
    .scatto--marchio {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bianco);
    }

    .scatto--marchio::before {
        content: '';
        position: absolute;
        inset: 14px;
        border: 1px solid var(--rosa-linea);
        border-radius: var(--r);
        pointer-events: none;
    }

    /* Il marchio si misura sull'ALTEZZA, non sulla larghezza: è più alto che
       largo, e con il solo width finiva per sbordare sopra e sotto. Il tetto
       lascia margine anche al respiro, così non si taglia mai. */
    .scatto--marchio img {
        position: relative;
        z-index: 1;
        width: auto;
        height: auto;
        max-width: 68%;
        max-height: 80%;
        object-fit: contain;
    }

    /* Il marchio sale e cresce quel tanto che basta a far capire che il
       riquadro sta girando: senza, sembra un'immagine ferma e si scrolla via.
       I margini del tetto qui sopra reggono anche gli estremi di questa corsa. */
    @keyframes respiro {
        0%   { opacity: 0; transform: scale(.96) translateY(7px); }
        24%  { opacity: 1; }
        100% { opacity: 1; transform: scale(1.06) translateY(-5px); }
    }

    .fotogramma.attivo .scatto--marchio img {
        animation: respiro var(--durata, 3600ms) cubic-bezier(.16,.84,.3,1) both;
    }

    /* ===== LO STACCO — il marchio torna dopo OGNI schermata =====
       Fra una prova del programma e l'altra il riquadro si sbianca e il logo
       ricompare di schianto: serve a staccare una schermata dalla successiva
       e a rimettere il marchio davanti agli occhi ogni volta.
       Lo stacco riusa lo stesso fotogramma del marchio, con la classe
       .stacco addosso: dura poco — e' un battito, non una prova — e si
       prende tutto il riquadro, didascalia compresa, cosi' il logo e' piu'
       grande di quanto sia in apertura.
       VALE ANCHE QUI la regola del marchio: dietro ci va bianco e basta,
       il PNG e' in mix-blend-mode: multiply e qualunque fondo colorato in
       movimento gli tinge sopra. Si muove il logo, non il fondo. */
    .fotogramma--marchio.stacco { --durata: 2400ms; }
    .fotogramma--marchio.stacco .didascalia { display: none; }

    /* Lo stacco ENTRA DI TAGLIO, non in dissolvenza: con il fondu da un
       secondo e mezzo degli altri fotogrammi il logo arrivava ancora
       semitrasparente e l'urto si perdeva per strada. Mezzo secondo e il
       riquadro e' bianco, poi il logo picchia. Esce invece con la
       dissolvenza di sempre — quella la regola .fotogramma qui sopra —
       cosi' la schermata dopo affiora piano. */
    .fotogramma--marchio.stacco.attivo {
        transition: opacity .5s ease, visibility 0s linear 0s;
    }

    .fotogramma--marchio.stacco .scatto--marchio img {
        max-width: 70%;
        max-height: 72%;
    }

    /* Il logo entra grande e si pianta: l'urto, poi tre scosse che si
       spengono, e infine la deriva lenta che tiene vivo il riquadro fino
       al cambio. Le traslazioni sono in percentuale del logo stesso, cosi'
       la scossa e' identica su telefono e su schermo largo.
       Il colpo iniziale (scale 1.30) resta dentro al riquadro: sopra il 72%
       di altezza qui sotto fa 94%, e il taglio non si vede perche' in quel
       tratto il logo e' ancora trasparente. */
    @keyframes terremoto {
        0%   { opacity: 0; transform: scale(1.30); }
        11%  { opacity: 1; transform: scale(1.005); }
        15%  { transform: scale(1.02)  translate(-2.4%, 1.6%) rotate(-1.5deg); }
        20%  { transform: scale(1.01)  translate(2.1%, -1.2%) rotate(1.2deg); }
        25%  { transform: scale(1.01)  translate(-1.5%, .9%)  rotate(-.85deg); }
        30%  { transform: scale(1.005) translate(1%, -.6%)    rotate(.55deg); }
        35%  { transform: scale(1.005) translate(-.5%, .3%)   rotate(-.28deg); }
        41%  { transform: scale(1)     translate(0, 0)        rotate(0deg); }
        100% { opacity: 1; transform: scale(1.05) translateY(-5px); }
    }

    /* La cornice rosa incassa il colpo insieme al logo: si stringe di un
       soffio e si accende, poi torna al filetto di sempre. */
    @keyframes terremoto-cornice {
        0%   { opacity: 0; transform: scale(1.02); }
        9%   { opacity: 0; }
        13%  { opacity: 1; transform: scale(.992); border-color: var(--rosa); }
        30%  { transform: scale(1); }
        100% { opacity: 1; transform: scale(1); border-color: var(--rosa-linea); }
    }

    .fotogramma--marchio.stacco.attivo .scatto--marchio img {
        animation: terremoto var(--durata, 2200ms) cubic-bezier(.2,.86,.3,1) both;
    }

    .fotogramma--marchio.stacco.attivo .scatto--marchio::before {
        animation: terremoto-cornice var(--durata, 2200ms) cubic-bezier(.2,.86,.3,1) both;
    }

    /* La didascalia: sottotitolo del filmato, sotto un filetto */
    .didascalia {
        flex: 0 0 auto;
        min-height: 106px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 18px clamp(20px, 3vw, 30px) 20px;
        border-top: 1px solid var(--linea);
        background: var(--bianco);
    }

    .didascalia-occhiello {
        display: block;
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
    }

    .didascalia-riga {
        display: block;
        margin-top: 7px;
        font-family: var(--display);
        font-size: clamp(1.2rem, 2vw, 1.58rem);
        font-weight: 300;
        line-height: 1.24;
        letter-spacing: -.005em;
        color: var(--inchiostro);
    }

    /* Le righe affiorano, non entrano di corsa: un sottotitolo, non una slide */
    @keyframes entra-riga {
        from { opacity: 0; transform: translateY(7px); }
        to   { opacity: 1; transform: none; }
    }

    .didascalia-occhiello, .didascalia-riga { opacity: 0; }

    .fotogramma.attivo .didascalia-occhiello {
        animation: entra-riga .6s cubic-bezier(.16,.84,.3,1) .24s both;
    }
    .fotogramma.attivo .didascalia-riga {
        animation: entra-riga .6s cubic-bezier(.16,.84,.3,1) .36s both;
    }

    /* Con il dito o il mouse sopra, il filmato si ferma ad aspettare */
    .teatro.in-pausa .fotogramma.attivo .scatto-lastra,
    .teatro.in-pausa .fotogramma.attivo .scatto-lastra img,
    .teatro.in-pausa .fotogramma.attivo .scatto--marchio img,
    .teatro.in-pausa .fotogramma.attivo .scatto--marchio::before { animation-play-state: paused; }

    /* Su schermo largo il filmato è la prova del prodotto: gli si dà spazio.
       Non si può però stringere la colonna del titolo — "Agenda e Cassa" sta
       su una riga sola per circa 550px e sotto quella soglia va a capo.
       Quindi il riquadro cresce in altezza, si riprende un po' di respiro
       dallo spazio fra le colonne, e sconfina nel margine libero a destra. */
    @media (min-width: 1100px) {
        .apertura-griglia {
            grid-template-columns: .96fr 1.04fr;
            gap: clamp(40px, 4.4vw, 62px);
        }
        .palco { aspect-ratio: 4 / 3.6; }
    }

    /* Lo sconfinamento resta sempre più stretto del margine del contenitore
       — a 1400px ne restano 110 per lato, a 1600px ne restano 210. */
    @media (min-width: 1400px) { .teatro { margin-right: -56px; } }
    @media (min-width: 1600px) { .teatro { margin-right: -96px; } }

    @media (max-width: 900px) {
        /* A COLONNA SINGOLA L'ORDINE E': occhiello, TITOLO, filmato, e poi il
           resto del testo. Prima c'era .apertura-visivo { order: -1 }, che
           portava il carosello in cima: su telefono la pagina si apriva con
           uno screenshot e non si capiva subito di cosa si trattasse.

           Il filmato va incastrato IN MEZZO al testo, ma nel documento e'
           fratello dell'intero blocco .apertura-testo, non del titolo. Per
           poterli ordinare tutti insieme la griglia diventa una colonna flex e
           .apertura-testo sparisce come scatola (display: contents): i suoi
           figli salgono di un livello e diventano voci ordinabili accanto al
           filmato. La struttura HTML non cambia, quindi da 901px in su resta
           tutto com'era.

           Due accortezze, se si tocca questo blocco:
           - gap: 0 obbligatorio. Ogni blocco ha gia' il suo margin-top (24, 30,
             20, 42, 46px): con il gap della griglia le distanze raddoppiavano.
           - align-items: stretch obbligatorio. In una colonna flex align-items
             lavora in ORIZZONTALE, e il "center" ereditato dalla griglia
             avrebbe stretto ogni blocco attorno al testo, centrandolo. */
        .apertura-griglia {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }
        .apertura-testo { display: contents; }

        .occhiello--apertura { order: 1; align-self: start; }
        .titolone            { order: 2; }
        .apertura-visivo     { order: 3; margin-top: 34px; }
        .apertura-sotto      { order: 4; }
        .apertura-oltre      { order: 5; }
        .apertura-azioni     { order: 6; }
        .apertura-garanzie   { order: 7; }

        .apertura-sotto { max-width: none; }
        .teatro { max-width: 470px; margin-inline: auto; }
    }

    @media (max-width: 560px) {
        .palco { aspect-ratio: 4 / 3.9; }
        .didascalia { min-height: 96px; }
    }

    /* ===== MANIFESTO ===== */
    .manifesto {
        padding: clamp(56px, 7vw, 92px) 0;
        background: var(--inchiostro);
        color: rgba(255,255,255,.72);
        text-align: center;
    }

    .manifesto h2 {
        color: var(--bianco);
        max-width: 900px;
        margin-inline: auto;
        font-size: clamp(1.75rem, 3.6vw, 2.9rem);
    }

    .manifesto h2 .corsivo { color: var(--rosa); }

    .manifesto-cifre {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        margin-top: clamp(44px, 6vw, 66px);
        background: rgba(255,255,255,.13);
        border: 1px solid rgba(255,255,255,.13);
    }

    .manifesto-cifra {
        background: var(--inchiostro);
        padding: 34px 22px;
    }

    .manifesto-cifra b {
        display: block;
        font-family: var(--display);
        font-size: clamp(2.2rem, 4.4vw, 3.2rem);
        font-weight: 300;
        color: var(--rosa);
        line-height: 1;
    }

    .manifesto-cifra span {
        display: block;
        margin-top: 14px;
        font-size: .86rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(255,255,255,.72);
        line-height: 1.6;
    }

    @media (max-width: 700px) {
        .manifesto-cifre { grid-template-columns: 1fr; }
    }

    /* ===== CAPITOLI (testo + immagine) ===== */
    .capitolo {
        display: grid;
        grid-template-columns: 1fr 1.12fr;
        gap: clamp(40px, 6vw, 88px);
        align-items: center;
    }

    .capitolo--specchiato .capitolo-media { order: -1; }

    .capitolo-numero {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 20px;
    }

    .capitolo-numero b {
        font-family: var(--display);
        font-size: 1.9rem;
        font-weight: 500;
        letter-spacing: .08em;
        color: var(--rosa);
    }

    .capitolo-numero i {
        align-self: center;
        flex: 0 0 52px;
        height: 2px;
        background: var(--rosa);
    }

    /* Il nome del capitolo apre la sezione: deve pesare quanto il titolo che
       lo segue, non fare da etichettina. */
    .capitolo-numero span {
        font-family: var(--display);
        font-size: clamp(2.9rem, 5.4vw, 4.2rem);
        font-weight: 600;
        letter-spacing: -.02em;
        color: var(--rosa-profondo);
        line-height: .98;
    }

    .capitolo-testo h2 + .guida { margin-top: 24px; }

    .elenco {
        margin-top: 34px;
        border-top: 1px solid var(--linea);
    }

    .elenco li {
        position: relative;
        padding: 15px 0 15px 40px;
        border-bottom: 1px solid var(--linea);
        font-size: 1.06rem;
        color: var(--inchiostro-soft);
        line-height: 1.65;
    }

    .elenco li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 18px;
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        font-size: .62rem;
        color: var(--rosa-profondo);
        background: var(--rosa-velo);
        border-radius: 50%;
    }

    .nota-forte {
        margin-top: 30px;
        padding: 22px 26px;
        background: var(--rosa-velo);
        border-left: 3px solid var(--rosa);
        border-radius: 0 var(--r-lg) var(--r-lg) 0;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--inchiostro-soft);
    }

    .nota-forte b {
        display: block;
        margin-bottom: 6px;
        color: var(--inchiostro);
        font-weight: 600;
    }

    .capitolo .btn, .capitolo .link-freccia { margin-top: 34px; }

    .cornice {
        position: relative;
        padding: 14px;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    .cornice img {
        border-radius: var(--r);
        border: 1px solid var(--linea);
        cursor: zoom-in;
    }

    .cornice-nota {
        margin-top: 14px;
        text-align: center;
        font-size: .72rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--grigio-tenue);
    }

    @media (max-width: 900px) {
        /* A COLONNA SINGOLA L'ORDINE E': numero, TITOLO, schermata, e poi il
           resto del testo. Prima la schermata finiva in fondo, dopo l'elenco:
           sul telefono si leggevano dieci righe su un'agenda senza mai vederla.

           Stesso meccanismo dell'apertura qui sopra: .capitolo-testo sparisce
           come scatola (display: contents), i suoi figli salgono di un livello
           e diventano voci ordinabili accanto a .capitolo-media. L'HTML non
           cambia, quindi da 901px in su resta tutto com'era.

           gap: 0 obbligatorio: ogni pezzo ha gia' il suo margine (il numero 20
           sotto, la guida 24 sopra, elenco e freccia 34), e il gap della
           griglia li raddoppiava. */
        .capitolo {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .capitolo-testo { display: contents; }

        .capitolo-testo > *      { order: 4; }
        .capitolo-numero         { order: 1; }
        .capitolo-testo > h2     { order: 2; }
        .capitolo-media,
        .capitolo--specchiato .capitolo-media { order: 3; margin-top: 30px; }

        .cornice img { cursor: default; }
    }

    /* ===== CITAZIONE ===== */
    .citazione {
        padding: clamp(66px, 9vw, 112px) 0;
        background: var(--rosa-velo);
        text-align: center;
    }

    .citazione blockquote {
        max-width: 820px;
        margin-inline: auto;
        font-family: var(--display);
        font-size: clamp(1.7rem, 3.6vw, 2.7rem);
        font-weight: 300;
        font-style: italic;
        line-height: 1.32;
        color: var(--inchiostro);
    }

    .citazione blockquote strong {
        font-style: normal;
        font-weight: 500;
        color: var(--rosa-profondo);
    }

    .citazione cite {
        display: block;
        margin-bottom: 26px;
        font-family: var(--testo);
        font-style: normal;
        font-size: .74rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--grigio-tenue);
    }

    /* ===== IERI / OGGI ===== */
    .confronto {
        display: grid;
        grid-template-columns: 1fr 64px 1fr;
        align-items: stretch;
        gap: 20px;
    }

    .confronto-lato {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(28px, 3.5vw, 44px);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
        background: var(--bianco);
        text-align: center;
    }

    .confronto-lato--ieri {
        background: var(--greige);
        border-color: var(--linea-forte);
    }

    .confronto-lato--ieri img {
        filter: grayscale(1) contrast(.92);
        opacity: .78;
        border-radius: var(--r);
        margin: 0 auto;
        max-width: 250px;
    }

    .confronto-lato--oggi img { max-width: 220px; margin: 0 auto; }

    .confronto-titolo {
        font-size: .74rem;
        letter-spacing: .28em;
        text-transform: uppercase;
        color: var(--grigio-tenue);
        margin-bottom: 26px;
    }

    .confronto-lato--oggi .confronto-titolo { color: var(--rosa-profondo); }

    .confronto-voci { margin-bottom: 26px; text-align: left; }

    .confronto-voci li {
        position: relative;
        padding: 7px 0 7px 24px;
        font-size: 1.02rem;
        color: var(--grigio);
    }
    .confronto-voci li::before { content: '×'; position: absolute; left: 0; top: 7px; color: var(--grigio-tenue); }

    .confronto-lato--oggi .confronto-voci li::before { content: '✓'; color: var(--rosa); }
    .confronto-lato--oggi .confronto-voci li { color: var(--inchiostro-soft); }

    .confronto-chiusa {
        margin-top: 26px;
        font-family: var(--display);
        font-size: 1.5rem;
        font-weight: 400;
        font-style: italic;
        color: var(--inchiostro);
        line-height: 1.3;
    }

    .confronto-freccia {
        display: grid;
        place-items: center;
        font-size: 1.4rem;
        color: var(--rosa);
    }

    @media (max-width: 860px) {
        .confronto { grid-template-columns: 1fr; }
        .confronto-freccia { transform: rotate(90deg); padding: 6px 0; }
    }

    /* ===== ESTETISTA SOLA: due mattine a confronto ===== */
    .banda-foto {
        margin: 0 0 clamp(40px, 6vw, 64px);
        border-radius: var(--r-lg);
        overflow: hidden;
        line-height: 0;
    }

    .banda-foto img {
        width: 100%;
        height: clamp(190px, 25vw, 310px);
        object-fit: cover;
        object-position: 32% 50%;
    }

    .banda-foto--alta { margin-bottom: clamp(34px, 4.5vw, 52px); }

    .banda-foto--alta img {
        height: clamp(230px, 30vw, 380px);
        object-position: 55% 45%;
    }

    .due-mattine {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        align-items: stretch;
    }

    .mattina {
        display: flex;
        flex-direction: column;
        padding: clamp(30px, 3.6vw, 46px);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    .mattina--prima { background: var(--greige); border-color: var(--linea-forte); }
    .mattina--dopo  { background: var(--bianco); border-color: var(--rosa-linea); }

    .mattina-etichetta {
        display: inline-block;
        align-self: flex-start;
        padding: 6px 16px;
        border-radius: 999px;
        font-size: .7rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--grigio);
        background: rgba(255, 255, 255, .7);
        border: 1px solid var(--linea-forte);
    }

    .mattina--dopo .mattina-etichetta {
        color: var(--bianco);
        background: var(--rosa-profondo);
        border-color: var(--rosa-profondo);
    }

    .mattina h3 { margin-top: 18px; font-size: clamp(1.5rem, 2.4vw, 1.95rem); }

    /* La linea del tempo */
    .momenti {
        --colonna-ora: 52px;
        --asse: 73px; /* metà esatta del corridoio fra ora e testo */
        position: relative;
        margin-top: 28px;
    }

    .momenti::before {
        content: '';
        position: absolute;
        left: var(--asse);
        top: 16px;
        bottom: 16px;
        width: 1px;
        background: var(--linea-forte);
    }

    .mattina--dopo .momenti::before { background: var(--rosa-linea); }

    .momenti li {
        position: relative;
        display: grid;
        grid-template-columns: var(--colonna-ora) 1fr;
        column-gap: 42px;
        padding: 13px 0;
    }

    .momenti li::before {
        content: '';
        position: absolute;
        left: calc(var(--asse) - 3.5px);
        top: 21px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--linea-forte);
        box-shadow: 0 0 0 4px var(--greige);
    }

    .mattina--dopo .momenti li::before {
        background: var(--rosa);
        box-shadow: 0 0 0 4px var(--bianco);
    }

    .momenti li b {
        font-family: var(--display);
        font-size: 1.15rem;
        font-weight: 500;
        color: var(--grigio-tenue);
        letter-spacing: .01em;
        line-height: 1.55;
    }

    .mattina--dopo .momenti li b { color: var(--rosa-profondo); }

    .momenti li p {
        font-size: 1.02rem;
        line-height: 1.7;
        color: var(--inchiostro-soft);
    }

    .mattina-chiusa {
        margin-top: auto;
        padding-top: 26px;
        border-top: 1px solid var(--linea);
        font-family: var(--display);
        font-size: 1.35rem;
        font-style: italic;
        font-weight: 400;
        line-height: 1.45;
        color: var(--inchiostro);
    }

    .mattina--dopo .mattina-chiusa { border-color: var(--rosa-linea); }

    /* Automatico, non artificiale */
    .niente-robot {
        display: flex;
        align-items: flex-start;
        gap: 26px;
        max-width: 940px;
        margin: clamp(36px, 5vw, 56px) auto 0;
        padding: clamp(26px, 3.2vw, 36px) clamp(30px, 4vw, 44px);
        background: var(--inchiostro);
        border-radius: var(--r-lg);
        color: rgba(255, 255, 255, .78);
    }

    .niente-robot .ic { font-size: 1.8rem; color: var(--rosa); margin-top: 4px; }
    .niente-robot .occhiello { display: block; margin-bottom: 10px; color: var(--rosa); }
    .niente-robot p { font-size: 1.04rem; line-height: 1.75; }
    .niente-robot strong { color: var(--bianco); }

    @media (max-width: 900px) {
        .due-mattine { grid-template-columns: 1fr; }
    }

    /* Su schermo stretto l'ora va sopra: il testo si prende tutta la larghezza */
    @media (max-width: 600px) {
        .momenti { --asse: 4px; margin-left: 2px; }
        .momenti li {
            grid-template-columns: 1fr;
            row-gap: 2px;
            padding: 13px 0 13px 26px;
        }
        .momenti li b { font-size: 1rem; line-height: 1.4; }
        .niente-robot { flex-direction: column; gap: 16px; }
    }

    /* ===== A CHI PARLA ===== */
    .schede-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 46px;
    }

    .scheda-tab {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 13px 24px;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: 999px;
        font-size: .77rem;
        font-weight: 400;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--inchiostro-soft);
        transition: all .3s ease;
    }

    .scheda-tab .ic { font-size: 1.15rem; color: var(--rosa); transition: color .3s ease; }

    .scheda-tab:hover { border-color: var(--rosa); color: var(--inchiostro); }

    .scheda-tab.attiva {
        background: var(--inchiostro);
        border-color: var(--inchiostro);
        color: var(--bianco);
    }

    .scheda-tab.attiva .ic { color: var(--rosa); }

    .scheda-pannello { display: none; }
    .scheda-pannello.attivo { display: block; animation: sfuma .45s ease both; }

    .scheda-griglia {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: clamp(32px, 5vw, 64px);
        align-items: center;
        padding: clamp(32px, 4vw, 56px);
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    .scheda-griglia h3 { margin-bottom: 10px; }
    .scheda-griglia .btn { margin-top: 30px; }

    .scheda-occhiello {
        font-size: .74rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
        margin-bottom: 18px;
        display: block;
    }

    .scheda-cifre { display: grid; gap: 14px; }

    .scheda-cifra {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px 24px;
        background: var(--avorio);
        border: 1px solid var(--linea);
        border-radius: var(--r);
    }

    .scheda-cifra b {
        font-family: var(--display);
        font-size: 2.1rem;
        font-weight: 400;
        color: var(--rosa-profondo);
        line-height: 1;
        min-width: 74px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .scheda-cifra span {
        font-size: .98rem;
        line-height: 1.5;
        color: var(--grigio);
    }

    @media (max-width: 900px) {
        .scheda-griglia { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
        .schede-nav { flex-direction: column; }
        .scheda-tab { justify-content: flex-start; }
        .scheda-cifra { flex-direction: column; align-items: flex-start; gap: 8px; }
    }

    /* ===== LISTINO ===== */
    .attivazione {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: clamp(30px, 3.6vw, 44px) clamp(34px, 4vw, 50px);
        margin-bottom: 26px;
        background: var(--bianco);
        border: 1px solid var(--rosa-linea);
        border-radius: var(--r-lg);
    }

    .attivazione-testo { max-width: 580px; }
    .attivazione-testo h3 { margin: 12px 0 10px; font-size: 1.7rem; }
    .attivazione-testo p { font-size: 1.06rem; }

    .attivazione-piu {
        font-family: var(--testo);
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
        white-space: nowrap;
    }

    .attivazione-chiosa {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--rosa-linea);
        color: var(--inchiostro-soft);
    }
    .attivazione-cifra { text-align: right; }
    .attivazione-cifra .piano-prezzo { margin-top: 0; }

    @media (max-width: 700px) {
        .attivazione { flex-direction: column; align-items: flex-start; }
        .attivazione-cifra { text-align: left; }
    }

    .listino-postilla {
        margin-top: 34px;
        text-align: center;
        font-size: .86rem;
        letter-spacing: .11em;
        text-transform: uppercase;
        color: var(--grigio-tenue);
    }

    .aggiunta-segno {
        font-size: 1.5rem;
        color: var(--rosa);
        margin-bottom: 16px;
    }

    .listino-principali {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        margin-bottom: 26px;
    }

    .piano {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: clamp(34px, 4vw, 50px);
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    .piano--scelto {
        background: var(--inchiostro);
        border-color: var(--inchiostro);
    }

    .piano-etichetta {
        position: absolute;
        top: -11px; left: clamp(34px, 4vw, 50px);
        padding: 6px 16px;
        background: var(--rosa-profondo);
        color: var(--bianco);
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .piano h3 { font-size: 1.7rem; }
    .piano--scelto h3 { color: var(--bianco); }

    .piano-sottotitolo {
        margin-top: 8px;
        font-size: .97rem;
        color: var(--grigio-tenue);
    }
    .piano--scelto .piano-sottotitolo { color: rgba(255,255,255,.55); }

    .piano-prezzo {
        margin-top: 28px;
        font-family: var(--display);
        font-size: clamp(2.8rem, 5vw, 3.6rem);
        font-weight: 300;
        color: var(--inchiostro);
        line-height: 1;
    }
    .piano--scelto .piano-prezzo { color: var(--bianco); }

    .piano-prezzo small {
        font-family: var(--testo);
        font-size: .86rem;
        font-weight: 400;
        letter-spacing: .08em;
        color: var(--grigio-tenue);
    }

    .piano-nota {
        margin-top: 10px;
        font-size: .9rem;
        color: var(--grigio-tenue);
    }
    .piano--scelto .piano-nota { color: rgba(255,255,255,.55); }

    .piano-poi {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--linea);
        font-size: .95rem;
        color: var(--inchiostro-soft);
    }
    .piano--scelto .piano-poi {
        border-color: rgba(255,255,255,.18);
        color: rgba(255,255,255,.8);
    }
    .piano-poi b {
        font-family: var(--display);
        font-size: 1.7rem;
        font-weight: 400;
        color: var(--rosa-profondo);
    }
    .piano--scelto .piano-poi b { color: var(--rosa); }

    .piano-voci { margin-top: 22px; }
    .piano-voci li {
        position: relative;
        padding: 7px 0 7px 26px;
        font-size: 1.02rem;
        color: var(--inchiostro-soft);
    }
    .piano-voci li::before { content: '—'; position: absolute; left: 0; top: 7px; color: var(--rosa); }
    .piano--scelto .piano-voci li { color: rgba(255,255,255,.82); }

    .piano-iva {
        margin-top: 22px;
        font-size: .7rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--grigio-tenue);
    }
    .piano--scelto .piano-iva { color: rgba(255,255,255,.5); }

    /* Il bottone scende in fondo, così i due piani restano allineati */
    .piano .btn { margin-top: auto; padding-top: 17px; align-self: flex-start; }
    .piano-voci, .piano-iva { margin-bottom: 30px; }

    .listino-aggiunte-titolo {
        text-align: center;
        margin: clamp(48px, 6vw, 72px) 0 30px;
    }

    .listino-aggiunte {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .aggiunta {
        padding: 32px;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
        transition: border-color .3s ease;
    }
    .aggiunta:hover { border-color: var(--rosa-linea); }

    .aggiunta h4 {
        font-family: var(--display);
        font-size: 1.4rem;
        font-weight: 400;
    }

    .aggiunta-sotto {
        margin-top: 4px;
        font-size: .9rem;
        color: var(--grigio-tenue);
    }

    .aggiunta ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
    .aggiunta li {
        position: relative;
        padding: 5px 0 5px 24px;
        font-size: .99rem;
        color: var(--grigio);
    }
    .aggiunta li::before { content: '—'; position: absolute; left: 0; top: 5px; color: var(--rosa); }

    @media (max-width: 900px) {
        .listino-principali { grid-template-columns: 1fr; }
        .listino-aggiunte { grid-template-columns: 1fr; }
    }

    /* Riquadri informativi del listino */
    .avviso {
        margin-top: clamp(44px, 6vw, 66px);
        padding: clamp(30px, 4vw, 46px);
        background: var(--rosa-velo);
        border: 1px solid var(--rosa-linea);
        border-radius: var(--r-lg);
        text-align: center;
    }

    .avviso .occhiello { margin-bottom: 14px; }
    .avviso p { max-width: 760px; margin-inline: auto; }
    .avviso .btn { margin-top: 26px; }

    .note-listino {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        margin-top: 26px;
    }

    .nota-blocco {
        padding: 30px 34px;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
    }

    .nota-blocco h4 {
        font-size: .77rem;
        letter-spacing: .18em;
        text-transform: uppercase;
        margin-bottom: 16px;
    }
    .nota-blocco--si h4 { color: var(--rosa-profondo); }
    .nota-blocco--no h4 { color: var(--grigio-tenue); }

    .nota-blocco li {
        position: relative;
        padding: 7px 0 7px 24px;
        font-size: 1.01rem;
        line-height: 1.65;
    }
    .nota-blocco li::before { position: absolute; left: 0; top: 7px; }
    .nota-blocco--si li::before { content: '✓'; color: var(--rosa); }
    .nota-blocco--no li::before { content: '×'; color: var(--grigio-tenue); }

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

    /* ===== ATELIER (chi siamo) ===== */
    .atelier {
        display: grid;
        grid-template-columns: 1fr .8fr;
        gap: clamp(40px, 6vw, 80px);
        align-items: start;
    }

    .atelier-foto { margin: 0; }

    .atelier-foto img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--r-lg);
        border: 1px solid var(--linea);
    }

    .atelier-firma {
        margin-top: 34px;
        padding-top: 28px;
        border-top: 1px solid var(--linea);
        font-family: var(--display);
        font-size: 1.5rem;
        font-style: italic;
        font-weight: 400;
        color: var(--inchiostro);
        line-height: 1.35;
    }

    .garanzie {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        margin-top: clamp(44px, 6vw, 68px);
        background: var(--linea);
        border: 1px solid var(--linea);
        border-radius: var(--r-lg);
        overflow: hidden;
    }

    .garanzia {
        display: flex;
        gap: 20px;
        padding: 28px 30px;
        background: var(--bianco);
    }

    .garanzia .ic {
        font-size: 1.5rem;
        color: var(--rosa-profondo);
        margin-top: 2px;
    }

    .garanzia p { margin-top: 6px; font-size: 1.01rem; line-height: 1.7; }

    @media (max-width: 880px) {
        /* Come i capitoli: titolo e subito sotto la foto, poi il racconto. */
        .atelier {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .atelier-testo { display: contents; }

        .atelier-testo > *          { order: 4; }
        .atelier-testo > .occhiello { order: 1; }
        .atelier-testo > h2         { order: 2; }
        .atelier-foto               { order: 3; margin-top: 26px; }

        .garanzie { grid-template-columns: 1fr; }
    }

    /* Riquadro adattabilità */
    .riquadro-adatta {
        display: flex;
        align-items: flex-start;
        gap: 26px;
        max-width: 940px;
        margin: clamp(44px, 6vw, 68px) auto 0;
        padding: clamp(28px, 3.5vw, 40px) clamp(30px, 4vw, 46px);
        background: var(--rosa-velo);
        border: 1px solid var(--rosa-linea);
        border-radius: var(--r-lg);
    }

    .riquadro-adatta .ic {
        font-size: 1.9rem;
        color: var(--rosa-profondo);
        margin-top: 4px;
    }

    /* Sul fondo rosa velo della sezione "Per chi" il riquadro dev'essere bianco */
    .riquadro-adatta--chiaro { background: var(--bianco); }

    .riquadro-adatta .occhiello { display: block; margin-bottom: 10px; }

    .riquadro-adatta p {
        font-size: 1.06rem;
        line-height: 1.75;
        color: var(--inchiostro-soft);
    }

    @media (max-width: 600px) {
        .riquadro-adatta { flex-direction: column; gap: 16px; }
    }

    /* ===== INVITO FINALE ===== */
    .invito {
        padding: clamp(80px, 10vw, 140px) 0;
        background:
            radial-gradient(70% 90% at 50% 0%, rgba(233,137,159,.18) 0%, rgba(233,137,159,0) 70%),
            var(--avorio);
        text-align: center;
    }

    .invito h2 { margin: 20px auto 0; max-width: 760px; }
    .invito .guida { max-width: 560px; margin: 24px auto 0; }
    .invito-azioni {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 42px;
    }
    .invito-rassicura {
        margin-top: 28px;
        font-size: .88rem;
        color: var(--grigio-tenue);
    }

    /* ===== PIEDE ===== */
    .site-footer {
        background: var(--inchiostro);
        color: rgba(255,255,255,.6);
        padding: clamp(56px, 7vw, 88px) 0 0;
    }

    .footer-griglia {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: clamp(32px, 5vw, 64px);
        padding-bottom: 54px;
    }

    .footer-placca {
        display: inline-block;
        padding: 12px 18px;
        background: var(--bianco);
        border-radius: var(--r);
    }

    .footer-placca img { height: 26px; width: auto; }

    .footer-marchio p {
        margin-top: 22px;
        max-width: 300px;
        font-size: 1.01rem;
        line-height: 1.75;
    }

    .site-footer h4 {
        color: var(--bianco);
        font-size: .73rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .site-footer li { padding: 7px 0; font-size: 1.01rem; }
    .site-footer a:hover { color: var(--rosa); }

    .footer-chiusa {
        border-top: 1px solid rgba(255,255,255,.12);
        padding: 26px 0 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
        font-size: .86rem;
        color: rgba(255,255,255,.6);
    }

    @media (max-width: 800px) {
        .footer-griglia { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ===== FINESTRE MODALI (base comune) ===== */
    .velo {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(46, 42, 56, .55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
    }

    .velo.attivo { opacity: 1; visibility: visible; }

    .foglio {
        position: relative;
        width: 100%;
        max-width: 520px;
        max-height: 90vh;
        overflow-y: auto;
        padding: clamp(32px, 4vw, 46px);
        background: var(--avorio);
        border-radius: var(--r-lg);
        transform: translateY(14px);
        transition: transform .35s cubic-bezier(.2,.7,.3,1);
        text-align: center;
    }

    .velo.attivo .foglio { transform: translateY(0); }

    .foglio-chiudi {
        position: absolute;
        top: 16px; right: 18px;
        width: 34px; height: 34px;
        display: grid;
        place-items: center;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--grigio-tenue);
        border-radius: 50%;
        transition: all .3s ease;
    }
    .foglio-chiudi:hover { background: var(--greige); color: var(--inchiostro); }

    .foglio h3 { margin: 14px 0 12px; }
    .foglio > p { font-size: 1.06rem; }
    .foglio .btn { margin-top: 26px; }

    /* Contatti */
    .contatti-opzioni { display: grid; gap: 12px; margin-top: 28px; text-align: left; }

    .contatto-opzione {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 18px 22px;
        background: var(--bianco);
        border: 1px solid var(--linea);
        border-radius: var(--r);
        transition: all .3s ease;
    }
    .contatto-opzione:hover { border-color: var(--rosa); transform: translateX(4px); }
    .contatto-opzione .ic { font-size: 1.5rem; color: var(--rosa-profondo); }
    .contatto-opzione h4 { margin-bottom: 2px; }
    .contatto-opzione span { font-size: .95rem; color: var(--grigio-tenue); }

    /* Richiesta demo */
    .foglio--demo { max-width: 580px; text-align: left; }
    .foglio--demo h3, .foglio--demo > .foglio-sotto { text-align: center; }

    .foglio-sotto {
        font-size: 1.04rem;
        color: var(--grigio);
        margin-bottom: 26px;
    }

    .foglio-avviso {
        padding: 20px 24px;
        background: var(--rosa-velo);
        border-left: 2px solid var(--rosa);
        border-radius: 0 var(--r) var(--r) 0;
        margin-bottom: 30px;
    }
    .foglio-avviso p {
        display: flex;
        gap: 12px;
        font-size: .99rem;
        line-height: 1.65;
    }
    .foglio-avviso p + p { margin-top: 12px; }
    .foglio-avviso .ic { font-size: 1.15rem; color: var(--rosa-profondo); margin-top: 2px; }
    .foglio-avviso a { color: var(--rosa-profondo); border-bottom: 1px solid var(--rosa-linea); }

    .campo { margin-bottom: 20px; }

    .campo label {
        display: block;
        margin-bottom: 8px;
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--inchiostro-soft);
    }

    .campo input,
    .campo textarea {
        width: 100%;
        padding: 14px 16px;
        font-family: var(--testo);
        font-size: 1.06rem;
        font-weight: 400;
        color: var(--inchiostro);
        background: var(--bianco);
        border: 1px solid var(--linea-forte);
        border-radius: var(--r);
        transition: all .3s ease;
    }

    .campo input::placeholder,
    .campo textarea::placeholder { color: var(--grigio-tenue); font-weight: 300; }

    .campo input:focus,
    .campo textarea:focus {
        outline: none;
        border-color: var(--rosa);
        box-shadow: 0 0 0 3px rgba(233,137,159,.15);
    }

    .campo textarea { resize: vertical; min-height: 88px; }

    .durate { display: flex; gap: 10px; }
    .durata { flex: 1; }
    .durata input { position: absolute; opacity: 0; pointer-events: none; }

    .durata label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 16px 8px;
        margin: 0;
        text-align: center;
        background: var(--bianco);
        border: 1px solid var(--linea-forte);
        border-radius: var(--r);
        cursor: pointer;
        transition: all .3s ease;
        letter-spacing: 0;
        text-transform: none;
    }

    .durata label b {
        font-family: var(--display);
        font-size: 1.35rem;
        font-weight: 400;
        color: var(--inchiostro);
    }

    .durata label span {
        font-size: .75rem;
        color: var(--grigio-tenue);
        letter-spacing: .04em;
    }

    .durata label:hover { border-color: var(--rosa); }

    .durata input:checked + label {
        border-color: var(--rosa-profondo);
        background: var(--rosa-velo);
    }
    .durata input:checked + label b { color: var(--rosa-profondo); }
    .durata input:focus-visible + label { box-shadow: 0 0 0 3px rgba(233,137,159,.25); }

    .presa-visione {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
        font-size: .92rem;
        line-height: 1.6;
        color: var(--grigio);
        cursor: pointer;
    }

    .presa-visione input {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        margin-top: 4px;
        accent-color: var(--rosa-profondo);
        cursor: pointer;
    }

    .presa-visione a { color: var(--rosa-profondo); border-bottom: 1px solid var(--rosa-linea); }
    .presa-visione a:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

    .in-attesa {
        font-style: normal;
        padding: 1px 9px;
        border-radius: 999px;
        background: rgba(233, 137, 159, .18);
        color: var(--rosa);
    }

    .invia {
        width: 100%;
        margin-top: 12px;
        padding: 18px;
        background: var(--rosa-profondo);
        color: var(--bianco);
        border: 0;
        border-radius: 2px;
        font-size: .78rem;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        transition: all .3s ease;
    }
    .invia:hover:not(:disabled) { background: var(--inchiostro); }
    .invia:disabled { opacity: .55; cursor: not-allowed; }

    .esito { display: none; text-align: center; padding: 20px 0; }
    .esito.attivo { display: block; }
    .esito-segno { font-size: 3rem; color: var(--rosa); margin-bottom: 18px; }
    .esito-segno .ic { margin-inline: auto; stroke-width: 1; }
    .esito h4 { font-family: var(--display); font-size: 1.7rem; font-weight: 400; margin-bottom: 12px; }
    .nascosto { display: none; }

    /* Pulsante "copia" della password temporanea */
    .copia-pwd {
        margin-left: 10px;
        padding: 3px 10px;
        font-size: .78rem;
        font-family: inherit;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--rosa-profondo);
        background: var(--bianco);
        border: 1px solid var(--linea-forte);
        border-radius: var(--r);
        cursor: pointer;
        transition: all .2s ease;
    }
    .copia-pwd:hover { border-color: var(--rosa); }
    .copia-pwd.fatto { background: var(--rosa); border-color: var(--rosa); color: var(--bianco); }

    @media (max-width: 520px) {
        .durate { flex-direction: column; }
    }

    /* ===== INGRANDIMENTO IMMAGINI ===== */
    .lente {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 18px;
        padding: 40px;
        background: rgba(46, 42, 56, .93);
        cursor: zoom-out;
    }

    /* width/height auto OBBLIGATORI: l'<img> della lente nasce come segnaposto
       con width="1" height="1" nell'HTML, e quell'attributo resta anche dopo
       aver cambiato src. Senza questa riga la foto "ingrandita" era larga un
       pixel: si vedeva solo "Clicca per chiudere". */
    .lente img {
        width: auto;
        height: auto;
        max-width: 94vw;
        max-height: 82vh;
        border-radius: var(--r);
    }

    .lente-nota {
        font-size: .73rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: rgba(255,255,255,.6);
    }

    /* ===== ANIMAZIONI ===== */
    @keyframes sfuma {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .js .rivela {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
    }

    .js .rivela.visibile { opacity: 1; transform: translateY(0); }

    .js .rivela[data-ritardo="1"] { transition-delay: .1s; }
    .js .rivela[data-ritardo="2"] { transition-delay: .2s; }
    .js .rivela[data-ritardo="3"] { transition-delay: .3s; }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .js .rivela { opacity: 1; transform: none; transition: none; }
        * { animation-duration: .01ms !important; transition-duration: .01ms !important; }

        /* Il palco resta, ma fermo: si cambia fotogramma solo a mano */
        .fotogramma .scatto-lastra,
        .fotogramma .scatto-lastra img,
        .fotogramma .scatto--marchio img,
        .fotogramma .scatto--marchio::before,
        .fotogramma .didascalia-occhiello,
        .fotogramma .didascalia-riga { animation: none !important; }

        /* Lo stacco resta — separa le schermate — ma senza scossa e senza
           fretta: fermo e piu' lungo, cosi' non lampeggia. */
        .fotogramma--marchio.stacco { --durata: 3400ms; }

        .scatto-lastra,
        .didascalia-occhiello,
        .didascalia-riga { opacity: 1; }

        /* Il filmato continua, ma fermo: solo una dissolvenza, niente carrello.
           Meglio di restare inchiodati al primo fotogramma. */
        .fotogramma        { transition: opacity .6s ease, visibility 0s linear .6s !important; }
        .fotogramma.attivo { transition: opacity .6s ease, visibility 0s linear 0s !important; }
    }

    /* ===== RITOCCHI RESPONSIVE ===== */
    @media (max-width: 640px) {
        :root { --header-h: 68px; }
        .contenitore { width: min(1180px, 100% - 36px); }
        body { font-size: 1.06rem; }
        .btn { width: 100%; }
        .btn--mini, .scheda-tab { width: auto; }
        .apertura-azioni, .invito-azioni { flex-direction: column; }
        .piano .btn, .avviso .btn { align-self: stretch; }
    }

    /* Pieghevole del listino (RCH, collegamento lampade, agevolazioni).
       Sopra i 760px la linguetta non c'e' e il blocco resta sempre aperto:
       il desktop non cambia. Sotto, parte chiuso e si apre al clic. */
    .pieghevole { margin-top: clamp(44px, 6vw, 66px); }

    .pieghevole > summary { display: none; }

    .pieghevole > .pieghevole-corpo > .avviso { margin-top: 0; }

    @media (max-width: 760px) {
        .pieghevole > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 22px;
            background: var(--rosa-velo);
            border: 1px solid var(--rosa-linea);
            border-radius: var(--r-lg);
            font-size: .78rem;
            font-weight: 500;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--rosa-profondo);
            cursor: pointer;
            list-style: none;
        }

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

        .pieghevole > summary::after {
            content: '+';
            font-size: 1.3rem;
            line-height: 1;
            font-weight: 300;
        }

        .pieghevole[open] > summary {
            border-radius: var(--r-lg) var(--r-lg) 0 0;
            border-bottom-color: transparent;
        }

        .pieghevole[open] > summary::after { content: '‘2'; }

        .pieghevole[open] > .pieghevole-corpo { padding-top: 10px; }
    }

    /* =====================================================================
       ALLEGGERIMENTO MOBILE  (aggiunto il 2026-09-01)
       Sul telefono la pagina era alta ~21.850px, circa 26 schermate. Qui sotto
       si nasconde SOLO cio' che altrove e' gia' detto o che e' commento a
       margine: nessun prezzo, nessuna condizione, nessun titolo, nessuna foto.
       Il desktop non e' toccato. Per rimettere tutto: cancellare questo blocco.
       ===================================================================== */
    @media (max-width: 760px) {

        /* Apertura — "E non finisce li'": elenca 5 funzioni che hanno tutte
           una sezione dedicata piu' sotto. */
        .apertura-oltre { display: none; }

        /* Le due mattine — da 5 momenti a 3 per colonna, togliendo il 3 e il 4:
           restano l'inizio, lo sviluppo e la battuta finale, che e' quella che
           regge il confronto. Le due colonne restano entrambe, se no la frase
           "la stessa mattina, vissuta due volte" non torna piu'. */
        .momenti li:nth-child(3),
        .momenti li:nth-child(4) { display: none; }
        .mattina-chiusa { display: none; }

        /* Riquadro "Automatico, non artificiale": risponde a un'obiezione che
           a questo punto il lettore non ha ancora fatto. */
        .niente-robot { display: none; }

        /* Per chi — le tre cifre di ogni scheda: ripetono -70% e il minuto del
           manifesto, e l'elenco delle funzioni sopra dice gia' tutto. */
        .scheda-cifre { display: none; }

        /* Riquadri di approfondimento in coda alle sezioni. */
        #per-chi .riquadro-adatta,
        #chi-siamo .riquadro-adatta { display: none; }

        /* Listino — "Cosa c'e' dentro Premium": ripete parola per parola i
           punti della scheda Premium che sta appena sopra. Sul telefono i tre
           riquadri si impilano e da soli valgono 1.137px di scorrimento.
           Restano il listino, "Compreso"/"Non compreso" e le agevolazioni. */
        .listino-aggiunte-titolo,
        .listino-aggiunte { display: none; }

        /* Listino — la chiosa dell'attivazione: che i primi sei mesi siano
           compresi e' gia' scritto nel sommario della sezione e nelle due
           schede ("dal settimo mese"). Questa e' la terza volta. */
        .attivazione-chiosa { display: none; }

        /* Chi siamo — "Siamo all'inizio del nostro cammino commerciale":
           si scusa di una debolezza che il lettore non aveva sollevato. */
        .atelier-inizio { display: none; }

        /* Chi siamo — quarta garanzia, "Provata sul campo, non in laboratorio":
           il paragrafo qui sopra dice gia' che TOSCA lavora ogni giorno nei
           primi centri. */
        .garanzie .garanzia:nth-child(4) { display: none; }

        /* -----------------------------------------------------------------
           LISTINO: sul telefono deve leggersi come un prezzario, non come un
           testo. Restano i nomi, le cifre, "IVA esclusa" e gli elenchi brevi;
           spariscono le descrizioni su piu' righe. Quello che si vede:

               Attivazione + primi 6 mesi compresi ....... 599 EUR
               Base ..................................... 39 EUR / mese
               Premium .................................. 59 EUR / mese

           Il paragrafo dell'attivazione racconta cosa facciamo all'avvio: le
           stesse cose sono elencate in "Compreso nel prezzo" poco sotto.
           ----------------------------------------------------------------- */
        .attivazione-testo p { display: none; }
        .piano-sottotitolo { display: none; }

        /* "Tutti i prezzi sono IVA esclusa": gia' scritto sotto ogni cifra. */
        .listino-postilla { display: none; }
    }