/* ═══════════════════════════════════════════════════════════════════════════
   SEO FIX PRO — LA PAGINA PRINCIPALE E LA PAGINA DELLE FUNZIONI (29 ottobre 2026)
   ---------------------------------------------------------------------------
   Solo i pezzi nuovi: barra, piede, bottoni, schede e griglie stanno 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 «h-».
   Le schermate sono della dashboard vera (tema scuro): stanno in una cornice
   che resta scura in tutti e due i temi, così non sembrano macchie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la testa ── */
.h-vetrina{background:var(--sfondo-vetrina);padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,72px);overflow:hidden}
.h-vetrina-griglia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4.5vw,64px);align-items:center}
@media (max-width:980px){.h-vetrina-griglia{grid-template-columns:minmax(0,1fr)}}
.h-vetrina h1{font-size:clamp(34px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;margin-top:16px;text-wrap:balance}
.h-vetrina .sommario{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-2);margin-top:20px;max-width:52ch}
.h-vetrina .gruppo-bottoni{margin-top:30px}
.h-vetrina .btn-grande{padding-inline:22px}
.h-nota-sotto{margin-top:14px;font-size:13.5px;color:var(--ink-2);max-width:none}
.h-nota-sotto b{color:var(--ink-strong)}

/* la cornice delle schermate: scura sempre, come la dashboard */
.h-cornice{
  margin:0;border-radius:16px;overflow:hidden;background:var(--cornice);
  border:1px solid var(--cornice-bordo);
  box-shadow:var(--shadow-lg);
}
.h-cornice-testa{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--cornice-testa);border-bottom:1px solid var(--cornice-linea)}
.h-cornice-testa i{width:9px;height:9px;border-radius:50%;background:var(--cornice-pallino);flex:0 0 auto}
.h-cornice-testa span{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--cornice-testo);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.h-cornice img{width:100%;height:auto;display:block}
.h-didascalia{margin-top:10px;font-size:12.5px;color:var(--ink-2);text-align:center;max-width:none}
.h-vetrina .h-cornice{transform:perspective(1600px) rotateY(-4deg) rotateX(1deg);transform-origin:left center}
@media (max-width:980px){.h-vetrina .h-cornice{transform:none}}
@media (prefers-reduced-motion:reduce){.h-vetrina .h-cornice{transform:none}}

/* ── la striscia delle aree (porta alle sezioni) ── */
.h-aree{border-block:1px solid var(--line-soft);background:var(--surface)}
.h-aree-dentro{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.h-aree-dentro::-webkit-scrollbar{display:none}
.h-aree a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-gg);
  font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:none;border:1px solid transparent;min-height:44px}
.h-aree a:hover{background:var(--surface-2);color:var(--ink-strong);border-color:var(--line-soft)}
.h-aree svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
@media (min-width:1100px){.h-aree-dentro{justify-content:center}}

/* ── i punti forti ── */
.h-forti{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.h-forti{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.h-forti{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h-forte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;min-width:0}
.h-forte h3{font-size:18.5px;margin:14px 0 8px}
.h-forte p{font-size:15px;color:var(--ink-2);max-width:none}
.h-icona{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.h-icona svg{width:22px;height:22px}

/* ── le aree, una riga per area: testo da una parte, schermata dall'altra ── */
.h-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(26px,4vw,56px);align-items:center}
.h-area + .h-area{margin-top:clamp(56px,7vw,96px)}
.h-area.h-girata > :first-child{order:2}
@media (max-width:940px){
  .h-area{grid-template-columns:minmax(0,1fr)}
  .h-area.h-girata > :first-child{order:0}
}
.h-area-testo h3{font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 12px;text-wrap:balance}
.h-area-testo > p{color:var(--ink-2);font-size:16.5px}
.h-etichetta{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.h-etichetta svg{width:16px;height:16px}
.h-elenco{list-style:none;display:grid;gap:10px;margin-top:18px}
.h-elenco li{display:flex;gap:10px;font-size:15px;line-height:1.5}
.h-elenco li::before{content:"✓";flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:900;line-height:1}
.h-elenco b{color:var(--ink-strong)}
.h-link-area{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-weight:800;font-size:15px;
  color:var(--accent);text-decoration:none;min-height:44px}
.h-link-area:hover{text-decoration:underline}
.h-due-schermate{display:grid;gap:14px}

/* ── il plugin: tre passi ── */
.h-passi{list-style:none;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);counter-reset:passo}
@media (min-width:860px){.h-passi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.h-passi li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;counter-increment:passo;min-width:0}
.h-passi li::before{content:counter(passo);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--logo-gradient);color:var(--su-accento);font-weight:800;font-size:17px;margin-bottom:14px}
.h-passi h3{font-size:18px;margin-bottom:8px}
.h-passi p{font-size:15px;color:var(--ink-2);max-width:none}
.h-fatti{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.h-fatti > span{display:inline-flex;align-items:center;gap:7px;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:7px 13px}

/* ── cosa non facciamo ── */
.h-onesta{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.h-onesta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.h-onesta{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h-onesta div{border-left:3px solid var(--accent);padding:4px 0 4px 16px}
.h-onesta h3{font-size:16.5px;margin-bottom:6px}
.h-onesta p{font-size:14.5px;color:var(--ink-2)}

/* ── i prezzi in breve ── */
.h-piani{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.h-piani{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.h-piani{grid-template-columns:repeat(4,minmax(0,1fr))}}
.h-piano{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;
  display:flex;flex-direction:column;min-width:0}
.h-piano-forte{border:2px solid var(--accent);box-shadow:var(--shadow)}
.h-piano-etichetta{position:absolute;top:-12px;left:20px;background:var(--logo-gradient);color:var(--su-accento);
  font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:var(--r-gg)}
.h-piano h3{font-size:18px}
.h-piano .h-a-chi{font-size:13.5px;color:var(--ink-3);margin-top:4px;min-height:2.9em}
.h-cifra{display:flex;align-items:baseline;gap:6px;margin:14px 0 2px}
.h-cifra b{font-family:var(--font-display);font-size:38px;font-weight:800;color:var(--ink-strong);letter-spacing:-.03em;line-height:1}
.h-cifra span{font-size:14px;font-weight:700;color:var(--ink-3)}
.h-anno{font-size:12.5px;color:var(--ink-2)}
.h-piano ul{list-style:none;display:grid;gap:6px;margin:16px 0 18px;font-size:14px}
.h-piano li b{color:var(--ink-strong)}
.h-piano .btn{margin-top:auto}
.h-sotto-piani{max-width:none;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:22px;font-size:14.5px;color:var(--ink-2)}
.h-sotto-piani a{font-weight:800}

/* ── le domande ── */
.h-domande{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.h-domande details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.h-domande summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:800;color:var(--ink-strong);
  font-size:16px;position:relative;min-height:44px}
.h-domande summary::-webkit-details-marker{display:none}
.h-domande summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--tr)}
.h-domande details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.h-domande .h-risposta{padding:0 20px 18px;color:var(--ink-2);font-size:15.5px}
.h-domande .h-risposta p + p{margin-top:10px}
.h-domande .h-risposta ul{margin:8px 0 0 20px}
.h-gruppo-domande{max-width:820px;margin:44px auto 14px;font-size:20px}
.h-gruppo-domande:first-of-type{margin-top:0}

/* ── chiusura ── */
.h-chiusura{background:var(--logo-gradient);color:var(--su-accento);border-radius:var(--r-x);padding:clamp(32px,5vw,56px);
  text-align:center}
.h-chiusura h2{color:var(--su-accento);font-size:clamp(28px,4vw,42px);line-height:1.1;text-wrap:balance}
.h-chiusura p{margin:14px auto 0;max-width:56ch;font-size:17px;opacity:.92}
.h-chiusura .gruppo-bottoni{justify-content:center}
.h-chiusura .btn{background:var(--surface);color:var(--ink-strong);border-color:transparent}
.h-chiusura .btn:hover{background:var(--surface-2)}
.h-chiusura .btn-vuoto{background:transparent;color:var(--su-accento);border:1.5px solid color-mix(in srgb,var(--su-accento) 60%,transparent)}
.h-chiusura .btn-vuoto:hover{background:color-mix(in srgb,var(--su-accento) 12%,transparent)}

/* ── la pagina delle funzioni ── */
.h-indice{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin-top:28px}
@media (min-width:600px){.h-indice{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.h-indice{grid-template-columns:repeat(5,minmax(0,1fr))}}
.h-indice a{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:14px 16px;text-decoration:none;color:var(--ink-strong);font-weight:800;min-height:44px}
.h-indice a:hover{border-color:var(--accent)}
.h-indice svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.h-indice small{display:block;font-weight:500;color:var(--ink-3);font-size:12.5px}
.h-funzioni{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:26px}
@media (min-width:720px){.h-funzioni{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h-funzione{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px;min-width:0}
.h-funzione h3{font-size:16px;color:var(--ink-strong);margin-bottom:5px}
.h-funzione p{font-size:14.5px;color:var(--ink-2);max-width:none}
.h-sezione-funzioni + .h-sezione-funzioni{border-top:1px solid var(--line-soft)}
.h-tabella-plugin{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;font-size:14.5px}
.h-tabella-plugin th,.h-tabella-plugin td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.h-tabella-plugin thead th{background:var(--surface-2);font-size:13px;color:var(--ink-strong)}
.h-tabella-plugin td{text-align:center;white-space:nowrap}
.h-tabella-plugin tbody th{font-weight:600;color:var(--ink)}
.h-scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.h-nota-piccola{font-size:13.5px;color:var(--ink-3);margin-top:12px}
.h-nascosto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* sul telefono le schede dei punti forti sono più basse: l'icona a sinistra del titolo */
@media (max-width:699px){
  .h-forte{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .h-forte .h-icona{width:40px;height:40px;grid-row:span 2}
  .h-forte h3{margin:2px 0 6px}
  .h-forte p{font-size:14.5px}
  .h-vetrina .gruppo-bottoni .btn{width:100%}
}