/* VI:GUIDE:CSS:V1.0 (clean-light) — 2025-12-29
   Scopo: pagina hub autorevole per /vero-inci/guide/
   Scope: tutto è limitato a body.vi-page-guide (zero side effects)
*/

body.vi-page-guide{
  color-scheme: light;
  --g-max: min(1100px, 92vw);
  --g-radius: 16px;
  --g-radius-sm: 14px;
  --g-fg: #0b1220;
  --g-muted: rgba(2,6,23,.68);
  --g-accent: var(--accent, #16a34a);
  --g-accent-2: #2563eb;
  --g-border: rgba(15,23,42,.10);
  --g-border-2: rgba(15,23,42,.16);
  --g-surface: rgba(255,255,255,.92);
  --g-surface-2: rgba(255,255,255,.84);
  --g-shadow: 0 12px 30px rgba(2,6,23,.10);
  --g-shadow-soft: 0 10px 26px rgba(2,6,23,.08);
  background:
    radial-gradient(900px 420px at 16% 0%, rgba(16,185,129,.14), transparent 56%),
    radial-gradient(900px 420px at 84% 0%, rgba(59,130,246,.12), transparent 56%),
    linear-gradient(180deg, rgba(2,44,34,.06), transparent 46%),
    #ffffff !important;
}

body.vi-page-guide #main.vi-container.guide-page,
body.vi-page-guide #main{
  max-width: var(--g-max);
  margin-inline: auto;
  padding: 1.1rem 1rem 2.6rem;
  color: var(--g-fg);
}
body.vi-page-guide #main a{ color: var(--g-accent); text-underline-offset: 3px; }
body.vi-page-guide #main a:hover{ text-decoration: underline; }

body.vi-page-guide .breadcrumbs,
body.vi-page-guide nav.breadcrumbs{
  max-width: var(--g-max);
  margin: .25rem auto .25rem;
  padding: 0 1rem;
  color: var(--g-muted);
}
body.vi-page-guide .breadcrumbs a,
body.vi-page-guide nav.breadcrumbs a{ color: inherit; text-decoration: none; }
body.vi-page-guide .breadcrumbs a:hover,
body.vi-page-guide nav.breadcrumbs a:hover{ text-decoration: underline; }
@media (max-width:560px){
  body.vi-page-guide .breadcrumbs,
  body.vi-page-guide nav.breadcrumbs{ display:none; }
}

body.vi-page-guide .page-title{
  text-align: center;
  margin: .35rem 0 .55rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: clamp(1.85rem, 1.7vw + 1.35rem, 2.65rem);
}
body.vi-page-guide .page-subtitle,
body.vi-page-guide .lead{
  max-width: 76ch;
  margin: 0 auto 1.05rem;
  text-align: center;
  color: var(--g-muted);
  line-height: 1.58;
  text-wrap: balance;
}
body.vi-page-guide .page-subtitle strong,
body.vi-page-guide .lead strong{ color: var(--g-accent); }

body.vi-page-guide .guide-hero{
  position: relative;
  padding: 1.25rem 1.15rem 1.1rem;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(22,163,74,.18), transparent 60%),
    radial-gradient(900px 260px at 82% 0%, rgba(37,99,235,.14), transparent 60%),
    var(--g-surface);
  box-shadow: var(--g-shadow);
  text-align: center;
  overflow: hidden;
}
body.vi-page-guide .guide-hero::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: var(--g-radius);
  background:
    linear-gradient(135deg, rgba(22,163,74,.16), transparent 40%),
    linear-gradient(315deg, rgba(37,99,235,.12), transparent 42%);
  opacity:.55;
}
body.vi-page-guide .guide-hero > *{ position:relative; z-index:1; }

body.vi-page-guide .guide-hero-mark{
  width: 44px;
  height: 44px;
  margin: .1rem auto .5rem;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid var(--g-border);
  background:
    radial-gradient(26px 26px at 35% 30%, rgba(22,163,74,.22), transparent 65%),
    radial-gradient(28px 28px at 65% 35%, rgba(37,99,235,.18), transparent 70%),
    #ffffff;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  color: var(--g-fg);
}

body.vi-page-guide .guide-meta{
  display:flex;
  flex-wrap:wrap;
  gap: .45rem .6rem;
  justify-content:center;
  align-items:center;
  margin: .9rem auto 0;
  max-width: 76ch;
}
body.vi-page-guide .guide-badge{
  font-size: .9rem;
  line-height: 1;
  padding: .48rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.80);
  box-shadow: var(--g-shadow-soft);
}
body.vi-page-guide .guide-badge strong{ color: var(--g-fg); }

body.vi-page-guide .guide-toc{
  margin: 1rem auto 0;
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  justify-content:center;
}
body.vi-page-guide .guide-toc a{
  display:inline-flex;
  align-items:center;
  gap: .4rem;
  padding: .44rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.70);
  color: rgba(2,6,23,.82);
  text-decoration: none;
  font-weight: 650;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
}
body.vi-page-guide .guide-toc a:hover{ border-color: var(--g-border-2); text-decoration: none; }
body.vi-page-guide .guide-toc a:focus-visible{ outline: 2px solid var(--g-accent); outline-offset: 2px; }

body.vi-page-guide .guide-method{
  margin: 1.1rem 0 0;
  padding: 1.05rem 1.05rem;
  border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-border);
  background: var(--g-surface-2);
  box-shadow: var(--g-shadow-soft);
  text-align: left;
}
body.vi-page-guide .guide-method h2{ margin: .1rem 0 .5rem; font-size: 1.22rem; }
body.vi-page-guide .guide-method ol{ margin: .6rem 0 0; }
body.vi-page-guide .guide-method li{ margin: .35rem 0; color: rgba(2,6,23,.82); }
body.vi-page-guide .guide-method a{ font-weight: 700; }

body.vi-page-guide .guide-block{
  margin: 1.35rem 0 0;
  padding: 1.2rem 1.15rem 1.25rem;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
}
body.vi-page-guide .guide-block-head{ display:flex; flex-direction:column; gap: .35rem; text-align: left; }
body.vi-page-guide .guide-kicker{ font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; margin: 0; color: rgba(2,6,23,.60); }
body.vi-page-guide .guide-block h2{ margin: .1rem 0 .25rem; font-size: 1.4rem; letter-spacing: -0.02em; }
body.vi-page-guide .guide-block p{ margin: .25rem 0 0; color: rgba(2,6,23,.76); }

body.vi-page-guide .guide-grid{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 880px){ body.vi-page-guide .guide-grid{ grid-template-columns: 1fr; } }

body.vi-page-guide .guide-card{
  border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-border);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow:hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.vi-page-guide .guide-card a{ display:block; padding: 1.05rem 1.05rem 1rem; text-decoration:none; color: inherit; }
body.vi-page-guide .guide-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(2,6,23,.10);
  border-color: color-mix(in srgb, var(--g-accent) 45%, transparent);
}
body.vi-page-guide .guide-card-title{ margin: .05rem 0 .4rem; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--g-fg); }
body.vi-page-guide .guide-card-text{ margin: 0; color: rgba(2,6,23,.74); font-size: .95rem; line-height: 1.55; }
body.vi-page-guide .guide-card-meta{ margin: .7rem 0 0; display:flex; gap: .6rem; flex-wrap:wrap; font-size: .85rem; color: rgba(2,6,23,.60); }
body.vi-page-guide .guide-chip{ display:inline-flex; align-items:center; gap:.35rem; padding: .35rem .55rem; border-radius: 999px; border: 1px solid var(--g-border); background: rgba(255,255,255,.78); }

body.vi-page-guide .guide-actions{ margin-top: 1rem; display:flex; flex-wrap:wrap; gap: .55rem; }
body.vi-page-guide .btn-soft{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .52rem .75rem;
  border-radius: 12px;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.72);
  color: rgba(2,6,23,.84);
  text-decoration:none;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}
body.vi-page-guide .btn-soft:hover{ text-decoration:none; border-color: var(--g-border-2); }

body.vi-page-guide .guide-trust{
  margin-top: 1.35rem;
  padding: 1.15rem 1.15rem;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background:
    radial-gradient(720px 260px at 16% 0%, rgba(22,163,74,.12), transparent 60%),
    radial-gradient(720px 260px at 84% 0%, rgba(37,99,235,.10), transparent 60%),
    var(--g-surface-2);
  box-shadow: var(--g-shadow-soft);
}
body.vi-page-guide .guide-trust h2{ margin: .1rem 0 .55rem; font-size: 1.25rem; }
body.vi-page-guide .guide-trust ul{ margin: .6rem 0 0; }
body.vi-page-guide .guide-trust li{ margin: .3rem 0; color: rgba(2,6,23,.78); }

body.vi-page-guide .faq{
  margin-top: 1.35rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-border);
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
}
body.vi-page-guide .faq h2{ margin: .1rem 0 .65rem; font-size: 1.25rem; }
body.vi-page-guide .faq details{
  border: 1px solid var(--g-border);
  border-radius: 12px;
  padding: .65rem .75rem;
  background: rgba(255,255,255,.74);
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}
body.vi-page-guide .faq details + details{ margin-top: .65rem; }
body.vi-page-guide .faq summary{ cursor:pointer; font-weight: 850; color: rgba(2,6,23,.88); list-style:none; }
body.vi-page-guide .faq summary::-webkit-details-marker{ display:none; }
body.vi-page-guide .faq summary:focus-visible{ outline: 2px solid var(--g-accent); outline-offset: 2px; border-radius: 10px; }
body.vi-page-guide .faq details[open]{ border-color: var(--g-border-2); }
body.vi-page-guide .faq details p{ margin: .55rem 0 0; color: rgba(2,6,23,.76); }

@media (prefers-reduced-motion: reduce){
  body.vi-page-guide *{ transition: none !important; scroll-behavior: auto !important; }
}

/* === VI GUIDE: Visual navigator (image cards + overlay) === */
body.vi-page-guide .guide-visual-nav{
  margin: 1.05rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .95rem;
  align-items: stretch;
}

body.vi-page-guide .vnav-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
  text-decoration: none;
  color: inherit;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.vi-page-guide .vnav-card:hover,
body.vi-page-guide .vnav-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(2,6,23,.16);
  border-color: color-mix(in srgb, var(--g-accent) 45%, transparent);
  outline: none;
}

body.vi-page-guide .vnav-media{
  display: block;
  background: transparent;
}

body.vi-page-guide .vnav-media img{
  width: 100%;
  height: auto;
  display: block;
}

body.vi-page-guide .vnav-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: .35rem;
  padding: 1.05rem 1rem 1rem;
  color: #fff;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.08) 38%,
      rgba(0,0,0,.52) 100%);
}

body.vi-page-guide .vnav-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

body.vi-page-guide .vnav-text{
  font-size: .95rem;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
  max-width: 42ch;
}

body.vi-page-guide .vnav-cta{
  margin-top: .25rem;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: rgba(2,6,23,.92);
  font-weight: 850;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 980px){
  body.vi-page-guide .guide-visual-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  body.vi-page-guide .guide-visual-nav{ grid-template-columns: 1fr; }
  body.vi-page-guide .vnav-overlay{ padding: .95rem .95rem .95rem; }
}

/* === VI GUIDE: section banners (inside blocks) === */
body.vi-page-guide .guide-banner{
  margin-top: .9rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--g-border);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 34px rgba(2,6,23,.12);
}

body.vi-page-guide .guide-banner img{
  width: 100%;
  height: auto;
  display: block;
}

.guide-updated{
  margin:.35rem 0 0;
  font-size:.95rem;
  color:#5f6b6b;
}
.guide-updated a{
  color:var(--vi-green, #15a866);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width:640px){
  .guide-updated{font-size:.9rem;}
}

/* viG01-trust-mini */
.guide-trust-mini{
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.guide-trust-mini h2{
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.guide-trust-mini ul{
  margin: 0;
  padding-left: 18px;
}
.guide-trust-mini li{
  margin: 6px 0;
  line-height: 1.45;
}
.guide-trust-mini .trust-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.guide-trust-mini .trust-links a{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
  font-weight: 600;
}
.guide-trust-mini .trust-links a:hover{
  text-decoration: underline;
}
@media (max-width: 640px){
  .guide-trust-mini{ padding: 14px 14px; }
}

/* viG03-trust-checklist (Trasparenza + Fonti con spunte “pulite”) */

/* Card base della sezione */
#trasparenza{
  border-radius: 16px;
}

/* Lista principale: niente bullet */
#trasparenza > ul{
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}

/* Riga “card” */
#trasparenza > ul > li{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  box-shadow: 0 8px 22px rgba(0,0,0,.035);

  line-height: 1.55;
}

/* ✓ in cerchio */
#trasparenza > ul > li::before{
  content: "✓";
  flex: 0 0 auto;

  width: 18px;
  height: 18px;
  margin-top: 2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;

  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.28);
  color: rgba(20,83,45,1);
}

/* Etichetta iniziale (Metodo/Niente promesse/...) */
#trasparenza > ul > li strong{
  font-weight: 900;
}

/* Link fonti: rendi la riga più “cliccabile” e leggibile */
#trasparenza > ul > li a{
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#trasparenza > ul > li a:hover{
  text-decoration: underline;
}

#trasparenza > ul > li a:focus-visible{
  outline: 3px solid rgba(0,0,0,.20);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Nota finale sotto lista (es: “Aggiorniamo le fonti…”) */
#trasparenza > p{
  margin-top: 10px;
  opacity: .88;
  font-size: .95rem;
}

/* Mobile: un filo più compatto */
@media (max-width: 640px){
  #trasparenza > ul > li{
    padding: 10px 10px;
  }
}

/* viG03-sources-list */
body.vi-page-guide #trasparenza .sources-list{
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
body.vi-page-guide #trasparenza .sources-list a{
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.vi-page-guide #trasparenza .sources-list a:hover{
  text-decoration: underline;
}

/* viG04-no-hyphen-short-links (fix mobile "Contatti" inline) */
@media (max-width: 640px){
  body.vi-page-guide #trasparenza > ul:first-of-type > li a{
    display: contents;
    hyphens: none !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* viG05-mobile-clip-trust (fix banda destra / bleed) */
@media (max-width: 640px){
  body.vi-page-guide,
  body.vi-page-guide #main{
    overflow-x: hidden;
  }
  body.vi-page-guide #trasparenza{
    overflow: hidden; /* clippa gradient/pseudo-element dentro i bordi */
  }
}

/* viG06-trust-responsive-fix (no cut on mobile) */
body.vi-page-guide #trasparenza > ul > li{ min-width: 0; }

body.vi-page-guide #trasparenza > ul > li .trust-item{
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* IMPORTANT: evita taglio testo (clip) */
@media (max-width: 640px){
  body.vi-page-guide #trasparenza{ overflow: visible; }
}