@charset "UTF-8";
/* ===========================================================================
   Stravirgiliana 5 km solidale — foglio di stile del dominio dell'evento
   ---------------------------------------------------------------------------
   Questo file NON e' figlio di root.scss e non ne importa nulla: le pagine
   della Stravirgiliana escono da un template HTML autonomo, senza il guscio di
   urbanrunners. Portarsi dietro root.css vorrebbe dire ~300 KB di stili di un
   altro sito per due pagine che non ne usano una regola, e soprattutto
   ereditarne i reset e le variabili di colore: la palette qui e' un'altra.

   Sorgente delle scelte: docs/stravirgiliana/pacchetto/DESIGN.md.
   Compilato con:  sass themes/site/css/stravirgiliana.scss themes/site/css/stravirgiliana.css
   =========================================================================== */
/* --- palette (DESIGN.md) ------------------------------------------------- */
/* --- base ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* scroll-padding: l'header e' sticky, e senza questo i link ancora del menu
   portano il titolo della sezione sotto la barra. */
html {
  scroll-padding-top: 78px;
}

body {
  margin: 0;
  background: #fbfaf6;
  color: #14223d;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #1d4fa3;
  text-decoration: none;
}

a:hover {
  color: #2f8434;
}

input, select, button, textarea {
  font-family: inherit;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.sv-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  width: 100%;
}

/* Visibile solo agli screen reader (etichette dei campi che in pagina
   sono rese dal placeholder, salti di navigazione). */
.sv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Il salto al contenuto compare solo col tab: chi naviga da tastiera non deve
   passare tutto il menu per arrivare al form. */
.sv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #1d4fa3;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
}

.sv-skip:focus {
  left: 0;
  color: #ffffff;
}

/* --- header -------------------------------------------------------------- */
.sv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid #e6e4dc;
}

.sv-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.sv-wordmark {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #1d4fa3;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sv-wordmark span {
  color: #3a9a3f;
}

a.sv-wordmark:hover {
  color: #1d4fa3;
}

.sv-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: 15px;
}

.sv-nav a {
  color: #14223d;
}

.sv-nav a:hover {
  color: #1d4fa3;
}

.sv-nav-cta {
  background: #1d4fa3;
  color: #ffffff !important;
  padding: 11px 20px;
  border-radius: 999px;
}

.sv-nav-cta:hover {
  background: #143b80;
}

.sv-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid #d9d6cb;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
}

.sv-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #14223d;
  position: relative;
}

.sv-burger span::before,
.sv-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #14223d;
}

.sv-burger span::before {
  top: -6px;
}

.sv-burger span::after {
  top: 6px;
}

.sv-menu-mobile {
  display: none;
  border-top: 1px solid #e6e4dc;
  background: #fbfaf6;
}

.sv-menu-mobile.is-open {
  display: block;
}

.sv-menu-mobile a {
  display: block;
  padding: 14px clamp(16px, 4vw, 32px);
  font-size: 18px;
  font-weight: 600;
  color: #14223d;
  border-bottom: 1px solid #e6e4dc;
}

.sv-menu-mobile a:last-child {
  border-bottom: 0;
}

/* --- hero ---------------------------------------------------------------- */
.sv-hero {
  position: relative;
  overflow: hidden;
  background: #cfe6f5;
}

.sv-hero picture,
.sv-hero img.sv-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Due sfumature sovrapposte: la verticale stacca il testo dal fogliame, la
   orizzontale da' corpo alla colonna di sinistra senza spegnere l'illustrazione
   dove non serve. */
.sv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 37, 82, 0) 35%, rgba(15, 37, 82, 0.9) 100%), linear-gradient(90deg, rgba(15, 37, 82, 0.45) 0%, rgba(15, 37, 82, 0) 60%);
}

.sv-hero-in {
  position: relative;
  z-index: 2;
  padding-top: clamp(140px, 26vw, 300px);
  padding-bottom: clamp(40px, 6vw, 72px);
  color: #ffffff;
}

.sv-badge {
  display: inline-block;
  background: #3a9a3f;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
}

.sv-hero h1 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(52px, 11vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 18px 0 0;
  text-transform: uppercase;
  color: #ffffff;
}

.sv-hero h1 span {
  color: #9fe39a;
  display: block;
}

.sv-hero-claim {
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.3;
  margin: 20px 0 0;
}

.sv-hero-causa {
  font-size: clamp(15px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.88);
  margin: 8px 0 0;
}

.sv-hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* --- pulsanti ------------------------------------------------------------ */
/* La CTA piena e' SOLO dell'iscrizione: nel resto della pagina nessun elemento
   prende l'aspetto di un pulsante pieno, altrimenti l'unica azione che conta
   smette di distinguersi. */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.sv-btn-bianco {
  background: #ffffff;
  color: #1d4fa3;
}

.sv-btn-bianco:hover {
  background: #eef2fa;
  color: #1d4fa3;
}

.sv-btn-ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}

.sv-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.sv-btn-blu {
  background: #1d4fa3;
  color: #ffffff;
}

.sv-btn-blu:hover {
  background: #143b80;
  color: #ffffff;
}

.sv-btn-outline {
  background: transparent;
  color: #1d4fa3;
  border-color: #d9d6cb;
}

.sv-btn-outline:hover {
  border-color: #1d4fa3;
  color: #1d4fa3;
}

.sv-submit {
  width: 100%;
  height: 58px;
  background: #3a9a3f;
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sv-submit:hover:not(:disabled) {
  background: #2f8434;
}

.sv-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- pulsante in attesa --------------------------------------------------- */
/* Fra il click e la pagina che cambia possono passare secondi: la POST apre il
   gateway di pagamento o una connessione SMTP, e nel frattempo a schermo non si
   muove niente. La rotella dice che la richiesta e' partita — senza, si clicca
   una seconda volta e parte un secondo pagamento (vedi stravirgiliana.js). */
@keyframes sv-gira {
  to {
    transform: rotate(360deg);
  }
}
button.is-attesa::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sv-gira 0.7s linear infinite;
}

/* Spento ma non sbiadito: il pulsante che sta lavorando deve restare l'elemento
   piu' visibile della pagina, altrimenti sembra rifiutato. */
.sv-submit.is-attesa:disabled {
  opacity: 0.9;
}

/* --- barra info ---------------------------------------------------------- */
.sv-info {
  background: #ffffff;
  border-bottom: 1px solid #e6e4dc;
}

.sv-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: clamp(18px, 3vw, 32px);
  padding-top: 26px;
  padding-bottom: 26px;
}

.sv-info-voce {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sv-info-ico {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8effb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #1d4fa3;
}

.sv-info-voce strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #14223d;
}

.sv-info-voce span {
  display: block;
  font-size: 15px;
  color: #56607a;
  line-height: 1.4;
}

/* --- sezioni generiche --------------------------------------------------- */
.sv-eyebrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3a9a3f;
  margin: 0;
}

.sv-due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

/* --- il progetto --------------------------------------------------------- */
.sv-progetto {
  padding-top: clamp(56px, 9vw, 112px);
  padding-bottom: clamp(56px, 9vw, 112px);
}

.sv-progetto h2 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 0.95;
  margin: 12px 0 0;
  color: #1d4fa3;
  text-transform: uppercase;
}

.sv-progetto p {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.65;
  color: #2a3654;
  margin: 0 0 18px;
}

/* Link testuale con miniatura, NON un pulsante: la locandina e' un di piu',
   non l'azione della pagina. */
.sv-locandina {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.sv-locandina img {
  width: 56px;
  border-radius: 6px;
  border: 1px solid #e6e4dc;
}

.sv-locandina a {
  font-weight: 700;
  text-decoration: underline;
}

.sv-locandina span {
  display: block;
  font-size: 13px;
  color: #56607a;
}

/* --- programma ----------------------------------------------------------- */
.sv-programma {
  background: #eef6ea;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.sv-programma h2 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.5vw, 64px);
  line-height: 0.95;
  margin: 12px 0 32px;
  color: #1f6b25;
  text-transform: uppercase;
}

.sv-orario {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #cfe3c8;
  align-items: baseline;
}

.sv-orario:last-child {
  border-bottom: 0;
}

.sv-orario b {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: #14223d;
}

/* "dalle" sulla stessa riga dell'ora, non sopra.
   Con display:block quella cella diventava alta due righe e, siccome la griglia
   allinea sulla PRIMA linea di base, il testo a destra si incollava a "dalle"
   invece che all'orario: l'ultima riga del programma sembrava disallineata
   rispetto alle altre due. Su una riga sola il problema non esiste, e "dalle
   10:30" si legge come lo si direbbe. */
.sv-orario b small {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #56607a;
  text-transform: lowercase;
  margin-right: 5px;
}

.sv-orario p {
  margin: 0;
  color: #2a3654;
}

/* Contenitore della mappa Google. Finche' la libreria non e' pronta mostra
   l'indirizzo su fondo verde: un riquadro grigio vuoto sembra un pezzo rotto,
   una scritta no. Le misure sono fissate qui e non lasciate al contenuto,
   altrimenti al momento in cui la mappa compare la pagina scatta in avanti. */
.sv-mappa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/10;
  max-width: 380px;
  width: 100%;
  border-radius: 20px;
  border: 1px solid #cfe3c8;
  background: #eef6ea;
  overflow: hidden;
}

.sv-mappa-attesa {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: #56607a;
}

/* Google inserisce i suoi div dentro al contenitore: una volta pronti coprono
   il segnaposto, che resta sotto e non da' fastidio. */
.sv-mappa > div {
  border-radius: 20px;
}

/* La finestrella che si apre toccando il segnaposto: Google la disegna con i
   suoi stili, questi sono i due che stonano di piu' sul resto della pagina. */
.sv-mappa .gm-style-iw {
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.sv-mappa .gm-style-iw-d {
  overflow: hidden !important;
}

.sv-card {
  background: #ffffff;
  border: 1px solid #e6e4dc;
  border-radius: 20px;
  padding: 20px 22px;
  margin-top: 16px;
  max-width: 380px;
}

.sv-card strong {
  display: block;
  font-size: 16px;
}

.sv-card p {
  margin: 4px 0 14px;
  font-size: 15px;
  color: #56607a;
}

/* --- iscrizione ---------------------------------------------------------- */
.sv-iscrizione {
  background: #1d4fa3;
  color: #ffffff;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.sv-iscrizione .sv-eyebrow {
  color: #9fe39a;
}

.sv-iscrizione h2 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(44px, 6.5vw, 80px);
  line-height: 0.9;
  margin: 12px 0 0;
  text-transform: uppercase;
}

.sv-iscrizione-testo p {
  color: rgba(255, 255, 255, 0.9);
}

.sv-iscrizione-nota {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 26px;
  padding-top: 20px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}

.sv-iscrizione-nota a {
  color: #9fe39a;
  text-decoration: underline;
}

.sv-form-card {
  background: #ffffff;
  color: #14223d;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 30px 60px -30px rgba(5, 20, 60, 0.6);
}

.sv-riga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 480px) {
  .sv-riga {
    grid-template-columns: 1fr;
  }
}
.sv-campo {
  margin-bottom: 16px;
}

/* Figlio DIRETTO, non un discendente qualsiasi: dentro .sv-campo ci sono anche
   i chip, che sono <label>. Con `.sv-campo label` quella regola (piu' specifica
   di `.sv-chip`) vinceva e li rimetteva a display:block — testo in alto a
   sinistra invece che centrato nel riquadro. */
.sv-campo > label,
.sv-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #14223d;
}

/* 16px e non meno: sotto questa misura iOS ingrandisce la pagina al focus e
   l'utente si ritrova il form fuori schermo. */
.sv-campo input[type=text],
.sv-campo input[type=email],
.sv-campo input[type=tel],
.sv-campo input[type=number] {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 16px;
  color: #14223d;
  background: #fbfaf6;
  border: 1.5px solid #d9d6cb;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sv-campo input:focus {
  border-color: #1d4fa3;
  background: #ffffff;
}

.sv-campo input::placeholder {
  color: #9aa2b5;
}

.sv-campo input.is-errore {
  border-color: #c0392b;
}

.sv-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sv-chips-4 {
  grid-template-columns: repeat(4, 1fr);
}

.sv-chip {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d9d6cb;
  border-radius: 12px;
  background: #fbfaf6;
  font-weight: 600;
  font-size: 15px;
  color: #14223d;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  user-select: none;
}

.sv-chip:hover {
  border-color: #b9b5a7;
}

.sv-chip.is-attivo {
  border: 2px solid #1d4fa3;
  background: #e8effb;
  color: #1d4fa3;
}

/* Il focus da tastiera deve vedersi: il chip e' un <button>, non un radio
   nativo, e senza questo chi naviga col tab non sa dov'e'. */
.sv-chip:focus-visible {
  outline: 2px solid #1d4fa3;
  outline-offset: 2px;
}

.sv-libero {
  position: relative;
  margin-top: 10px;
}

.sv-libero input {
  padding-right: 38px !important;
}

.sv-libero::after {
  content: "€";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #56607a;
  font-weight: 600;
  pointer-events: none;
}

.sv-libero.is-attivo input {
  border-color: #1d4fa3;
  background: #e8effb;
}

.sv-minimo {
  float: right;
  font-size: 13px;
  font-weight: 400;
  color: #56607a;
}

.sv-consenso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #56607a;
}

.sv-consenso input[type=checkbox] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #1d4fa3;
}

.sv-consenso a {
  text-decoration: underline;
}

.sv-errore {
  display: none;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #c0392b;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.sv-errore.is-visibile {
  display: block;
}

.sv-sicuro {
  text-align: center;
  font-size: 13px;
  color: #56607a;
  margin: 12px 0 0;
}

/* Avviso "questa mail risulta gia' iscritta": non e' un errore, e' una scelta
   da fare, quindi colore neutro e tre uscite esplicite. */
.sv-gia {
  display: none;
  background: #e8effb;
  border: 1px solid #c6d6f2;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.sv-gia.is-visibile {
  display: block;
}

.sv-gia strong {
  display: block;
  font-size: 15px;
  color: #1d4fa3;
  margin-bottom: 4px;
}

.sv-gia p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #2a3654;
  line-height: 1.5;
}

.sv-gia-azioni {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-gia-azioni button,
.sv-gia-azioni a {
  display: block;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1.5px solid #d9d6cb;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #14223d;
  cursor: pointer;
}

.sv-gia-azioni button:hover,
.sv-gia-azioni a:hover {
  border-color: #1d4fa3;
  color: #1d4fa3;
}

.sv-gia-azioni small {
  display: block;
  font-weight: 400;
  color: #56607a;
  margin-top: 2px;
}

/* --- esito --------------------------------------------------------------- */
.sv-esito {
  text-align: center;
  padding: 8px 0;
}

.sv-esito-ok {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #3a9a3f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
}

.sv-esito h3 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 800;
  font-size: 34px;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #14223d;
}

.sv-esito p {
  color: #56607a;
  font-size: 15px;
  margin: 0 0 8px;
}

.sv-esito-riepilogo {
  background: #fbfaf6;
  border: 1px solid #e6e4dc;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
  text-align: left;
  font-size: 15px;
}

.sv-esito-riepilogo div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.sv-esito-riepilogo span {
  color: #56607a;
}

.sv-esito-riepilogo b {
  color: #14223d;
}

.sv-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1d4fa3;
}

/* --- partner ------------------------------------------------------------- */
.sv-partner {
  background: #ffffff;
  padding-top: clamp(48px, 7vw, 80px);
  padding-bottom: clamp(48px, 7vw, 80px);
}

.sv-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.sv-partner-card {
  border: 1px solid #e6e4dc;
  border-radius: 20px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #ffffff;
}

.sv-partner-card img {
  max-height: 92px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 620px) {
  .sv-partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* --- footer -------------------------------------------------------------- */
.sv-footer {
  background: #0f2552;
  color: #c9d5ef;
  padding-top: 36px;
  padding-bottom: 36px;
  margin-top: auto;
}

.sv-footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
}

.sv-footer .sv-wordmark {
  color: #ffffff;
  font-size: 24px;
}

.sv-footer .sv-wordmark span {
  color: #9fe39a;
}

.sv-footer p {
  margin: 6px 0 0;
  font-size: 14px;
  color: rgba(201, 213, 239, 0.8);
}

.sv-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
}

.sv-footer nav a {
  color: #c9d5ef;
}

.sv-footer nav a:hover {
  color: #ffffff;
}

/* --- pagina di verifica -------------------------------------------------- */
.sv-verifica {
  padding-top: clamp(40px, 7vw, 72px);
  padding-bottom: clamp(56px, 9vw, 96px);
  min-height: 60vh;
}

.sv-verifica h1 {
  font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 0.92;
  margin: 12px 0 10px;
  color: #1d4fa3;
  text-transform: uppercase;
}

.sv-verifica-intro {
  color: #2a3654;
  max-width: 620px;
  margin: 0 0 30px;
}

.sv-box {
  background: #ffffff;
  border: 1px solid #e6e4dc;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 32px);
  max-width: 620px;
}

.sv-box + .sv-box {
  margin-top: 20px;
}

.sv-stato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sv-stato-ok {
  background: #e7f4e8;
  color: #1f6b25;
}

.sv-stato-verifica {
  background: #fff4d9;
  color: #8a6200;
}

.sv-stato-attesa {
  background: #e8effb;
  color: #1d4fa3;
}

.sv-stato-nulla {
  background: #f2f2f2;
  color: #56607a;
}

.sv-dati {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid #e6e4dc;
}

.sv-dati li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e6e4dc;
  font-size: 15px;
}

.sv-dati span {
  color: #56607a;
}

.sv-dati b {
  color: #14223d;
  text-align: right;
}

.sv-versamenti {
  margin-top: 24px;
}

.sv-versamento {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e6e4dc;
}

.sv-versamento:last-child {
  border-bottom: 0;
}

.sv-versamento b {
  font-size: 17px;
}

.sv-versamento small {
  display: block;
  color: #56607a;
  font-weight: 400;
}

/* display:block esplicito: la dropzone e' una <label>, che di suo e' inline —
   il bordo tratteggiato si spezzava in frammenti attorno alle righe di testo
   invece di disegnare il riquadro. */
.sv-dropzone {
  display: block;
  border: 1.5px dashed #d9d6cb;
  border-radius: 14px;
  background: #fbfaf6;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sv-dropzone:hover,
.sv-dropzone.is-sopra {
  border-color: #1d4fa3;
  background: #e8effb;
}

.sv-dropzone strong {
  display: block;
  color: #1d4fa3;
  font-size: 15px;
}

.sv-dropzone span {
  display: block;
  font-size: 13px;
  color: #56607a;
  margin-top: 4px;
}

.sv-dropzone input[type=file] {
  display: none;
}

.sv-avviso {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.sv-avviso-ok {
  background: #e7f4e8;
  border: 1px solid #bfe0c1;
  color: #1f6b25;
}

.sv-avviso-ko {
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #c0392b;
}

.sv-avviso-info {
  background: #e8effb;
  border: 1px solid #c6d6f2;
  color: #1d4fa3;
}

.sv-bonifico-dati {
  background: #fbfaf6;
  border: 1px solid #e6e4dc;
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  font-size: 15px;
}

.sv-bonifico-dati div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.sv-bonifico-dati span {
  color: #56607a;
  flex: 0 0 auto;
}

.sv-bonifico-dati b {
  text-align: right;
  word-break: break-word;
}

.sv-copia {
  background: transparent;
  border: 1.5px solid #d9d6cb;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1d4fa3;
  cursor: pointer;
}

.sv-copia:hover {
  border-color: #1d4fa3;
}

/* --- responsive ---------------------------------------------------------- */
/* Sotto 820px la nav completa lascia il posto a CTA + hamburger: e' il punto in
   cui le cinque voci smettono di stare su una riga senza rimpicciolirle sotto
   la soglia in cui si leggono. */
@media (max-width: 819px) {
  .sv-nav-desktop {
    display: none;
  }
  .sv-burger {
    display: flex;
  }
  html {
    scroll-padding-top: 70px;
  }
}
@media (min-width: 820px) {
  .sv-nav-mobile {
    display: none;
  }
  .sv-menu-mobile {
    display: none !important;
  }
}
/* Chi ha chiesto meno animazioni non deve subire lo scorrimento morbido. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
  /* La rotella resta: e' l'unico segnale che l'invio e' partito. Gira solo piu'
     piano, che e' quello che chiede chi ha attivato questa preferenza. */
  button.is-attesa::before {
    animation-duration: 1.8s;
  }
}
@media print {
  .sv-header, .sv-menu-mobile, .sv-hero, .sv-footer, .sv-dropzone {
    display: none !important;
  }
  body {
    background: #fff;
  }
}
/* --- banner dei consensi -------------------------------------------------- */
/* In basso e non a tutto schermo: è una scelta da fare, non un muro. Resta
   sopra il contenuto ma non lo copre, e il modulo di iscrizione — che è
   l'unica cosa che conta in questa pagina — resta raggiungibile anche con il
   banner aperto. */
.sv-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #ffffff;
  border-top: 3px solid #1d4fa3;
  box-shadow: 0 -12px 30px -18px rgba(5, 20, 60, 0.5);
}

.sv-cookie-in {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  flex-wrap: wrap;
}

.sv-cookie p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #2a3654;
}

.sv-cookie a {
  text-decoration: underline;
}

.sv-cookie-azioni {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sv-cookie-azioni button {
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid #d9d6cb;
  background: #ffffff;
  color: #14223d;
  white-space: nowrap;
}

.sv-cookie-azioni .sv-cookie-no:hover {
  border-color: #56607a;
}

/* Selettore con il contenitore davanti, non `!important`: la regola generica
   qui sopra è `.sv-cookie-azioni button` (0,1,1) e batterebbe un `.sv-cookie-si`
   scritto da solo (0,1,0). Risultato: sfondo bianco e testo bianco, cioè un
   pulsante vuoto. È lo stesso inciampo dei chip del modulo. */
.sv-cookie-azioni .sv-cookie-si {
  background: #1d4fa3;
  border-color: #1d4fa3;
  color: #ffffff;
}

.sv-cookie-azioni .sv-cookie-si:hover {
  background: #143b80;
  border-color: #143b80;
}

.sv-cookie-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #56607a;
  cursor: pointer;
}

.sv-cookie-x:hover {
  color: #14223d;
}

@media (max-width: 620px) {
  .sv-cookie-in {
    padding-right: 44px;
  }
  .sv-cookie-azioni {
    width: 100%;
  }
  .sv-cookie-azioni button {
    flex: 1 1 0;
  }
}

/*# sourceMappingURL=stravirgiliana.css.map */