/* ═══════════════════════════════════════════════════════════════════════════
   REGIAPRO — L'ASPETTO DEL SITO
   ---------------------------------------------------------------------------
   REGOLA UNICA DI QUESTO FILE: qui dentro non c'è NESSUN colore scritto a mano.
   Ogni colore è un richiamo — var(--nome) — alle variabili di `temi.css`.
   Se domani serve cambiare il verde in blu, si tocca temi.css e basta.

   Se stai cercando dove si cambia un TESTO: non è qui. I testi stanno nelle
   pagine .html. Qui c'è solo come sono fatte le cose.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── basi ─────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* nessuno scorrimento laterale, mai */
}
img,svg{max-width:100%;height:auto;display:block}
/* «hidden» deve vincere sempre. Senza questa riga un elemento nascosto che ha
   anche una classe con display:flex resta visibile, e si mostrano cose che
   dovevano restare spente (per esempio i riquadri di js/collegamento-crm.js). */
[hidden]{display:none!important}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink-strong);
  text-wrap:balance;
}
h1{font-size:clamp(32px,5.2vw,54px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:clamp(18px,2vw,21px);letter-spacing:-.01em}
h4{font-size:16px;letter-spacing:0}
p{max-width:var(--larghezza-testo)}

/* Il collegamento invisibile che serve a chi naviga con la tastiera o con un
   lettore di schermo: "salta il menu e vai al contenuto". */
.salta-al-contenuto{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface);color:var(--ink-strong);
  padding:12px 18px;border-radius:var(--r-s);border:1px solid var(--line);
  font-weight:700;
}
.salta-al-contenuto:focus{left:12px;top:12px}

/* ─────────────────────────── impalcatura ─────────────────────────── */
.contenitore{width:100%;max-width:var(--larghezza);margin-inline:auto;padding-inline:20px}
.fascia{padding-block:var(--passo)}
.fascia-stretta{padding-block:calc(var(--passo) * .6)}
.fascia-incassata{background:var(--surface-2);border-block:1px solid var(--line-soft)}

.testa-sezione{max-width:700px;margin-bottom:44px}
.testa-sezione.centrata{margin-inline:auto;text-align:center}
.testa-sezione.centrata p{margin-inline:auto}
.testa-sezione p{margin-top:14px;font-size:17px;color:var(--ink-2)}
/* Richiesta del committente: «mi piace che i titoli di ogni blocco siano più
   grandi e con una parte del testo in evidenza in verde come valore aggiunto».
   Il verde lo mette la classe .evidenzia, e ne va messa UNA SOLA per titolo:
   se è evidenziato tutto, non è evidenziato niente. */
.testa-sezione h2,.titolo-blocco{font-size:clamp(30px,4.4vw,46px);line-height:1.1}
.titolo-blocco{margin-bottom:18px}

/* ─────────────────────────── etichette ─────────────────────────── */
.occhiello{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:6px 12px;border-radius:var(--r-gg);
}
.stato{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:800;letter-spacing:.03em;
  padding:4px 10px;border-radius:var(--r-gg);white-space:nowrap;
}
.stato-attivo{background:var(--ok-bg);color:var(--ok)}
.stato-arrivo{background:var(--warn-bg);color:var(--warn)}
.stato-parziale{background:var(--info-bg);color:var(--info)}

/* ─────────────────────────── pulsanti ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-m);
  font-size:15px;font-weight:800;font-family:inherit;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-strong);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--tr),border-color var(--tr),transform .06s,filter var(--tr);
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
/* Un pulsante spento deve VEDERSI spento: altrimenti la persona ci clicca
   sopra tre volte e pensa che il sito sia rotto. */
.btn:disabled{opacity:.45;filter:grayscale(.5);cursor:not-allowed;transform:none}
/* «spento»: un collegamento che c'è ma non porta ancora dove dovrebbe, perché
   la cosa a cui punta non esiste ancora (vedi js/collegamento-crm.js).
   Si vede spento, e cliccandolo si arriva alla spiegazione del perché. */
.btn.spento{opacity:.5;filter:grayscale(.6)}
.btn.spento::after{content:"— non ancora attivo";font-weight:700;opacity:.85}
/* Sul telefono la scritta in coda faceva diventare il pulsante piu' largo
   dello schermo, e la pagina scorreva di lato: qui va a capo invece di
   sfondare. Trovato guardando iscrizione.html a 375 pixel. */
@media (max-width:520px){
  .btn.spento{white-space:normal;text-align:center;flex-wrap:wrap;gap:4px}
  .btn.spento::after{display:block;width:100%;font-size:.85em}
}
.btn-forte{background:var(--logo-gradient);border-color:transparent;color:var(--su-accento)}
.btn-forte:hover{filter:brightness(1.07);border-color:transparent}
.btn-piccolo{padding:9px 15px;font-size:13.5px;border-radius:var(--r-s)}
.btn-grande{padding:16px 28px;font-size:16.5px}
.btn-blocco{width:100%}
.gruppo-bottoni{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ─────────────────────────── barra in cima ─────────────────────────── */
.barra{
  position:sticky;top:0;z-index:80;
  background:var(--velo-barra);
  border-bottom:1px solid var(--line-soft);
}
@supports (backdrop-filter:blur(12px)){.barra{backdrop-filter:blur(12px)}}
.barra-dentro{
  max-width:var(--larghezza);margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;gap:16px;
}
.marchio{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.marchio-segno{
  width:36px;height:36px;border-radius:12px;background:var(--logo-gradient);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.marchio-segno svg{width:20px;height:20px}
.marchio-nome{
  font-family:var(--font-display);font-size:18px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink-strong);line-height:1;
}
.marchio-nota{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  padding:9px 12px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:700;color:var(--ink-2);text-decoration:none;
  transition:background var(--tr),color var(--tr);
}
.menu a:hover{background:var(--surface-2);color:var(--ink-strong)}
.menu a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
/* Il pulsante verde dentro il menu del telefono: senza queste due righe il
   colore grigio delle voci di menu vincerebbe sul bianco del pulsante, e la
   scritta diventerebbe illeggibile sul verde. */
.menu a.btn{color:var(--ink-strong)}
.menu a.btn-forte,.menu a.btn-forte:hover{background:var(--logo-gradient);color:var(--su-accento)}
.azioni-barra{display:flex;align-items:center;gap:9px;margin-left:10px}

.btn-tondo{
  width:38px;height:38px;padding:0;border-radius:var(--r-s);
  display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.btn-tondo:hover{background:var(--surface-2);color:var(--ink-strong)}
.btn-tondo svg{width:18px;height:18px}
/* le due icone del tema: si mostra quella giusta, l'altra sparisce */
.icona-scuro{display:none}
:root[data-theme="dark"] .icona-chiaro{display:none}
:root[data-theme="dark"] .icona-scuro{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icona-chiaro{display:none}
  :root:not([data-theme="light"]) .icona-scuro{display:block}
}

.apri-menu{display:none}
@media (max-width:900px){
  .apri-menu{display:grid}
  .menu{
    position:absolute;left:12px;right:12px;top:calc(100% + 8px);
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-m);box-shadow:var(--shadow-lg);padding:10px;
  }
  .menu[hidden]{display:none}
  .menu a{padding:12px 14px;font-size:16px}
  .barra-dentro{position:relative}
  .azioni-barra{margin-left:auto}
  .azioni-barra .btn{display:none}   /* il "prova" resta dentro il menu aperto */
  .menu .btn{display:inline-flex;margin-top:8px}
}
@media (min-width:901px){
  .menu .btn{display:none}
  .menu[hidden]{display:flex}        /* su schermo grande il menu è sempre aperto */
}

/* ─────────────────────────── vetrina (la testa della home) ─────────────── */
.vetrina{background:var(--sfondo-vetrina);padding-block:clamp(48px,7vw,88px) var(--passo)}
.vetrina-griglia{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:940px){.vetrina-griglia{grid-template-columns:minmax(0,1fr)}}
.vetrina h1{margin-top:18px}
.vetrina .sommario{font-size:clamp(17px,2vw,19.5px);color:var(--ink-2);margin-top:20px}
.evidenzia{color:var(--accent)}

.riga-fiducia{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:30px;
  font-size:14px;font-weight:700;color:var(--ink-2);
}
.riga-fiducia span{display:inline-flex;align-items:center;gap:7px}
.spunta{color:var(--ok);font-weight:900;flex-shrink:0}

/* ─────────────── finto schermo: l'esempio dell'interfaccia ─────────────── */
.schermo{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-x);box-shadow:var(--shadow-lg);overflow:hidden;
}
.schermo-testa{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
.pallino{width:10px;height:10px;border-radius:50%;background:var(--line);flex-shrink:0}
.schermo-titolo{
  margin-left:6px;font-size:12px;font-weight:800;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
}
.schermo-corpo{padding:18px}
.schermo-didascalia{
  margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center;max-width:none;
}

.riga-lead{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);margin-bottom:9px;
}
.riga-lead:last-child{margin-bottom:0}
.tondo{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:14px;
  color:var(--su-accento);background:var(--logo-gradient);
}
.tondo-info{background:var(--info)}
.tondo-avviso{background:var(--warn)}
.riga-lead-testo{min-width:0;flex:1}
.riga-lead-testo strong{display:block;font-size:14.5px;color:var(--ink-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.riga-lead-testo span{display:block;font-size:12.5px;color:var(--ink-3)}
.pillola{
  font-size:11px;font-weight:800;padding:4px 9px;border-radius:var(--r-gg);
  background:var(--ok-bg);color:var(--ok);flex-shrink:0;
}
.pillola-attesa{background:var(--warn-bg);color:var(--warn)}
.messaggio-pronto{
  margin-top:14px;padding:13px 15px;border-radius:var(--r-m);
  background:var(--accent-soft);border:1px dashed var(--accent);
  font-size:13.5px;color:var(--ink);
}
.messaggio-pronto b{color:var(--ink-strong)}

/* ─────────────────────────── griglie e schede ─────────────────────────── */
.griglia{display:grid;gap:18px}
.griglia-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.griglia-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
.griglia-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}

.scheda{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px;box-shadow:var(--shadow-sm);
  min-width:0;
  transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr);
}
a.scheda{text-decoration:none;color:inherit;display:block}
a.scheda:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.scheda h3{margin-bottom:9px}
.scheda p{font-size:14.5px;color:var(--ink-2);max-width:none}
.scheda-icona{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:16px;
}
.scheda-icona svg{width:23px;height:23px}
.scheda-icona.blu{background:var(--info-bg);color:var(--info)}
.scheda-icona.arancio{background:var(--warn-bg);color:var(--warn)}
.scheda-icona.rosso{background:var(--bad-bg);color:var(--bad)}
.scheda-icona.chiaro{background:var(--accent-bright-soft);color:var(--accent)}
.scheda-testa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.scheda-testa h3{margin:0}
.freccia{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:14px;font-weight:800;color:var(--accent)}

/* ─────────────────────────── prima / dopo ─────────────────────────── */
.confronto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.colonna{border-radius:var(--r-l);padding:26px;border:1px solid var(--line);min-width:0}
.colonna-prima{background:var(--surface-2)}
.colonna-dopo{background:var(--surface);border-color:var(--accent);box-shadow:var(--shadow)}
.etichetta-colonna{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:16px;padding:5px 11px;border-radius:var(--r-gg);
}
.colonna-prima .etichetta-colonna{background:var(--idle-bg);color:var(--idle)}
.colonna-dopo .etichetta-colonna{background:var(--accent-soft);color:var(--accent)}
.elenco-segni{list-style:none;display:grid;gap:13px}
.elenco-segni li{display:flex;gap:11px;font-size:14.5px;line-height:1.5}
.segno{flex-shrink:0;font-weight:900;line-height:1.45}
.segno-no{color:var(--bad)}
.segno-si{color:var(--ok)}

/* ─────────────────────────── passi numerati ─────────────────────────── */
.passi{list-style:none;display:grid;gap:16px;counter-reset:passo}
.passo{
  display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-sm);min-width:0;
}
.passo-numero{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:17px;
  background:var(--accent-soft);color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.passo-testo{min-width:0}
.passo-testo h3{margin-bottom:7px}
.passo-testo p{font-size:14.5px;color:var(--ink-2);max-width:none}

/* ─────────────────────────── moduli, in profondità ─────────────────────── */
.modulo{
  scroll-margin-top:90px;
  padding-block:clamp(40px,5vw,64px);
  border-top:1px solid var(--line-soft);
}
.modulo:first-of-type{border-top:0;padding-top:0}
.modulo-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,52px);align-items:start}
@media (max-width:940px){.modulo-griglia{grid-template-columns:minmax(0,1fr)}}

/* ── L'IMPAGINAZIONE A ZIG-ZAG ────────────────────────────────────────────
   Richiesta del committente: «metti sempre blocco testo a sinistra di
   spiegazione e foto demo a destra, e poi il blocco sotto alternato».

   COME È FATTA, e perché così: nel testo della pagina il blocco di
   spiegazione viene SEMPRE PRIMA della foto, anche nei blocchi invertiti.
   È lo spostamento a essere fatto qui, e solo su schermo largo. Così sul
   telefono, dove le due colonne si impilano una sopra l'altra, si legge
   sempre prima la spiegazione e poi si guarda la foto — che è l'ordine in
   cui una persona capisce le cose. Se avessimo invertito l'ordine nel
   testo della pagina, sul telefono un blocco su due comincerebbe con una
   figura di cui non si è ancora capito niente. */
@media (min-width:941px){
  .modulo-griglia.invertita > .lato-testo{grid-column:2;grid-row:1}
  .modulo-griglia.invertita > .lato-foto {grid-column:1;grid-row:1}
}
/* Un sottotitolo dentro la colonna di testo (per esempio «Le cadenze, dette
   per intero» nella pagina di RegiaPro Lead). Senza questa riga si appoggia
   sul paragrafo di sopra e sembra la sua ultima frase in grassetto, invece
   che l'inizio di un discorso nuovo. Riguarda solo i titoli scritti
   direttamente nella colonna: quelli dentro i riquadri e i passi numerati
   hanno gia' le loro distanze. */
.lato-testo > h3{margin-top:26px;margin-bottom:9px}
.modulo-nome{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:12px}
.elenco-punti{list-style:none;display:grid;gap:12px;margin-top:20px}
.elenco-punti li{display:flex;gap:11px;font-size:15px;line-height:1.55}
.elenco-punti li b{color:var(--ink-strong)}

.riquadro{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-m);padding:18px 20px;margin-top:22px;
}
.riquadro h4{margin-bottom:7px;color:var(--accent)}
/* Il titoletto dentro un riquadro era scritto come <h4> ma nella pagina
   arriva subito dopo un <h2>: nella scala dei titoli e' un gradino saltato,
   e il pannello dei contenuti mostrerebbe un indice storto. Adesso e' un
   <h3>, e queste due righe gli tengono esattamente l'aspetto di prima --
   la misura e il colore non cambiano di un pixel. */
.riquadro h3{font-size:16px;letter-spacing:0;margin-bottom:7px;color:var(--accent)}
.riquadro p{font-size:14.5px;color:var(--ink-2);max-width:none}
.riquadro-avviso{border-left-color:var(--warn)}
.riquadro-avviso h4{color:var(--warn)}
.riquadro-avviso h3{color:var(--warn)}

/* ─────────────────────────── segnaposto dichiarati ─────────────────────── */
.segnaposto{
  border:2px dashed var(--segnaposto-bordo);
  background:var(--segnaposto-sfondo);
  border-radius:var(--r-l);padding:24px;text-align:center;min-width:0;
}
.segnaposto .titolo-segnaposto{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--segnaposto-testo);margin-bottom:11px;
}
.segnaposto p{font-size:14.5px;color:var(--ink-2);margin-inline:auto;max-width:56ch}
.segnaposto p + p{margin-top:9px}

/* ─────────────────────────── prezzi ─────────────────────────── */
.interruttore{
  display:inline-flex;gap:4px;padding:4px;margin-inline:auto;margin-bottom:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-gg);
}
.interruttore button{
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:9px 18px;border-radius:var(--r-gg);
  font-family:inherit;font-size:14px;font-weight:800;
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--tr),color var(--tr);
}
.interruttore button[aria-pressed="true"]{background:var(--surface);color:var(--ink-strong);box-shadow:var(--shadow-sm)}
.risparmio{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-gg);
  background:var(--ok-bg);color:var(--ok)}

.piani{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:stretch}
.piano{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;
}
.piano-consigliato{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow)}
.piano-etichetta{
  align-self:flex-start;margin-bottom:12px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-gg);background:var(--accent-soft);color:var(--accent);
}
/* Etichetta vuota: tiene il posto sui piani che non hanno «Il più scelto»,
   così i prezzi delle quattro schede restano tutti alla stessa altezza. */
.piano-etichetta-vuota{visibility:hidden}
/* Sul telefono le schede sono una sotto l'altra: non c'è niente da allineare
   e lo spazio vuoto sarebbe solo spazio buttato. */
@media (max-width:760px){.piano-etichetta-vuota{display:none}}
.piano h3{font-size:19px;margin-bottom:5px}
.piano .a-chi{font-size:13.5px;color:var(--ink-3);max-width:none;min-height:2.8em}
.prezzo{display:flex;align-items:baseline;gap:6px;margin:18px 0 3px}
.prezzo .cifra{font-family:var(--font-display);font-size:40px;font-weight:800;
  color:var(--ink-strong);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.prezzo .periodo{font-size:14px;font-weight:700;color:var(--ink-3)}
.prezzo-nota{font-size:12px;color:var(--ink-3);max-width:none;min-height:1.5em}
.piano .btn{margin:20px 0 18px}
.piano-elenco{list-style:none;display:grid;gap:10px;font-size:14px;margin-top:auto}
.piano-elenco li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.piano-elenco li b{color:var(--ink-strong);font-weight:800}
.piano-elenco .segno{font-size:14px}

/* la tabella di confronto: scorre da sola se lo schermo è stretto */
.tabella-scorre{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.tabella-piani{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.tabella-piani th,.tabella-piani td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.tabella-piani thead th{
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);
}
.tabella-piani tbody th{font-weight:700;color:var(--ink-strong);width:34%}
.tabella-piani td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.tabella-piani tbody tr:last-child th,.tabella-piani tbody tr:last-child td{border-bottom:0}
.tabella-piani .colonna-forte{background:var(--accent-soft)}
.nota-tabella{font-size:13px;color:var(--ink-3);margin-top:14px;max-width:none}

/* ─────────────────────────── domande (fisarmonica) ─────────────────────── */
.domande{display:grid;gap:10px;max-width:820px}
.domanda{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;transition:border-color var(--tr);
}
.domanda[open]{border-color:var(--accent)}
.domanda summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-size:16px;font-weight:800;color:var(--ink-strong);
}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:700;color:var(--accent);line-height:1;
}
.domanda[open] summary::after{content:"−"}
.domanda summary:hover{background:var(--surface-2)}
.risposta{padding:0 20px 20px;font-size:15px;color:var(--ink-2)}
.risposta p{max-width:none}
.risposta p + p{margin-top:12px}
.risposta ul{margin:12px 0 0 20px;display:grid;gap:7px}

/* ─────────────────────────── richiamo finale ─────────────────────────── */
.richiamo{
  background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-x);
  padding:clamp(32px,5vw,56px);text-align:center;box-shadow:var(--shadow);
}
.richiamo p{margin-inline:auto;margin-top:14px;font-size:17px;color:var(--ink-2)}
.richiamo .gruppo-bottoni{justify-content:center}

/* ─────────────────────────── contatti ─────────────────────────── */
.modulo-contatto{display:grid;gap:16px;max-width:560px}
.campo label{display:block;font-size:13.5px;font-weight:800;color:var(--ink-2);margin-bottom:7px}
.campo input,.campo textarea,.campo select{
  width:100%;padding:13px 15px;font-family:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface-2);color:var(--ink);
}
.campo textarea{min-height:130px;resize:vertical;line-height:1.55}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.riga-contatto{
  display:flex;align-items:center;gap:14px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.riga-contatto .scheda-icona{margin:0;width:40px;height:40px;border-radius:12px}
.riga-contatto div{min-width:0}
.riga-contatto strong{display:block;font-size:14px;color:var(--ink-strong)}
.riga-contatto span{font-size:14px;color:var(--ink-2);word-break:break-word}

/* ─────────────────────────── piede ─────────────────────────── */
.piede{background:var(--surface);border-top:1px solid var(--line);padding-block:52px 28px;margin-top:var(--passo)}
.piede-griglia{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:32px}
.piede h4{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.piede ul{list-style:none;display:grid;gap:10px}
.piede a{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.piede a:hover{color:var(--accent)}
.piede-descrizione{font-size:14px;color:var(--ink-2);margin-top:14px;max-width:36ch}
.piede-basso{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:13px;color:var(--ink-3);
}

/* ─────────────────────────── ritocchi per il telefono ─────────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  .scheda{padding:20px}
  .colonna{padding:22px}
  .passo{padding:18px;gap:14px}
  .piano{padding:22px 18px}
  .riga-lead{padding:10px;gap:10px}
  .marchio-nota{display:none}
  .testa-sezione{margin-bottom:32px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   L'IDENTITÀ DEI CINQUE MODULI
   ---------------------------------------------------------------------------
   Richiesta del committente: «il nome è lungo — RegiaPro Lead — farei il logo e
   il testo sotto, con un loghetto colorato diverso così da capirlo meglio».
   Quindi: la PAROLA CHE DISTINGUE è grande, «RegiaPro» è piccolo sopra, e ogni
   modulo ha la sua tinta. Le tinte non sono nuove: sono quelle che il design
   system ha già, riusate. Cambiando temi.css cambiano anche queste.
   Le tre proposte a confronto stanno in ../documenti-interni/proposte-moduli.html
   (fuori dal sito servito: e' una pagina di lavoro, non una pagina pubblica).
   ═══════════════════════════════════════════════════════════════════════════ */
.m-lead   {--tinta:var(--accent);        --tinta-velo:var(--accent-soft)}
.m-gallery{--tinta:var(--info);          --tinta-velo:var(--info-bg)}
.m-social {--tinta:var(--warn);          --tinta-velo:var(--warn-bg)}
.m-bot    {--tinta:var(--accent-bright); --tinta-velo:var(--accent-bright-soft)}
.m-photo  {--tinta:var(--bad);           --tinta-velo:var(--bad-bg)}

.marchio-modulo{display:inline-flex;align-items:center;gap:12px;min-width:0}
.marchio-modulo .bollo{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--tinta-velo);color:var(--tinta);
}
.marchio-modulo .bollo svg{width:24px;height:24px}
.marchio-modulo .dicitura{display:flex;flex-direction:column;line-height:1;min-width:0}
.marchio-modulo .sopra{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px;
}
.marchio-modulo .parola{
  font-family:var(--font-display);font-size:26px;font-weight:800;
  letter-spacing:-.025em;color:var(--ink-strong);
}
.marchio-modulo.grande .bollo{width:58px;height:58px;border-radius:18px}
.marchio-modulo.grande .bollo svg{width:30px;height:30px}
.marchio-modulo.grande .parola{font-size:clamp(28px,3.4vw,36px)}
.scheda-modulo{border-top:3px solid var(--tinta)}
a.scheda-modulo:hover{border-color:var(--tinta)}

/* ═══════════════════════════════════════════════════════════════════════════
   LE SCHERMATE DEL PROGRAMMA
   Sono fotografie vere delle pagine vere, con dati di fantasia. La cornice
   serve a farle leggere come «uno schermo» e non come una figura qualsiasi.
   ═══════════════════════════════════════════════════════════════════════════ */
.schermata{
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);
}
.schermata img{width:100%;display:block}
.schermata-nota{
  font-size:12.5px;color:var(--ink-3);margin-top:10px;text-align:center;max-width:none;
}
.coppia-schermate{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* ═══════════════════════════════════════════════════════════════════════════
   LA FRASE MANIFESTO
   «Il problema non è che lavori male. È che il lavoro è sparso.»
   Il committente ha chiesto di metterla in evidenza: qui prende una fascia
   sua, senza niente intorno che le rubi l'attenzione.
   ═══════════════════════════════════════════════════════════════════════════ */
.manifesto{
  background:var(--surface);
  border-block:1px solid var(--line);
  padding-block:clamp(56px,8vw,110px);
  text-align:center;
}
.manifesto p{
  font-family:var(--font-display);
  font-size:clamp(28px,5.2vw,52px);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;
  color:var(--ink-strong);
  max-width:19ch;margin-inline:auto;text-wrap:balance;
}
.manifesto p .sparso{color:var(--accent)}
.manifesto .sotto{
  font-family:var(--font-sans);font-size:17px;font-weight:400;
  letter-spacing:0;color:var(--ink-2);max-width:52ch;margin:22px auto 0;line-height:1.55;
}

/* Blocchi corti: una riga, non un paragrafo. */
.griglia-secca{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.secco{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:20px;min-width:0;
}
.secco h3{font-size:17px;margin-bottom:6px}
.secco p{font-size:14.5px;color:var(--ink-2);max-width:none}

/* ═══════════════════════════════════════════════════════════════════════════
   IL MODULO DI ISCRIZIONE VERO
   ---------------------------------------------------------------------------
   Richiesta del committente: «manca la parte di registrazione effettiva».
   Prima la pagina RACCONTAVA il percorso; adesso lo FA.

   Qui dentro non c'è nessun colore scritto a mano, come nel resto del file:
   i campi in errore usano --bad, quelli a posto --ok, esattamente come le
   altre parti del sito. Il perché di ogni scelta sta in js/iscrizione.js.
   ═══════════════════════════════════════════════════════════════════════════ */
/* La vetrina della pagina iscrizione ha TRE blocchi invece di due:
   la promessa, il modulo, e l'esempio della schermata di avvio.
   Nel testo della pagina stanno in quest'ordine — promessa, MODULO, esempio —
   perché è l'ordine giusto sul telefono: chi ha già deciso trova il modulo
   subito, invece di scorrere un esempio lungo per arrivarci.
   Su schermo largo il modulo va a destra e l'esempio torna sotto la
   promessa, a sinistra. Lo spostamento lo fa questo blocco, e solo qui. */
@media (min-width:941px){
  .vetrina-iscrizione{align-items:start}
  .vetrina-iscrizione > .vetrina-testo  {grid-column:1;grid-row:1}
  .vetrina-iscrizione > .vetrina-modulo {grid-column:2;grid-row:1 / span 2}
  .vetrina-iscrizione > .vetrina-schermo{grid-column:1;grid-row:2;margin-top:30px}
}
@media (max-width:940px){
  .vetrina-iscrizione > .vetrina-schermo{margin-top:30px}
}

.modulo-iscrizione{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-x);
  padding:clamp(22px,3.4vw,34px);box-shadow:var(--shadow);
}
.modulo-iscrizione > * + *{margin-top:18px}

.campo{display:flex;flex-direction:column;gap:7px}
.campo > label{font-size:14px;font-weight:700;color:var(--ink-strong)}
.campo .aiuto{font-size:13px;color:var(--ink-3);font-weight:400}
.campo input,.campo select{
  width:100%;font:inherit;font-size:16px;   /* 16px: sotto i 16 iOS ingrandisce da solo */
  color:var(--ink);background:var(--ground);
  border:1.5px solid var(--line);border-radius:var(--r-m);
  padding:12px 14px;transition:border-color var(--tr),box-shadow var(--tr);
}
.campo select{appearance:none;padding-right:38px;cursor:pointer;
  /* la freccina: disegnata col bordo, così non serve nessun file da scaricare */
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-3) 50%,transparent 52%),
                   linear-gradient(-45deg,transparent 49%,var(--ink-3) 50%,transparent 52%);
  background-size:9px 9px,9px 9px;
  background-position:right 18px center,right 12px center;
  background-repeat:no-repeat;
}
.campo input:focus,.campo select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.campo input::placeholder{color:var(--ink-3)}

/* Un campo sbagliato si vede sbagliato PRIMA di rileggere il messaggio:
   il bordo rosso lo dice da lontano, il messaggio dice cosa. */
.campo.in-errore input,.campo.in-errore select{border-color:var(--bad)}
.campo.in-errore input:focus,.campo.in-errore select:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent);
}
.errore-campo{
  display:none;font-size:13.5px;font-weight:600;color:var(--bad);
  align-items:flex-start;gap:6px;
}
.campo.in-errore .errore-campo{display:flex}

/* Il consenso. La casella è grande apposta: si tocca col pollice. */
/* flex-direction:row serve DAVVERO: questo riquadro ha anche la classe
   .campo, che mette le cose in colonna. Senza questa riga la casella da
   spuntare finisce SOPRA la sua frase invece che accanto, e sembra rotta. */
.campo-consenso{display:flex;flex-direction:row;gap:12px;align-items:flex-start;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-m);padding:15px 16px}
.campo-consenso input[type=checkbox]{
  width:21px;height:21px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.campo-consenso label{font-size:14px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.campo-consenso.in-errore{border-color:var(--bad)}
.campo-consenso .errore-campo{margin-top:7px}

/* Il riepilogo degli errori: compare in cima quando si preme «Comincia» con
   qualcosa fuori posto. Serve a chi usa un lettore di schermo e a chi ha il
   modulo lungo e non vede il campo rosso, che è più in basso. */
.riepilogo-errori{
  display:none;background:var(--bad-bg);border:1.5px solid var(--bad);
  border-radius:var(--r-m);padding:15px 17px;
}
.riepilogo-errori[data-visibile]{display:block}
.riepilogo-errori h4{color:var(--bad);font-size:15px;margin-bottom:7px}
.riepilogo-errori ul{list-style:none;display:grid;gap:5px}
.riepilogo-errori a{color:var(--bad);font-size:14px;font-weight:600}

/* Il trabocchetto per i programmi che riempiono i moduli da soli: un campo
   che una persona non vede e non può compilare. Se arriva pieno, è un robot.
   Non si usa display:none perché alcuni robot lo riconoscono. */
.trabocchetto{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.btn.in-corso{opacity:.7;pointer-events:none}

/* La conferma: prende il posto del modulo, non gli compare sotto. */
.esito{display:grid;gap:14px;text-align:center;padding:8px 0}
.esito-bollo{
  width:62px;height:62px;border-radius:var(--r-gg);display:grid;place-items:center;
  margin-inline:auto;background:var(--ok-bg);color:var(--ok);font-size:30px;font-weight:800;
}
.esito-bollo.esito-bollo-male{background:var(--bad-bg);color:var(--bad)}
.esito h3{font-size:clamp(21px,2.6vw,26px)}
.esito p{color:var(--ink-2);font-size:15px;margin-inline:auto;max-width:52ch}

@media (max-width:620px){
  .modulo-iscrizione{padding:20px 17px;border-radius:var(--r-l)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE BRICIOLE (il percorso in cima alle pagine di dettaglio)
   ---------------------------------------------------------------------------
   Servono a due cose insieme: far capire a chi arriva da Google dove si trova,
   e dare a Google stesso il percorso (c'e' anche in BreadcrumbList, nei dati
   strutturati in cima alla pagina). Piccole apposta: non devono rubare
   l'attenzione al titolo, che e' la cosa per cui la persona e' arrivata.
   ═══════════════════════════════════════════════════════════════════════════ */
.briciole{
  font-size:13.5px;color:var(--ink-3);margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
}
.briciole a{color:var(--ink-2);text-decoration:none}
.briciole a:hover{color:var(--accent);text-decoration:underline}
.briciole [aria-current="page"]{color:var(--ink-strong);font-weight:600}

/* Il rimando dalla panoramica alla pagina completa di un modulo. */
.rimando-pagina{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:24px;padding:16px 18px;
  background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-m);
}
.rimando-pagina span{font-size:14px;color:var(--ink-2);flex:1 1 240px}