/* ═══════════════════════════════════════════════════════════════
   BLOG REDESIGN FASE 2 — CSS ADDITIONS v5
   Refinement grafico: zone alternate, ritmo visivo, pattern SVG,
   numerazione H2, kicker, drop cap esteso, varianti CTA, marginalia.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   PATTERN SVG — 6 tileable, inline data-URI
   Usati via background-image sulle zone
   ═══════════════════════════════════════════════════ */
:root{
  --zone-pad-y: clamp(56px, 8vw, 112px);
  --zone-container: 760px;

  /* Pattern 1: dots gold su cream */
  --pat-dots-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><circle cx='40' cy='40' r='1.2' fill='%23b8996a' opacity='0.35'/></svg>");
  /* Pattern 2: diagonal lines navy su cream */
  --pat-diagonal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 40L40 0' stroke='%231a2940' stroke-width='0.5' opacity='0.1'/></svg>");
  /* Pattern 3: organic blobs gold */
  --pat-organic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path d='M30 60 Q60 20 90 60 T30 60' fill='none' stroke='%23b8996a' stroke-width='0.6' opacity='0.12'/></svg>");
  /* Pattern 4: gold grid su bianco */
  --pat-grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M60 0H0V60' fill='none' stroke='%23b8996a' stroke-width='0.3' opacity='0.18'/></svg>");
  /* Pattern 5: navy small squares */
  --pat-geometric: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='45' y='45' width='10' height='10' fill='%231a2940' opacity='0.06'/></svg>");
  /* Pattern 6: cream noise on navy */
  --pat-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
}

/* ═══════════════════════════════════════════════════
   ZONES — background alternati full-bleed
   ═══════════════════════════════════════════════════ */
.zone{
  position:relative;
  padding:var(--zone-pad-y) 0;
  margin:0;
  /* break out of article max-width for full-bleed effect */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.zone > .zone-inner{
  max-width:var(--zone-container);
  margin:0 auto;
  padding:0 24px;
}
.zone.zone-wide > .zone-inner{ max-width:1040px }

.zone-white{background:#fff;color:var(--text)}
.zone-cream{background:var(--cream);color:var(--text)}
.zone-navy{background:var(--navy);color:var(--cream)}
.zone-navy h2, .zone-navy h3{color:var(--cream)}
.zone-navy strong{color:var(--gold-light)}
.zone-navy a{color:var(--gold-light)}
.zone-cream-pattern{background:var(--cream) var(--pat-dots-gold) repeat;color:var(--text)}
.zone-diagonal{background:var(--cream) var(--pat-diagonal) repeat;color:var(--text)}
.zone-organic{background:var(--cream) var(--pat-organic) repeat;color:var(--text)}
.zone-grid{background:#fff var(--pat-grid) repeat;color:var(--text)}
.zone-navy-pattern{background:var(--navy) var(--pat-noise) repeat;color:var(--cream)}
.zone-navy-pattern h2, .zone-navy-pattern h3{color:var(--cream)}
.zone-navy-pattern strong{color:var(--gold-light)}

/* Transizione soft tra zone: wave-shape SVG opzionale */
.zone-wave-top{
  position:relative;
}
.zone-wave-top::before{
  content:"";display:block;position:absolute;top:-1px;left:0;right:0;height:40px;
  background:inherit;
  clip-path:polygon(0 40%,10% 50%,25% 55%,50% 45%,75% 60%,90% 45%,100% 55%,100% 100%,0 100%);
}

/* ═══════════════════════════════════════════════════
   KICKER — label sopra H2
   ═══════════════════════════════════════════════════ */
.kicker{
  display:inline-block;
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:12px;
  position:relative;padding-left:28px
}
.kicker::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:1px;background:var(--gold)
}
.zone-navy .kicker, .zone-navy-pattern .kicker{color:var(--gold-light)}
.zone-navy .kicker::before, .zone-navy-pattern .kicker::before{background:var(--gold-light)}

/* ═══════════════════════════════════════════════════
   H2 NUMERATION — stile editoriale (stack verticale, no abs)
   ═══════════════════════════════════════════════════ */
.h2-block{
  display:block;
  margin-top:clamp(56px,8vw,96px) !important;
  margin-bottom:28px !important
}
.h2-block .h2-num{
  display:block !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(56px,8vw,96px) !important;
  font-weight:500 !important;
  color:var(--gold) !important;
  opacity:.3 !important;
  line-height:.9 !important;
  margin:0 0 -6px 0 !important;
  padding:0 !important;
  pointer-events:none;user-select:none;
  letter-spacing:-.02em
}
.h2-block .kicker{
  display:block !important;
  margin:0 0 14px 0 !important;
  padding-left:28px;
  position:relative
}
.h2-block h2{
  display:block !important;
  margin:0 !important;padding:0 !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(28px,4vw,40px) !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  color:var(--navy) !important;
  border-top:none !important
}
.h2-block h2::after{
  content:"";display:block;width:56px;height:2px;
  background:var(--gold);margin-top:16px;opacity:.7
}
.zone-navy .h2-block h2, .zone-navy-pattern .h2-block h2{color:var(--cream) !important}
.zone-navy .h2-block .h2-num, .zone-navy-pattern .h2-block .h2-num{color:var(--gold-light) !important;opacity:.3 !important}

@media(max-width:600px){
  .h2-block .h2-num{font-size:56px !important;margin-bottom:-4px !important}
  .h2-block .kicker{padding-left:24px}
  .h2-block h2{font-size:26px !important}
}

/* ═══════════════════════════════════════════════════
   DROP CAP — esteso ai paragrafi di zona
   ═══════════════════════════════════════════════════ */
.drop-cap::first-letter,
.zone-opener > .zone-inner > p:first-of-type::first-letter{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:5em;font-weight:600;color:var(--gold);
  float:left;line-height:.85;margin:.08em .12em 0 0
}

/* ═══════════════════════════════════════════════════
   DIVIDER FIGURATI
   ═══════════════════════════════════════════════════ */
.divider-ornament{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:56px auto;max-width:320px;color:var(--gold);
}
.divider-ornament::before,.divider-ornament::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-pale),var(--gold-pale),transparent)
}
.divider-ornament svg{width:18px;height:18px;flex-shrink:0;opacity:.75}

/* ═══════════════════════════════════════════════════
   MARGINALIA (desktop side-note)
   ═══════════════════════════════════════════════════ */
.marginalia{
  position:relative;
  margin:24px 0
}
.marginalia p{margin:0}
@media(min-width:1100px){
  .marginalia{
    position:absolute;
    right:calc(50% - 560px);
    max-width:160px;
    margin:0;
    transform:translateX(100%);
    font-family:'DM Sans',sans-serif;font-style:italic;
    font-size:14px;line-height:1.5;
    color:var(--gold-dark);
    padding-left:14px;
    border-left:2px solid var(--gold-pale)
  }
}
@media(max-width:1099px){
  .marginalia{
    background:var(--cream);border-left:3px solid var(--gold);
    padding:14px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    font-family:'DM Sans',sans-serif;font-style:italic;color:var(--gold-dark)
  }
}

/* ═══════════════════════════════════════════════════
   CTA VARIANTS — mid (banner) vs finale (card)
   ═══════════════════════════════════════════════════ */

/* CTA MID — banner orizzontale (container-wide, non 100vw
   perché l'article ha max-width 800px) */
.cta-banner{
  background:var(--navy) var(--pat-noise) repeat;
  color:var(--cream);
  padding:clamp(40px,6vw,64px) clamp(24px,4vw,48px);
  border-radius:var(--radius);
  margin:clamp(48px,6vw,80px) 0;
  position:relative;overflow:hidden
}
.cta-banner::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)
}
.cta-banner-inner{
  max-width:var(--zone-container);margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center
}
.cta-banner h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.2;
  color:var(--cream);margin:0 0 8px
}
.cta-banner p{
  font-family:'DM Sans',sans-serif;font-size:15.5px;
  color:rgba(248,245,240,.82);margin:0;line-height:1.55
}
.cta-banner-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--navy);
  padding:14px 28px;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;
  text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .15s
}
.cta-banner-btn:hover{background:var(--gold-light);transform:translateY(-1px)}
@media(max-width:680px){
  .cta-banner-inner{grid-template-columns:1fr;gap:20px}
  .cta-banner-btn{justify-self:start}
}

/* CTA FINALE — card personale cream + foto + bordo gold */
.cta-personal-card{
  background:var(--cream);
  border:1px solid var(--border);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:32px;
  margin:40px 0;
  display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;
  box-shadow:var(--shadow-sm)
}
.cta-personal-card img{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:3px solid var(--gold)
}
.cta-personal-card .cpc-text h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:24px;font-weight:600;line-height:1.2;color:var(--navy);margin:0 0 6px
}
.cta-personal-card .cpc-text p{
  font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;
  color:var(--text-soft);margin:0
}
.cta-personal-card .cpc-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--navy);
  padding:14px 24px;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;
  text-decoration:none;white-space:nowrap;
  transition:background .15s,transform .15s
}
.cta-personal-card .cpc-btn:hover{background:var(--gold-light);transform:translateY(-1px)}
@media(max-width:720px){
  .cta-personal-card{grid-template-columns:80px 1fr;gap:16px;padding:22px}
  .cta-personal-card img{width:80px;height:80px;border-width:2px}
  .cta-personal-card .cpc-btn{grid-column:1/-1;justify-self:start;margin-top:8px}
}

/* ═══════════════════════════════════════════════════
   FULL-BLEED IMAGE BREAK (container-wide, non 100vw)
   ═══════════════════════════════════════════════════ */
.image-break{
  margin-top:clamp(48px,6vw,80px);margin-bottom:clamp(48px,6vw,80px);
  border-radius:var(--radius);overflow:hidden
}
.image-break svg,.image-break img,.image-break figure{width:100%;display:block}
.image-break figcaption{
  max-width:var(--zone-container);margin:16px auto 0;padding:0 24px;
  font-family:'DM Sans',sans-serif;font-size:14px;font-style:italic;
  color:var(--text-muted);text-align:center;line-height:1.5
}
.image-break figcaption strong{
  font-style:normal;color:var(--navy);font-weight:600;display:block;margin-bottom:4px
}

/* ═══════════════════════════════════════════════════
   Inherited from v4 — kept intact
   ═══════════════════════════════════════════════════ */

/* ─── Link fonte citazione dentro stat-banner (sostituisce inline) ─── */
.stat-source-link{color:rgba(255,255,255,.75);font-size:11px;text-decoration:underline;text-underline-offset:2px}
.stat-source-link:hover{color:#fff}

/* ─── Link inline CTA (sostituisce inline style="color:#1d4ed8") ─── */
.link-sito-wrap{margin-top:24px}
.link-sito-wrap + .link-sito-wrap{margin-top:12px}
.link-inline-cta{color:#1d4ed8;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.link-inline-cta:hover{color:var(--gold-dark)}

/* ─── Varianti colore leggi-anche (3 classi mancanti) ─── */
.la-card-paro .la-tag{color:var(--rosso-soft,#c53030)}
.la-card-impianti .la-tag{color:#0369a1}
.la-card-gengive .la-tag{color:#16a34a}

/* ═══════════════════════════════════════════════════
   BOX "REVISIONATO DA" (E-E-A-T con data visibile)
   ═══════════════════════════════════════════════════ */
.box-revisionato-da{
  display:flex;align-items:center;gap:16px;
  background:var(--cream);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:16px 20px;margin:24px 0;
}
.box-revisionato-da img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold);flex-shrink:0
}
.box-revisionato-da .rev-text{flex:1;min-width:0}
.box-revisionato-da .rev-label{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--gold-dark);margin-bottom:2px
}
.box-revisionato-da .rev-name{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:600;
  color:var(--navy);line-height:1.2
}
.box-revisionato-da .rev-creds{
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-soft);margin-top:2px
}
.box-revisionato-da time{font-weight:600;color:var(--navy)}
.box-revisionato-da a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:2px}
.author-box-hero > .box-revisionato-da{flex-basis:100%;order:99;margin-top:12px}

/* ═══════════════════════════════════════════════════
   BOX "QUANDO CONSULTARE UN PROFESSIONISTA"
   ═══════════════════════════════════════════════════ */
.box-quando-consultare{
  background:#fef2f2;border:1px solid #fecaca;border-left:4px solid var(--rosso-soft,#c53030);
  border-radius:var(--radius-sm);padding:24px 28px;margin:36px 0
}
.box-quando-consultare .qc-label{
  display:flex;align-items:center;gap:8px;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--rosso-soft,#c53030);margin-bottom:12px
}
.box-quando-consultare h3{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;
  color:var(--navy);margin:0 0 12px
}
.box-quando-consultare p{margin:0 0 10px;color:var(--text-soft);font-size:15px}
.box-quando-consultare ul{margin:10px 0 16px 22px;padding:0}
.box-quando-consultare li{margin-bottom:6px;font-size:15px}
.box-quando-consultare .qc-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rosso-soft,#c53030);color:#fff;
  padding:10px 20px;border-radius:8px;font-weight:600;
  text-decoration:none;font-size:14px;margin-top:4px
}

/* ═══════════════════════════════════════════════════
   PULL-QUOTE editoriale (Cormorant italic + linea gold)
   ═══════════════════════════════════════════════════ */
.pull-quote{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(22px,3vw,32px);font-weight:500;line-height:1.35;
  color:var(--navy);border-left:3px solid var(--gold);
  padding:8px 0 8px 28px;margin:40px 0
}
.pull-quote cite{
  display:block;margin-top:12px;
  font-family:'DM Sans',sans-serif;font-style:normal;
  font-size:13px;font-weight:600;color:var(--gold-dark);
  text-transform:uppercase;letter-spacing:1.2px
}
.pull-quote cite::before{content:"— "}
.zone-navy .pull-quote, .zone-navy-pattern .pull-quote{color:var(--cream);border-left-color:var(--gold-light)}
.zone-navy .pull-quote cite, .zone-navy-pattern .pull-quote cite{color:var(--gold-light)}

/* ═══════════════════════════════════════════════════
   DIVIDER GOLD semplice (compat v4)
   ═══════════════════════════════════════════════════ */
.divider-gold{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:48px auto;max-width:280px;color:var(--gold)
}
.divider-gold::before,.divider-gold::after{
  content:"";flex:1;height:1px;background:var(--gold-pale)
}
.divider-gold .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ═══════════════════════════════════════════════════
   CALLOUT standardizzati
   ═══════════════════════════════════════════════════ */
/* FIX (2026-04-20): flex solo per i callout "nuovi" con icona (cal-icon + cal-body);
   i callout legacy (.callout.warn/.info/.ok/.danger/.warning/.success) hanno
   contenuto inline <strong>/<em>/testo che con display:flex diventava una pila
   di colonnine illeggibili. */
.callout.callout-importante,
.callout.callout-attenzione,
.callout.callout-lo-sapevi,
.callout:has(> .cal-icon){
  display:flex;gap:14px;align-items:flex-start
}
.callout{
  border-radius:var(--radius-sm);padding:16px 20px;margin:24px 0;
  font-size:15px;line-height:1.6
}
.callout-importante{background:var(--cream);border-left:3px solid var(--gold)}
.callout-attenzione{background:#fff7ed;border-left:3px solid #c2410c}
.callout-lo-sapevi{background:var(--navy);border-left:3px solid var(--gold-light);color:#fff}
.callout-lo-sapevi strong{color:var(--gold-light)}
.callout .cal-icon{flex-shrink:0;width:22px;height:22px;margin-top:2px}
.callout .cal-body p:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════
   STICKY BOTTOM BAR / WA FLOATING (v4)
   ═══════════════════════════════════════════════════ */
.sticky-bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--navy);display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 -4px 20px rgba(26,41,64,.2);
  transform:translateY(100%);transition:transform .3s ease
}
.sticky-bottom-bar.visible{transform:translateY(0)}
.sticky-bottom-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:12px 8px;color:#fff;text-decoration:none;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  border-right:1px solid rgba(255,255,255,.12);min-height:58px
}
.sticky-bottom-bar a:last-child{border-right:none}
.sticky-bottom-bar svg{width:22px;height:22px}
.sticky-bottom-bar a:hover{background:var(--navy-light)}
.sticky-bottom-bar .sbb-prenota{background:var(--gold);color:var(--navy)}
.sticky-bottom-bar .sbb-prenota:hover{background:var(--gold-light)}
@media(min-width:768px){.sticky-bottom-bar{display:none}}

.wa-floating{
  position:fixed;right:14px;bottom:76px;z-index:85;
  width:52px;height:52px;border-radius:50%;
  background:var(--verde,#25D366);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(37,211,102,.35);
  text-decoration:none;transition:transform .2s,box-shadow .2s
}
.wa-floating:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(37,211,102,.5)}
.wa-floating svg{width:26px;height:26px}
@media(min-width:768px){.wa-floating{bottom:20px;right:20px}}
body:has(.sticky-bottom-bar.visible) .wa-floating{bottom:80px}

/* ═══════════════════════════════════════════════════
   GLOSSARY TERM + TOOLTIP (v4)
   ═══════════════════════════════════════════════════ */
.glossary-term{
  border-bottom:1px dotted var(--gold);cursor:help;
  position:relative;font-weight:500
}
.glossary-term:focus{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.glossary-tooltip{
  position:absolute;z-index:120;
  background:var(--navy);color:#fff;
  padding:10px 14px;border-radius:8px;
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;
  max-width:280px;box-shadow:0 8px 24px rgba(15,26,43,.3);
  opacity:0;pointer-events:none;transition:opacity .15s;
  transform:translateY(4px)
}
.glossary-tooltip.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.glossary-tooltip::after{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:6px solid var(--navy)
}

/* ═══════════════════════════════════════════════════
   BADGE SERIE + NEXT/PREV + FIGURE + COMPARE-TABLE +
   DISCLAIMER + COOKIE BANNER (v4, invariati)
   ═══════════════════════════════════════════════════ */
.badge-serie{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold);color:var(--navy);
  padding:4px 12px;border-radius:20px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px
}
.next-prev-articolo{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px 0 36px
}
.next-prev-articolo a{
  display:block;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--navy);background:#fff;transition:all .15s
}
.next-prev-articolo a:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.next-prev-articolo .np-label{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--gold-dark);margin-bottom:6px
}
.next-prev-articolo .np-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;line-height:1.3
}
.next-prev-articolo .np-prev{text-align:left}
.next-prev-articolo .np-next{text-align:right}
@media(max-width:600px){
  .next-prev-articolo{grid-template-columns:1fr}
  .next-prev-articolo .np-next{text-align:left}
}

figure.infografica{margin:32px 0;padding:0}
figure.infografica svg{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
figure.infografica figcaption{
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-muted);
  text-align:center;margin-top:10px;font-style:italic;line-height:1.5
}
figure.infografica figcaption strong{
  font-style:normal;color:var(--navy);font-weight:600;
  display:block;margin-bottom:4px
}

.compare-table-wrap{overflow-x:auto;margin:2em 0;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.compare-table{
  width:100%;border-collapse:collapse;
  font-family:'DM Sans',sans-serif;font-size:15px;background:#fff
}
.compare-table thead th{
  background:var(--navy);color:#fff;padding:14px 18px;
  text-align:left;font-weight:600;font-size:14px
}
.compare-table thead th.col-warn{background:#b45309}
.compare-table thead th.col-danger{background:var(--rosso-soft,#c53030)}
.compare-table thead th.col-ok{background:#15803d}
.compare-table td{
  padding:13px 18px;border-bottom:1px solid var(--border-light);vertical-align:middle
}
.compare-table tbody tr:nth-child(even){background:#fafaf8}
.compare-table td:first-child{font-weight:600;color:var(--navy)}
.compare-table td[data-align="center"]{text-align:center}
.compare-table .pill{display:inline-block;padding:3px 12px;border-radius:12px;font-size:13px;font-weight:600}
.compare-table .pill-ok{background:#dcfce7;color:#15803d}
.compare-table .pill-warn{background:#fef3c7;color:#b45309}
.compare-table .pill-danger{background:#fee2e2;color:#b91c1c}
.compare-table .pill-muted{background:#e5e7eb;color:var(--text-soft)}
.compare-table tfoot td{
  background:#f8f9fa;text-align:center;font-size:12px;color:var(--text-muted);
  border-bottom:none;padding:10px
}

.disclaimer-medico{
  background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:20px 24px;margin:32px 0
}
.disclaimer-medico .dm-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.disclaimer-medico .dm-head img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)
}
.disclaimer-medico .dm-name{
  font-family:'DM Sans',sans-serif;font-weight:700;color:var(--navy);font-size:14px;margin:0
}
.disclaimer-medico .dm-meta{font-size:12px;color:var(--text-muted);margin:0;line-height:1.5}
.disclaimer-medico .dm-meta a{color:var(--gold-dark);text-decoration:underline}
.disclaimer-medico .dm-body{font-size:12.5px;color:var(--text-muted);margin:0;line-height:1.6}

.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:99999;
  background:var(--navy);color:rgba(255,255,255,.9);
  padding:16px 24px;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);display:none
}
.cookie-banner.active{display:block}
.cookie-banner .cb-inner{
  max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap
}
.cookie-banner p{margin:0;flex:1;min-width:280px}
.cookie-banner a{color:var(--gold-light);text-decoration:underline}
.cookie-banner .cb-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-banner button{
  border:none;padding:10px 22px;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:'DM Sans',sans-serif
}
.cookie-banner .cb-accept{background:var(--verde,#25D366);color:#fff}
.cookie-banner .cb-reject{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.3)}

/* ═══════════════════════════════════════════════════
   FAQ ACCORDION — v4 unificata (5 varianti markup)
   ═══════════════════════════════════════════════════ */
.faq-section.faq-section{background:var(--cream);border-radius:var(--radius);padding:36px 40px;margin:40px 0}
.faq-section{background:var(--cream);border-radius:var(--radius);padding:36px 40px;margin:40px 0}
.faq-section h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--navy);font-size:28px;font-weight:600;
  border-top:none;padding-top:0;margin-top:0;margin-bottom:8px
}
.faq-section h2::after{
  content:"";display:block;width:48px;height:2px;
  background:var(--gold);margin-top:12px;margin-bottom:20px
}
.faq-section details.faq-item,
.faq-section .faq-item{
  background:#fff !important;border:1px solid var(--border) !important;border-radius:var(--radius-sm) !important;
  margin:0 0 12px !important;padding:0 !important;
  box-shadow:var(--shadow-sm) !important;
  transition:box-shadow .2s,border-color .2s
}
.faq-section details.faq-item[open],
.faq-section .faq-item[open]{
  border-color:var(--gold) !important;box-shadow:0 4px 16px rgba(184,153,106,.15) !important
}
.faq-section details.faq-item:last-child,
.faq-section .faq-item:last-child{margin-bottom:0 !important}
.faq-section .faq-q,
.faq-section summary.faq-q{
  display:flex !important;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:18px 22px !important;cursor:pointer;user-select:none;list-style:none;
  font-family:'DM Sans',sans-serif !important;font-weight:600 !important;
  color:var(--navy) !important;font-size:17px !important;line-height:1.45 !important;
  transition:color .15s;
  border-radius:var(--radius-sm);margin:0 !important
}
.faq-section .faq-q::-webkit-details-marker,
.faq-section .faq-q::marker{display:none;content:""}
.faq-section .faq-q::before{display:none !important}
.faq-section .faq-q::after{
  content:"";width:20px;height:20px;flex-shrink:0;margin-top:2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8996a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease
}
.faq-section details[open] .faq-q::after{transform:rotate(180deg)}
.faq-section .faq-q:hover{color:var(--gold-dark);background:rgba(184,153,106,.05)}
.faq-section .faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq-section .faq-a{
  padding:14px 22px 20px !important;
  color:var(--text) !important;
  font-family:'DM Sans',sans-serif !important;font-size:16px !important;line-height:1.75 !important
}
.faq-section .faq-a strong{color:var(--navy)}
.faq-section .faq-a a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:2px}
.faq-section .faq-a a:hover{color:var(--navy)}
.faq-section details[open] .faq-q{border-bottom:1px solid var(--border-light)}

/* Variante 2: .faq-section > details + .faq-answer */
.faq-section details:not(.faq-item){
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  margin:0 0 12px;padding:0;box-shadow:var(--shadow-sm)
}
.faq-section details:not(.faq-item)[open]{
  border-color:var(--gold);box-shadow:0 4px 16px rgba(184,153,106,.15)
}
.faq-section details:not(.faq-item) > summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:18px 22px;cursor:pointer;user-select:none;list-style:none;
  font-family:'DM Sans',sans-serif;font-weight:600;
  color:var(--navy);font-size:17px;line-height:1.45;
  border-radius:var(--radius-sm)
}
.faq-section details:not(.faq-item) > summary::-webkit-details-marker,
.faq-section details:not(.faq-item) > summary::marker{display:none;content:""}
.faq-section details:not(.faq-item) > summary::after{
  content:"";width:20px;height:20px;flex-shrink:0;margin-top:2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8996a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease
}
.faq-section details:not(.faq-item)[open] > summary::after{transform:rotate(180deg)}
.faq-section details:not(.faq-item) > summary:hover{color:var(--gold-dark);background:rgba(184,153,106,.05)}
.faq-section details:not(.faq-item)[open] > summary{border-bottom:1px solid var(--border-light)}
.faq-section details:not(.faq-item) > .faq-answer,
.faq-section details:not(.faq-item) > *:not(summary){
  padding:14px 22px 20px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.75;margin:0
}
.faq-section details:not(.faq-item) > *:not(summary) p{margin:0 0 10px}
.faq-section details:not(.faq-item) > *:not(summary) p:last-child{margin-bottom:0}

/* Variante 3: .faq-block */
.faq-block .faq-item{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  margin:0 0 12px;padding:0;box-shadow:var(--shadow-sm)
}
.faq-block .faq-item[open]{border-color:var(--gold);box-shadow:0 4px 16px rgba(184,153,106,.15)}
.faq-block .faq-item summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:18px 22px;cursor:pointer;user-select:none;list-style:none;
  font-family:'DM Sans',sans-serif;font-weight:600;
  color:var(--navy);font-size:17px;line-height:1.45;border-radius:var(--radius-sm)
}
.faq-block .faq-item summary::-webkit-details-marker,
.faq-block .faq-item summary::marker{display:none;content:""}
.faq-block .faq-item summary::after{
  content:"";width:20px;height:20px;flex-shrink:0;margin-top:2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8996a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease
}
.faq-block .faq-item[open] summary::after{transform:rotate(180deg)}
.faq-block .faq-item > *:not(summary){
  padding:14px 22px 20px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.75
}

/* Variante 5: details plain dentro .faq-section */
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]){
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
  margin:0 0 12px;padding:0;box-shadow:var(--shadow-sm)
}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"])[open]{
  border-color:var(--gold);box-shadow:0 4px 16px rgba(184,153,106,.15)
}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]) > summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:18px 22px;cursor:pointer;user-select:none;list-style:none;
  font-family:'DM Sans',sans-serif;font-weight:600;
  color:var(--navy);font-size:17px;line-height:1.45;border-radius:var(--radius-sm)
}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]) > summary::-webkit-details-marker,
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]) > summary::marker{display:none;content:""}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]) > summary::after{
  content:"";width:20px;height:20px;flex-shrink:0;margin-top:2px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8996a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease
}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"])[open] > summary::after{transform:rotate(180deg)}
article details:not(.faq-item):not([class*="faq"]):not([class*="info"]) > *:not(summary){
  padding:14px 22px 20px;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.75
}

@media(max-width:600px){
  .faq-section{padding:24px 18px}
  .faq-section h2{font-size:24px}
  .faq-section .faq-q,
  .faq-section details:not(.faq-item) > summary,
  .faq-block .faq-item summary{padding:16px 18px !important;font-size:16px !important}
  .faq-section .faq-a,
  .faq-section details:not(.faq-item) > *:not(summary),
  .faq-block .faq-item > *:not(summary){padding:12px 18px 16px !important;font-size:15.5px !important;line-height:1.7 !important}
}

/* ═══════════════════════════════════════════════════
   PILLAR/CLUSTER — hub "In questa guida" + ribbon spoke→pillar
   ═══════════════════════════════════════════════════ */
.guida-parent{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:12px 18px;margin:20px 0 8px;
  font-family:'DM Sans',sans-serif;font-size:14.5px;color:var(--text-soft);line-height:1.5
}
.guida-parent .gp-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--gold-dark);white-space:nowrap
}
.guida-parent a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.guida-parent a:hover{color:var(--gold-dark)}

.guida-hub{
  background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:var(--radius);padding:24px 28px;margin:28px 0 8px;
  box-shadow:var(--shadow-sm)
}
.guida-hub .gh-head{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--gold-dark);margin:0 0 4px
}
.guida-hub h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;
  color:var(--navy);margin:0 0 16px;border-top:none;padding-top:0
}
.guida-hub h2::after{content:"";display:block;width:48px;height:2px;background:var(--gold);margin-top:10px}
.guida-hub ol{
  list-style:none;counter-reset:gh;margin:0;padding:0;
  columns:2;column-gap:32px
}
.guida-hub li{counter-increment:gh;margin:0 0 10px;break-inside:avoid;padding-left:30px;position:relative}
.guida-hub li::before{
  content:counter(gh,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:600;color:var(--gold)
}
.guida-hub a{
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;line-height:1.4;
  color:var(--navy);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s
}
.guida-hub a:hover{color:var(--gold-dark);border-bottom-color:var(--gold)}
@media(max-width:600px){
  .guida-hub{padding:20px 20px}
  .guida-hub ol{columns:1}
}

/* ═══════════════════════════════════════════════════
   TOC SCROLL-SPY
   ═══════════════════════════════════════════════════ */
.toc-list a.active{
  color:var(--gold-dark);font-weight:600;
  border-left:2px solid var(--gold);padding-left:10px;margin-left:-12px
}

/* ═══════════════════════════════════════════════════
   PRINT-FRIENDLY
   ═══════════════════════════════════════════════════ */
@media print{
  .site-header,.breadcrumb,.reading-progress,
  .toc,.sticky-bottom-bar,.wa-floating,
  .cta-prenota,.cta-banner,.cta-personal-card,.cta-info-box,.cta-screening-box,.cta-btn,
  .btn-top,.cookie-banner,.skip-link{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  article{max-width:none;margin:0;box-shadow:none;border-radius:0}
  .zone{margin:0;padding:0;width:auto;background:#fff !important;color:#000 !important}
  .hero{background:#fff !important;color:#000 !important;padding:0 0 12pt !important}
  .hero h1{color:#000 !important;font-size:22pt}
  figure.infografica,table{page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href^="http"]::after{content:" [" attr(href) "]";font-size:9pt;color:#555}
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .sticky-bottom-bar,.wa-floating,.faq-section .faq-q::after,
  .glossary-tooltip,.reading-progress,.cta-banner-btn,.cpc-btn{transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}