/*
 * Copyright (c) 2026 Andrea Re - info@digitare.net
 * Autore: Andrea Re @ 2026 - info@digitare.net
 *
 * Stili del sito rastinvoice.it, sopra Bootstrap Italia.
 */

/* Caratteri inclusi localmente: nessuna richiesta a server esterni. */
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 300; font-display: optional;
  src: url("../fonts/titillium-web-v10-latin-ext_latin-300.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/titillium-web-v10-latin-ext_latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("../fonts/titillium-web-v10-latin-ext_latin-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("../fonts/titillium-web-v10-latin-ext_latin-700.woff2") format("woff2"); }

:root {
  --ri-blu: #0066cc;
  --ri-blu-scuro: #004d99;
  --ri-blu-notte: #17324d;
  --ri-verde: #008055;
  --ri-chiaro: #f2f7fc;
  --ri-bordo: #d9e4ef;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: "Titillium Web", Geneva, Tahoma, sans-serif; color: #1a1a1a; background: #fff; }

/* Collegamento per saltare al contenuto */
.salta { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .75rem 1rem;
  background: #fff; color: var(--ri-blu); font-weight: 600; }
.salta:focus { left: 1rem; top: 1rem; }

/* Intestazione */
.testata { position: sticky; top: 0; z-index: 1000; background: var(--ri-blu); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.testata .container { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.marchio { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.35rem; }
.marchio:hover { color: #fff; text-decoration: none; }
.marchio img { width: 2.25rem; height: 2.25rem; border-radius: .5rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.menu { margin-left: auto; display: flex; align-items: center; gap: .25rem; list-style: none; margin-bottom: 0; padding: 0; }
.menu a { color: #fff; text-decoration: none; padding: .5rem .75rem; border-radius: .25rem; font-weight: 600; }
.menu a:hover, .menu a:focus-visible { background: rgba(255, 255, 255, .15); color: #fff; }
.menu .btn-scarica { background: #fff; color: var(--ri-blu); }
.menu .btn-scarica:hover { background: var(--ri-chiaro); color: var(--ri-blu-scuro); }
.apri-menu { display: none; margin-left: auto; background: transparent; border: 2px solid rgba(255, 255, 255, .6);
  color: #fff; border-radius: .25rem; padding: .35rem .6rem; font-weight: 600; }
.apri-menu svg { fill: #fff; width: 1.25rem; height: 1.25rem; vertical-align: -0.25rem; }
@media (max-width: 991.98px) {
  .apri-menu { display: inline-block; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; background: var(--ri-blu-scuro); padding: .5rem 1rem 1rem; }
  .menu.aperto { display: flex; }
  .menu a { display: block; padding: .75rem; }
}

/* Sezione principale */
.eroe { background: linear-gradient(160deg, var(--ri-blu) 0%, var(--ri-blu-scuro) 60%, var(--ri-blu-notte) 100%);
  color: #fff; padding: 4rem 0 0; overflow: hidden; }
.eroe h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; font-weight: 700; }
.eroe .sopratitolo { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .9rem;
  color: #cfe3f7; margin-bottom: .75rem; }
.eroe .lead { color: #e6f0fa; font-size: 1.25rem; max-width: 36rem; }
.eroe .btn-light { color: var(--ri-blu); font-weight: 700; }
.eroe .btn-outline-light { font-weight: 600; }
.eroe .punti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; }
.eroe .punti li { display: flex; align-items: center; gap: .4rem; color: #e6f0fa; font-weight: 600; }
.eroe .punti svg { fill: #7fe0b8; width: 1.25rem; height: 1.25rem; }
.schermo { margin-top: 3rem; border-radius: .75rem .75rem 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35);
  background: #fff; padding: .5rem .5rem 0; }
.schermo img { display: block; width: 100%; height: auto; border-radius: .4rem .4rem 0 0; }

/* Sezioni */
.sezione { padding: 4.5rem 0; }
.sezione.chiara { background: var(--ri-chiaro); }
.sezione h2 { font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.4rem); color: var(--ri-blu-notte); }
.sezione .intro { font-size: 1.15rem; max-width: 46rem; color: #404040; }

/* Vantaggi */
.vantaggio { text-align: left; }
.vantaggio .icona { width: 3.25rem; height: 3.25rem; border-radius: .75rem; background: var(--ri-blu);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.vantaggio .icona svg { fill: #fff; width: 1.75rem; height: 1.75rem; }
.vantaggio h3 { font-size: 1.25rem; font-weight: 700; color: var(--ri-blu-notte); }
.vantaggio p { color: #404040; margin: 0; }

/* Funzionalità */
.funzione { background: #fff; border: 1px solid var(--ri-bordo); border-radius: .75rem; padding: 1.5rem;
  height: 100%; }
.funzione h3 { font-size: 1.2rem; font-weight: 700; color: var(--ri-blu-notte); display: flex;
  align-items: center; gap: .6rem; }
.funzione h3 svg { fill: var(--ri-blu); width: 1.5rem; height: 1.5rem; flex: none; }
.funzione ul { padding-left: 1.1rem; margin: 0; color: #333; }
.funzione li { margin-bottom: .35rem; }
.funzione li:last-child { margin-bottom: 0; }

/* Galleria */
.galleria-schede { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.galleria-schede button { border: 2px solid var(--ri-blu); background: #fff; color: var(--ri-blu);
  border-radius: 2rem; padding: .4rem 1rem; font-weight: 600; }
.galleria-schede button[aria-selected="true"] { background: var(--ri-blu); color: #fff; }
.galleria-schede button:focus-visible { outline: 3px solid #ff9900; outline-offset: 2px; }
.galleria figure { margin: 0; }
.galleria img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--ri-bordo);
  box-shadow: 0 10px 30px rgba(23, 50, 77, .15); }
.galleria figcaption { margin-top: 1rem; font-size: 1.1rem; color: #404040; }

/* Scarica */
.store { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ri-bordo);
  border-radius: .75rem; padding: 1.5rem; height: 100%; }
.store .sistema { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.store .sistema svg { width: 2.25rem; height: 2.25rem; fill: var(--ri-blu-notte); flex: none; }
.store h3 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--ri-blu-notte); }
.store .prezzo { display: inline-block; font-weight: 700; color: var(--ri-verde); margin-bottom: .5rem; }
.store p { color: #404040; }
.store .azioni { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.store .btn { font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.store .btn svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
/* Pulsanti degli store non ancora pubblicati */
.store .presto { opacity: .6; cursor: default; pointer-events: none; }
.nota { font-size: .95rem; color: #5c6f82; }

/* Domande frequenti */
.faq details { border-bottom: 1px solid var(--ri-bordo); padding: 1rem 0; }
.faq summary { font-weight: 700; font-size: 1.15rem; cursor: pointer; color: var(--ri-blu-notte);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ri-blu); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: .75rem 0 0; color: #333; }

/* Contatti */
.modulo { background: #fff; border: 1px solid var(--ri-bordo); border-radius: .75rem; padding: 2rem; }
.modulo label { font-weight: 600; display: block; margin-bottom: .35rem; color: #1a1a1a; }
.modulo .form-control, .modulo .form-select { border: 1px solid #8a9aab; border-radius: .25rem;
  padding: .6rem .75rem; width: 100%; font-size: 1rem; }
.modulo .form-control:focus, .modulo .form-select:focus { outline: 3px solid #ff9900; outline-offset: 1px;
  border-color: var(--ri-blu); box-shadow: none; }
.modulo textarea { min-height: 9rem; }
.modulo .campo { margin-bottom: 1.25rem; }
.modulo .consenso { display: flex; gap: .6rem; align-items: flex-start; }
.modulo .consenso input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; }
.modulo .consenso label { font-weight: 400; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.esito { margin-top: 1rem; }

/* Sostegno */
.sostegno { background: var(--ri-blu-notte); color: #fff; border-radius: .75rem; padding: 2rem; }
.sostegno h2 { color: #fff; }
.sostegno p { color: #e6f0fa; }

/* Piè di pagina */
.piede { background: var(--ri-blu-notte); color: #c8d6e5; padding: 3rem 0 2rem; }
.piede h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; font-weight: 700; }
.piede a { color: #fff; }
.piede ul { list-style: none; padding: 0; }
.piede li { margin-bottom: .4rem; }
.piede .fondo { border-top: 1px solid rgba(255, 255, 255, .2); margin-top: 2rem; padding-top: 1.5rem; font-size: .95rem; }

/* Pagine di testo (privacy, grazie) */
.testo { max-width: 48rem; }
.testo h1 { font-weight: 700; color: var(--ri-blu-notte); }
.testo h2 { font-size: 1.4rem; font-weight: 700; color: var(--ri-blu-notte); margin-top: 2rem; }
.testo table { width: 100%; }

a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid #ff9900; outline-offset: 2px; box-shadow: none; }

/* Ritocchi */
.testata nav { margin-left: auto; }
.btn-bianco { background: #fff; color: var(--ri-blu); border: 2px solid #fff; font-weight: 700; }
.btn-bianco:hover, .btn-bianco:focus { background: var(--ri-chiaro); color: var(--ri-blu-scuro); border-color: var(--ri-chiaro); }
.sostegno h2 { font-size: 1.5rem; }
@media (max-width: 991.98px) { .testata nav { margin-left: 0; } }

/* Scheda tecnica e guide */
.scheda { background: #fff; border: 1px solid var(--ri-bordo); border-radius: .75rem; overflow: hidden; margin: 0; }
.scheda th { width: 40%; font-weight: 600; color: var(--ri-blu-notte); background: var(--ri-chiaro); }
.scheda th, .scheda td { padding: .65rem 1rem; border-color: var(--ri-bordo); }
.guide { padding-left: 1.1rem; }
.guide li { margin-bottom: .4rem; font-size: 1.1rem; }

/* Pagine guida */
.guida .passi { counter-reset: passo; list-style: none; padding: 0; }
.guida .passi li { counter-increment: passo; position: relative; padding-left: 3rem; margin-bottom: 1.25rem; }
.guida .passi li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem;
  border-radius: 50%; background: var(--ri-blu); color: #fff; font-weight: 700; display: flex; align-items: center;
  justify-content: center; }
.guida figure img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--ri-bordo); }
.guida figcaption { color: #5c6f82; margin-top: .5rem; }
.briciole { font-size: .95rem; margin-bottom: 1rem; }
.briciole ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.briciole li + li::before { content: "/"; margin-right: .4rem; color: #5c6f82; }
.invito { background: var(--ri-chiaro); border-radius: .75rem; padding: 1.5rem; margin-top: 2rem; }