/* ==========================================================================
   bSoa - sistema visivo del sito pubblico e dell'area riservata
   
   I colori sono due, e sono scelti:
   - il blu profondo dice affidabilita' e autorita' istituzionale, che e' il
     registro giusto per uno strumento che lavora su dati pubblici e
     certificazioni;
   - l'ottone dice valore e iniziativa commerciale. E' l'accento che si usa
     per i numeri che contano e per i pulsanti che portano da qualche parte.
   Il fondo e' un bianco caldo, non puro: su una schermata piena di tabelle
   riduce l'affaticamento e fa risaltare il bianco delle superfici.

   Questo foglio sta in public/ e non passa da Vite di proposito: il sito
   pubblico deve rispondere anche su un server dove non e' mai stato lanciato
   un build di asset.
   ========================================================================== */

:root {
    --blu: #12314f;
    --blu-scuro: #0b2338;
    --blu-chiaro: #2c5680;
    --blu-tenue: #eaf0f6;
    --ottone: #b4832c;
    --ottone-chiaro: #d9a94a;
    --ottone-tenue: #faf3e4;

    --fondo: #fbfaf7;
    --superficie: #ffffff;
    --bordo: #e4e0d8;
    --testo: #16202b;
    --testo-tenue: #5c6b7a;

    --verde: #15803d;
    --rosso: #b91c1c;

    --raggio: 10px;
    --raggio-grande: 16px;
    --ombra: 0 1px 2px rgba(18, 49, 79, .06), 0 8px 24px rgba(18, 49, 79, .06);
    --contenitore: 1140px;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--testo);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
a { color: var(--blu-chiaro); }

.contenitore { max-width: var(--contenitore); margin: 0 auto; padding: 0 1.5rem; }
.stretto { max-width: 760px; }

/* --- intestazione ------------------------------------------------------ */
.testata {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 250, 247, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordo);
}
.testata .contenitore { display: flex; align-items: center; gap: 2rem; height: 68px; }
.menu { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; }
.menu a { color: var(--testo); text-decoration: none; font-size: .95rem; font-weight: 500; }
.menu a:hover { color: var(--blu); }

/* --- pulsanti ---------------------------------------------------------- */
.bottone {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: var(--raggio);
    font-weight: 600; font-size: .95rem; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; transition: .15s;
}
.bottone-primario { background: var(--blu); color: #fff; }
.bottone-primario:hover { background: var(--blu-scuro); }
.bottone-accento { background: var(--ottone); color: #fff; }
.bottone-accento:hover { background: #9d711f; }
.bottone-neutro { background: transparent; color: var(--blu); border-color: var(--bordo); }
.bottone-neutro:hover { border-color: var(--blu-chiaro); }

/* --- sezioni ----------------------------------------------------------- */
.sezione { padding: 5rem 0; }
.sezione-scura { background: var(--blu); color: #fff; }
.sezione-scura h2 { color: #fff; }
.sezione-scura p { color: rgba(255, 255, 255, .8); }
.sezione-tenue { background: var(--blu-tenue); }

.occhiello {
    text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
    font-weight: 700; color: var(--ottone); margin-bottom: .6rem;
}
.guida { font-size: 1.15rem; color: var(--testo-tenue); max-width: 65ch; }

/* --- griglie ----------------------------------------------------------- */
.griglia { display: grid; gap: 1.5rem; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.scheda {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande); padding: 1.75rem;
}
.scheda h3 { margin-bottom: .4rem; }
.scheda p { color: var(--testo-tenue); font-size: .95rem; margin: 0; }
.scheda-icona {
    width: 40px; height: 40px; border-radius: var(--raggio);
    background: var(--blu-tenue); color: var(--blu);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}

/* --- mockup del prodotto ----------------------------------------------- */
.finestra {
    background: var(--superficie); border: 1px solid var(--bordo);
    border-radius: var(--raggio-grande); box-shadow: var(--ombra); overflow: hidden;
}
.finestra-barra {
    display: flex; align-items: center; gap: .4rem;
    padding: .6rem .9rem; border-bottom: 1px solid var(--bordo); background: #f7f5f1;
}
.finestra-punto { width: 9px; height: 9px; border-radius: 50%; background: #d6d1c7; }
.finestra-titolo { margin-left: .6rem; font-size: .78rem; color: var(--testo-tenue); }
.finestra-corpo { padding: 1rem 1.1rem; }

table.dati { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.dati th {
    text-align: left; font-weight: 600; color: var(--testo-tenue);
    padding: .45rem .5rem; border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
table.dati td { padding: .5rem; border-bottom: 1px solid #f1eee8; white-space: nowrap; }
table.dati tr:last-child td { border-bottom: 0; }
.su { color: var(--verde); font-weight: 600; }
.giu { color: var(--rosso); font-weight: 600; }
.pastiglia {
    display: inline-block; padding: .1rem .5rem; border-radius: 99px;
    font-size: .72rem; font-weight: 600;
}
.pastiglia-verde { background: #e7f5ec; color: var(--verde); }
.pastiglia-rossa { background: #fdeaea; color: var(--rosso); }
.pastiglia-ambra { background: var(--ottone-tenue); color: #8a6420; }

/* --- numeri d'effetto -------------------------------------------------- */
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.numero strong { display: block; font-size: 2.4rem; line-height: 1.1; letter-spacing: -.03em; }
.numero span { font-size: .9rem; color: var(--testo-tenue); }
.sezione-scura .numero span { color: rgba(255, 255, 255, .75); }
.sezione-scura .numero strong { color: var(--ottone-chiaro); }

/* --- elenchi con segno di spunta --------------------------------------- */
.spunte { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.spunte li { display: flex; gap: .7rem; margin-bottom: .8rem; align-items: flex-start; }
.spunte svg { flex: 0 0 20px; margin-top: .28rem; color: var(--ottone); }

/* --- modulo ------------------------------------------------------------ */
.campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.campo label { font-size: .85rem; font-weight: 600; }
.campo input, .campo textarea {
    font: inherit; font-size: .95rem; padding: .65rem .8rem;
    border: 1px solid var(--bordo); border-radius: var(--raggio);
    background: var(--superficie); color: inherit;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--blu-chiaro); outline-offset: 1px; }
.campo-errore { color: var(--rosso); font-size: .82rem; }
.consenso { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--testo-tenue); }
.avviso {
    padding: 1rem 1.2rem; border-radius: var(--raggio);
    background: #e7f5ec; border: 1px solid #bfe3cd; color: #14532d; margin-bottom: 1.5rem;
}

/* --- testi legali ------------------------------------------------------ */
.legale { font-size: .95rem; }
.legale h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.legale h3 { font-size: 1.05rem; margin-top: 1.75rem; }
.legale table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.legale th, .legale td { text-align: left; padding: .55rem .7rem; border: 1px solid var(--bordo); vertical-align: top; }
.legale th { background: var(--blu-tenue); font-weight: 600; }

/* --- pie' di pagina ---------------------------------------------------- */
.pieddipagina { background: var(--blu-scuro); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 2rem; font-size: .9rem; }
.pieddipagina a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.pieddipagina a:hover { color: #fff; }
.pieddipagina h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
.pieddipagina ul { list-style: none; padding: 0; margin: 0; }
.pieddipagina li { margin-bottom: .45rem; }
.pieddipagina-fondo {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem;
}

@media (max-width: 720px) {
    .menu a:not(.bottone) { display: none; }
    .sezione { padding: 3.5rem 0; }
}