/* ============================================================
   PROGETTO WELFARE — LIBRO SFOGLIABILE (flipbook orizzontale)
   brand di Merkury Broker · rosso #9E2B23 · fondo bianco · antracite #1a1a1a
   ============================================================ */
@font-face{font-family:"PW Sans";src:url("fonts/LiberationSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PW Sans";src:url("fonts/LiberationSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PW Sans";src:url("fonts/LiberationSans-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PW Sans";src:url("fonts/LiberationSans-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"PW Serif";src:url("fonts/LiberationSerif-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PW Serif";src:url("fonts/LiberationSerif-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#1a1a1a;--red:#9E2B23;--red-dark:#7d1f19;--red-soft:#f7ecea;--red-wash:#fbf5f4;
  --muted:#5c5c5c;--line:#e7e1de;--line-strong:#d9d0cc;--paper:#ffffff;
  --sans:"PW Sans",Arial,Helvetica,sans-serif;--serif:"PW Serif",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.5;
  background:#e9e3df;background-image:radial-gradient(circle at 50% -10%,#faf7f5 0,#e6dfda 55%,#dcd3cd 100%);
  min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 22px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);position:relative;z-index:400}
.topbar .brand{display:flex;align-items:center;gap:12px}
.topbar .mono{width:34px;height:34px}
.topbar .name{font-weight:700;letter-spacing:.15em;font-size:.76rem;text-transform:uppercase;line-height:1.12}
.topbar .sub{display:block;font-weight:400;letter-spacing:.02em;font-size:.6rem;color:var(--muted);text-transform:none}
.topbar .right{display:flex;align-items:center;gap:12px}
.draft{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--red);padding:6px 13px;border-radius:999px;white-space:nowrap}
.tb-link{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:2px solid var(--red);border-radius:999px;padding:7px 15px;color:var(--red);white-space:nowrap}
.tb-link.solid{background:var(--red);color:#fff}
.tb-link:hover{text-decoration:none;opacity:.9}

/* ---------- stage / libro ---------- */
.stage{display:flex;align-items:center;justify-content:center;padding:22px 16px 6px}
.flipbook{position:relative;width:calc(1600px * var(--s,1));height:calc(900px * var(--s,1))}
.scaler{position:absolute;top:0;left:0;transform:scale(var(--s,1));transform-origin:top left}
.book{position:relative;width:1600px;height:900px;perspective:2600px}
.book::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:100px;transform:translateX(-50%);
  pointer-events:none;z-index:300;
  background:linear-gradient(90deg,rgba(30,12,9,0) 0,rgba(30,12,9,.10) 40%,rgba(30,12,9,.24) 50%,rgba(30,12,9,.10) 60%,rgba(30,12,9,0) 100%);
}
.base{position:absolute;top:0;width:50%;height:100%;z-index:0;background:var(--paper)}
.base.left{left:0;border-radius:6px 0 0 6px}
.base.right{left:50%;border-radius:0 6px 6px 0}

.sheet{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.45,.05,.25,1);will-change:transform}
.sheet.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;background:var(--paper);backface-visibility:hidden;overflow:hidden;
  box-shadow:0 34px 64px -34px rgba(26,26,26,.5)}
.face.front{border-radius:0 6px 6px 0}
.face.back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.face::before{content:"";position:absolute;top:0;bottom:0;width:70px;pointer-events:none;z-index:30}
.face.front::before{left:0;background:linear-gradient(90deg,rgba(30,12,9,.14),rgba(30,12,9,0))}
.face.back::before{right:0;background:linear-gradient(270deg,rgba(30,12,9,.14),rgba(30,12,9,0))}
.shade{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:40;background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,0) 70%)}
.face.back .shade{background:linear-gradient(270deg,rgba(0,0,0,.38),rgba(0,0,0,0) 70%)}
.book.ready .sheet.flipped .shade{animation:shadeF .95s cubic-bezier(.45,.05,.25,1)}
.book.ready .sheet:not(.flipped) .shade{animation:shadeB .95s cubic-bezier(.45,.05,.25,1)}
@keyframes shadeF{0%{opacity:0}45%{opacity:.55}100%{opacity:0}}
@keyframes shadeB{0%{opacity:0}45%{opacity:.55}100%{opacity:0}}

/* ---------- pagina ---------- */
.page{position:relative;height:100%;padding:44px 54px 34px;display:flex;flex-direction:column;overflow:hidden;font-size:14px;line-height:1.5}
.base-cover{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#fff 0,#fff 70%,var(--red-wash) 100%)}
.imprint{max-width:70%}
.imprint .mono-lg{width:96px;margin:0 auto 16px}
.imprint-t{font-family:var(--serif);font-weight:700;font-size:30px;margin:.1em 0 0;color:var(--ink)}
.imprint-s{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:.5em 0 0}
.imprint-x{font-size:12px;color:var(--muted);margin-top:18px}

.print-head,.print-foot{display:none}

h1{font-family:var(--serif);font-weight:700;font-size:54px;line-height:1.02;margin:.12em 0 .14em;letter-spacing:-.015em}
h2{font-family:var(--serif);font-size:28px;line-height:1.12;margin:.08em 0 .3em;letter-spacing:-.01em}
h3{font-size:15.5px;margin:1.05em 0 .35em}
h3::before{content:"";display:inline-block;width:18px;height:2px;background:var(--red);vertical-align:.3em;margin-right:9px}
p{margin:.45em 0;color:#262626}
.lead{font-size:16px;color:#4a4a4a;line-height:1.48;margin:.3em 0 .6em}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 3px}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin:2px 0 0}
.brand-tag{font-size:16px;color:var(--muted);margin:.1em 0 0;max-width:46ch}
.num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--red);color:#fff;font-family:var(--serif);font-weight:700;font-size:16px;margin-bottom:8px;
  box-shadow:0 0 0 6px #fff,0 8px 18px rgba(158,43,35,.22)}
.phase{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:999px;padding:3px 12px;margin-bottom:8px}

/* liste / card / tabelle */
ul.checks{list-style:none;padding:0;margin:.5em 0}
ul.checks li{position:relative;padding-left:28px;margin:.36em 0}
ul.checks li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--red-soft);border:2px solid var(--red)}
ul.checks li strong{color:var(--ink)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:12px}
.card{border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;padding:14px 16px;background:#fff}
.card .k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.card .v{font-size:19px;font-weight:700;margin:.12em 0 0;font-family:var(--serif);line-height:1.1}
.card .d{font-size:12.5px;color:var(--muted);margin:.3em 0 0}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
thead th{background:var(--red-soft);color:var(--red-dark);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
tbody tr:nth-child(even){background:var(--red-wash)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:700;border-top:2px solid var(--red);border-bottom:none;background:#fff}
.note{background:var(--red-soft);border-left:4px solid var(--red);border-radius:0 8px 8px 0;padding:11px 16px;font-size:12.5px;color:#3a2320;margin:12px 0}
.badge-inline{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red);border:1px dashed var(--red);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.steps{counter-reset:step;list-style:none;padding:0;margin:10px 0}
.steps li{position:relative;padding:8px 0 8px 52px;border-bottom:1px dashed var(--line);font-size:13.5px}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:0;top:5px;font-family:var(--serif);font-weight:700;color:var(--red);font-size:17px}
.thread-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 4px}
.thread{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:0 10px 10px 0;padding:13px 16px;background:#fff}
.thread .t{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0}
.thread .h{font-family:var(--serif);font-size:16px;font-weight:700;margin:.15em 0 .2em}
.thread .d{font-size:12px;color:var(--muted);margin:0}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:12px}
.kpi .n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--red);margin:0;line-height:1}
.kpi .l{font-size:11.5px;color:var(--muted);margin:.2em 0 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}

/* immagini + slot foto */
.visual{margin:10px 0 4px}
.visual img{width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:0 16px 34px -22px rgba(26,26,26,.4)}
.visual figcaption{font-size:11.5px;color:var(--muted);margin-top:7px;border-left:3px solid var(--red);padding-left:10px}
.visual.compact img{max-height:250px;object-fit:cover}
.photo-slot{margin:12px 0 4px}
.photo-slot .ph-box{min-height:132px;border:2px dashed var(--line-strong);border-radius:10px;background:var(--red-wash);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:18px;text-align:center}
.photo-slot .ph-ico{font-size:22px;color:var(--red);opacity:.55}
.photo-slot .ph-lbl{font-family:var(--serif);font-weight:700;letter-spacing:.06em;color:var(--red);font-size:15px}
.photo-slot .ph-sub{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.photo-slot figcaption{font-size:11.5px;color:var(--muted);margin-top:7px;border-left:3px solid var(--red);padding-left:10px}

/* copertina */
.cover-logos{display:flex;gap:22px;align-items:stretch;margin:12px 0 0}
.logo-pw{max-width:220px;align-self:center}
.logo-client{flex:1 1 auto;border:2px dashed var(--line-strong);border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;color:var(--red);background:var(--red-wash);padding:18px}
.logo-client small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
/* MACOTEC — logo cliente su fascia rosso brand (il logo fornito è bianco) */
.logo-client.client-brand{background:var(--red);border:0;flex-direction:column;gap:8px;color:#fff;padding:22px 18px;justify-content:center}
.logo-client.client-brand img{max-width:240px;width:100%;height:auto;display:block}
.logo-client.client-brand .cb-name{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.92)}
/* foto aziendali inserite */
.photo-slot.filled img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-strong);background:var(--red-wash)}
.photo-slot.filled figcaption{font-size:11.5px;color:var(--muted);margin-top:7px;border-left:3px solid var(--red);padding-left:10px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;border-top:2px solid var(--red);padding-top:12px;margin-top:14px}
.meta dt{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.meta dd{margin:.08em 0 0;font-size:13.5px;font-weight:700}
.gomitolo{width:132px;margin-top:8px}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:9px 18px;border:2px solid var(--red);color:var(--red);background:#fff}
.btn.solid{background:var(--red);color:#fff}
.btn:hover{text-decoration:none;opacity:.9}

/* maglione finale */
.finale{display:flex;gap:20px;align-items:center;margin:8px 0 0}
.finale svg{width:180px;flex:0 0 auto}
.finale .copy h3{margin-top:0}
.finale .copy h3::before{display:none}

/* filo rosso conduttore + lockup */
.filo-line{margin-top:auto;padding-top:10px}
.filo-line svg{width:100%;height:13px;display:block}
.brandline{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.brandline a{display:inline-flex;align-items:center}
.brandline .mb{height:22px;width:auto}
.brandline .pw{height:26px;width:auto;border-radius:50%}
.brandline .txt{max-width:420px}

/* ---------- controlli ---------- */
.controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px 22px;flex-wrap:wrap}
.nav-btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--red);background:#fff;color:var(--red);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-btn:hover:not(:disabled){background:var(--red);color:#fff}
.nav-btn:disabled{opacity:.35;cursor:default}
.indicator{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);min-width:230px;text-align:center}
.indicator .page-now{color:var(--red)}
.hint{font-size:11px;color:var(--muted);text-align:center;width:100%;margin:0}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .topbar .sub{display:none}
  .tb-link{display:none}
}

/* ---------- PRINT: il libro resta stampabile (A4) ---------- */
@page{size:A4;margin:15mm 14mm}
@media print{
  html,body{background:#fff!important}
  body{font-size:11pt}
  .topbar,.controls,.hint{display:none!important}
  .stage{padding:0!important;display:block!important}
  .flipbook{width:auto!important;height:auto!important}
  .scaler{position:static!important;transform:none!important}
  .book{width:auto!important;height:auto!important;perspective:none!important}
  .book::after{display:none!important}
  .base{display:none!important}
  .sheet{position:static!important;width:auto!important;height:auto!important;transform:none!important;transition:none!important}
  .face{position:static!important;inset:auto!important;transform:none!important;backface-visibility:visible!important;
    box-shadow:none!important;border-radius:0!important;overflow:visible!important;page-break-after:always;break-after:page}
  .face::before{display:none!important}
  .face .shade{display:none!important}
  .sheet:last-child .face.back{page-break-after:auto;break-after:auto}
  .page{height:auto!important;min-height:0!important;padding:0!important;overflow:visible!important;display:block!important;font-size:11pt;line-height:1.55}
  .imprint{max-width:100%}
  .filo-line{display:none!important}
  .print-head{display:block!important;border-bottom:1px solid #e7e1de;padding-bottom:5pt;margin-bottom:10pt;font-size:8pt;color:var(--red);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
  .print-foot{display:block!important;margin-top:12pt;padding-top:6pt;border-top:1px solid #e7e1de;font-size:7.5pt;color:#777}
  .brandline{display:flex!important;margin-top:20pt!important;border-top:1px solid var(--line);padding-top:8pt}
  .brandline .mb{height:22pt}.brandline .pw{height:26pt}.brandline .txt{font-size:8pt}
  h1{font-size:30pt}h2{font-size:19pt}h3{font-size:12pt}
  .lead{font-size:12pt}
  .visual img{box-shadow:none;max-height:110mm;object-fit:cover}
  .photo-slot .ph-box{min-height:60mm}
  a{color:var(--ink)}
  h2,h3{page-break-after:avoid;break-after:avoid}
  .card,.note,.visual,figure,table,.thread,.kpi,.thread-nav,.steps li,.finale{page-break-inside:avoid;break-inside:avoid}
  .num,.phase,.card .v,.thread .t,.kpi .n,.draft,.logo-client,.photo-slot .ph-box{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}