/* Sezione Cataloghi sfogliabili: si appoggia a ../assets/css/site.css */
:root{
  --carta:#fff;--carta-2:#f1f1f1;--inchiostro:#000;--testo-2:#464646;--grigio:#6f6a6c;--linea:#ddd;
  --palco:#161515;--palco-2:#2a2829;--sul-palco:#f1f1f1;
  --serif:var(--testo);--titoli:var(--display);--spaziatura:0;
}
html{scroll-behavior:auto!important}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current]{border-bottom-color:var(--giallo)}

.cat-hero{background:var(--giallo);padding:clamp(48px,7vw,104px) var(--gutter) clamp(40px,5vw,72px)}
.cat-hero h1{font-size:clamp(3rem,8vw,7.75rem);line-height:1.03;max-width:12em}
.cat-hero p{font-style:italic;font-size:clamp(1.125rem,1.6vw,1.4375rem);line-height:1.5;max-width:46ch;margin-top:1rem}
.briciole{display:inline-block;margin-bottom:1.25rem;font:400 1.125rem/1.4 var(--display);text-underline-offset:.25em;text-decoration-thickness:2px}

.intro{padding:clamp(24px,3vw,40px) var(--gutter) 0}
.intro:has(form[hidden]):not(:has(.filtri button)){padding:0}
.cerca-globale{display:flex;max-width:640px;border:1px solid var(--nero);background:var(--bianco)}
.cerca-globale input{flex:1;min-width:0;border:0;padding:.8rem 1.1rem;font:inherit;background:transparent}
.cerca-globale button{border:0;background:var(--nero);color:var(--bianco);padding:0 1.6rem;font:400 1.0625rem var(--display);transition:background .15s,color .15s}
.cerca-globale button:hover{background:var(--giallo);color:var(--nero)}
.filtri{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.filtri:empty{display:none}
.filtri button{border:1px solid var(--nero);background:transparent;padding:.45rem 1rem;font:400 1.0625rem/1.2 var(--display)}
.filtri button:hover{background:var(--giallo)}
.filtri button[aria-pressed="true"]{background:var(--nero);color:var(--bianco)}

.aree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px 0 0}
.area{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.75rem);padding:clamp(1.75rem,3vw,2.75rem) var(--gutter);background:var(--nero);color:var(--bianco);text-decoration:none;min-height:280px}
.area:hover,.area:focus-visible{background:var(--giallo);color:var(--nero)}
.area:focus-visible{outline-offset:-6px}
.area>:not(.ventaglio){min-width:0}
.area h2{font-size:clamp(1.875rem,2.9vw,2.875rem);line-height:1.12}
.area .tratto{display:none}
.area p{margin-top:.6rem;line-height:1.5;font-size:1.0625rem}
.area .marchi{font:400 1.0625rem/1.45 var(--display);color:var(--giallo);margin-top:.75rem}
.area:hover .marchi,.area:focus-visible .marchi{color:var(--nero)}
.ventaglio{position:relative;flex:none;width:150px;height:170px}
.ventaglio img{position:absolute;bottom:0;left:50%;width:104px;aspect-ratio:.79;object-fit:cover;box-shadow:0 10px 22px -6px rgba(0,0,0,.6);transform-origin:50% 100%;transition:transform .3s ease}
.ventaglio img:nth-child(1){transform:translateX(-50%) rotate(-13deg) translateX(-14px)}
.ventaglio img:nth-child(2){transform:translateX(-50%);z-index:1}
.ventaglio img:nth-child(3){transform:translateX(-50%) rotate(13deg) translateX(14px);z-index:2}
.ventaglio.n1 img{transform:translateX(-50%)}
.area:hover .ventaglio img:nth-child(1){transform:translateX(-50%) rotate(-19deg) translateX(-22px)}
.area:hover .ventaglio img:nth-child(3){transform:translateX(-50%) rotate(19deg) translateX(22px)}

#aziende{padding:.5rem var(--gutter) clamp(40px,5vw,72px)}
.azienda{padding:clamp(2rem,4vw,3.5rem) 0;border-top:1px solid var(--nero)}
.intro+#risultati-home+#aree+#aziende .azienda:first-child{border-top:0}
.azienda h2{font-size:clamp(2.25rem,3.6vw,3.375rem);font-weight:400;margin-bottom:1.75rem}
.scaffale{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2.25rem 1.75rem;align-items:end}
.copertina{display:block;text-decoration:none;color:inherit}
.copertina .libro{position:relative;aspect-ratio:.79;background:var(--carta-2);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.14),0 12px 26px -10px rgba(0,0,0,.4);transition:transform .25s ease}
.copertina .libro::after{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.12) 40%,transparent)}
.copertina img{width:100%;height:100%;object-fit:cover;display:block}
.copertina:hover .libro,.copertina:focus-visible .libro{transform:translateY(-6px)}
.copertina .titolo{font:400 1.25rem/1.25 var(--display);margin-top:1rem}
.copertina .info{font-size:1rem;font-style:italic;color:var(--grafite);line-height:1.4;margin-top:.2rem}

/* ---------- Scarica PDF ---------- */
.scarica-pdf { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1px solid var(--linea);
  background: transparent; padding: 5px 11px; cursor: pointer;
  font: 400 14px var(--titoli); color: var(--testo-2); }
.scarica-pdf svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.scarica-pdf:hover { border-color: var(--inchiostro); color: var(--inchiostro); box-shadow: inset 0 -2px 0 var(--giallo); }
.scarica-pdf[disabled], #b-pdf[disabled] { cursor: progress; opacity: .8; }
#b-pdf span { white-space: nowrap; }

/* ---------- Offline ---------- */
.offline { margin-top: 10px; border: 1px solid var(--linea); background: transparent; padding: 5px 11px;
  font: 400 14px var(--titoli); color: var(--testo-2); }
.offline:hover { border-color: var(--inchiostro); color: var(--inchiostro); }
.offline.salvato { border-color: transparent; color: #3d7a3a; padding-left: 0; }
.scarica-tutti { display: block; margin: 18px 0 0; border: 0; background: transparent; padding: 0 0 3px;
  font: 400 14px var(--titoli); border-bottom: 1px solid var(--giallo); }
.avviso-rete { display: none; max-width: 640px; margin: 18px 0 0; padding: 10px 14px; background: #fbf3b8; border-left: 4px solid var(--giallo); font-size: 14px; }
body.senza-rete .avviso-rete { display: block; }
body.senza-rete .scheda:not(.salvata) { opacity: .4; }
body.senza-rete .scarica-tutti, body.senza-rete .offline:not(.salvato) { display: none; }
.offline-sfoglia { font: 400 14px var(--titoli) !important; white-space: nowrap; }
.offline-sfoglia.salvato { color: #9fd19a !important; }

.piede { margin-top: 24px; padding: 28px clamp(16px, 5vw, 64px); background: var(--inchiostro); color: #bbb;
  font: 400 14px var(--titoli); text-align: center; }

/* ---------- Risultati di ricerca ---------- */
.risultati { padding: 16px clamp(16px, 5vw, 64px) 24px; }
.risultati .stato { color: var(--testo-2); margin: 12px 0; text-align: center; }
.risultati h3 { font: 400 18px/1.2 var(--titoli); margin: 26px 0 12px; }
.risultati h3 small { font: 400 13px var(--serif); text-transform: none; color: var(--grigio); margin-left: 8px; }
.trovate { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.trovata { display: flex; gap: 12px; text-align: left; border: 1px solid var(--linea); background: #fff; padding: 10px; transition: border-color .2s; }
.trovata:hover { border-color: var(--inchiostro); }
.trovata img { width: 64px; height: 81px; object-fit: cover; flex: none; background: var(--carta-2); }
.trovata b { display: block; font: 400 14px var(--titoli); }
.trovata span { font-size: 12.5px; color: var(--testo-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.trovata mark { background: #f7ec94; color: inherit; }
.risultati.compatti { padding: 0; }
.risultati.compatti .trovate { grid-template-columns: 1fr; }
.risultati.compatti .stato { text-align: left; }

/* ---------- Sfogliatore ---------- */
#sfoglia { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--palco); color: var(--sul-palco); }
#sfoglia .bottone { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; padding: 7px 10px; color: var(--sul-palco);
  font: 400 14px var(--titoli); }
#sfoglia .bottone:hover { background: var(--palco-2); }
#sfoglia .bottone[aria-pressed="true"] { border-color: var(--giallo); }

.barra { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #2f2d2e; }
.barra-titolo { flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.barra-titolo span { display: block; font: 400 14px var(--titoli); color: var(--giallo); }
.barra-titolo strong { font: 400 19px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.barra-azioni { display: flex; gap: 2px; }

.palco { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; padding: 16px 56px;
  background: radial-gradient(ellipse at center, #3a3638 0%, var(--palco) 72%); }
.area-libro { flex: 1; height: 100%; position: relative; }
.area-libro .stf__parent { position: absolute !important; inset: 0; width: auto !important; height: auto !important; min-width: 0 !important; }
.area-libro .stf__wrapper { height: 100% !important; padding-bottom: 0 !important; }

.pagina { background: #fff; overflow: hidden; }
.pagina img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity .25s; }
.pagina img.caricata { opacity: 1; }
.pagina.bianca { background: #fafafa; }
/* Ombra della piega centrale, come in un libro aperto */
.pagina::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.pagina.--left::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,.06) 35%, transparent); }
.pagina.--right::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.05) 35%, transparent); }
.pagina.--hard.--right:first-child::after { display: none; }

.freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 64px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--sul-palco); display: grid; place-items: center; transition: background .2s, color .2s; }
.freccia:hover { background: var(--giallo); color: var(--inchiostro); border-color: var(--giallo); }
.freccia:disabled { opacity: .2; cursor: default; background: transparent; color: var(--sul-palco); }
.freccia svg { width: 26px; height: 26px; }
.freccia.sx { left: 6px; } .freccia.dx { right: 6px; }

.barra-sotto { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid #2f2d2e; }
#cursore { flex: 1; accent-color: var(--giallo); min-width: 60px; }
.numero-pagina { font: 400 14px var(--titoli); font-variant-numeric: tabular-nums; color: #c9c5c6; white-space: nowrap; }

.miniature { position: absolute; left: 0; right: 0; bottom: 52px; max-height: 46vh; overflow-y: auto; z-index: 20;
  background: rgba(18,17,17,.97); border-top: 1px solid #3a3839; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 10px; }
.miniature button { border: 0; background: none; padding: 0; color: #aaa; font: 400 14px var(--titoli); text-align: center; }
.miniature img { width: 100%; aspect-ratio: var(--formato, .79); object-fit: cover; display: block; background: #333; outline: 2px solid transparent; outline-offset: 2px; margin-bottom: 4px; }
.miniature button.attuale img { outline-color: var(--giallo); }
.miniature button.attuale { color: var(--giallo); }
.miniature button:hover img { outline-color: #888; }

.pannello-cerca { position: absolute; top: 57px; right: 0; bottom: 52px; width: min(380px, 100%); z-index: 25;
  background: var(--carta); color: var(--inchiostro); padding: 16px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.4); border-top: 3px solid var(--giallo); }
.pannello-cerca form { display: flex; gap: 8px; margin-bottom: 12px; }
.pannello-cerca input { flex: 1; min-width: 0; border: 1px solid var(--inchiostro); padding: 9px 12px; font: inherit; }

.chiudi { border: 0; background: transparent; font-size: 26px; line-height: 1; padding: 0 8px; }

/* ---------- Lente ---------- */
.lente { position: fixed; inset: 0; z-index: 50; background: rgba(12,12,12,.97); display: flex; flex-direction: column; color: var(--sul-palco); }
.lente-barra { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font: 400 14px var(--titoli); color: #aaa; }
.lente-barra .chiudi { color: #fff; }
.lente-scorri { flex: 1; overflow: auto; cursor: zoom-in; }
.lente-scorri.trascina { cursor: grabbing; }
.lente-pagine { display: flex; width: max-content; margin: 0 auto; height: 100%; padding: 0 0 8px; }
.lente-pagine img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; }


.scarica-pdf,.offline{font-size:14px}
.lente-pagine img{max-width:none}
.area-libro img{max-width:none}

@media (max-width:900px){
  .aree{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .barra .bottone span,.barra-sotto .bottone span{display:none}
  .palco{padding:8px 4px}
  .freccia{display:none}
  .scaffale{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  .cerca-globale button{padding:0 1rem}
  .lente-barra span{display:none}
  .area{flex-direction:column;align-items:flex-start;min-height:0}
  .ventaglio{margin-left:18px}
  .barra-titolo strong{font-size:16px}
}

/* === Coordinato ufficiale === */
.cat-hero h1{font-size:clamp(2.25rem,5.5vw,5.25rem);line-height:1.06}
.cat-hero p{font-size:clamp(1rem,1.3vw,1.1875rem);font-weight:500;line-height:1.5}
.briciole{font:500 1rem/1.4 var(--display)}
.area h2{font-size:clamp(1.375rem,2.1vw,2rem)}
.area p{font-size:.9375rem}
.area .marchi{font:500 .9375rem/1.45 var(--display)}
.azienda h2{font-size:clamp(1.75rem,2.9vw,2.625rem);font-weight:700}
.copertina .titolo{font:500 1rem/1.3 var(--display)}
.copertina .info{font-size:.875rem}
.filtri button{font:500 .9375rem/1.2 var(--display)}
.cerca-globale button{font:700 .875rem var(--display);text-transform:uppercase}
.barra-titolo strong{font-weight:500;font-size:17px}

/* === Foto delle aziende in testa all'area === */
.cat-hero{position:relative;overflow:hidden;isolation:isolate}
.hero-foto{position:absolute;inset:0;z-index:-1;background:var(--nero)}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-foto img.attiva{opacity:1}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.35) 60%,rgba(0,0,0,.15) 100%)}
.cat-hero.con-foto{color:var(--bianco)}
.cat-hero.con-foto .briciole{color:var(--bianco)}
.cat-hero.con-foto h1,.cat-hero.con-foto p{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hero-didascalia{position:absolute;right:var(--gutter);bottom:16px;font:500 .8125rem/1 var(--display);color:rgba(255,255,255,.92)}
.hero-didascalia b{color:var(--giallo);font-weight:700}
.hero-punti{position:absolute;left:var(--gutter);bottom:10px;display:flex;gap:2px}
.hero-punti button{width:36px;height:24px;padding:11px 4px;border:0;background:transparent;cursor:pointer}
.hero-punti button::before{content:"";display:block;height:3px;background:rgba(255,255,255,.5);transition:background .3s}
.hero-punti button.on::before,.hero-punti button:hover::before{background:var(--giallo)}
.cat-hero.con-foto{padding-bottom:calc(clamp(72px,8vw,120px) + 24px)}
@media (max-width:640px){
  .cat-hero.con-foto{padding-bottom:84px}
  .hero-didascalia{left:var(--gutter);right:auto;bottom:44px}
}