/* ═══════════════════════════════════════════════════════════════════════════
   SEOFIXPRO — LA PAGINA DEI PREZZI (25 ottobre 2026; rifatta il 26 sul modello di regiapro.it/prezzi)
   Solo i pezzi nuovi della pagina: tutto il resto è in sito.css. Nessun colore
   scritto a mano: solo le variabili di temi.css, così il tema scuro va da solo.
   Le classi nuove cominciano con «pr-», per non toccare quelle del sito.
   ═══════════════════════════════════════════════════════════════════════════ */

.pr-forfettario{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13.5px;font-weight:700;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-gg);padding:6px 14px;
}
.pr-pallino{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.pr-centro{text-align:center;margin-inline:auto}
p.pr-forfettario.pr-centro{display:table;margin-top:20px}

.pr-interruttore-riga{display:flex;justify-content:center;margin-bottom:22px}
.pr-piani{margin-bottom:6px}
.pr-piani .piano{position:relative}

.pr-sottotitolo{font-size:20px;margin:48px 0 14px}
.pr-spiega{color:var(--ink-2);margin:-4px 0 16px;max-width:70ch}

/* la tabella con «che cosa fa» sotto il nome di ogni riga */
.pr-tabella tbody th{width:46%}
.pr-cosa{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:3px;line-height:1.4}
.pr-tabella-corta{min-width:0}
.pr-tabella-corta tbody th{width:auto}
.pr-link{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.pr-link:hover{text-decoration:underline}
.pr-nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pr-punti{list-style:none;display:grid;gap:10px;max-width:760px;margin:26px auto 0;font-size:15px;color:var(--ink-2)}
.pr-punti li{display:flex;gap:10px;align-items:flex-start}

/* le aggiunte: schede basse, due per riga */
.pr-aggiunte{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pr-aggiunta{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;min-width:0;
}
.pr-aggiunta h3{font-size:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pr-aggiunta p{color:var(--ink-2);font-size:14.5px;max-width:none}
.pr-aggiunta .btn{align-self:flex-start;margin-top:auto}
.pr-cifra{font-size:15px}
.pr-cifra b{font-family:var(--font-display);font-size:28px;color:var(--ink-strong);letter-spacing:-.02em}
.pr-solo{
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-gg);background:var(--accent-soft);color:var(--accent);
}

/* i crediti: l'esempio e la tabella dei costi, affiancati */
.pr-due{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:28px;align-items:start}
.pr-conto{list-style:none;display:grid;gap:6px;margin-top:12px;font-size:14.5px;color:var(--ink-2)}
.pr-conto li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line-soft);padding-bottom:6px}
.pr-conto b{color:var(--ink-strong);font-variant-numeric:tabular-nums}
.pr-conto-resto{border-bottom:0 !important;color:var(--ink-3)}

.pr-domande{margin-inline:auto}

/* il telefono: niente scorrimento di lato, pulsanti grandi da toccare */
@media (max-width:760px){
  .pr-tabella{min-width:520px}
  .pr-tabella-corta{min-width:0}
  .pr-sottotitolo{margin-top:36px}
  .pr-aggiunta .btn{align-self:stretch;text-align:center;justify-content:center}
  .interruttore button{padding:9px 14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   26 OTTOBRE 2026: LA PAGINA SUL MODELLO DI REGIAPRO (https://regiapro.it/prezzi)
   Le schede in fila con i due prezzi per esteso, la riga «tutte le sezioni» in
   evidenza, la prova di 7 giorni su ogni piano, il riquadro del plugin sotto le
   schede, la tabella di confronto aperta e a gruppi. I nomi delle classi senza
   «pr-» sono gli stessi di RegiaPro (sito.css di regiapro.it): si ricopiano
   senza tradurre. Solo variabili di temi.css: il tema scuro va da solo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* l'interruttore: al centro, e sul telefono resta in alto mentre scorri le schede */
.pr-interruttore-riga{margin-bottom:30px}
.interruttore button{min-height:44px}
.interruttore button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* le schede in fila (tre: niente salto di riga a 1280) */
@media (min-width:900px){.piani-in-fila{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1048px){.piani-in-fila > .piano-consigliato{position:relative;top:-10px}}
.piani-in-fila > .piano{transition:box-shadow var(--tr),border-color var(--tr)}
@media (hover:hover){
  .piani-in-fila > .piano:hover{box-shadow:var(--shadow);border-color:var(--accent-bright)}
  .piani-in-fila > .piano-consigliato:hover{border-color:var(--accent)}
}
.prezzo-nota:empty{min-height:1.5em}

/* i due prezzi scritti per esteso, sotto la cifra grande */
.prezzi-fissi{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);font-size:13.5px}
.prezzi-fissi .riga-fissa{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.prezzi-fissi .quando{color:var(--ink-3)}
.prezzi-fissi .quanto{white-space:nowrap}
.prezzi-fissi b{color:var(--ink-strong);font-weight:800}
.prezzi-fissi .prezzo-pieno{color:var(--ink-3);text-decoration:line-through;margin-right:5px}

/* i due pulsanti: «Scegli» e, sotto, «Prova gratis 7 giorni» */
.pr-bottoni{display:grid;gap:8px;margin:20px 0 18px}
.piano .pr-bottoni .btn{margin:0}
.btn.pr-prova{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent)}
@media (hover:hover){.btn.pr-prova:hover{background:var(--accent);border-color:var(--accent);color:var(--su-accento)}}

/* la prima riga dell'elenco in evidenza (come «Tutto il programma per lo studio» di RegiaPro) */
.piano-elenco li.pr-sezioni-riga{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:12px;padding:10px 12px;margin:0 0 6px}
.pr-sezioni{color:var(--ink);line-height:1.45}
.piano-elenco .pr-sezioni b{color:var(--accent)}
.segno-piu{color:var(--accent);font-weight:900}
.piano-elenco li:has(> .segno-piu){margin-top:2px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink-2)}

/* il riquadro del plugin sotto le schede (come «RegiaPro Free») */
.pr-fascia{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-l);
  padding:22px 26px;box-shadow:var(--shadow-sm)}
.pr-fascia-testo{flex:1 1 420px;min-width:0}
.pr-fascia-titolo{font-size:19px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:6px}
.pr-fascia-prezzo{font-size:14px;font-weight:800;color:var(--accent)}
.pr-fascia p{color:var(--ink-2);font-size:15px;max-width:none}
.pr-fascia-bottoni{display:flex;flex-wrap:wrap;gap:10px}

/* la tabella di confronto: aperta, a gruppi, i nomi dei piani restano in alto */
.confronto-aperto,#piani{--alt-barra:69px}
.confronto-aperto .tabella-scorre{overflow:visible}
.pr-confronto{min-width:0}
.pr-confronto tbody th{width:40%}
.pr-confronto td{width:20%}
.tabella-aperta thead th{position:sticky;top:var(--alt-barra);z-index:3;background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--line)}
.tabella-aperta thead th.colonna-forte{box-shadow:inset 0 -1px 0 var(--line),inset 0 0 0 999px var(--accent-soft)}
.tabella-aperta thead th[data-piano]{vertical-align:top;line-height:1.25}
.pz-nome{display:block}
.pz-prezzi{display:block;margin-top:5px;font-weight:700;text-transform:none;letter-spacing:0}
.pz-mese{display:block;font-size:14.5px;color:var(--ink-strong)}
.pz-anno{display:block;margin-top:1px;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.pz-anno b{color:var(--ink-2);font-weight:800}
.tabella-piani .riga-gruppo th{background:var(--surface-2);font-family:var(--font-display);font-size:12px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--accent);padding-top:20px;padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.nota-riga{display:block;margin-top:3px;font-size:12px;font-weight:500;line-height:1.35;color:var(--ink-3)}
.tabella-aperta tbody tr:not(.riga-gruppo):hover td,
.tabella-aperta tbody tr:not(.riga-gruppo):hover th{background:var(--surface-2)}
.tabella-aperta tbody tr:not(.riga-gruppo):hover td.colonna-forte{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tabella-aperta .cella-no{color:var(--ink-3)}
.pr-confronto td{color:var(--ink-2)}
.pr-arrivo{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-gg);background:var(--segnaposto-sfondo);color:var(--segnaposto-testo);white-space:nowrap}
.pr-riga-bottoni th,.pr-riga-bottoni td{padding-top:16px;padding-bottom:18px}
.pr-riga-bottoni .btn{width:100%;justify-content:center}

/* il telefono: l'interruttore resta in alto; la tabella mette il nome della riga sopra e i tre piani sotto */
@media (max-width:760px){
  .pr-interruttore-riga{position:sticky;top:var(--alt-barra,69px);z-index:20;margin-inline:-16px;padding:8px 16px;
    background:var(--velo-barra);margin-bottom:16px}
  @supports (backdrop-filter:blur(12px)){.pr-interruttore-riga{backdrop-filter:blur(12px)}}
  .pr-interruttore-riga .interruttore{margin-bottom:0}
  .pr-interruttore-riga .interruttore button{white-space:nowrap;padding:8px 12px;font-size:13.5px;min-height:40px}
  .pr-interruttore-riga .risparmio{padding:2px 6px}
  .pr-fascia{padding:20px}
  .pr-fascia-bottoni,.pr-fascia-bottoni .btn{width:100%;justify-content:center}
}
@media (max-width:640px){
  .pr-confronto,.pr-confronto thead,.pr-confronto tbody{display:block}
  .pr-confronto tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr-confronto th,.pr-confronto td{width:auto;padding:10px 8px;font-size:13.5px}
  .pr-confronto thead th:first-child{display:none}
  .pr-confronto thead{position:sticky;top:var(--alt-barra);z-index:5;box-shadow:0 1px 0 var(--line)}
  .pr-confronto thead th{position:static}
  .pr-confronto tbody th{width:auto}
  .pr-confronto tbody th[scope="row"]{grid-column:1 / -1;padding:12px 10px 2px;border-bottom:0}
  .pr-confronto tbody tr.riga-gruppo th{grid-column:1 / -1;padding:16px 10px 8px}
  .pr-confronto tbody tr:not(.riga-gruppo) td{border-bottom:1px solid var(--line-soft)}
  .pr-confronto thead th{padding:10px 8px;font-size:11px}
  .pz-mese{font-size:13px}
  .pz-anno{white-space:normal}
  .pr-riga-bottoni .btn{padding-inline:6px;font-size:13px}
  .pr-riga-bottoni th[scope="row"]{display:none}
}

/* «In arrivo: Local e Contenuti», l'ultima riga di ogni scheda: si legge, ma non è una promessa */
.piano-elenco li.pr-arrivo-riga{color:var(--ink-3);font-size:13px;padding-top:10px;border-top:1px dashed var(--line)}
.piano-elenco li.pr-arrivo-riga b{color:var(--ink-2)}
/* quattro piani (per esempio con «Solo»): quattro schede in fila dai 1100 px, due per riga sotto */
@media (min-width:900px){.piani-in-fila.pr-piani-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){
  .piani-in-fila.pr-piani-4{grid-template-columns:repeat(4,1fr);gap:14px}
  .piani-in-fila.pr-piani-4 > .piano{padding-inline:18px}
  .piani-in-fila.pr-piani-4 .prezzo .cifra{font-size:36px}
}
@media (min-width:641px){
  .pr-confronto[data-piani="4"] tbody th{width:32%}
  .pr-confronto[data-piani="4"] td{width:17%}
}
@media (max-width:640px){
  .pr-confronto .pr-arrivo{white-space:normal;font-size:10px;padding:2px 6px;letter-spacing:.02em}
  .pr-confronto[data-piani="4"] tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pr-confronto[data-piani="4"] th,.pr-confronto[data-piani="4"] td{padding-inline:5px;font-size:12.5px}
}
