/* ===========================================================================
   ESA · Cataloghi sfogliabili · v1.0.0 (2026-10-27)
   Tutto è racchiuso in .esac: colori e font nelle variabili qui sotto.
   I pulsanti "Sfoglia" e "PDF" usano i .btn-tech del CSS globale del sito.
   =========================================================================== */
.esac{
  --esac-font-head:'Aptos','Segoe UI',system-ui,sans-serif;
  --esac-head-weight:700;
  --esac-font-body:'Aptos','Segoe UI',system-ui,sans-serif;
  --esac-body-weight:300;
  --esac-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --esac-navy:#16243E;
  --esac-navy-deep:#0E1829;
  --esac-accent:#2E5CFF;
  --esac-text:#4A5464;
  --esac-mute:#5B6472;
  --esac-line:#E3E3E3;
  --esac-focus:2px solid #2E5CFF;            /* stile del focus visibile: cambialo qui */
  font-family:var(--esac-font-body);
  font-weight:var(--esac-body-weight);
  color:var(--esac-navy);
}
.esac *,.esac *::before,.esac *::after{ box-sizing:border-box; }
.esac p,.esac ul,.esac h2,.esac h3,.esac h4{ margin:0; padding:0; }
.esac ul{ list-style:none; }
.esac .esac-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.esac .esac-icon{ width:16px; height:16px; flex:none; }
.esac button:focus,.esac a:focus{ outline:none; }
.esac button:focus-visible,.esac a:focus-visible,.esac input:focus-visible,.esac [tabindex]:focus-visible{ outline:var(--esac-focus); outline-offset:3px; }
.esac a.btn-tech{ text-decoration:none; }
.esac a.btn-tech.ghost{ color:var(--navy, #16243E) !important; }
.esac .btn-tech.primary{ color:#fff !important; }
.esac .btn-tech .arrow svg{ width:16px; height:16px; }

/* ===========================================================================
   GRIGLIA DEI CATALOGHI
   =========================================================================== */
.esac-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:48px 40px; }
.esac-card{ display:flex; flex-direction:column; gap:24px; }

/* copertina come un fascicolo vero: dorso, spessore delle pagine, ombra */
.esac .esac-cover{
  position:relative; display:block; width:100%; margin:0; padding:22px 26px 26px 18px;
  border:0; border-radius:4px; background:linear-gradient(180deg, #F3F5F8 0%, #E8ECF2 100%); cursor:pointer;
  perspective:1400px;
}
.esac-book{
  position:relative; display:block; aspect-ratio:595 / 842; border-radius:2px 5px 5px 2px; background:#fff;
  transform-origin:left center; transform:rotateY(0deg);
  box-shadow:0 1px 1px rgba(14,24,41,.12), 0 14px 28px -12px rgba(14,24,41,.45);
  transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
}
.esac .esac-cover__img,.esac-cover__auto img{
  position:absolute; inset:0; display:block; width:100% !important; height:100% !important; max-width:none;
  object-fit:cover; border-radius:inherit;
}
.esac-cover__auto{ position:absolute; inset:0; border-radius:inherit; background:repeating-linear-gradient(135deg, rgba(22,36,62,.06) 0 1px, transparent 1px 11px); }
.esac-book__spine{
  position:absolute; top:0; bottom:0; left:0; width:14px; border-radius:2px 0 0 2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.06) 45%, rgba(255,255,255,.18) 60%, rgba(0,0,0,0) 100%);
}
.esac-book__edge{
  position:absolute; top:3px; bottom:3px; right:-6px; width:6px; border-radius:0 3px 3px 0; pointer-events:none;
  background:repeating-linear-gradient(180deg, #fff 0 1px, #DCE1E8 1px 2px);
  box-shadow:inset 1px 0 2px rgba(0,0,0,.15);
}
.esac-cover:hover .esac-book,.esac-cover:focus-visible .esac-book{
  transform:rotateY(-14deg) translateX(4px);
  box-shadow:0 1px 1px rgba(14,24,41,.12), 18px 22px 34px -14px rgba(14,24,41,.5);
}
.esac-cover__hint{
  position:absolute; left:50%; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; background:var(--esac-navy); color:#fff;
  font-family:var(--esac-font-head); font-weight:var(--esac-head-weight); font-size:13px;
  opacity:0; transform:translate(-50%, 6px); transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.esac-cover:hover .esac-cover__hint,.esac-cover:focus-visible .esac-cover__hint{ opacity:1; transform:translate(-50%, 0); }

.esac-card__body{ display:flex; flex-direction:column; gap:10px; flex:1 1 auto; }
.esac .esac-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--esac-font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--esac-mute);
}
.esac .esac-lang{ padding:3px 8px; border:1px solid var(--esac-navy); border-radius:3px; color:var(--esac-navy); letter-spacing:.04em; }
.esac .esac-sep{ color:#B4BAC4; }
.esac .esac-card__title{ font-family:var(--esac-font-head); font-weight:var(--esac-head-weight); font-size:22px; line-height:1.25; color:var(--esac-navy); }
.esac .esac-card__desc{ font-size:15px; line-height:1.6; color:var(--esac-text); }
.esac-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:8px; }

/* ===========================================================================
   FINESTRA DI LETTURA
   =========================================================================== */
html.esac-lock,html.esac-lock body{ overflow:hidden; }
.esac .esac-viewer{
  position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:radial-gradient(120% 90% at 50% 40%, #1E3156 0%, var(--esac-navy) 45%, var(--esac-navy-deep) 100%);
  color:#fff; overflow:hidden;
}
.esac .esac-viewer:not([open]){ display:none; }
.esac .esac-viewer[open]{ display:flex; flex-direction:column; }
.esac .esac-viewer::backdrop{ background:rgba(14,24,41,.6); }
/* griglia "da tavola tecnica" sullo sfondo */
.esac .esac-viewer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
}
.esac-viewer__bar{
  position:relative; z-index:3; display:flex; align-items:center; gap:16px; flex:none;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 24px; border-bottom:1px solid rgba(255,255,255,.1);
}
.esac .esac-viewer__title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--esac-font-head); font-weight:var(--esac-head-weight); font-size:16px; }
.esac .esac-viewer__count{ flex:none; font-family:var(--esac-font-mono); font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.75); }
.esac-viewer__tools{ display:flex; align-items:center; gap:6px; flex:none; }
.esac .esac-tool{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0 !important;
  border:1px solid rgba(255,255,255,.22) !important; border-radius:50% !important; background:transparent !important; color:#fff !important;
  cursor:pointer; text-decoration:none; box-shadow:none !important;
  transition:background .15s ease, border-color .15s ease;
}
/* (!important: i comandi della finestra non devono prendere gli stili di pulsanti e link del tema) */
.esac .esac-tool:hover{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.5) !important; }
.esac .esac-tool--close{ background:#fff !important; color:var(--esac-navy) !important; border-color:#fff !important; }
.esac .esac-tool--close:hover{ background:#E8ECF4 !important; }
.esac .esac-tool[hidden]{ display:none; }
.esac .esac-viewer button:focus-visible,.esac .esac-viewer a:focus-visible,.esac .esac-viewer input:focus-visible,.esac .esac-viewer [tabindex]:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.esac-viewer__stage{ position:relative; z-index:2; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px 75px; }
.esac-viewer__book{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.esac-sizer{ margin:0 auto; filter:drop-shadow(0 26px 40px rgba(0,0,0,.45)); }
.esac-page{ position:relative; background:#fff; overflow:hidden; }
/* piega centrale del fascicolo, solo con due pagine affiancate */
.esac-sizer.is-landscape .esac-page--left::after,
.esac-sizer.is-landscape .esac-page--right::after{ content:""; position:absolute; top:0; bottom:0; width:7%; pointer-events:none; }
.esac-sizer.is-landscape .esac-page--left::after{ right:0; background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.16) 100%); }
.esac-sizer.is-landscape .esac-page--right::after{ left:0; background:linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.18) 100%); }
.esac-page img{ display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.esac-page.is-loading{ background:#fff linear-gradient(110deg, #F2F4F7 30%, #FFFFFF 50%, #F2F4F7 70%) 0 0 / 200% 100%; animation:esacShimmer 1.4s linear infinite; }
.esac-page.is-loading img{ visibility:hidden; }
@keyframes esacShimmer{ to{ background-position:-200% 0; } }

.esac .esac-nav{
  position:absolute; top:50%; z-index:4; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:-26px 0 0; padding:0 !important; border:1px solid rgba(255,255,255,.3) !important; border-radius:50% !important;
  background:rgba(14,24,41,.55) !important; color:#fff !important; box-shadow:none !important; cursor:pointer; transition:background .15s ease, opacity .2s ease;
}
.esac .esac-nav .esac-icon{ width:20px; height:20px; }
.esac .esac-nav:hover{ background:var(--esac-accent) !important; border-color:var(--esac-accent) !important; }
.esac .esac-nav:disabled{ opacity:0; pointer-events:none; }
.esac .esac-nav--prev{ left:12px; }
.esac .esac-nav--next{ right:12px; }

.esac .esac-viewer__status{
  position:absolute; left:50%; top:50%; z-index:5; display:flex; align-items:center; gap:12px; max-width:min(90%, 520px);
  padding:14px 20px; border-radius:8px; background:rgba(14,24,41,.85); transform:translate(-50%, -50%);
  font-size:15px; line-height:1.5; color:#fff;
}
.esac .esac-viewer__status[hidden]{ display:none; }
.esac .esac-viewer__status a{ color:#fff; font-weight:var(--esac-head-weight); text-decoration:underline; }
.esac .esac-viewer__status.is-error .esac-spinner{ display:none; }
.esac-spinner{ flex:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:esacSpin .8s linear infinite; }
@keyframes esacSpin{ to{ transform:rotate(360deg); } }

.esac-viewer__foot{
  position:relative; z-index:3; display:flex; align-items:center; gap:20px; flex:none;
  padding:10px 24px calc(14px + env(safe-area-inset-bottom, 0px));
}
.esac .esac-viewer__range{
  flex:1 1 auto; max-width:640px; height:32px; margin:0 auto; padding:0; border:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.esac .esac-viewer__range::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:rgba(255,255,255,.25); }
.esac .esac-viewer__range::-moz-range-track{ height:4px; border-radius:2px; background:rgba(255,255,255,.25); }
.esac .esac-viewer__range::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border:3px solid var(--esac-accent); border-radius:50%; background:#fff; }
.esac .esac-viewer__range::-moz-range-thumb{ width:14px; height:14px; border:3px solid var(--esac-accent); border-radius:50%; background:#fff; }
.esac .esac-viewer__hint{ flex:none; font-family:var(--esac-font-mono); font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.55); }

/* pagina ingrandita */
.esac .esac-zoom{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; background:var(--esac-navy-deep); }
.esac .esac-zoom[hidden]{ display:none; }
.esac-zoom__bar{ display:flex; align-items:center; gap:16px; padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 24px; border-bottom:1px solid rgba(255,255,255,.1); }
.esac .esac-zoom__title{ flex:1 1 auto; font-family:var(--esac-font-head); font-weight:var(--esac-head-weight); font-size:16px; }
.esac .esac-zoom__level{ min-width:52px; text-align:center; font-family:var(--esac-font-mono); font-size:13px; }
.esac-zoom__scroll{ flex:1 1 auto; min-height:0; overflow:auto; padding:16px; cursor:grab; -webkit-overflow-scrolling:touch; }
.esac-zoom__scroll.is-dragging{ cursor:grabbing; }
.esac-zoom__pages{ display:flex; gap:8px; width:max-content; margin:0 auto; }
.esac-zoom__pages img{ display:block; height:auto; max-width:none; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.4); user-select:none; -webkit-user-drag:none; }

/* --- telefono --- */
@media (max-width:767px){
  .esac-grid{ grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:40px 24px; }
  .esac-viewer__bar{ gap:10px; padding-left:16px; }
  .esac .esac-viewer__title{ font-size:14px; }
  .esac .esac-viewer__count{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* nascosto alla vista, letto dagli screen reader */
  .esac .esac-tool{ width:40px; height:40px; }
  .esac-viewer__stage{ padding:6px 8px; }
  .esac .esac-nav{ width:44px; height:44px; margin-top:-22px; background:rgba(14,24,41,.7); }
  .esac .esac-nav--prev{ left:4px; }
  .esac .esac-nav--next{ right:4px; }
  .esac .esac-viewer__hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .esac *{ transition:none !important; animation:none !important; }
}