/* Il vestito delle pagine di servizio: condizioni, privacy, rimborsi, contatti, prezzi.
 *
 * Stessi nomi e stessi valori di index.html e simulacro.html — una casa sola. Qui pero'
 * sta in un file a parte e non dentro la pagina: sono cinque pagine che cambiano poco e
 * si somigliano molto, e tenerne lo stile in cinque copie vuol dire che dopo il primo
 * ritocco non si somigliano piu'.
 *
 * Le pagine legali non sono un dovere da sbrigare: sono la pagina che il cliente apre
 * quando sta per pagare e vuole capire chi c'e' dall'altra parte. Se sembrano scritte
 * male, la carta di credito resta nel portafoglio.
 */

:root{
  --titolo:"Instrument Serif",Georgia,"Times New Roman",serif;
  --testo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tinta:#0f172a; --tenue:#64748b; --linea:#e2e8f0; --prosa:#475569;
  --fondo:#ffffff; --pannello:#f8fafc; --accento:#0d9488; --accento-scuro:#0f766e;
  --bene:#15803d; --bene-sfondo:#f0fdf4; --male:#b91c1c; --male-sfondo:#fef2f2;
  --allarme:#b45309; --allarme-sfondo:#fffbeb;
  --notte:#0b1729; --notte-2:#123141;
  --su-notte:#eaf4f4; --su-notte-tenue:#a9c4c9;
  --vivo:#14b8a6;
  --uscita:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{ --tinta:#e2e8f0; --tenue:#94a3b8; --prosa:#cbd5e1; --linea:#1e293b;
         --fondo:#0b1220; --pannello:#111a2b; --accento:#2dd4bf; --accento-scuro:#5eead4;
         --bene:#4ade80; --bene-sfondo:#052e16; --male:#f87171; --male-sfondo:#3f1212;
         --allarme:#fbbf24; --allarme-sfondo:#2a1e05;
         --notte:#08111f; --notte-2:#0f2836; }
}

*{box-sizing:border-box}
html{scrollbar-color:var(--linea) transparent}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font:16px/1.65 var(--testo);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--vivo);color:#04231f}
:focus-visible{outline:2px solid var(--vivo);outline-offset:3px;border-radius:6px}
a{color:var(--accento-scuro);text-underline-offset:3px;text-decoration-thickness:1px}
@media (prefers-color-scheme: dark){ a{color:var(--accento)} }

.avvolge{max-width:760px;margin:0 auto;padding:0 22px}

/* ------------------------------------------------- la testa, piccola e ferma */
.testa{border-bottom:1px solid var(--linea);background:var(--fondo);
       position:sticky;top:0;z-index:10}
.testa .dentro{max-width:760px;margin:0 auto;padding:14px 22px;
               display:flex;align-items:center;gap:12px}
.marchio{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
         font-weight:600;letter-spacing:-.01em}
.marchio svg{display:block;flex:0 0 auto}
.testa nav{margin-left:auto;display:flex;gap:18px;font-size:.92rem}
.testa nav a{color:var(--tenue);text-decoration:none}
.testa nav a:hover{color:var(--accento-scuro)}

/* ------------------------------------------------------------------ il testo */
main{padding:46px 0 70px}
h1{font-family:var(--titolo);font-weight:400;font-size:clamp(2.1rem,6vw,3rem);
   line-height:1.08;margin:0 0 6px;letter-spacing:-.015em}
.sotto{color:var(--tenue);font-size:.95rem;margin:0 0 38px}
h2{font-family:var(--titolo);font-weight:400;font-size:1.55rem;line-height:1.2;
   margin:38px 0 10px;letter-spacing:-.01em}
h3{font-size:1.02rem;font-weight:600;margin:26px 0 6px}
p,li{color:var(--prosa)}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:7px}
strong,b{color:var(--tinta);font-weight:600}
hr{border:0;border-top:1px solid var(--linea);margin:34px 0}

/* una definizione: il termine a sinistra, la spiegazione a destra */
.voci{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 18px}
.voci dt{font-weight:600;color:var(--tinta)}
.voci dd{margin:0;color:var(--prosa)}
@media (max-width:560px){
  .voci{grid-template-columns:1fr;gap:2px}
  .voci dd{margin-bottom:12px}
}

/* ---------------------------------------------------------------- i riquadri */
.nota{background:var(--pannello);border:1px solid var(--linea);
      border-radius:12px;padding:16px 18px;margin:0 0 22px}
.nota p:last-child{margin-bottom:0}
.nota.attenzione{background:var(--allarme-sfondo);border-color:var(--allarme)}
.nota.attenzione .capo{color:var(--allarme);font-weight:600;display:block;margin-bottom:4px}
.nota.buona{background:var(--bene-sfondo);border-color:var(--bene)}

/* --------------------------------------------------------------- i pulsanti */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:9px;
         background:var(--accento);color:#fff;border:0;border-radius:11px;
         padding:14px 26px;min-height:50px;font:inherit;font-weight:600;
         text-decoration:none;cursor:pointer;
         transition:transform .18s var(--uscita),background .18s}
.bottone:hover{background:var(--accento-scuro);transform:translateY(-1px)}
.bottone:active{transform:translateY(0)}
.bottone.calmo{background:transparent;color:var(--accento-scuro);
               border:1px solid var(--linea)}
.bottone.calmo:hover{background:var(--pannello);border-color:var(--accento)}

/* -------------------------------------------------------------- il fondo */
footer{border-top:1px solid var(--linea);padding:26px 0 46px;
       font-size:.86rem;color:var(--tenue)}
footer p{color:var(--tenue);font-size:.86rem;margin:0 0 10px}
footer .righe{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px}
footer .righe a{color:var(--tenue);text-decoration:none}
footer .righe a:hover{color:var(--accento-scuro);text-decoration:underline}

/* Il posto dove finiscono i dati del venditore. Finche' non ci sono, si vede che
   mancano invece di lasciare un buco muto. */
.venditore-manca{display:none;background:var(--allarme-sfondo);border:1px solid var(--allarme);
                 border-radius:12px;padding:14px 16px;margin:0 0 22px;color:var(--allarme)}
.venditore-manca.si-vede{display:block}