/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Sito di presentazione AVISNext.
   Colori presi dal marchio: il blu della «AVIS», il blu notte di «Next», il rosso della goccia e
   della «x». Fondo bianco come nel gestionale; il grigio azzurro separa le sezioni.
   Le regole della demo (che imita il gestionale) stanno in fondo, sotto «Demo».
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
    --blu: #0a6cd8;
    --blu-scuro: #0a4fae;
    --blu-chiaro: #e8f2fd;
    --notte: #0b2a5b;
    --rosso: #e8173a;
    --rosso-chiaro: #fde8ec;
    --testo: #14233a;
    --testo-tenue: #55657c;
    --linee: #dfe7f1;
    --fondo: #ffffff;
    --fondo-sezione: #f4f8fd;
    --carattere-titoli: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --carattere: "Inter", "Segoe UI", system-ui, sans-serif;
    --raggio: 14px;
    color-scheme: light;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--testo);
    font: 16px/1.6 var(--carattere);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--carattere-titoli); color: var(--notte); line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--blu); }
/* Blazor porta il fuoco sul titolo a ogni cambio di pagina (FocusOnNavigate, per i lettori di
   schermo): il riquadro del fuoco lì non serve a chi usa il mouse. */
h1:focus { outline: none; }
a:focus-visible, .bottone:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }

.contenitore { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.contenitore.stretto { max-width: 820px; }
.sezione { padding-block: 72px; }
.sezione.tinta { background: var(--fondo-sezione); }
.occhiello { font: 700 0.78rem var(--carattere); letter-spacing: 0.09em; text-transform: uppercase; color: var(--blu); }
.introduzione { color: var(--testo-tenue); font-size: 1.125rem; max-width: 62ch; }
.titolo-sezione { display: grid; gap: 12px; margin-bottom: 40px; }
.titolo-sezione.centrato { text-align: center; justify-items: center; }

/* ── Bottoni ─────────────────────────────────────────────────────────────────────────────── */
.bottone {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: 999px;
    background: var(--blu); color: #fff; text-decoration: none;
    font: 600 1rem var(--carattere); border: 2px solid var(--blu);
    transition: background .15s, border-color .15s;
}
.bottone:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }
.bottone.secondario { background: transparent; color: var(--notte); border-color: var(--linee); }
.bottone.secondario:hover { border-color: var(--blu); color: var(--blu); }
.bottone-piccolo { padding: 8px 16px; font-size: .9rem; }

/* ── Testata ────────────────────────────────────────────────────────────────────────────── */
.testata { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linee); }
.testata-riga { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.marchio img { display: block; height: 34px; width: auto; }
.menu { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.menu a { color: var(--testo); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.menu a:hover { background: var(--fondo-sezione); }
.menu a.active { color: var(--blu); }
@media (max-width: 760px) {
    .testata-riga { flex-wrap: wrap; gap: 8px 16px; padding-block: 10px; }
    .menu { order: 3; width: 100%; margin-left: -10px; gap: 0; }
    .menu a { padding: 8px 10px; }
    .testata .bottone-piccolo { margin-left: auto; }
}

/* ── Apertura ───────────────────────────────────────────────────────────────────────────── */
.apertura { padding-block: 64px 24px; overflow: hidden; }
.apertura-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.apertura-testo { display: grid; gap: 22px; }
.apertura h1 em { font-style: normal; color: var(--blu); }
.apertura .azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.apertura-nota { color: var(--testo-tenue); font-size: .9rem; }
@media (max-width: 900px) { .apertura-griglia { grid-template-columns: 1fr; } }

/* Una schermata dentro una cornice da finestra: è il gestionale, non un'illustrazione. */
.finestra { border: 1px solid var(--linee); border-radius: var(--raggio); background: #fff; box-shadow: 0 24px 60px -24px rgba(11, 42, 91, .28); overflow: hidden; }
.finestra-barra { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--linee); background: var(--fondo-sezione); }
.finestra-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linee); }
.finestra img { display: block; width: 100%; height: auto; }

/* ── Aree ───────────────────────────────────────────────────────────────────────────────── */
.aree { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.area { border: 1px solid var(--linee); border-radius: var(--raggio); padding: 20px; display: grid; gap: 8px; align-content: start; background: #fff; }
.area-icona { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--blu-chiaro); color: var(--blu); }
.area-icona svg { width: 22px; height: 22px; }
.area p { color: var(--testo-tenue); font-size: .95rem; }

/* ── Funzioni con schermata ─────────────────────────────────────────────────────────────── */
.funzioni { display: grid; gap: 88px; }
.funzione { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.funzione:nth-child(even) .funzione-testo { order: 2; }
.funzione-testo { display: grid; gap: 16px; }
.funzione-testo p { color: var(--testo-tenue); }
.elenco-punti { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; }
.elenco-punti li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.elenco-punti li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--blu-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6cd8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.funzione .link-demo { font-weight: 600; text-decoration: none; }
.funzione .link-demo:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .funzione { grid-template-columns: 1fr; gap: 28px; }
    .funzione:nth-child(even) .funzione-testo { order: 0; }
}

/* ── App del donatore: un telefono disegnato, con dentro una schermata semplificata ───────── */
.telefono { width: min(300px, 100%); margin-inline: auto; aspect-ratio: 9 / 18.5; border-radius: 40px; border: 10px solid var(--notte); background: #f5f7fa; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 24px 60px -24px rgba(11, 42, 91, .35); }
.telefono-testata { background: #fff; padding: 22px 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linee); }
.telefono-testata img { width: 28px; height: 28px; }
.telefono-testata strong { font: 700 .95rem var(--carattere-titoli); color: var(--notte); }
.telefono-corpo { padding: 14px; display: grid; gap: 10px; align-content: start; font-size: .82rem; }
.scheda-app { background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.scheda-app .etichetta { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); font-weight: 600; }
.scheda-app .valore { font: 700 1.05rem var(--carattere-titoli); color: var(--notte); }
.scheda-app.evidenza { background: var(--blu); color: #fff; }
.scheda-app.evidenza .etichetta, .scheda-app.evidenza .valore { color: #fff; }
.scheda-app .riga { display: flex; justify-content: space-between; gap: 8px; }
.pillola { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--blu-chiaro); color: var(--blu); }

/* ── Chiusura ───────────────────────────────────────────────────────────────────────────── */
.invito { background: var(--notte); color: #fff; border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.invito h2 { color: #fff; }
.invito p { color: #c9d7ec; margin-top: 10px; }
.invito .azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.invito .bottone.secondario { color: #fff; border-color: rgba(255,255,255,.35); }
.invito .bottone.secondario:hover { border-color: #fff; color: #fff; }
@media (max-width: 760px) { .invito { grid-template-columns: 1fr; padding: 32px 24px; } }

/* ── Pacchetti ──────────────────────────────────────────────────────────────────────────── */
.pacchetti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: stretch; }
.pacchetto { border: 1px solid var(--linee); border-radius: 18px; padding: 26px 22px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 14px; background: #fff; }
.pacchetto h2 { font-size: 1.45rem; }
/* Tre righe riservate alla descrizione: così i prezzi stanno tutti alla stessa altezza. */
.pacchetto .descrizione { color: var(--testo-tenue); font-size: .95rem; min-height: calc(3 * 1.6em); }
.prezzo { display: grid; gap: 2px; padding-block: 4px 6px; border-bottom: 1px solid var(--linee); }
.prezzo-cifra { font: 800 2.1rem var(--carattere-titoli); color: var(--notte); font-variant-numeric: tabular-nums; }
.prezzo-nota { font-size: .82rem; color: var(--testo-tenue); }
.moduli-inclusi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .93rem; align-content: start; }
.moduli-inclusi li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.moduli-inclusi li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--blu-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6cd8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pacchetto .bottone { justify-content: center; }

.avvertenze { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.avvertenza { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 16px 18px; border-radius: var(--raggio); background: var(--fondo-sezione); font-size: .95rem; }
.avvertenza svg { width: 24px; height: 24px; color: var(--blu); margin-top: 2px; }
.avvertenza strong { color: var(--notte); display: block; }

.tabella-scorri { overflow-x: auto; border: 1px solid var(--linee); border-radius: var(--raggio); background: #fff; }
.confronto { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .94rem; }
.confronto th, .confronto td { padding: 12px 16px; border-bottom: 1px solid var(--linee); text-align: center; vertical-align: middle; }
.confronto thead th { font: 700 .95rem var(--carattere-titoli); color: var(--notte); background: var(--fondo-sezione); position: sticky; top: 0; }
.confronto th:first-child, .confronto td:first-child { text-align: left; }
.confronto td:first-child strong { display: block; color: var(--notte); }
.confronto td:first-child span { color: var(--testo-tenue); font-size: .85rem; }
.confronto tr.gruppo td { background: var(--fondo-sezione); font: 700 .74rem var(--carattere); letter-spacing: .08em; text-transform: uppercase; color: var(--testo-tenue); padding-block: 8px; }
.confronto tbody tr:last-child td { border-bottom: 0; }
.si { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blu); color: #fff; }
.si svg { width: 14px; height: 14px; }
.no { display: inline-block; width: 12px; height: 2px; background: var(--linee); }

.listino-assente { border: 1px dashed var(--linee); border-radius: var(--raggio); padding: 40px; text-align: center; color: var(--testo-tenue); display: grid; gap: 10px; justify-items: center; }

/* ── Piè di pagina ──────────────────────────────────────────────────────────────────────── */
.piede { background: var(--fondo-sezione); border-top: 1px solid var(--linee); padding-block: 48px 24px; margin-top: 24px; }
.piede-griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.piede-marchio { display: grid; gap: 14px; align-content: start; color: var(--testo-tenue); max-width: 36ch; }
.piede-titolo { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue); margin-bottom: 12px; font-family: var(--carattere); }
.recapiti { font-style: normal; display: grid; gap: 6px; }
.recapiti strong { color: var(--notte); }
.piede-link { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.piede-link a { color: var(--testo); text-decoration: none; }
.piede-link a:hover { color: var(--blu); }
.piede-fondo { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--linee); font-size: .85rem; color: var(--testo-tenue); }
@media (max-width: 760px) { .piede-griglia { grid-template-columns: 1fr; gap: 28px; } }