/* =============================================================
   INNOV2E — libro.css
   Componenti della scheda-libro, riusabili da ogni volume:
   hero con copertina, tesi, struttura del volume, lessico,
   pubblico, estratto scaricabile, blocco d'acquisto.
   ============================================================= */

/* ---------- hero ---------- */
.hero{
  background:var(--ink-band);color:var(--on-ink);position:relative;overflow:hidden;
  padding-block:clamp(48px,7vw,86px) clamp(52px,7vw,92px);
}
#lattice{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.92;pointer-events:none}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 62% 46%, rgba(11,41,66,0) 0%, rgba(6,24,42,.62) 62%, var(--ink-band) 100%),
    linear-gradient(180deg, rgba(6,24,42,.55) 0%, rgba(6,24,42,0) 26%, rgba(6,24,42,.9) 100%);
}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:940px){.hero-in{grid-template-columns:1fr;gap:38px}}

.hero-kicker{display:flex;align-items:center;gap:12px;color:var(--gold-ink);margin-bottom:20px;flex-wrap:wrap}
.hero-kicker .bar{width:34px;height:1px;background:var(--gold-ink);flex:0 0 auto}
h1 .thin{display:block;font-weight:400;font-style:italic;font-size:.62em;letter-spacing:0;color:var(--gold-ink);margin-top:.1em}
.hero-sub{margin-top:24px;max-width:44ch;font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.6;color:var(--on-ink-2)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid rgba(223,172,87,.2);padding-top:18px}
.hero-meta div{padding-right:26px;margin-right:26px;border-right:1px solid rgba(223,172,87,.16)}
.hero-meta div:last-child{border-right:0;margin-right:0;padding-right:0}
.hero-meta .v{font-family:"Bodoni Moda",Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--on-ink);line-height:1;font-variant-numeric:tabular-nums}
.hero-meta .k{font-family:"IBM Plex Mono",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--on-ink-3);margin-top:7px}
@media (max-width:600px){
  .hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 0}
  .hero-meta div{padding-right:14px;margin-right:0;border-right:0}
  .hero-meta div:nth-child(odd){border-right:1px solid rgba(223,172,87,.16)}
  .hero-meta .v{font-size:1.25rem}
}

.cover-stage{position:relative;justify-self:center;width:min(330px,78vw)}
.cover-stage img{
  width:100%;border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(223,172,87,.3);
}
.cover-stage::before{
  content:"";position:absolute;inset:-10% -14%;border-radius:50%;
  background:radial-gradient(circle,rgba(223,172,87,.2) 0%,rgba(79,208,197,.06) 42%,transparent 68%);
  filter:blur(22px);z-index:-1;
}
.cover-tag{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;
  background:var(--gold-ink);color:#0A1E30;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;white-space:nowrap;border-radius:2px;
}

/* ---------- tesi ---------- */
.thesis{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.thesis blockquote{
  margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:600;
  font-size:clamp(1.7rem,3.5vw,2.9rem);line-height:1.16;letter-spacing:-.015em;max-width:19ch;
}
.thesis blockquote em{font-style:italic;color:var(--gold)}
.thesis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,44px);margin-top:8px}
.thesis-grid p{color:var(--text-2)}
.thesis-grid .snap{
  font-family:"Bodoni Moda",Georgia,serif;font-size:1.28rem;font-weight:600;color:var(--text);
  line-height:1.32;margin-bottom:12px;
}

/* ---------- struttura del libro ---------- */
.parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:38px}
@media (max-width:1080px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.parts{grid-template-columns:1fr}}
.part{background:var(--paper);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;transition:background .25s}
.band-paper.alt .part{background:var(--paper-3)}
.part:hover{background:var(--paper-2)}
.part-top{display:flex;align-items:baseline;gap:11px}
.part-n{font-family:"Bodoni Moda",Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1;letter-spacing:.01em}
.part-t{font-weight:600;font-size:1.03rem;line-height:1.28;letter-spacing:-.005em}
.part ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.part li{font-size:.9rem;line-height:1.42;color:var(--text-2);padding-left:16px;position:relative}
.part li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--gold);opacity:.7}

/* ---------- lessico ---------- */
.lex{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px 34px;margin-top:34px}
.lex dt{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.06em;color:var(--gold-ink);font-weight:500;margin-bottom:7px}
.lex dd{margin:0;font-size:.92rem;line-height:1.55;color:var(--on-ink-2)}

/* ---------- pubblico ---------- */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:clamp(16px,1.8vw,22px);margin-top:38px}
.aud-card{background:var(--paper-2);border:1px solid var(--line-soft);border-top:2px solid var(--gold);padding:clamp(20px,2.4vw,26px);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow)}
.aud-card h3{font-size:1.02rem;margin-bottom:9px}
.aud-card p{font-size:.9rem;line-height:1.55;color:var(--text-2)}

/* ---------- estratto ---------- */
.ex-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(30px,5vw,66px);align-items:center}
@media (max-width:900px){.ex-grid{grid-template-columns:1fr}}
.ex-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.ex-list li{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:baseline;font-size:.95rem;color:var(--text-2)}
.ex-list .pp{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--gold-text);font-variant-numeric:tabular-nums}
.ex-list strong{color:var(--text);font-weight:600}
.sheets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.sheets figure{margin:0;position:relative;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.sheets figure:nth-child(1){transform:rotate(-1.6deg)}
.sheets figure:nth-child(2){transform:rotate(1deg) translateY(-10px)}
.sheets figure:nth-child(3){transform:rotate(-1deg) translateY(6px)}
.sheets figure:nth-child(4){transform:rotate(1.4deg) translateY(-4px)}
.sheets figure:hover{transform:translateY(-8px) rotate(0) scale(1.03);z-index:3}
.sheets img{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.sheets figcaption{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:8px}

.dl-note{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin-top:14px;min-height:1.2em}
.dl-note[data-state="err"]{color:#B4462F}
.dl-note[data-state="ok"]{color:var(--signal)}

/* ---------- acquisto ---------- */
.buy{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:820px){.buy{grid-template-columns:1fr;justify-items:start}}
.buy-cover img{width:100%;border-radius:2px;box-shadow:0 24px 50px -20px rgba(0,0,0,.85),0 0 0 1px rgba(223,172,87,.28)}
.buy-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.isbn{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px;padding-top:20px;border-top:1px solid rgba(223,172,87,.2)}
.isbn div .k{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3);display:block;margin-bottom:5px}
.isbn div .v{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--on-ink);font-variant-numeric:tabular-nums}



/* ============================================================
   Componenti condivisi aggiunti quando il secondo volume ne ha
   avuto bisogno: la lista "domanda sbagliata -> domanda giusta"
   e il selettore con pannello. I colori vengono dai token, cosi'
   ogni libro li vede con il proprio accento.
   ============================================================ */
/* ---------- domande ---------- */
.q-list{display:flex;flex-direction:column;gap:0;margin-top:8px}
.q-row{
  display:grid;grid-template-columns:minmax(0,.86fr) 44px minmax(0,1.14fr);
  gap:clamp(12px,2vw,26px);align-items:center;
  padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--line-soft);
}
.q-row:last-child{border-bottom:1px solid var(--line-soft)}
@media (max-width:820px){
  .q-row{grid-template-columns:1fr;gap:12px;padding-block:22px}
  .q-arrow{transform:rotate(90deg);width:22px}
}
.q-wrong{color:var(--muted);font-size:.99rem;line-height:1.5;text-align:right}
@media (max-width:820px){.q-wrong{text-align:left}}
.q-wrong .lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px;color:var(--muted);opacity:.8}
.q-wrong .txt{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent);text-decoration-thickness:1px}
.q-arrow{width:34px;height:12px;color:var(--gold);opacity:.85;justify-self:center}
.q-right .lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:7px;color:var(--gold-text)}
.q-right .txt{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.12rem,1.9vw,1.42rem);font-weight:600;line-height:1.34;color:var(--text)}
.q-right .src{display:block;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.1em;color:var(--muted);margin-top:9px}

/* ---------- posizioni (interattivo) ---------- */
.pos-track{position:relative;margin-top:44px}
.pos-line{position:absolute;left:0;right:0;top:11px;height:1px;background:var(--gold-ink-soft)}
.pos-fill{position:absolute;left:0;top:11px;height:1px;background:var(--signal-ink);transition:width .45s cubic-bezier(.4,.1,.2,1);box-shadow:0 0 10px var(--signal-ink)}
.pos-btns{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pos-btn{
  background:none;border:0;padding:0 4px;cursor:pointer;text-align:left;color:inherit;font:inherit;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.pos-btn .dot{
  width:23px;height:23px;border-radius:50%;border:1px solid var(--gold-ink-soft);
  background:var(--ink-band);display:grid;place-items:center;transition:all .3s;flex:0 0 auto;position:relative;z-index:2;
}
.pos-btn .dot i{width:6px;height:6px;border-radius:50%;background:var(--gold-ink-soft);display:block;transition:all .3s}
.pos-btn[aria-selected="true"] .dot{border-color:var(--signal-ink);box-shadow:0 0 0 4px color-mix(in srgb, var(--signal-ink) 16%, transparent)}
.pos-btn[aria-selected="true"] .dot i{background:var(--signal-ink);width:9px;height:9px;box-shadow:0 0 10px var(--signal-ink)}
.pos-btn .n{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.16em;color:var(--on-ink-3);display:block;margin-bottom:4px}
.pos-btn .nm{font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:.95rem;color:var(--on-ink-2);line-height:1.25;transition:color .25s}
.pos-btn:hover .nm{color:var(--on-ink)}
.pos-btn[aria-selected="true"] .nm{color:var(--on-ink)}
.pos-btn[aria-selected="true"] .n{color:var(--signal-ink)}
@media (max-width:760px){
  .pos-btns{grid-template-columns:repeat(2,1fr);gap:20px 10px}
  .pos-line,.pos-fill{display:none}
}
.pos-panel{
  margin-top:38px;border:1px solid var(--gold-ink-soft);background:var(--ink-card);
  padding:clamp(24px,3.4vw,40px);border-radius:var(--radius);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(22px,3.4vw,48px);
}
@media (max-width:820px){.pos-panel{grid-template-columns:1fr}}
.pos-panel h3{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.4rem,2.4vw,1.95rem);font-weight:700;color:var(--on-ink);letter-spacing:-.01em}
.pos-panel .body{color:var(--on-ink-2);font-size:1.01rem;line-height:1.66;margin-top:14px}
.pos-crit{border-left:2px solid var(--signal-ink);padding-left:20px;align-self:center}
.pos-crit .lbl{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:11px}
.pos-crit .q{font-family:"Bodoni Moda",Georgia,serif;font-size:clamp(1.06rem,1.7vw,1.28rem);font-weight:600;line-height:1.4;color:var(--on-ink);font-style:italic}
.fade-swap{animation:fadeSwap .38s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}