/* Bozza del sito albonews.it — stili condivisi. Font del marchio da font/font.css. I colori sono variabili in :root, così si riportano nel tema WordPress (theme.json). */
:root {
  --inchiostro: #0E1B2C;
  --testo: #33425A;
  --testo-tenue: #4A5568;
  --bordo: #E3E7ED;
  --bordo-campo: #C9D1DC;
  --fondo: #FFFFFF;
  --fondo-tenue: #F4F6FA;
  /* Colori del marchio (docs/loghi/README.md): blu sigillo, ambra della notifica, oro scuro */
  --accento: #1D3A66;
  --accento-scuro: #142A4C;
  --accento-tenue: #E8EEF6;
  --accento-medio: #8FA8CC;
  --avviso: #E8A33D;
  --avviso-chiaro: #F2C27A;
  --oro: #A8701A;
  --oro-testo: #8A4B00;
  --oro-tenue: #FFF7EA;
  --testo-su-scuro: #C9D3E0;
  --raggio: 18px;
  --font-titoli: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-testo: 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 18px;
  line-height: 1.55;
}
h1, h2, h3 { font-family: var(--font-titoli); margin: 0; }
p { margin: 0; }
a { color: var(--accento); }
a:hover { color: var(--accento-scuro); }
input, select, textarea, button { font: inherit; }

.contenitore { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sezione { padding: 96px 0; }
.sezione--tenue { background: var(--fondo-tenue); }
.sezione--scura { background: var(--inchiostro); color: #FFFFFF; border-top: 4px solid var(--avviso); }
.occhiello { font-weight: 600; color: var(--accento); letter-spacing: 0.04em; text-transform: uppercase; font-size: 15px; margin-bottom: 12px; }
.sezione--scura .occhiello { color: var(--avviso-chiaro); }
.titolo-sezione { font-size: 42px; line-height: 1.12; letter-spacing: -0.02em; max-width: 800px; margin-bottom: 16px; }
.intro-sezione { font-size: 20px; color: var(--testo); max-width: 720px; margin-bottom: 56px; }
.sezione--scura .intro-sezione { color: var(--testo-su-scuro); }
.griglia { display: flex; flex-wrap: wrap; gap: 24px; }
.griglia > * { flex: 1 1 320px; min-width: 0; }

/* Pulsanti */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px; border-radius: 12px;
  font-weight: 600; font-size: 18px; text-decoration: none; cursor: pointer;
  background: var(--accento); color: #FFFFFF; border: 1px solid var(--accento);
}
.pulsante:hover { background: var(--accento-scuro); color: #FFFFFF; }
.pulsante--secondario { background: #FFFFFF; color: var(--inchiostro); border-color: var(--bordo-campo); }
.pulsante--secondario:hover { background: var(--fondo-tenue); color: var(--inchiostro); }
.pulsante--piccolo { min-height: 44px; padding: 10px 18px; font-size: 17px; }


/* Testata */
.testata { border-bottom: 1px solid var(--bordo); background: var(--fondo); position: sticky; top: 0; z-index: 10; }
.testata .contenitore { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.marchio { display: flex; align-items: center; }
.marchio img { display: block; height: 42px; width: auto; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 17px; }
.menu a:not(.pulsante) { color: var(--testo); text-decoration: none; }
.menu a:not(.pulsante):hover { color: var(--inchiostro); text-decoration: underline; }

/* Apertura */
.apertura { background: var(--fondo-tenue); position: relative; overflow: hidden; }
.apertura::before { content: ""; position: absolute; width: 720px; height: 720px; right: -260px; top: -300px; border-radius: 50%; border: 10px solid var(--avviso); opacity: 0.18; pointer-events: none; }
.apertura .contenitore { position: relative; }
.apertura h1 em { font-style: normal; color: var(--accento); }
.apertura .contenitore { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; padding-top: 88px; padding-bottom: 96px; }
.apertura__testo { flex: 1 1 520px; min-width: 0; }
.apertura h1 { font-size: 50px; line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 24px; }
.apertura__motto { font-size: 22px; font-weight: 700; color: var(--accento); letter-spacing: -0.01em; margin-bottom: 16px; }
.apertura__sotto { font-size: 21px; color: var(--testo); max-width: 580px; margin-bottom: 28px; }
.punti { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.punti li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.punti svg { flex: 0 0 auto; margin-top: 3px; }
.punti strong { color: var(--accento); }
.azioni { display: flex; flex-wrap: wrap; gap: 14px; }
.nota-piccola { margin-top: 24px; font-size: 16px; color: var(--testo-tenue); }

/* Telefono d'esempio */
.telefono-area { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.telefono { width: 320px; max-width: 100%; border-radius: 44px; background: var(--accento-scuro); padding: 12px; box-shadow: 0 30px 60px -20px rgba(14, 27, 44, 0.45); }
/* Schermata dell'app ricostruita in HTML: i termini cambiano con Ordine/Collegio/Associazione */
@font-face { font-family: 'Barlow'; font-weight: 400; src: url('font/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; src: url('font/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; src: url('font/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
.app { --a-testo: #1d1f20; --a-accento: #4b7196; --a-scuro: #416180; --a-grigio: #5d5d60; --a-div: rgba(29, 31, 32, 0.16);
  position: relative; height: 640px; border-radius: 34px; background: #f2f2f3; overflow: hidden; font-family: 'Barlow', system-ui, sans-serif; color: var(--a-testo); text-align: left; }
.app__stato { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 6px 24px 0; font-size: 13px; font-weight: 600; }
.app__stato span:last-child { font-size: 10px; letter-spacing: 0.5px; }
.app__barra { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px 0 14px; }
.app__logo { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.app__logo[hidden] { display: none; }
.app__logo svg { display: block; width: 100%; height: 100%; }
.app__nome { font: 600 12.5px/1.05 'Barlow Condensed', sans-serif; color: var(--a-scuro); text-transform: uppercase; letter-spacing: 0.04em; max-width: 170px; }
.app__persona { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--a-testo); color: #FFFFFF; font: 600 13px 'Barlow Condensed', sans-serif; }
.app__grande { padding: 4px 16px 6px; }
.app__titolo { margin: 0; font: 600 34px/1 'Barlow Condensed', sans-serif; }
.app__grande p { margin: 3px 0 0; font-size: 13.5px; color: var(--a-grigio); }
.app__grande strong { color: var(--a-scuro); }
.app__contenuto { padding: 0 16px; }
.app__schede { display: flex; border-bottom: 1px solid var(--a-div); margin: 4px 0 6px; }
.app__schede > span { flex: 1 1 auto; text-align: center; padding: 8px 6px; font: 600 15px 'Barlow Condensed', sans-serif; color: var(--a-scuro); border-bottom: 2px solid transparent; white-space: nowrap; }
.app__schede > span.attiva { color: var(--a-testo); border-bottom-color: var(--a-accento); }
.app__schede i { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; background: #b4361f; color: #FFFFFF; font: 600 11px/18px 'Barlow', sans-serif; border-radius: 9px; vertical-align: 1px; }
.app__voce { padding: 12px 2px; border-bottom: 1px solid var(--a-div); }
.app__riga { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--a-grigio); }
.app__chip { font: 600 11.5px 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--a-scuro); color: var(--a-scuro); }
.app__voce b { display: block; font: 600 17px/1.2 'Barlow Condensed', sans-serif; margin: 5px 0 2px; }
.app__voce.nuovo b::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--a-accento); margin-right: 6px; vertical-align: 2px; }
.app__voce small { display: block; font-size: 13.5px; line-height: 1.35; color: var(--a-grigio); }
.app__nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; padding-bottom: 16px; background: #FFFFFF; border-top: 1px solid var(--a-div); }
.app__nav > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 4px; font: 600 12.5px 'Barlow Condensed', sans-serif; color: var(--a-grigio); }
.app__nav > span.attiva { color: var(--a-testo); }
.app__icona { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; }
.app__nav .attiva .app__icona { background: #dfe6ee; color: var(--a-scuro); }
.app__nav .attiva svg { stroke-width: 2; }
.app__icona em { position: absolute; top: -3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font: 600 11px/18px 'Barlow', sans-serif; font-style: normal; text-align: center; color: #FFFFFF; background: #b4361f; border-radius: 9px; box-shadow: 0 0 0 2px #FFFFFF; }
.telefono__foto { display: block; width: 100%; height: auto; border-radius: 34px; }
.telefono__schermo { border-radius: 34px; background: #FFFFFF; overflow: hidden; padding: 22px 16px 20px; font-size: 14px; line-height: 1.35; }
.telefono__ente { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: var(--font-titoli); font-weight: 700; font-size: 15px; }
.telefono__logo { width: 36px; height: 36px; border-radius: 10px; background: #DDE7F5; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #1D3A66; }
.schede { display: flex; gap: 6px; background: var(--fondo-tenue); border-radius: 12px; padding: 4px; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.schede > div { flex: 1; padding: 8px 6px; text-align: center; color: var(--testo-tenue); border-radius: 9px; }
.schede > .attiva { background: #FFFFFF; color: var(--inchiostro); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.conta { border-radius: 99px; padding: 0 7px; margin-left: 2px; background: var(--bordo); color: var(--inchiostro); }
.attiva .conta { background: var(--avviso); }
.messaggi { display: flex; flex-direction: column; gap: 10px; }
.messaggio { border: 1px solid var(--bordo); border-radius: 14px; padding: 12px; }
.messaggio__tipo { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.messaggio__titolo { font-weight: 600; }
.messaggio__piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--testo-tenue); margin-top: 8px; }
.messaggio__azione { background: var(--accento); color: #FFFFFF; border-radius: 8px; padding: 4px 10px; font-weight: 600; }
.messaggio--scaduto { color: #6B7686; border-color: #EEF1F5; }
.statistica { width: 320px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--bordo); border-radius: 16px; padding: 16px 18px; font-size: 15px; box-shadow: 0 10px 30px -18px rgba(14, 27, 44, 0.35); }
.statistica__titolo { font-weight: 600; margin-bottom: 10px; }
.barra { height: 10px; border-radius: 99px; background: var(--bordo); overflow: hidden; display: flex; margin-bottom: 10px; }
.barra__confermati { background: var(--accento); }
.barra__aperti { background: var(--accento-medio); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--testo-tenue); font-size: 14px; margin-bottom: 12px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--colore); }
.statistica__azione { display: block; width: 100%; text-align: center; border: 1px solid var(--accento); color: var(--accento); border-radius: 10px; padding: 8px; font-weight: 600; }

/* Problema */
.problema h3 { font-size: 21px; color: var(--avviso-chiaro); margin-bottom: 10px; }
.problema p { color: var(--testo-su-scuro); }

/* Schede delle funzioni */
.scheda { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 30px; background: #FFFFFF; }
.scheda h3 { font-size: 22px; margin-bottom: 10px; }
.scheda p { color: var(--testo-tenue); }
.icona { width: 48px; height: 48px; border-radius: 12px; background: var(--accento-tenue); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.scheda--in-evidenza { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.etichetta { display: inline-block; font-size: 13px; font-weight: 600; color: var(--oro-testo); background: var(--oro-tenue); border: 1px solid #F2D7A8; border-radius: 99px; padding: 2px 10px; margin-bottom: 14px; }

/* Gestionale */
.affianca { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.affianca__testo { flex: 1 1 460px; min-width: 0; }
.affianca__schema { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.blocco { border-radius: 16px; padding: 20px 22px; }
.blocco h3 { font-size: 19px; margin-bottom: 6px; }
.blocco h3 img { display: block; height: 32px; width: auto; }
.blocco p { font-size: 16px; }
.blocco--gestionale { background: #FFFFFF; border: 1px dashed var(--bordo-campo); color: var(--testo); }
.blocco--albonews { background: var(--accento); color: #FFFFFF; }
.blocco--albonews p { color: var(--testo-su-scuro); }
.freccia { text-align: center; color: var(--testo-tenue); font-size: 15px; font-weight: 600; }
.elenco-spunte { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.elenco-spunte li { display: flex; gap: 12px; }
.elenco-spunte svg { flex: 0 0 auto; margin-top: 3px; }

/* Passi */
.passi { list-style: none; margin: 0; padding: 0; }
.passo { background: #FFFFFF; border-radius: var(--raggio); padding: 30px; }
.passo__numero { font-family: var(--font-titoli); font-weight: 800; font-size: 24px; color: #FFFFFF; background: var(--accento); width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--fondo-tenue), 0 0 0 6px var(--avviso); margin-bottom: 22px; }
.passo h3 { font-size: 22px; margin-bottom: 10px; }
.passo p { color: var(--testo-tenue); }
.canale { margin-top: 32px; background: #FFFFFF; border-radius: var(--raggio); padding: 26px 30px; display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline; }
.canale h3 { font-size: 20px; }
.canale p { color: var(--testo-tenue); flex: 1 1 520px; min-width: 0; }

/* Confronto */
.tabella-scorre { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.confronto { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; }
.confronto th, .confronto td { padding: 16px 14px; text-align: center; border-bottom: 1px solid var(--bordo); }
.confronto thead th { font-family: var(--font-titoli); font-size: 15px; background: var(--fondo-tenue); vertical-align: bottom; }
.confronto tbody th { text-align: left; font-weight: 600; }
.confronto tr:last-child > * { border-bottom: 0; }
.confronto .noi { background: var(--accento-tenue); }
.confronto thead .noi { background: var(--accento); color: #FFFFFF; }
.si { color: var(--accento); font-weight: 600; }
.parte { color: var(--oro-testo); }
.no { color: var(--testo-tenue); }
.info { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font: italic 700 13px/1 Georgia, serif; vertical-align: -3px; cursor: pointer; opacity: 0.75; }
.info:hover, .info:focus-visible { opacity: 1; }
.info.aperto { background: var(--accento); border-color: var(--accento); color: #FFFFFF; opacity: 1; }
.info--esempio { cursor: default; color: var(--accento); opacity: 1; }
.info__testo { position: fixed; inset: auto; margin: 0; width: min(280px, calc(100vw - 32px)); padding: 12px 14px; border: 0; border-radius: 12px; background: var(--inchiostro); color: #FFFFFF; font-size: 14px; line-height: 1.45; font-weight: 400; text-align: left; box-shadow: 0 12px 30px -10px rgba(14, 27, 44, 0.5); overflow: visible; }
.info__testo::before { content: ""; position: absolute; top: -6px; left: calc(var(--freccia-x, 50%) - 6px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.info__testo.sopra::before { top: auto; bottom: -6px; }
.nota-tabella { margin: -24px 0 16px; color: var(--testo-tenue); font-size: 15px; }
.nota-costo { margin-top: 24px; background: var(--oro-tenue); border: 1px solid #F2D7A8; border-radius: 14px; padding: 18px 22px; color: var(--inchiostro); max-width: 900px; }

/* Su misura */
.su-misura { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.su-misura > div { flex: 1 1 440px; min-width: 0; }
.scelta-termini { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.scelta-termini button { border-radius: 10px; padding: 10px 18px; font-size: 17px; font-weight: 600; min-height: 44px; cursor: pointer; background: #FFFFFF; color: var(--inchiostro); border: 1px solid var(--bordo-campo); }
.scelta-termini button[aria-pressed="true"] { background: var(--accento); color: #FFFFFF; border-color: var(--accento); }
.scelta-termini--apertura { align-items: center; gap: 8px; margin: 0 0 20px; }
.scelta-termini--apertura button { padding: 6px 14px; font-size: 15px; min-height: 44px; }
.scelta-termini__etichetta { font-size: 15px; color: var(--testo-tenue); margin-right: 4px; }
.colonna-schede { display: flex; flex-direction: column; gap: 20px; }
.colonna-schede .scheda { padding: 26px 28px; }
.colonna-schede h3 { font-size: 21px; margin-bottom: 8px; }

/* Sicurezza */
.sicurezza h3 { font-size: 20px; margin-bottom: 8px; color: var(--avviso-chiaro); }
.sicurezza p { color: var(--testo-su-scuro); }
.sicurezza .griglia > * { flex-basis: 250px; }

/* Prezzi */
.prezzi .griglia > * { flex-basis: 240px; }
.prezzo { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 28px; background: #FFFFFF; display: flex; flex-direction: column; gap: 10px; }
.prezzo h3 { font-size: 19px; }
.prezzo__cifra { font-family: var(--font-titoli); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.prezzo__cifra small { font-size: 16px; font-weight: 600; color: var(--testo-tenue); letter-spacing: 0; }
.prezzo p { color: var(--testo-tenue); font-size: 16px; }
.prezzo--consigliato { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.incluso { margin-top: 32px; background: #FFFFFF; border-radius: var(--raggio); padding: 26px 30px; display: flex; flex-wrap: wrap; gap: 10px 32px; color: var(--testo); font-size: 17px; }
.incluso strong { color: var(--inchiostro); }

/* Domande frequenti */
.domande { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.domande details { border: 1px solid var(--bordo); border-radius: 14px; background: #FFFFFF; }
.domande summary { cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 19px; list-style-position: outside; }
.domande details > p { padding: 0 22px 20px; color: var(--testo-tenue); }

/* Modulo */
.demo { display: flex; flex-wrap: wrap; gap: 56px; }
.demo__testo { flex: 1 1 380px; min-width: 0; }
.demo__testo p { font-size: 20px; color: var(--testo); margin-bottom: 20px; }
.modulo { flex: 1 1 520px; min-width: 0; background: #FFFFFF; border-radius: 20px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.riga { display: flex; flex-wrap: wrap; gap: 18px; }
.riga > label { flex: 1 1 220px; min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 16px; }
.campo input, .campo select, .campo textarea { border: 1px solid var(--bordo-campo); border-radius: 10px; padding: 12px 14px; font-size: 17px; font-weight: 400; min-height: 48px; background: #FFFFFF; color: var(--inchiostro); }
.campo textarea { resize: vertical; }
.campo :focus-visible, .pulsante:focus-visible, .scelta-termini button:focus-visible, summary:focus-visible { outline: 3px solid var(--avviso); outline-offset: 2px; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--testo); }
.consenso input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.grazie { text-align: center; padding: 40px 0; }
.grazie h3 { font-size: 26px; margin-bottom: 10px; }

/* Piede */
.piede { border-top: 1px solid var(--bordo); }
.piede .contenitore { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; font-size: 15px; color: var(--testo-tenue); }
.piede__marchio { flex: 1 0 100%; }
.piede__marchio img { display: block; width: 260px; height: auto; }
.piede nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.piede a { color: var(--testo); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .sezione { padding: 64px 0; }
  .apertura .contenitore { padding-top: 56px; padding-bottom: 64px; gap: 48px; }
  .apertura h1 { font-size: 38px; }
  .titolo-sezione { font-size: 32px; }
  .modulo { padding: 24px; }
  .testata { position: static; }
  .marchio img { height: 36px; }
  .apertura::before { width: 420px; height: 420px; right: -220px; top: -200px; }
}

/* Classi al posto degli stili inline (la CSP del sito non ammette style="…") */
.barra--65 { width: 65%; }
.barra--15 { width: 15%; }
.legenda--confermati { --colore: #1D3A66; }
.legenda--aperti { --colore: #8FA8CC; }
.legenda--non-letti { --colore: #E3E7ED; }
.fondo-tenue { background: var(--fondo-tenue); }
.mb-0 { margin-bottom: 0; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-56 { margin-bottom: 56px; }
.mt-12 { margin-top: 12px; }
.a-sinistra { text-align: left; }
.griglia--larga { gap: 32px 40px; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo__testo p.demo__email { font-size: 18px; color: var(--testo-tenue); }

/* Modulo di richiesta della demo */
.modulo__form { display: flex; flex-direction: column; gap: 18px; }
.modulo__form[hidden], .grazie[hidden], .campo__errore[hidden], .modulo__errore[hidden] { display: none; }
.modulo__invia { align-self: flex-start; }
.modulo__invia:disabled { opacity: 0.6; cursor: wait; }
.modulo__senza-js { font-size: 18px; }
.campo__errore, .modulo__errore { color: #B42318; font-weight: 600; font-size: 15px; }
.campo [aria-invalid="true"] { border-color: #B42318; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pagina dell'informativa privacy */
.legale { max-width: 780px; padding-top: 56px; padding-bottom: 72px; }
.legale h1 { font-size: 40px; line-height: 1.15; margin-bottom: 12px; }
.legale h2 { font-size: 24px; margin: 40px 0 12px; }
.legale p, .legale li { font-size: 18px; color: var(--testo); margin-bottom: 12px; }
.legale ul { padding-left: 24px; margin: 0 0 12px; }
.legale .aggiornata { color: var(--testo-tenue); font-size: 16px; }
@media (max-width: 640px) { .legale h1 { font-size: 30px; } }