/* =====================================================================
   Ricorda.Net — sito di presentazione

   Foglio unico, nessuna libreria esterna: la pagina deve aprirsi in fretta
   anche da telefono in rete mobile, ed e' il primo assaggio che un cliente
   ha del prodotto. Un sito vetrina lento racconta male un software che
   promette di far risparmiare tempo.

   Niente font da scaricare: si usa quello di sistema. Su Mac e iPhone e'
   San Francisco, su Windows Segoe, su Android Roboto — tutti moderni e
   tutti gia' in memoria, quindi il testo compare subito invece di
   apparire mezzo secondo dopo il resto.
   ===================================================================== */

:root {
    --blu:          #1c4b8f;
    --blu-scuro:    #143766;
    --blu-chiaro:   #e8f0fb;
    --blu-tenue:    #f2f7fd;

    --verde:        #1a7a48;
    --verde-chiaro: #e6f5ec;
    --ambra:        #b26a00;
    --ambra-chiaro: #fff6e6;

    --sfondo:       #ffffff;
    --sfondo-alt:   #f5f8fc;
    --superficie:   #ffffff;
    --testo:        #131c29;
    --testo-tenue:  #55637a;
    --bordo:        #dde4ee;

    --raggio:       14px;
    --raggio-gr:    22px;
    --ombra:        0 1px 2px rgba(16, 26, 40, .06), 0 8px 24px rgba(16, 26, 40, .07);
    --ombra-gr:     0 2px 6px rgba(16, 26, 40, .07), 0 24px 60px rgba(16, 26, 40, .13);

    --larghezza:    1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --blu:          #6aa6f5;
        --blu-scuro:    #8fbdf8;
        --blu-chiaro:   #17273d;
        --blu-tenue:    #131f31;

        --verde:        #5fd39a;
        --verde-chiaro: #12301f;
        --ambra:        #f0b95e;
        --ambra-chiaro: #33280f;

        --sfondo:       #0c1522;
        --sfondo-alt:   #101c2c;
        --superficie:   #14243a;
        --testo:        #e9eff7;
        --testo-tenue:  #9dabc0;
        --bordo:        #26374f;

        --ombra:        0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
        --ombra-gr:     0 2px 6px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5);
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Le ancore non devono finire sotto la barra fissa in alto. */
    scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--blu); text-underline-offset: 3px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

.contenitore {
    max-width: var(--larghezza);
    margin: 0 auto;
    padding: 0 20px;
}

.stretto { max-width: 760px; }

/* ------------------------------------------------------------------
   Barra in alto
   ------------------------------------------------------------------ */
.barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--sfondo) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--bordo);
}

.barra__dentro {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 68px;
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -.03em;
    color: var(--testo);
    text-decoration: none;
    flex: 0 0 auto;
}

.marchio__segno {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    color: var(--blu);
}

.barra__voci {
    display: flex;
    gap: 4px;
    margin-left: auto;
    align-items: center;
}

.barra__voci a {
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

.barra__voci a:hover { background: var(--blu-tenue); color: var(--testo); }

/* Da telefono restano solo marchio e pulsante: un menu a scomparsa per
   quattro voci sarebbe un bottone in piu' da toccare per niente. */
@media (max-width: 860px) {
    .barra__voci a:not(.bottone) { display: none; }
    .barra__voci { margin-left: auto; }
}

/* ------------------------------------------------------------------
   Pulsanti
   ------------------------------------------------------------------ */
.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 22px;
    border: 2px solid var(--blu);
    border-radius: 999px;
    background: var(--blu);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.bottone:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); transform: translateY(-1px); }
.bottone:active { transform: none; }

@media (prefers-color-scheme: dark) {
    .bottone { color: #0c1522; }
}

.bottone--vuoto {
    background: transparent;
    color: var(--blu);
}
.bottone--vuoto:hover { background: var(--blu-chiaro); border-color: var(--blu); }

.bottone--grande { min-height: 56px; padding: 14px 28px; font-size: 1.05rem; }

/* ------------------------------------------------------------------
   Sezioni
   ------------------------------------------------------------------ */
.sezione { padding: 88px 0; }
.sezione--alt { background: var(--sfondo-alt); }
.sezione--stretta { padding: 64px 0; }

.sezione__intro { max-width: 720px; margin-bottom: 44px; }
.sezione__intro p { color: var(--testo-tenue); font-size: 1.08rem; margin-bottom: 0; }

.occhiello {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--blu-chiaro);
    color: var(--blu);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Apertura
   ------------------------------------------------------------------ */
.apertura {
    position: relative;
    padding: 72px 0 88px;
    overflow: hidden;
}

/* Alone morbido dietro al titolo: da' profondita' senza immagini da caricare. */
.apertura::before {
    content: "";
    position: absolute;
    inset: -30% 40% 40% -20%;
    background: radial-gradient(circle at 30% 40%, var(--blu-chiaro), transparent 62%);
    pointer-events: none;
    z-index: 0;
}

.apertura .contenitore { position: relative; z-index: 1; }

.apertura__griglia {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

@media (max-width: 940px) {
    .apertura__griglia { grid-template-columns: 1fr; gap: 44px; }
}

.apertura h1 { margin-bottom: 18px; }
.apertura h1 em {
    font-style: normal;
    color: var(--blu);
    /* Sottolineatura morbida: evidenzia senza gridare. */
    background: linear-gradient(transparent 62%, var(--blu-chiaro) 62%);
}

.apertura__sottotitolo {
    font-size: 1.16rem;
    color: var(--testo-tenue);
    max-width: 34em;
    margin-bottom: 28px;
}

.apertura__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

/* Il prezzo sotto ai pulsanti. Sta fra l'invito e le quattro spunte, e non è
   un dettaglio di posizione: chi arriva qui ha appena letto cosa fa il
   programma, e la domanda successiva è sempre la stessa. */
.apertura__prezzo {
    margin: -6px 0 20px;
    font-size: 1.02rem;
    color: var(--testo-tenue);
}
.apertura__prezzo strong { color: var(--testo); }
.apertura__prezzo a {
    margin-left: 6px;
    white-space: nowrap;
}

.apertura__nota {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: .93rem;
    color: var(--testo-tenue);
    margin: 0;
}

.apertura__nota span { display: inline-flex; align-items: center; gap: 6px; }
.apertura__nota svg { color: var(--verde); flex: 0 0 auto; }

/* ------------------------------------------------------------------
   Riquadri e griglie
   ------------------------------------------------------------------ */
.griglia {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.griglia--due { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 26px 24px;
    box-shadow: var(--ombra);
}

.scheda h3 { margin-bottom: .4em; }
.scheda p { color: var(--testo-tenue); margin-bottom: 0; font-size: .98rem; }

.scheda__icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--blu-chiaro);
    color: var(--blu);
}

.scheda--luce {
    border-color: transparent;
    background-color: var(--blu-scuro);
    background-image: linear-gradient(140deg, var(--blu), var(--blu-scuro));
    color: #fff;
    box-shadow: var(--ombra-gr);
}
.scheda--luce h3, .scheda--luce p { color: #fff; }
.scheda--luce p { opacity: .92; }
.scheda--luce .scheda__icona { background: rgba(255,255,255,.16); color: #fff; }

/* ------------------------------------------------------------------
   Il problema / la soluzione
   ------------------------------------------------------------------ */
.confronto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.confronto__colonna {
    border-radius: var(--raggio);
    padding: 26px 24px;
    border: 1px solid var(--bordo);
    background: var(--superficie);
}

.confronto__colonna h3 { display: flex; align-items: center; gap: 10px; }
.confronto__colonna ul { list-style: none; padding: 0; margin: 14px 0 0; }
.confronto__colonna li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--testo-tenue);
    margin-bottom: 12px;
}
.confronto__colonna li svg { flex: 0 0 auto; margin-top: 3px; }

.confronto--prima li svg { color: #c0392b; }
.confronto--dopo { border-color: color-mix(in srgb, var(--verde) 40%, var(--bordo)); }
.confronto--dopo li svg { color: var(--verde); }

@media (prefers-color-scheme: dark) {
    .confronto--prima li svg { color: #ff8a8f; }
}

/* ------------------------------------------------------------------
   Passi numerati
   ------------------------------------------------------------------ */
.passi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    counter-reset: passo;
}

.passo { position: relative; padding-top: 12px; }

.passo::before {
    counter-increment: passo;
    content: counter(passo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--blu);
    color: #fff;
    font-weight: 800;
}

@media (prefers-color-scheme: dark) { .passo::before { color: #0c1522; } }

.passo p { color: var(--testo-tenue); margin-bottom: 0; }

/* ------------------------------------------------------------------
   Elenco delle funzioni
   ------------------------------------------------------------------ */
.funzioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4px 36px;
}

.funzione {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--bordo);
}

.funzione svg { flex: 0 0 auto; color: var(--blu); margin-top: 2px; }
.funzione h3 { margin-bottom: .25em; font-size: 1.02rem; }
.funzione p { margin: 0; color: var(--testo-tenue); font-size: .95rem; }

/* La riga che chiude l'elenco: le cose scontate, dette in fila invece che una
   scheda per ciascuna. Nessun bordo e nessuna icona, così si legge come una
   coda dell'elenco e non come una funzione in piu' messa in disparte. */
.funzioni__inoltre {
    margin: 26px 0 0;
    color: var(--testo-tenue);
    font-size: .95rem;
    max-width: 62ch;
}
.funzioni__inoltre strong { color: var(--testo); }

/* ------------------------------------------------------------------
   Finestre finte: le schermate del programma, disegnate in CSS

   Non sono immagini: e' l'interfaccia vera ricostruita con gli stessi
   colori e le stesse proporzioni. Restano nitide su qualsiasi schermo,
   non pesano niente da scaricare e seguono il tema chiaro o scuro come
   il resto della pagina.
   ------------------------------------------------------------------ */
.telaio {
    border-radius: var(--raggio-gr);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    box-shadow: var(--ombra-gr);
    overflow: hidden;
}

.telaio__barra {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: var(--sfondo-alt);
    border-bottom: 1px solid var(--bordo);
}

.telaio__pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--bordo); }

.telaio__indirizzo {
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--sfondo);
    border: 1px solid var(--bordo);
    font-size: .74rem;
    color: var(--testo-tenue);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telaio__corpo { padding: 20px 18px 24px; }

/* Telefono */
.telefono {
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 34px;
    padding: 10px;
    background-color: #10161f;
    background-image: linear-gradient(160deg, #2b3646, #10161f);
    box-shadow: var(--ombra-gr);
}

.telefono__schermo {
    border-radius: 26px;
    background: var(--sfondo-alt);
    overflow: hidden;
}

.finta-testata {
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    padding: 14px 12px 12px;
    text-align: center;
}

.finto-marchio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--blu);
    font-size: 1.02rem;
}

.finto-corpo { padding: 14px 12px 18px; }

.finto-titolo {
    text-align: center;
    font-weight: 800;
    font-size: 1.02rem;
    margin: 0 0 6px;
    letter-spacing: -.02em;
}

.finta-durata {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--blu-chiaro);
    color: var(--blu);
    font-size: .74rem;
    font-weight: 700;
}

.finta-scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    text-align: left;
}

.finto-passo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .84rem;
    margin-bottom: 10px;
}

.finto-numero {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--blu);
    color: #fff;
    display: grid; place-items: center;
    font-size: .72rem;
    flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) { .finto-numero { color: #0c1522; } }

.finto-calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    font-size: .68rem;
    text-align: center;
}

.finto-calendario span {
    padding: 5px 0;
    border-radius: 6px;
    color: var(--testo-tenue);
}

.finto-calendario .gi { color: var(--testo-tenue); font-weight: 700; font-size: .6rem; }
.finto-calendario .ok { background: var(--blu-chiaro); color: var(--blu); font-weight: 700; }
.finto-calendario .no { opacity: .35; }
.finto-calendario .sel { background: var(--blu); color: #fff; font-weight: 700; }

@media (prefers-color-scheme: dark) { .finto-calendario .sel { color: #0c1522; } }

.finti-orari {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.finti-orari span {
    padding: 7px 0;
    text-align: center;
    border: 1.5px solid var(--bordo);
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--blu);
}

.finti-orari .sel { background: var(--blu); border-color: var(--blu); color: #fff; }

@media (prefers-color-scheme: dark) { .finti-orari .sel { color: #0c1522; } }

/* Conferma */
.finta-conferma { text-align: center; padding: 6px 4px 2px; }

.finto-segno {
    width: 54px; height: 54px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.5rem;
}

/* Agenda del backend */
.finta-riga {
    display: flex;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    background: var(--superficie);
    margin-bottom: 8px;
    align-items: center;
}

.finta-riga__ora {
    font-weight: 800;
    color: var(--blu);
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    flex: 0 0 46px;
}

.finta-riga__nome { font-weight: 700; font-size: .84rem; }
.finta-riga__dett { font-size: .74rem; color: var(--testo-tenue); }

.finta-etichetta {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--blu-chiaro);
    color: var(--blu);
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.finta-etichetta--verde { background: var(--verde-chiaro); color: var(--verde); }

/* Messaggio SMS */
.sms {
    max-width: 330px;
    margin: 0 auto;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--ombra);
}

.sms__mittente {
    font-size: .74rem;
    color: var(--testo-tenue);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 8px;
}

.sms__bolla {
    background: var(--blu-chiaro);
    color: var(--testo);
    border-radius: 14px 14px 14px 4px;
    padding: 12px 14px;
    font-size: .88rem;
    line-height: 1.5;
}

.sms__bolla a { font-weight: 700; }

/* ------------------------------------------------------------------
   Piu' agende: sezione scura + mini griglia della giornata

   Lo sfondo scuro non e' un vezzo: fa da stacco fra il racconto del lato
   cliente e l'elenco delle funzioni, e permette di infilare una sezione in
   mezzo senza invertire l'alternanza chiaro/scuro di tutte quelle sotto.
   ------------------------------------------------------------------ */
.sezione--scura {
    background: var(--blu-scuro);
    color: #eaf1fb;
}

.sezione--scura h2      { color: #ffffff; }
.sezione--scura p       { color: #c3d4ec; }
.sezione--scura strong  { color: #ffffff; }

.occhiello--chiaro {
    background: rgba(255, 255, 255, .14);
    color: #dbe8fa;
}

/* La precisazione che toglie l'equivoco: parlando di «un'agenda per ognuno» chi
   lavora da solo puo' concludere che per avere piu' prestazioni gli serva il
   pacchetto grande. E' il contrario di quello che vogliamo dirgli. Staccata dal
   resto perche' e' un chiarimento, non un altro argomento di vendita. */
.agende__nota {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .93rem;
}

/* La griglia: dice in un colpo d'occhio quello che il testo spiegherebbe in
   dieci righe — una colonna per persona, e i buchi si vedono. */
.mini-agenda {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--raggio-gr);
    padding: 14px;
    box-shadow: var(--ombra-gr);
}

.mini-agenda__riga {
    display: grid;
    grid-template-columns: 46px repeat(3, 1fr);
    gap: 6px;
    align-items: stretch;
    margin-bottom: 6px;
}

.mini-agenda__riga:last-child { margin-bottom: 0; }

.mini-agenda__riga--testa {
    margin-bottom: 10px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #9fb8d8;
}

.mini-agenda__riga--testa span { text-align: center; }

.mini-agenda__ora {
    font-size: .74rem;
    font-weight: 700;
    color: #9fb8d8;
    align-self: center;
    text-align: right;
    padding-right: 4px;
}

/* Un appuntamento. Tre colori per tre persone: non decorazione, e' il modo
   piu' rapido per far vedere che le colonne sono indipendenti. */
.mini-agenda__blocco {
    background: #3f7bd4;
    color: #ffffff;
    border-radius: 8px;
    padding: 9px 8px;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-agenda__blocco--verde { background: #2e9e5b; }
.mini-agenda__blocco--ambra { background: #c98218; }

/* Il vuoto e' l'informazione: e' li' che si infila il prossimo cliente. */
.mini-agenda__libero {
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: 8px;
    padding: 9px 8px;
    font-size: .72rem;
    text-align: center;
    color: #8fa9c9;
}

@media (max-width: 620px) {
    .mini-agenda__riga { grid-template-columns: 40px repeat(3, 1fr); gap: 4px; }
    .mini-agenda__blocco,
    .mini-agenda__libero { font-size: .68rem; padding: 7px 4px; }
}

/* ------------------------------------------------------------------
   Settori
   ------------------------------------------------------------------ */
.settori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.settore {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    border: 1px solid var(--bordo);
    border-radius: 12px;
    background: var(--superficie);
    font-weight: 600;
    font-size: .96rem;
}

.settore svg { color: var(--blu); flex: 0 0 auto; }

.settore--primo {
    grid-column: 1 / -1;
    background-color: var(--blu-scuro);
    background-image: linear-gradient(135deg, var(--blu), var(--blu-scuro));
    border-color: transparent;
    color: #fff;
    padding: 22px 24px;
    font-size: 1.05rem;
    box-shadow: var(--ombra-gr);
}
.settore--primo svg { color: #fff; }
.settore--primo strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.settore--primo span { opacity: .92; font-weight: 400; font-size: .95rem; }

/* ------------------------------------------------------------------
   Domande
   ------------------------------------------------------------------ */
.domanda {
    border-bottom: 1px solid var(--bordo);
    padding: 6px 0;
}

.domanda summary {
    cursor: pointer;
    padding: 16px 34px 16px 0;
    font-weight: 700;
    list-style: none;
    position: relative;
}

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

.domanda summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--blu);
    line-height: 1;
}

.domanda[open] summary::after { content: "−"; }

.domanda p { color: var(--testo-tenue); margin: 0 0 16px; padding-right: 34px; }

/* ------------------------------------------------------------------
   Richiamo finale
   ------------------------------------------------------------------ */
.richiamo {
    border-radius: var(--raggio-gr);
    background-color: var(--blu-scuro);
    background-image: linear-gradient(135deg, var(--blu), var(--blu-scuro));
    color: #fff;
    padding: 54px 40px;
    text-align: center;
    box-shadow: var(--ombra-gr);
}

.richiamo h2 { color: #fff; }
.richiamo p { color: #fff; opacity: .93; max-width: 40em; margin-left: auto; margin-right: auto; }

.richiamo .bottone {
    background: #fff;
    border-color: #fff;
    color: var(--blu-scuro);
}
.richiamo .bottone:hover { background: #eef4fd; border-color: #eef4fd; color: var(--blu-scuro); }

@media (prefers-color-scheme: dark) {
    .richiamo .bottone { color: #0c1522; }
}

/* ------------------------------------------------------------------
   Piede
   ------------------------------------------------------------------ */
.piede {
    border-top: 1px solid var(--bordo);
    padding: 40px 0 48px;
    background: var(--sfondo-alt);
    font-size: .93rem;
    color: var(--testo-tenue);
}

.piede__dentro {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
    align-items: center;
    justify-content: space-between;
}

.piede a { color: var(--testo-tenue); }
.piede p { margin: 0; }

/* ------------------------------------------------------------------
   Fascia "interamente in italiano"

   Volutamente grande e senza altro attorno: e' un'obiezione che il
   negoziante si porta dietro dai gestionali stranieri tradotti a meta',
   e va tolta di mezzo prima che se la faccia.
   ------------------------------------------------------------------ */
.italiano { padding: 72px 0; }

.italiano__bandiera {
    display: inline-flex;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: 0 2px 10px rgba(16, 26, 40, .18);
}

.italiano__bandiera span {
    display: block;
    width: 16px;
    height: 34px;
}

.italiano__bandiera span:nth-child(1) { background: #008C45; }
.italiano__bandiera span:nth-child(2) { background: #F4F5F0; }
.italiano__bandiera span:nth-child(3) { background: #CD212A; }

.italiano__titolo {
    font-size: clamp(2rem, 5.4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: 0 0 18px;
}

.italiano__sotto {
    font-size: 1.14rem;
    color: var(--testo-tenue);
    max-width: 40em;
    margin: 0 auto 12px;
}

.italiano__sotto--piccolo { font-size: 1rem; margin-bottom: 0; }

/* ------------------------------------------------------------------
   Modulo "fatti richiamare"
   ------------------------------------------------------------------ */
.modulo-contatto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: left;
    max-width: 620px;
    margin: 0 auto;
}

.campo-modulo { display: flex; flex-direction: column; gap: 6px; }
.campo-modulo--intero { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .modulo-contatto { grid-template-columns: 1fr; }
}

.campo-modulo label {
    font-size: .92rem;
    font-weight: 700;
}

.campo-modulo .facoltativo {
    font-weight: 400;
    opacity: .7;
}

.campo-modulo input,
.campo-modulo textarea {
    /* 16px pieni: sotto quella soglia iOS ingrandisce la pagina appena si
       tocca il campo, e non la rimpicciolisce piu' da solo. */
    font: inherit;
    font-size: 16px;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

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

.campo-modulo input::placeholder,
.campo-modulo textarea::placeholder { color: rgba(255, 255, 255, .6); }

.campo-modulo input:focus,
.campo-modulo textarea:focus {
    outline: none;
    border-color: #fff;
    background: rgba(255, 255, 255, .2);
}

/* L'esca per i robot: fuori dallo schermo ma non display:none, che certi
   programmi automatici riconoscono e saltano. */
.esca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.consenso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .92rem;
    line-height: 1.45;
    text-align: left;
}

.consenso input {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: #fff;
}

.consenso a { color: #fff; }

/* ------------------------------------------------------------------
   Prezzi
   ------------------------------------------------------------------ */
.prezzi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
}

.prezzo {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 30px 28px;
    box-shadow: var(--ombra);
}

/* Quello principale si stacca: chi guarda deve capire in un colpo d'occhio
   qual e' il prezzo del servizio e quale il costo una tantum. */
.prezzo--pieno {
    background-color: var(--blu-scuro);
    background-image: linear-gradient(140deg, var(--blu), var(--blu-scuro));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--ombra-gr);
}

/* Il nome del pacchetto: è la prima cosa che si legge nella scheda, e serve a
   capire in un secondo «questo sono io». Grande e leggibile, non un'etichetta
   in punta di piedi sopra la cifra. */
.prezzo__nome {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
    opacity: 1;
    margin: 0 0 4px;
}

.prezzo__cifra {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0 0 6px;
}

.prezzo__cifra span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    opacity: .8;
}

/* La promozione sull'avvio: sta sopra le schede, dove si vede subito. Ambra e
   non verde, perche' il verde nel sito vuol dire "compreso" e qui invece si sta
   dicendo "per ora non si paga" — due cose diverse. */
.promo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: var(--raggio);
    background: var(--ambra-chiaro);
    border: 1px solid rgba(178, 106, 0, .25);
    color: var(--testo);
    line-height: 1.5;
}

.promo strong { color: var(--ambra); }

.promo__segno {
    flex-shrink: 0;
    color: var(--ambra);
    margin-top: 1px;
}

/* Il prezzo cancellato sopra, la promozione sotto: due righe, in quest'ordine.
   Su una riga sola andava a capo dove capitava e spezzava «gratis» dal resto. */
.prezzo__elenco s {
    opacity: .55;
    text-decoration-thickness: 2px;
}

.gratis {
    display: inline-block;
    margin-top: 2px;
    color: var(--ambra);
    font-weight: 800;
    /* Un filo piu' stretta del resto: cosi' la data ci sta su una riga sola
       anche nella colonna piu' angusta, invece di spezzarsi sull'ultima parola. */
    font-size: .94em;
    white-space: nowrap;
}

/* Sulla scheda blu l'ambra sparirebbe: serve un colore che regga sul pieno. */
.prezzo--pieno .gratis { color: #ffd479; }

/* L'alternativa annuale, staccata dal canone mensile.

   Il risparmio si scrive IN EURO e non solo come "due mesi in regalo": una
   cifra si confronta con qualcosa, una formula bisogna calcolarla. */
.prezzo__anno {
    margin: 0 0 20px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--blu-tenue);
    line-height: 1.35;
}

.prezzo__anno strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}

.prezzo__anno span {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    opacity: .85;
}

/* Dentro la scheda in evidenza, che ha lo sfondo blu pieno. */
.prezzo--pieno .prezzo__anno {
    background: rgba(255, 255, 255, .14);
}

/* La riga che scioglie l'equivoco: «1 agenda» non vuol dire «una prestazione
   sola». Va letta subito dopo il nome, quindi è più marcata della riga «Ideale
   per», che serve solo a farsi riconoscere. */
.prezzo__cosa {
    margin: 0 0 2px;
    font-size: .97rem;
    font-weight: 600;
    color: var(--blu);
}
.prezzo--pieno .prezzo__cosa { color: #cfe1fb; }

.prezzo__nota {
    margin: 0 0 14px;
    font-size: .95rem;
    opacity: .85;
}

.prezzo__elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bordo);
    padding-top: 18px;
}

.prezzo--pieno .prezzo__elenco { border-top-color: rgba(255, 255, 255, .28); }

.prezzo__elenco li {
    display: flex;
    /* Con wrap il ritorno a capo dentro la voce funziona davvero: senza, il
       <br> in un contenitore flex viene ignorato e le due righe si appiattiscono
       in una sola. È quello che succedeva al prezzo di avvio barrato. */
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 11px;
    font-size: .97rem;
}

/* Il prezzo barrato e la promozione stanno sulla STESSA riga: su due righe si
   leggeva come se fossero due voci diverse dell'elenco, mentre sono una sola
   informazione — «costava tanto, adesso niente». */
.prezzo__elenco li .gratis { flex: 0 0 auto; }

/* Il testo della voce, quando e' avvolto in uno span per tenere unito il
   grassetto alla frase che segue: senza questo prenderebbe la sua larghezza
   naturale, non starebbe accanto alla spunta e finirebbe tutto sotto. */
.prezzo__elenco li > span:not(.prezzo__spunta) {
    flex: 1;
    min-width: 0;
}

.prezzo__spunta {
    flex: 0 0 auto;
    color: var(--verde);
    font-weight: 800;
}

.prezzo--pieno .prezzo__spunta { color: #fff; }

/* ------------------------------------------------------------------
   Il pulsante dentro la barra in alto

   Serve un blocco a parte per una ragione di precedenza: ".barra__voci a"
   e' piu' specifico di ".bottone" (classe + elemento contro classe sola),
   quindi il grigio tenue delle voci di menu vinceva sul bianco del
   pulsante — scritta grigia su fondo blu, illeggibile.
   ------------------------------------------------------------------ */
.barra__voci a.bottone,
.barra__voci a.bottone:hover {
    color: #fff;
    background: var(--blu);
    border-color: var(--blu);
}

.barra__voci a.bottone:hover {
    background: var(--blu-scuro);
    border-color: var(--blu-scuro);
}

/* Quello vuoto (pagine interne): scritta blu su fondo trasparente. */
.barra__voci a.bottone--vuoto,
.barra__voci a.bottone--vuoto:hover {
    color: var(--blu);
    background: transparent;
    border-color: var(--blu);
}

.barra__voci a.bottone--vuoto:hover { background: var(--blu-chiaro); }

@media (prefers-color-scheme: dark) {
    /* In tema scuro --blu e' un azzurro chiaro: sopra ci va testo scuro. */
    .barra__voci a.bottone,
    .barra__voci a.bottone:hover { color: #0c1522; }

    .barra__voci a.bottone--vuoto,
    .barra__voci a.bottone--vuoto:hover { color: var(--blu); }
}