/* My Brochure — sfogliatore pubblico + pagine delle brochure create in automatico (3 modelli) + stampa in PDF */
@font-face{font-family:"MB Poppins";src:url(fonts/Poppins-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"MB Poppins";src:url(fonts/Poppins-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"MB Poppins";src:url(fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"MB Serif";src:url(fonts/DMSerifDisplay-Regular.ttf) format("truetype");font-weight:400;font-display:swap}

body.nudo{margin:0;min-height:100vh;min-height:100dvh;background:#1d1f23;background-image:radial-gradient(90% 70% at 50% 0%,color-mix(in oklab,var(--c,#1F5C99) 30%,#1d1f23) 0,#16171a 75%);color:#f3f3f4;overflow-x:hidden}
.sf{display:grid;grid-template-rows:auto 1fr auto auto auto;min-height:100vh;min-height:100dvh}
.sf-testa{display:flex;align-items:center;gap:12px;padding:10px clamp(10px,2vw,22px);min-height:56px}
.sf-titolo{flex:1;min-width:0;font:600 1rem/1.25 var(--font);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.sf-conta{margin:0;font-size:.9rem;color:#c9cacd;font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-strumenti{display:flex;gap:2px}
.sf-b{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:0;background:none;color:#f3f3f4;cursor:pointer;text-decoration:none;transition:background .15s}
.sf-b:hover{background:rgba(255,255,255,.1)}
.sf-b:focus-visible,.sf-freccia:focus-visible,.sf-c:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sf-palco{position:relative;display:grid;place-items:center;min-height:0;padding:8px clamp(8px,5vw,72px);overflow:hidden;touch-action:pan-y pinch-zoom}
.sf-freccia{position:absolute;top:50%;z-index:6;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;backdrop-filter:blur(8px);transition:background .15s,opacity .2s}
.sf-freccia:hover{background:rgba(255,255,255,.24)}
.sf-freccia[disabled]{opacity:0;pointer-events:none}
.sf-freccia.sx{left:clamp(4px,1.5vw,16px)}
.sf-freccia.dx{right:clamp(4px,1.5vw,16px)}
.sf-suggerimento{margin:0;text-align:center;font-size:.82rem;color:#a9abb0;min-height:1.4em;transition:opacity .6s}
.sf-suggerimento.via{opacity:0}

/* libro: due pagine affiancate (computer) o una pagina che scorre (telefono) */
.sf-libro{position:relative;width:calc(var(--pw) * 2);height:var(--ph);perspective:2600px;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.sf-libro.copertina{transform:translateX(calc(var(--pw) * -.5))}
.sf-libro.retro{transform:translateX(calc(var(--pw) * .5))}
.sf-lato{position:absolute;top:0;width:var(--pw);height:var(--ph);overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.sf-lato:empty{background:none;box-shadow:none}
.sf-lato.sx{left:0;border-radius:4px 0 0 4px}
.sf-lato.dx{left:var(--pw);border-radius:0 4px 4px 0}
.sf-lato.sx:not(:empty)::after,.sf-lato.dx:not(:empty)::after{content:"";position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:3}
.sf-lato.sx::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.16))}
.sf-lato.dx::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.2))}
.sf-gira{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:5;transition:transform .7s cubic-bezier(.45,.05,.25,1)}
.sf-gira.avanti{left:var(--pw);transform-origin:left center}
.sf-gira.indietro{left:0;transform-origin:right center}
.sf-faccia{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sf-faccia.retro{transform:rotateY(180deg)}
.sf-faccia::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.12));opacity:0;transition:opacity .35s}
.sf-gira.vai .sf-faccia::after{opacity:1}
.sf-libro .foglio,.sf-mini .foglio,.sf-zoom-pagina .foglio{width:100%;height:100%}
.foglio{position:relative;container-type:inline-size;overflow:hidden;background:#fff;color:#1b1b1d}
.foglio>img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}

/* una pagina per volta: scorrimento naturale col dito */
.sf-libro.singola{width:100%;max-width:calc(var(--pw) + 0px);height:var(--ph);perspective:none;transform:none;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom}
.sf-libro.singola::-webkit-scrollbar{display:none}
.sf-libro.singola .sf-pag{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;border-radius:4px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45);background:#fff}

.sf-contatti{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
.sf-c{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .15s}
.sf-c:hover{background:rgba(255,255,255,.2)}
.sf-c-whatsapp{background:#1f8f4e}.sf-c-whatsapp:hover{background:#18763f}
.sf-c-chiama{background:var(--c)}.sf-c-chiama:hover{background:color-mix(in oklab,var(--c) 85%,#000)}
.sf-piede{text-align:center;font-size:.78rem;color:#9a9ca1;padding:4px 12px 12px}
.sf-piede a,.sf-piede .link{color:#b9bbc0}
.sf-vuoto{max-width:520px;margin:18vh auto;padding:24px;text-align:center;display:grid;gap:14px;justify-items:center}
.sf-vuoto p{color:#c9cacd}

.sf-miniature,.sf-zoom{position:fixed;inset:0;z-index:30;background:rgba(18,19,22,.97);overflow:auto}
.sf-mini-testa{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:rgba(18,19,22,.9);backdrop-filter:blur(10px);z-index:2}
.sf-mini-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px 14px;padding:12px 16px 32px}
.sf-mini{display:grid;gap:6px;border:0;padding:0;background:none;color:#c9cacd;cursor:pointer;font:inherit;font-size:.8rem}
.sf-mini-pag{aspect-ratio:1/var(--r);border-radius:3px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.4);outline:2px solid transparent;outline-offset:3px;transition:outline-color .15s}
.sf-mini:hover .sf-mini-pag,.sf-mini[aria-current] .sf-mini-pag{outline-color:var(--c)}
.sf-zoom{padding:56px 8px 24px}
.sf-zoom-chiudi{position:fixed;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.5)}
.sf-zoom-pagina{width:min(100%,1300px);aspect-ratio:1/var(--r);margin:0 auto;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.sf .toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#fff;color:#111;border-radius:10px;padding:12px 18px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw}
.sf .finestra{color:var(--ink)}

/* dentro il sito del cliente: niente sfondo scuro pieno, testata compatta */
.incorporata{min-height:100vh}
body.nudo:has(.incorporata){background:#2a2c31}
.incorporata .sf-piede{padding-bottom:6px}

.stampa{display:none}

@media (max-width:640px){
  .sf-strumenti .sf-b[data-azione="zoom"],.sf-strumenti .sf-b[data-azione="schermo"]{display:none}
  .sf-palco{padding:6px 14px}
  .sf-freccia{display:none}
  .sf-c{padding:8px 13px;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){.sf-gira,.sf-libro{transition:none!important}}

/* ===================== pagine composte ===================== */
.pg{position:absolute;inset:0;display:flex;flex-direction:column;font-family:"MB Poppins",system-ui,sans-serif;font-weight:500;color:#1d1d20;background:#fff;--cc:var(--c,#1F5C99);overflow:hidden}
.pg h1,.pg h2{margin:0;font-weight:700;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.pg h2{font-size:6.6cqw;margin-bottom:3.2cqw;color:var(--cc)}
.pg p{margin:0 0 2.6cqw;font-size:3.35cqw;line-height:1.5;color:#3a3a40}
.pg ul{margin:0 0 2.6cqw;padding:0;list-style:none;display:grid;gap:1.6cqw}
.pg li{position:relative;padding-left:5cqw;font-size:3.3cqw;line-height:1.4;color:#2c2c31}
.pg li::before{content:"";position:absolute;left:0;top:1.5cqw;width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--cc)}
.pg img{display:block;width:100%;height:100%;object-fit:cover}
.pg-occhiello{font-size:2.9cqw!important;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--cc)!important;margin-bottom:2cqw!important}
.pg-corpo{padding:7cqw 8cqw;flex:1;min-height:0;overflow:hidden}
.pg-foto{flex:0 0 50%;overflow:hidden;background:#eee}

/* copertina */
.pg-cop{justify-content:flex-end;background:var(--cc);color:#fff}
.pg-sfondo{position:absolute;inset:0}
.pg-cop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.72) 100%);z-index:1}
.pg-cop.senza-foto::after{background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.22),transparent 60%)}
.pg-cop-testo{position:relative;z-index:2;padding:9cqw 8cqw 11cqw}
.pg-cop .pg-occhiello{color:#fff!important;opacity:.9}
.pg-titolo{font-size:11cqw;color:#fff}
.pg-slogan{margin-top:3cqw!important;font-size:4.2cqw!important;color:rgba(255,255,255,.92)!important;line-height:1.35!important}
.pg-logo{width:auto!important;height:auto!important;max-width:36cqw;max-height:15cqw;object-fit:contain!important;margin-bottom:5cqw;border-radius:2cqw;background:#fff;padding:1.6cqw}

/* sezioni */
.pg-sez.pg-alt{flex-direction:column-reverse}
.pg-sez.pg-alt .pg-corpo{padding-bottom:5cqw}
.pg-numero{flex:0 0 34%;display:flex;align-items:flex-end;padding:0 8cqw 3cqw;font-size:30cqw;font-weight:700;line-height:.8;color:color-mix(in oklab,var(--cc) 18%,#fff);background:color-mix(in oklab,var(--cc) 7%,#fff)}
.pg-chi .pg-foto{flex-basis:46%}

/* galleria */
.pg-gal{padding:8cqw;background:#faf9f7}
.pg-griglia{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:3cqw;min-height:0}
.pg-griglia div{overflow:hidden;border-radius:1.5cqw;background:#eee}
.pg-gal.n1 .pg-griglia{grid-template-columns:1fr}
.pg-gal.n2 .pg-griglia{grid-template-columns:1fr}
.pg-gal.n3 .pg-griglia div:first-child{grid-column:1/-1}

/* retro */
.pg-retro{background:var(--cc);color:#fff;justify-content:space-between}
.pg-retro .pg-corpo{flex:0 1 auto}
.pg-retro h2{color:#fff;font-size:9cqw}
.pg-contatti{display:grid;gap:3cqw!important}
.pg-contatti li{padding:0!important;display:grid;gap:.4cqw}
.pg-contatti li::before{display:none}
.pg-contatti span{font-size:2.6cqw;text-transform:uppercase;letter-spacing:.12em;opacity:.75;color:#fff}
.pg-contatti b{font-size:3.7cqw;font-weight:600;color:#fff;line-height:1.35;overflow-wrap:anywhere}
.pg-qr{display:flex;align-items:center;gap:4cqw;padding:0 8cqw}
.pg-qr svg{width:24cqw;height:24cqw;border-radius:2cqw;padding:1cqw;background:#fff}
.pg-qr small{font-size:3cqw;opacity:.9}
.pg-nome{margin:0!important;padding:5cqw 8cqw 7cqw;font-size:3cqw!important;color:rgba(255,255,255,.75)!important;letter-spacing:.12em;text-transform:uppercase}

/* modello ELEGANTE: carta avorio, titoli con grazie, foto con margine */
.mod-elegante .pg{background:#fbf8f3;--cc:color-mix(in oklab,var(--c,#1F5C99) 85%,#000)}
.mod-elegante .pg h1,.mod-elegante .pg h2{font-family:"MB Serif",Georgia,serif;font-weight:400;letter-spacing:0}
.mod-elegante .pg h2{font-size:8cqw;color:#1d1d20}
.mod-elegante .pg-corpo{text-align:center;padding:7cqw 10cqw}
.mod-elegante .pg ul{justify-items:center}
.mod-elegante .pg li{padding-left:0}
.mod-elegante .pg li::before{position:static;display:inline-block;width:1.4cqw;height:1.4cqw;margin-right:2cqw;vertical-align:middle}
.mod-elegante .pg-foto{margin:8cqw 8cqw 0;flex-basis:46%;border-radius:0}
.mod-elegante .pg-sez.pg-alt .pg-foto{margin:0 8cqw 8cqw}
.mod-elegante .pg-cop{background:#fbf8f3;color:#1d1d20;justify-content:flex-start}
.mod-elegante .pg-cop::after{display:none}
.mod-elegante .pg-cop .pg-sfondo{position:relative;inset:auto;margin:8cqw 8cqw 0;width:auto;height:62%;flex:none}
.mod-elegante .pg-cop-testo{text-align:center;padding:7cqw 10cqw}
.mod-elegante .pg-cop.senza-foto .pg-cop-testo{margin:auto 0}
.mod-elegante .pg-cop .pg-occhiello{color:var(--cc)!important}
.mod-elegante .pg-titolo{color:#1d1d20;font-size:12cqw}
.mod-elegante .pg-slogan{color:#55555c!important;font-style:italic}
.mod-elegante .pg-cop .pg-logo{margin:0 auto 4cqw;background:none;padding:0}
.mod-elegante .pg-numero{display:none}
.mod-elegante .pg-sez.senza-foto{justify-content:center}
.mod-elegante .pg-sez.senza-foto .pg-corpo{flex:none;border-top:.4cqw solid var(--cc);border-bottom:.4cqw solid var(--cc);margin:0 8cqw;padding:8cqw 4cqw}
.mod-elegante .pg-gal{background:#fbf8f3}
.mod-elegante .pg-gal h2{text-align:center}
.mod-elegante .pg-griglia div{border-radius:0}
.mod-elegante .pg-retro{background:#1d1d20}
.mod-elegante .pg-retro h2{color:#fff}

/* modello VIVACE: blocchi di colore, angoli tondi */
.mod-vivace .pg{background:color-mix(in oklab,var(--c,#1F5C99) 8%,#fff)}
.mod-vivace .pg h2{display:inline-block;color:#fff;background:var(--cc);padding:1.6cqw 3.4cqw;border-radius:2.4cqw;font-size:6cqw}
.mod-vivace .pg-foto{margin:6cqw 6cqw 0;border-radius:5cqw;flex-basis:48%}
.mod-vivace .pg-sez.pg-alt .pg-foto{margin:0 6cqw 6cqw}
.mod-vivace .pg-cop{background:var(--cc)}
.mod-vivace .pg-cop .pg-sfondo{top:5cqw;left:5cqw;right:auto;bottom:auto;width:calc(100% - 10cqw);height:calc(62% - 5cqw);border-radius:6cqw}
.mod-vivace .pg-cop::after{display:none}
.mod-vivace .pg-cop-testo{padding:6cqw 8cqw 9cqw}
.mod-vivace .pg-cop.senza-foto .pg-cop-testo{margin-bottom:auto;padding-top:20cqw}
.mod-vivace .pg-titolo{font-size:12cqw}
.mod-vivace .pg-cop .pg-logo{position:absolute;top:-10cqw;right:8cqw;margin:0}
.mod-vivace .pg-cop.senza-foto .pg-logo{position:static;margin-bottom:5cqw}
.mod-vivace .pg-numero{background:var(--cc);color:rgba(255,255,255,.3);margin:6cqw 6cqw 0;border-radius:5cqw}
.mod-vivace .pg-griglia div{border-radius:4cqw}
.mod-vivace .pg-gal{background:color-mix(in oklab,var(--c,#1F5C99) 8%,#fff)}
.mod-vivace .pg-retro{background:var(--cc)}
.mod-vivace .pg-retro h2{background:#fff;color:var(--cc)}

/* ===================== stampa / salva in PDF ===================== */
@media print{
  @page{size:148mm 210mm;margin:0}
  body.nudo{background:#fff!important}
  .sf{display:none!important}
  .stampa{display:block!important}
  .stampa .foglio{width:148mm;height:210mm;page-break-after:always;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stampa.immagini .foglio{height:auto;aspect-ratio:auto}
  .stampa.immagini .foglio img{height:auto;max-height:210mm;object-fit:contain}
}
.mod-elegante .pg-cop.senza-foto::before{content:"";position:absolute;inset:6cqw;border:.45cqw solid var(--cc);opacity:.55;pointer-events:none}