/* =====================================================================
   restyle-2026.css — restyling visivo delle pagine pubbliche
   Layer a se stante, da caricare DOPO style.css e client-page.css.
   Non modifica markup ne' logica: solo token e override di aspetto.
   Per annullare il restyling basta togliere il <link> a questo file.
   Colori derivati dal logo: navy, azzurro, magenta.
   ===================================================================== */

:root {
  --qrg-ink: #0E1A2B;
  --qrg-text: #1B2638;
  --qrg-muted: #55637A;
  --qrg-blue: #1560B0;
  --qrg-blue-700: #0F4C8F;
  --qrg-cyan: #1D9AD4;
  --qrg-magenta: #C3146D;
  --qrg-bg: #F5F8FD;
  --qrg-line: #E2E8F1;
  --qrg-shadow-sm: 0 1px 2px rgba(14, 26, 43, .05), 0 2px 8px rgba(14, 26, 43, .04);
  --qrg-shadow-md: 0 2px 4px rgba(14, 26, 43, .04), 0 14px 36px rgba(14, 26, 43, .10);
  --qrg-font: 'Manrope', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--qrg-font);
  color: var(--qrg-text);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.nomi-prodotti, .btnCallToAction, .btn-header-accedi,
.navbar a, .loginRegistrati {
  font-family: var(--qrg-font);
}
.navbar ul li a, .navbar > ul > li > a { font-family: var(--qrg-font) !important; }

/* ---------- Header ---------- */
.container-100 {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--qrg-line);
  box-shadow: none;
}
@media (min-width: 969px) {
  .container-100 {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
}
.navbar ul li a {
  font-size: 14px;
  font-weight: 600;
  color: var(--qrg-text);
  border-radius: 10px;
}
.navbar > ul > li > a:hover { background: rgba(21, 96, 176, .08); color: var(--qrg-blue); }
.loginRegistrati {
  background: var(--qrg-ink);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}
.loginRegistrati:hover { background: var(--qrg-blue); color: #fff; border: 0; }

/* ---------- Hero e fasce ---------- */
.container-back-ground {
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(29, 154, 212, .16), transparent 62%),
    radial-gradient(700px 360px at 0% 100%, rgba(195, 20, 109, .07), transparent 60%),
    var(--qrg-bg);
}
.container-back-ground .item-Vcard-img img,
.container-back-ground .item-Vcard img.full-size {
  border-radius: 28px;
  box-shadow: 0 2px 4px rgba(14, 26, 43, .05), 0 24px 60px rgba(31, 80, 160, .18);
}
.container-title h1 {
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  font-size: clamp(32px, 3.4vw + 1rem, 58px);
  color: var(--qrg-ink);
}
.container-title h2.home-hero-sottotitolo,
.container-title h2.hero-sottotitolo {
  color: var(--qrg-muted);
  font-weight: 500;
  font-size: clamp(17px, .7vw + 14px, 21px);
  line-height: 1.6;
}
.container-title .containerBtnCallToAction { justify-content: flex-start; padding-left: 10px; }

/* ---------- Pulsanti ---------- */
.btnCallToAction, .btn-header-accedi {
  background: var(--qrg-blue);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 28px;
  box-shadow: 0 1px 2px rgba(14, 26, 43, .12), 0 8px 20px rgba(21, 96, 176, .22);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-header-accedi { height: 54px; max-width: 260px; padding: 0 28px; }
.btnCallToAction:hover, .btn-header-accedi:hover {
  transform: translateY(-2px);
  background: var(--qrg-blue-700);
  box-shadow: 0 2px 4px rgba(14, 26, 43, .12), 0 14px 28px rgba(21, 96, 176, .30);
}
/* Gerarchia: il secondo pulsante di una coppia e' secondario */
.btnCallToAction + .btnCallToAction {
  background: #fff;
  color: var(--qrg-blue);
  box-shadow: inset 0 0 0 1.5px rgba(21, 96, 176, .35);
}
.btnCallToAction + .btnCallToAction:hover {
  background: rgba(21, 96, 176, .06);
  color: var(--qrg-blue-700);
  box-shadow: inset 0 0 0 1.5px var(--qrg-blue);
}

/* ---------- Titoli di sezione ---------- */
.item-Vcard-100 > h3 {
  color: var(--qrg-ink);
  font-weight: 800;
  letter-spacing: -.025em;
  font-size: clamp(26px, 2vw + 14px, 40px);
}
.item-Vcard > h2,
.container-all-screen h2,
.intestazione-card h2 {
  color: var(--qrg-ink);
  font-weight: 800;
  letter-spacing: -.025em;
}
/* sottotitoli di sezione: via la barra colorata, resta la gerarchia tipografica */
.container-Vcard h3 {
  background: transparent;
  padding-left: 0;
  margin-left: 0;
  color: var(--qrg-ink);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- Card servizi ---------- */
body .item-prodotti-new {
  background: #fff;
  border: 1px solid var(--qrg-line);
  border-radius: 22px;
  box-shadow: var(--qrg-shadow-sm);
  padding: 30px 24px 26px;
  gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body .item-prodotti-new:hover {
  transform: translateY(-4px);
  box-shadow: var(--qrg-shadow-md);
  border-color: rgba(21, 96, 176, .35);
}
.item-prodotti-new::before, .item-prodotti-new::after { display: none !important; }
body .item-prodotti-new > p:not(.nomi-prodotti) { color: var(--qrg-muted); font-size: .98rem; line-height: 1.6; }
.item-prodotti-new a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(21, 96, 176, .08);
  text-decoration: none;
  transition: background .2s ease;
}
.item-prodotti-new a:hover { background: rgba(21, 96, 176, .16); }
.item-prodotti-new a .nomi-prodotti { margin: 0; padding: 0; font-size: 1rem; }
.nomi-prodotti { color: var(--qrg-blue); font-weight: 800; }
.item-Vcard-100 > h3::after { display: none; }

/* ---------- Sotto-menu prodotto (PORTATA) ---------- */
.menu-digitale-subnav {
  background: #fff;
  border: 1px solid var(--qrg-line);
  border-radius: 16px;
  box-shadow: var(--qrg-shadow-sm);
}
.menu-digitale-subnav__link { border-radius: 10px; color: var(--qrg-text); background: transparent; }
.menu-digitale-subnav__link:hover { background: rgba(21, 96, 176, .08); color: var(--qrg-blue); border-color: transparent; }
.menu-digitale-subnav__link.is-active { background: var(--qrg-ink); color: #fff; border-color: var(--qrg-ink); }

/* ---------- Footer ---------- */
.container-footer { position: relative; background: var(--qrg-ink); }
.container-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--qrg-cyan), var(--qrg-magenta));
}

/* ---------- Accessibilita' ---------- */
a:focus-visible, button:focus-visible, .btnCallToAction:focus-visible { outline: 3px solid var(--qrg-cyan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btnCallToAction, .btn-header-accedi, body .item-prodotti-new { transition: none; }
  .btnCallToAction:hover, .btn-header-accedi:hover, body .item-prodotti-new:hover { transform: none; }
}

/* ---------- Popup demo e form lead: stesso blu del resto del sito ---------- */
.qrg-int-cta, .plf-btn-primary { background: var(--qrg-blue); border-radius: 12px; font-family: var(--qrg-font); font-weight: 700; }
.qrg-int-cta:hover, .plf-btn-primary:hover:not(:disabled) { background: var(--qrg-blue-700); }
.qrg-int-title { font-family: var(--qrg-font); font-weight: 800; color: var(--qrg-ink); }
.plf-input:focus { outline-color: var(--qrg-blue); border-color: var(--qrg-blue); }
.plf-consent-privacy, .plf-consent-details-toggle { color: var(--qrg-blue); }
.plf-input, .plf-btn { border-radius: 12px; }

/* ---------- Footer: leggibilita' dei link su fondo scuro ---------- */
.colum-menu a, .colum-menu a:visited, .colum-menu a.active { color: #dbe4f0; }
.colum-menu a:hover { color: #7FD0F5; }
.social-icona:hover { background: rgba(29, 154, 212, .28); }

/* ---------- Shop ---------- */
.shop-section-head { background: transparent; color: var(--qrg-ink); padding: 6px 4px 14px; border-radius: 0; border-bottom: 1px solid var(--qrg-line); margin-bottom: 18px; flex-wrap: wrap; gap: 4px 12px; }
.shop-section-title { color: var(--qrg-ink); font-size: clamp(22px, 1.2vw + 16px, 30px); font-weight: 800; letter-spacing: -.02em; }
.shop-section-count { color: var(--qrg-blue); background: rgba(21, 96, 176, .1); border-radius: 999px; padding: 2px 10px; font-size: .85rem; }
.shop-section-description { color: var(--qrg-muted); }
.shop-product { border: 1px solid var(--qrg-line); border-radius: 20px; box-shadow: var(--qrg-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.shop-product:hover { transform: translateY(-3px); box-shadow: var(--qrg-shadow-md); }
.shop-card-img { border-radius: 14px; }
.shop-sidebar { border: 1px solid var(--qrg-line); border-radius: 20px; box-shadow: var(--qrg-shadow-sm); }
.shop-pill { background: rgba(21, 96, 176, .1); color: var(--qrg-blue); }
.shop-main .btn-primary, .shop-sidebar .btn-primary, .shop-cart-drawer .btn-primary {
  background: var(--qrg-blue); border: 0; color: #fff; border-radius: 12px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 26, 43, .12), 0 8px 20px rgba(21, 96, 176, .22);
}
.shop-main .btn-primary:hover, .shop-sidebar .btn-primary:hover, .shop-cart-drawer .btn-primary:hover { background: var(--qrg-blue-700); }
@media (prefers-reduced-motion: reduce) { .shop-product { transition: none; } .shop-product:hover { transform: none; } }

/* ---------- Piani e prezzi ---------- */
.plan-card[data-plan="free"] { --accent: #55637A; --accent-2: #8896AB; }
.plan-card[data-plan="standard"] { --accent: var(--qrg-blue); --accent-2: var(--qrg-cyan); }
.plan-card[data-plan="premium"] { --accent: var(--qrg-magenta); --accent-2: var(--qrg-cyan); }
.plan-card, .plan-card button, .plan-card .segmented button { font-family: var(--qrg-font); }
.plan-card { border-radius: 24px; box-shadow: var(--qrg-shadow-sm); }
.plan-cta .btn-primary {
  font-family: var(--qrg-font); font-weight: 800; background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(14, 26, 43, .12), 0 8px 20px rgba(14, 26, 43, .14);
}
.plan-cta .btn-primary:hover { filter: brightness(.9); }

/* ---------- API REST: card e sezioni ---------- */
.pan-sezione h2 { color: var(--qrg-ink); font-weight: 800; letter-spacing: -.025em; font-size: clamp(26px, 1.5vw + 16px, 36px); }
.pan-sezione .pan-guida { color: var(--qrg-muted); }
.pan-card { border: 1px solid var(--qrg-line); border-radius: 22px; padding: 28px 24px; box-shadow: var(--qrg-shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pan-card:hover { transform: translateY(-4px); box-shadow: var(--qrg-shadow-md); border-color: rgba(21, 96, 176, .35); }
.pan-card h3 { color: var(--qrg-ink); font-weight: 800; font-size: 1.2rem; }
.pan-card .pan-perchi { color: var(--qrg-muted); }
.pan-card .pan-vai a { color: var(--qrg-blue); font-weight: 800; text-decoration: none; }
.pan-card .pan-vai a::after { content: " \2192"; }
.pan-cta { background: var(--qrg-ink); }
.pan-cta .pan-bottoni a { border-radius: 12px; font-family: var(--qrg-font); }
.pan-faq details { border-color: var(--qrg-line); border-radius: 16px; }
@media (prefers-reduced-motion: reduce) { .pan-card { transition: none; } .pan-card:hover { transform: none; } }