/* ============================================================
   HOME KIMERIK — 3 pezzi vivi
   Namespace: .kh-  (nessuna collisione col CSS esistente)
   ============================================================ */
:root{
  --kh-bg:#0c0a0a;
  --kh-bordeaux:#8B2B2B;
  --kh-bordeaux-d:#6f2121;
  --kh-gold:#C5A059;
  --kh-gold-soft:#e7d4ad;
  --kh-cream:#f4ece0;
  --kh-muted:#8b817a;
  --kh-line:#2a2220;
  /* font del sito Kimerik */
  --kh-display:'Playfair Display',Georgia,serif;
  --kh-body:inherit;
}

/* ---------- OVERRIDE MIRATI HOME (meno vuoto, richiesta utente) ----------
   Scoped a .home-2026 → vincono su home.css senza toccarlo. Reversibili: basta
   togliere questo blocco. */
.home-2026 .hero-2026{ min-height:auto; padding-top:84px; padding-bottom:52px; }
.home-2026 .hero-inner{ padding-top:14px; padding-bottom:14px; }
/* hero corto → l'indicatore "Scorri" non serve e si sovrapporrebbe ai pulsanti */
.home-2026 .hero-scroll{ display:none; }
@media(max-width:760px){ .home-2026 .hero-2026{ padding-top:96px; padding-bottom:40px; } }
/* meno vuoto tra CTA finale e footer */
.home-2026 .section-cta-final{ padding-top:52px; padding-bottom:44px; }
.home-2026 .site-footer{ padding-top:40px; }

/* ---------- PEZZO 1 — striscia "Si parla dei nostri autori" ---------- */
.kh-ticker{background:var(--kh-bordeaux-d);border-top:1px solid var(--kh-gold);border-bottom:1px solid var(--kh-gold);overflow:hidden;}
.kh-ticker-in{display:flex;align-items:center;gap:18px;max-width:1280px;margin:0 auto;padding:0 24px;}
.kh-ticker-lab{flex:none;font-size:10.5px;letter-spacing:.16em;color:var(--kh-gold);font-weight:800;text-transform:uppercase;}
.kh-ticker-track{flex:1;overflow:hidden;white-space:nowrap;padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.kh-ticker-move{display:inline-block;animation:kh-scroll 42s linear infinite;}
.kh-ticker:hover .kh-ticker-move{animation-play-state:paused;}
.kh-ticker-item{color:var(--kh-cream);font-size:13px;margin-right:42px;text-decoration:none;}
.kh-ticker-item:hover{color:#fff;}
.kh-ticker-canale{color:var(--kh-gold-soft);font-weight:700;margin-right:6px;}
.kh-ticker-aut{font-weight:600;}
.kh-ticker-sep{color:var(--kh-gold);opacity:.5;margin:0 6px;}
@keyframes kh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- PEZZO 2 — blocco autori a 2 colonne (In vetrina ora / Mistero) ---------- */
.kh-ev2sec{background:var(--kh-bg);padding:46px 24px;}
/* 🔴 14/08/2026 — anche questo blocco stava su un asse suo: 1040 contro i 1280 di
   tutta la pagina, quindi «In vetrina ora» partiva più a destra dell'eroe e della
   striscia d'estate. Stessa gabbia di tutti: il bordo sinistro è uno solo.
   🔑 `is-uno` resta stretto di proposito — una card sola larga 1280 sarebbe una
   riga vuota travestita da sezione. */
.kh-ev2{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;gap:24px;}
.kh-ev2.is-due{grid-template-columns:1fr 1fr;}
.kh-ev2.is-uno{grid-template-columns:1fr;max-width:680px;}
.kh-ev2-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--kh-gold);font-weight:800;margin-bottom:14px;}
.kh-mistero .kh-ev2-eyebrow{color:var(--kh-gold-soft);}
.kh-ev2-card{display:flex;gap:18px;align-items:center;background:rgba(255,255,255,.02);border:1px solid var(--kh-line);border-radius:12px;padding:18px;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;}
.kh-ev2-card:hover{border-color:var(--kh-gold);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.35);}
/* 🔴 07/09/2026, Gianfranco: *«queste le farei più grandi o effetto lente sulla
   copertina»*. Erano 120×174: in mezzo a un riquadro largo, la copertina — che è la cosa
   che si guarda per prima — pesava meno del testo che la spiega.
   🔑 **Tutt'e due**: più grande di suo (150×218, +25%), e la lente quando ci passi sopra.
      Lo zoom sta DENTRO la cornice (`overflow:hidden` sul contenitore) e non sposta niente
      intorno: si ingrandisce il disegno, non il posto che occupa. */
.kh-ev2-cover{width:150px;height:218px;object-fit:cover;border-radius:4px;flex-shrink:0;box-shadow:0 10px 26px rgba(0,0,0,.45);background:var(--kh-bordeaux-d);
  transition:transform .45s ease, box-shadow .45s ease;}
.kh-ev2-card:hover .kh-ev2-cover{transform:scale(1.07);box-shadow:0 16px 38px rgba(0,0,0,.55);}
/* La cornice trattiene l'ingrandimento: senza, la copertina uscirebbe dal riquadro. */
.kh-ev2-card{--kh-lente:1;}
.kh-live-slide .kh-ev2-cover,
.kh-mistero .kh-q-wrap{will-change:transform;}
/* mistero: copertina vera in TRASPARENZA + "?" sopra (gioco + promozione) */
.kh-q-wrap{position:relative;width:150px;height:218px;flex-shrink:0;border-radius:4px;overflow:hidden;background:linear-gradient(160deg,#5a4444,#241b1b);border:1px solid rgba(197,160,89,.35);box-shadow:0 10px 26px rgba(0,0,0,.45);}
.kh-q-wrap img{transition:transform .45s ease, opacity .45s ease;}
/* 🪤 Qui la lente scopre appena la copertina nascosta: è un indovinello, e togliere il velo
   del tutto vorrebbe dire dare la risposta prima della domanda. */
.kh-ev2-card:hover .kh-q-wrap img{transform:scale(1.08);opacity:.42;}
.kh-q-wrap img{width:100%;height:100%;object-fit:cover;opacity:.30;filter:saturate(.85);}
.kh-q-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--kh-display);font-size:66px;color:rgba(231,212,173,.85);text-shadow:0 2px 12px rgba(0,0,0,.5);}
.kh-ev2-body{min-width:0;}
.kh-ev2-tag{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--kh-gold);font-weight:800;margin-bottom:6px;}
.kh-tag-gold{color:#1a1410;background:var(--kh-gold);padding:2px 8px;border-radius:3px;}
.kh-ev2-name{font-family:var(--kh-display);font-size:26px;font-weight:600;color:#fff;line-height:1.08;margin:0 0 4px;}
.kh-ev2-book{font-size:13px;color:var(--kh-gold);letter-spacing:.02em;margin-bottom:8px;}
.kh-ev2-frase{font-family:var(--kh-display);font-style:italic;font-size:16px;line-height:1.4;color:var(--kh-gold-soft);margin:0 0 10px;}
.kh-ev2-link{font-size:13px;font-weight:700;color:var(--kh-cream);}
.kh-ev2-card:hover .kh-ev2-link{color:#fff;}
.kh-ev2-more{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--kh-muted);text-decoration:none;}
.kh-ev2-more:hover{color:var(--kh-gold-soft);}
/* carosello colonna sinistra: scorre tra gli autori in vetrina (niente link che porta via) */
/* 👆 07/09/2026 — il carosello si trascina. `pan-y` lascia alla pagina lo scroll
   verticale e tiene per sé quello orizzontale: senza, sul telefono il gesto se lo
   prendevano tutt'e due. Il cursore dice che l'oggetto è afferrabile. */
.kh-live-stage{position:relative;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;}
.kh-live-stage:active{cursor:grabbing;}

/* 〉 I BAFFI — il segno che dice «si scorre». Trasparenti a riposo (.18): si vedono
   quando li cerchi e non entrano nel disegno del riquadro. 44 px di area sensibile
   perché restino prendibili col dito, pur essendo un tratto sottile. */
.kh-baffo{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:64px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--kh-gold);
  opacity:.18;transition:opacity .3s ease, transform .3s ease;}
.kh-baffo svg{width:20px;height:34px;}
.kh-baffo-succ{right:-4px;}
.kh-baffo-prec{left:-4px;transform:translateY(-50%) scaleX(-1);}
.kh-live-stage:hover .kh-baffo{opacity:.42;}
.kh-baffo:hover{opacity:.95;}
.kh-baffo-succ:hover{transform:translateY(-50%) translateX(3px);}
.kh-baffo-prec:hover{transform:translateY(-50%) scaleX(-1) translateX(3px);}
.kh-baffo:focus-visible{opacity:1;outline:2px solid var(--kh-gold);outline-offset:3px;border-radius:6px;}
/* 📱 Sul telefono restano, ma più discreti: lì il gesto naturale è il dito, e il baffo
   serve solo a dire che il gesto esiste. */
@media (max-width:900px){
  .kh-baffo{opacity:.28;width:38px;height:54px;}
  .kh-baffo svg{width:16px;height:28px;}
}
.kh-live-slide.on{transition:opacity .45s ease, transform .18s ease-out;}
.kh-live-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;pointer-events:none;}
.kh-live-slide.on{position:relative;opacity:1;visibility:visible;pointer-events:auto;}
.kh-live-dots{display:flex;gap:7px;margin-top:12px;}
.kh-live-dot{width:7px;height:7px;border-radius:50%;border:0;background:var(--kh-line);cursor:pointer;padding:0;transition:width .3s,background .3s;}
.kh-live-dot.on{background:var(--kh-gold);width:20px;border-radius:4px;}
@media(max-width:760px){
  .kh-ev2.is-due{grid-template-columns:1fr;}
  .kh-ev2-cover{width:118px;height:172px;}
  .kh-q-wrap{width:118px;height:172px;}
  .kh-q-mark{font-size:48px;}
}

/* ---------- PEZZO 3 — distribuzione ---------- */
.kh-distro{background:var(--kh-bg);border-top:1px solid var(--kh-line);}
/* Stessa gabbia del resto: era 1040 e partiva più a destra di tutto. */
.kh-distro-in{max-width:1280px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.kh-distro-lab{flex:none;font-size:10px;letter-spacing:.14em;color:var(--kh-bordeaux);font-weight:800;text-transform:uppercase;}
.kh-distro-live{width:7px;height:7px;border-radius:50%;background:#37a05a;flex:none;animation:kh-blink 2s infinite;}
@keyframes kh-blink{50%{opacity:.3}}
.kh-distro-txt{font-size:12.5px;color:var(--kh-muted);}

/* ---------- CATALOGO · righe orizzontali (Collana / Gusto letterario, a turno) ---------- */
.kh-catrow{display:grid;grid-template-columns:172px 1fr;gap:26px;align-items:center;padding:20px 0;border-top:1px solid var(--kh-line);}
.kh-catrow:first-of-type{border-top:0;}
.kh-catrow-tipo{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--kh-gold);font-weight:800;}
.kh-catrow-nome{display:block;font-family:var(--kh-display);font-size:23px;font-weight:600;color:#fff;line-height:1.1;margin:4px 0 9px;}
.kh-catrow-cta{font-size:12px;color:var(--kh-gold-soft);font-weight:700;text-decoration:none;}
.kh-catrow-cta:hover{color:#fff;}
.kh-catrow .kh-catrow-books{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:760px){
  .kh-catrow{grid-template-columns:1fr;gap:12px;}
  .kh-catrow .kh-catrow-books{grid-template-columns:repeat(2,1fr);}
}

/* ---------- marchio "Categoria" dorato sull'angolo della copertina (catalogo home) ---------- */
.book-grid .book-cover-wrap{ position:relative; }
.kh-cat-badge{
  position:absolute; bottom:8px; right:8px;
  background:rgba(12,10,10,.62); color:var(--kh-gold);
  font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:3px; border:1px solid rgba(197,160,89,.45);
  max-width:78%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  backdrop-filter:blur(2px); pointer-events:none;
}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .kh-ev-stage,.kh-ev-slide{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center;}
  .kh-ev-cover{justify-self:center;width:180px;height:258px;}
  .kh-ev-frase{border-left:0;border-top:2px solid var(--kh-gold);padding:14px 0 0;}
  .kh-ev-cta{justify-content:center;}
  .kh-ev-name{font-size:28px;}
}
@media(prefers-reduced-motion:reduce){
  .kh-ticker-move{animation:none;}
  .kh-distro-live{animation:none;}
  .kh-ev-slide{transition:none;}
}