/* NoZap public site - promo banners. Eleven formats drawn at a design size (1em = 10px at the maximum width) and scaled with the container width;
   below 560px the wide ones switch to a stacked layout. App screens inside are replicas of the real app UI. */
.nzb-w { container-type: inline-size; width: 100%; max-width: calc(var(--vw) * 10px); margin: 28px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; }
.nzb-w .nzb { --u: calc(100cqw / var(--vw)); --coral: #FE6448; --deep: #1C1825; --aub: #2D2536; --ivory: #F5F1E9; --dim: #9A93A6; --soft: #CFC8D8; position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; width: 100%; aspect-ratio: var(--ar);
  font-size: calc(100cqw / var(--vw)); line-height: 1.15; color: var(--ivory); border-radius: 1.6em; background: linear-gradient(135deg, #1C1825 0%, #2a1f33 55%, #3a2430 100%); box-shadow: 0 .2em 1.4em rgba(28,24,37,.18); }
.nzb-w .nzb *, .nzb-w .nzb *::before, .nzb-w .nzb *::after { box-sizing: border-box; }
.nzb-w .nzb h3, .nzb-w .nzb p, .nzb-w .nzb b, .nzb-w .nzb small { margin: 0; }
.nzb-w .nzb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--shade, none); pointer-events: none; }
.nzb-w .nzb-hit { position: absolute; inset: 0; z-index: 3; }
.nzb-w .nzb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: block; }
.nzb-w .nzb-bg--mos { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; transform: rotate(-6deg) scale(1.35); opacity: .55; filter: saturate(.9); } .nzb-w .nzb-bg--mos img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: .5em; display: block; }
.nzb-w .nzb-c { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3em; height: 100%; padding: 3.2em 4em; justify-content: center; }
.nzb-w .nzb-logo { height: 2.3em; width: auto; display: block; }
.nzb-w .nzb-h { font-size: 4.4em; font-weight: 800; letter-spacing: -.03em; line-height: 1.03; overflow-wrap: anywhere; } .nzb-w .nzb-h em { font-style: normal; color: var(--coral); } .nzb-w .nzb-h b { font-weight: 800; } .nzb-w .nzb-h--long { font-size: 3.5em; }
.nzb-w .nzb-p { font-size: 1.9em; line-height: 1.3; color: #e6dfd3; max-width: 22em; }
.nzb-w .nzb-btn { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: .7em; background: var(--coral); color: var(--deep); font-weight: 800; font-size: 1.9em; line-height: 1; padding: .66em 1.1em; border-radius: .6em; text-decoration: none; white-space: nowrap; } .nzb-w .nzb-bi { display: inline-grid; } .nzb-w .nzb-bi svg { width: 1em; height: 1em; }
.nzb-w .nzb-fs { display: flex; gap: 2.4em; } .nzb-w .nzb-fl { display: grid; gap: 1.1em; }
.nzb-w .nzb-f { display: flex; align-items: center; gap: .9em; font-size: 1.3em; line-height: 1.2; color: #e6dfd3; } .nzb-w .nzb-fi { display: grid; place-items: center; width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; background: rgba(254,100,72,.22); color: #ff8a73; } .nzb-w .nzb-fi svg { width: 1.7em; height: 1.7em; }
.nzb-w .nzb-ic { display: inline-flex; gap: .8em; } .nzb-w .nzb-ic > span { width: 3.2em; height: 3.2em; border-radius: 50%; display: grid; place-items: center; background: rgba(254,100,72,.2); color: #ff8a73; } .nzb-w .nzb-ic svg { width: 1.6em; height: 1.6em; }

/* phone and app screens */
.nzb-w .nzb-phone { position: absolute; width: calc(var(--pw) * 1em); aspect-ratio: 9 / 19; z-index: 1; filter: drop-shadow(0 1em 1.6em rgba(0,0,0,.45)); }
.nzb-w .nzb-pf { display: block; width: 100%; height: 100%; padding: calc(var(--pw) * .028em); border-radius: calc(var(--pw) * .15em); background: #0a0810; box-shadow: inset 0 0 0 calc(var(--pw) * .008em) #4b4358; overflow: hidden; }
.nzb-w .nzb-scr { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .125em); background: radial-gradient(120% 80% at 50% -10%, #17131f 0%, #1C1825 60%); font-size: calc(var(--pw) * .0241em); line-height: 1.25; color: #F5F1E9; text-align: left; }
.nzb-w .nzb-sc-top { display: block; position: relative; height: 22em; background: linear-gradient(150deg, #2b2440, #151019 70%); } .nzb-w .nzb-sc-top img { width: 100%; height: 100%; object-fit: cover; display: block; } .nzb-w .nzb-sc-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #1C1825 0%, rgba(28,24,37,0) 60%); }
.nzb-w .nzb-sc-b { display: block; padding: 0 2.4em; margin-top: -3em; position: relative; z-index: 1; } .nzb-w .nzb-sc-t { display: block; font-size: 2.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .nzb-w .nzb-sc-m { display: block; margin-top: .5em; font-size: 1.4em; color: #CFC8D8; }
.nzb-w .nzb-sc-h { margin-top: 1.7em; font-size: 1.8em; font-weight: 800; } .nzb-w .nzb-sc-l { height: 1em; margin-top: .9em; border-radius: .5em; background: rgba(245,241,233,.14); } .nzb-w .nzb-sc-l--s { width: 68%; }
.nzb-w .nzb-aff { display: flex; align-items: center; gap: 1.3em; min-height: 6.4em; margin-top: 1.4em; padding: 1em .2em; border-top: 1px solid #3A3446; border-bottom: 1px solid #3A3446; } .nzb-w .nzb-aff-i { color: var(--coral); display: grid; } .nzb-w .nzb-aff-i svg { width: 2.4em; height: 2.4em; } .nzb-w .nzb-aff-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; } .nzb-w .nzb-aff-tx b { font-size: 1.7em; font-weight: 800; letter-spacing: -.015em; } .nzb-w .nzb-aff-tx small { font-size: 1.4em; color: #CFC8D8; line-height: 1.28; } .nzb-w .nzb-aff-c { color: #CFC8D8; display: grid; } .nzb-w .nzb-aff-c svg { width: 2em; height: 2em; }
.nzb-w .nzb-sc-btns { display: flex; gap: 1em; margin-top: 1em; } .nzb-w .nzb-sc-btns span { flex: 1; text-align: center; padding: 1.2em 0; border: 1px solid #3A3145; border-radius: 1.4em; background: #2D2536; font-weight: 700; font-size: 1.6em; }
.nzb-w .nzb-scr--list { padding: 4em 2.4em 0; } .nzb-w .nzb-sc-pt { display: block; font-size: 2.8em; font-weight: 800; letter-spacing: -.02em; }
.nzb-w .nzb-tabs { display: flex; gap: .8em; margin-top: 1.2em; } .nzb-w .nzb-tabs span { padding: .7em 1.5em; border-radius: 999px; border: 1px solid #3A3145; font-size: 1.4em; font-weight: 600; color: #CFC8D8; } .nzb-w .nzb-tabs .on { background: #F5F1E9; color: #1C1825; border-color: #F5F1E9; }
.nzb-w .nzb-cnt { margin: 1.3em 0 .4em; font-size: 1.4em; color: #9A93A6; }
.nzb-w .nzb-row { display: flex; gap: 1.5em; padding: 1.3em 0; border-top: 1px solid rgba(245,241,233,.1); } .nzb-w .nzb-row img { width: 5.6em; height: 8.4em; flex: none; object-fit: cover; border-radius: .5em; background: #2D2536; } .nzb-w .nzb-rt { display: flex; flex-direction: column; gap: .35em; min-width: 0; } .nzb-w .nzb-rt b { font-size: 1.7em; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .nzb-w .nzb-rt small { font-size: 1.4em; color: #9A93A6; } .nzb-w .nzb-rs { align-self: flex-start; margin-top: .5em; padding: .6em 1.2em; font-size: 1.3em; font-weight: 700; border: 1px solid #3A3145; border-radius: 1.2em; background: #2D2536; }

/* comments (the app's compact rows) */
.nzb-w .nzb-cmw { position: absolute; z-index: 1; }
.nzb-w .nzb-cm { display: grid; gap: .9em; }
.nzb-w .nzb-cmi { display: flex; gap: 1.1em; padding: 1.2em 1.4em; border-radius: 1.2em; background: rgba(28,24,37,.78); border: 1px solid rgba(245,241,233,.12); backdrop-filter: blur(4px); }
.nzb-w .nzb-av { width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: var(--ivory); font-weight: 900; font-size: 1.5em; }
.nzb-w .nzb-cmb { min-width: 0; flex: 1; } .nzb-w .nzb-cmh { display: flex; align-items: center; justify-content: space-between; gap: 1em; } .nzb-w .nzb-cmh b { font-size: 1.45em; font-weight: 600; } .nzb-w .nzb-cmb p { margin-top: .5em; font-size: 1.4em; line-height: 1.38; color: rgba(245,241,233,.94); }
.nzb-w .nzb-st { position: relative; display: inline-block; flex: none; width: 5.4em; height: 1em; font-size: 1.2em; background: rgba(245,241,233,.22); -webkit-mask: var(--stars) 0 0 / 100% 100% no-repeat; mask: var(--stars) 0 0 / 100% 100% no-repeat; --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath id='s' d='M6 .8l1.7 3.6 3.9.5-2.9 2.7.8 3.9L6 9.6 2.5 11.5l.8-3.9L.4 4.9l3.9-.5z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/svg%3E"); } .nzb-w .nzb-st i { position: absolute; inset: 0 auto 0 0; background: var(--coral); }
.nzb-w .nzb-cm--empty { padding: 1.6em 1.8em; border-radius: 1.2em; background: rgba(28,24,37,.8); border: 1px solid rgba(245,241,233,.12); display: grid; gap: .9em; } .nzb-w .nzb-cm-h { font-size: 1.9em; font-weight: 800; } .nzb-w .nzb-cm--empty p { font-size: 1.4em; color: var(--soft); } .nzb-w .nzb-ta small { display: block; font-size: 1.2em; font-weight: 700; margin-bottom: .5em; } .nzb-w .nzb-ta span { display: block; height: 4.6em; border-radius: 1em; border: 1px solid #3A3145; background: #211D2A; } .nzb-w .nzb-pub { justify-self: start; padding: .8em 2em; font-size: 1.4em; font-weight: 700; border-radius: .9em; background: #2D2536; border: 1px solid #3A3145; }

/* ---- per format ---- */
.nzb-w .nzb--match-largo { --shade: linear-gradient(90deg, #1C1825 0%, rgba(28,24,37,.95) 34%, rgba(28,24,37,.35) 66%, rgba(28,24,37,0) 100%); } .nzb-w .nzb--match-largo .nzb-bg { object-position: 100% 24% !important; } .nzb-w .nzb--match-largo .nzb-c { max-width: 66%; } .nzb-w .nzb--match-largo .nzb-fs { gap: 1.8em; } .nzb-w .nzb--match-largo .nzb-f span:last-child { white-space: nowrap; }
.nzb-w .nzb--match-quadrato { --shade: linear-gradient(90deg, rgba(28,24,37,.96) 0%, rgba(28,24,37,.7) 45%, rgba(28,24,37,0) 80%), linear-gradient(0deg, rgba(28,24,37,.8), rgba(28,24,37,0) 45%); } .nzb-w .nzb--match-quadrato .nzb-c { max-width: 68%; padding: 2.6em; justify-content: space-between; } .nzb-w .nzb--match-quadrato .nzb-h { font-size: 3em; } .nzb-w .nzb--match-quadrato .nzb-h b { color: #fff; } .nzb-w .nzb--match-quadrato .nzb-btn { font-size: 1.6em; }
.nzb-w .nzb--match-verticale { --shade: linear-gradient(180deg, rgba(28,24,37,.92) 0%, rgba(28,24,37,.8) 45%, rgba(28,24,37,.95) 100%); } .nzb-w .nzb--match-verticale .nzb-c { height: auto; padding: 2.4em 2.2em 0; gap: 1.1em; } .nzb-w .nzb--match-verticale .nzb-h { font-size: 3.3em; } .nzb-w .nzb--match-verticale .nzb-f { font-size: 1.25em; }
.nzb-w .nzb--match-verticale .nzb-phone { left: 50%; transform: translateX(-50%); bottom: -13em; } .nzb-w .nzb--match-verticale > .nzb-btn { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: 2.2em; font-size: 1.8em; }
.nzb-w .nzb--lista { --shade: linear-gradient(135deg, #1C1825 0%, #2a1f33 60%, #4a2a34 100%); } .nzb-w .nzb--lista .nzb-c { max-width: 48%; padding: 3em 3.6em; gap: 1.1em; } .nzb-w .nzb--lista .nzb-h { font-size: 3.6em; } .nzb-w .nzb--lista .nzb-p { font-size: 1.7em; }
.nzb-w .nzb--lista .nzb-phone { left: 50%; top: 3em; } .nzb-w .nzb-note { position: absolute; z-index: 2; right: 4em; top: 8em; font: italic 2em/1.25 "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive; color: #e6dfd3; transform: rotate(-6deg); text-align: left; }
.nzb-w .nzb--community { --shade: linear-gradient(135deg, #1C1825 0%, #2a1f33 60%, #3f2630 100%); } .nzb-w .nzb--community .nzb-c { max-width: 48%; padding: 3.2em 3.6em; gap: 1.1em; } .nzb-w .nzb--community .nzb-h { font-size: 3.8em; } .nzb-w .nzb--community .nzb-p { font-size: 1.6em; } .nzb-w .nzb--community .nzb-btn { font-size: 1.6em; } .nzb-w .nzb--community .nzb-cmw { right: 3.4em; top: 2.6em; bottom: 2.6em; width: 34em; display: flex; flex-direction: column; justify-content: center; }
.nzb-w .nzb--scopri-piccolo { --shade: linear-gradient(0deg, rgba(28,24,37,.97) 0%, rgba(28,24,37,.78) 38%, rgba(28,24,37,0) 68%); } .nzb-w .nzb--scopri-piccolo .nzb-c { padding: 2em; justify-content: flex-end; gap: .9em; } .nzb-w .nzb--scopri-piccolo .nzb-h { font-size: 2.5em; } .nzb-w .nzb--scopri-piccolo .nzb-logo { height: 1.7em; order: 3; } .nzb-w .nzb--scopri-piccolo .nzb-btn { font-size: 1.5em; align-self: stretch; justify-content: center; order: 4; }
.nzb-w .nzb--funzioni-verticale .nzb-c { height: auto; padding: 1.6em 1.4em 0; gap: .7em; } .nzb-w .nzb--funzioni-verticale .nzb-ic > span { width: 2.9em; height: 2.9em; } .nzb-w .nzb--funzioni-verticale .nzb-h { font-size: 1.9em; } .nzb-w .nzb--funzioni-verticale .nzb-p { font-size: 1.1em; } .nzb-w .nzb--funzioni-verticale .nzb-phone { left: 50%; transform: translateX(-50%); bottom: -5em; } .nzb-w .nzb--funzioni-verticale > .nzb-btn { position: absolute; z-index: 4; left: 1.2em; right: 1.2em; bottom: 1em; justify-content: center; font-size: 1.15em; }
.nzb-w .nzb--novita { --shade: linear-gradient(0deg, rgba(28,24,37,.98) 0%, rgba(28,24,37,.8) 45%, rgba(28,24,37,0) 75%); } .nzb-w .nzb--novita .nzb-c { padding: 1.4em; justify-content: flex-end; gap: .7em; } .nzb-w .nzb--novita .nzb-h { font-size: 1.85em; } .nzb-w .nzb--novita .nzb-p { font-size: 1.05em; color: var(--soft); } .nzb-w .nzb--novita .nzb-btn { font-size: 1.1em; align-self: stretch; justify-content: center; }
.nzb-w .nzb--striscia-match { --shade: linear-gradient(90deg, rgba(28,24,37,0) 0%, #1C1825 32%); background: #1C1825; } .nzb-w .nzb--striscia-match .nzb-bg { width: 32%; right: auto; } .nzb-w .nzb--striscia-match .nzb-c { flex-direction: row; align-items: center; justify-content: flex-start; gap: 2em; padding: 0 1.6em 0 26em; } .nzb-w .nzb--striscia-match .nzb-sl { display: flex; flex-direction: column; font-size: 1.5em; font-weight: 800; line-height: 1.15; } .nzb-w .nzb--striscia-match .nzb-sl span { font-weight: 600; color: var(--soft); } .nzb-w .nzb--striscia-match .nzb-btn { margin-left: auto; font-size: 1.35em; } .nzb-w .nzb--striscia-match .nzb-ic > span { width: 2.6em; height: 2.6em; } .nzb-w .nzb--striscia-match { border-radius: 1.2em; }
.nzb-w .nzb--striscia-generica { background: #1C1825; border-radius: 1.2em; } .nzb-w .nzb--striscia-generica .nzb-bg--mos { left: 40%; opacity: .8; transform: rotate(-4deg) scale(1.5); } .nzb-w .nzb--striscia-generica::before { background: linear-gradient(90deg, #1C1825 38%, rgba(28,24,37,.2) 100%); z-index: -1; } .nzb-w .nzb--striscia-generica .nzb-c { flex-direction: row; align-items: center; gap: 1.6em; padding: 0 1.8em; } .nzb-w .nzb-tile { width: 4.4em; height: 4.4em; border-radius: 1em; background: #F5F1E9; color: #1C1825; display: grid; place-items: center; flex: none; } .nzb-w .nzb-tile svg { width: 2.6em; height: 2.6em; }
.nzb-w .nzb--striscia-generica .nzb-sl { display: flex; flex-direction: column; gap: .3em; font-size: 1.6em; font-weight: 800; } .nzb-w .nzb--striscia-generica .nzb-sl span { font-weight: 500; color: var(--soft); font-size: .92em; } .nzb-w .nzb--striscia-generica .nzb-btn { margin-left: auto; font-size: 1.35em; }
.nzb-w .nzb--prossima { --shade: linear-gradient(135deg, #1C1825 0%, #2a1f33 55%, #4a2a30 100%); } .nzb-w .nzb--prossima .nzb-c { max-width: 54%; padding: 2.4em 3.2em; gap: .8em; } .nzb-w .nzb--prossima .nzb-h { font-size: 3em; } .nzb-w .nzb--prossima .nzb-p { font-size: 1.7em; } .nzb-w .nzb--prossima .nzb-logo { height: 1.9em; } .nzb-w .nzb--prossima .nzb-btn { font-size: 1.6em; }
.nzb-w .nzb--prossima .nzb-phone { left: 56%; top: 2em; } .nzb-w .nzb-pill { position: absolute; z-index: 2; right: 4em; top: 6.4em; display: flex; align-items: center; gap: 1em; padding: 1.1em 1.6em 1.1em 1.1em; border-radius: 1.2em; background: rgba(28,24,37,.88); border: 1px solid rgba(245,241,233,.18); } .nzb-w .nzb-pill > span { width: 3.6em; height: 3.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(254,100,72,.22); color: #ff8a73; } .nzb-w .nzb-pill svg { width: 1.9em; height: 1.9em; } .nzb-w .nzb-pill b { font-size: 1.5em; line-height: 1.15; }

/* ---- narrow containers: wide formats stack ---- */
@container (max-width: 700px) {
  .nzb-w .nzb--match-largo, .nzb-w .nzb--lista, .nzb-w .nzb--community, .nzb-w .nzb--prossima { aspect-ratio: auto; font-size: min(calc(100cqw / 38), 11.5px); }
  .nzb-w .nzb--match-largo .nzb-bg, .nzb-w .nzb--lista .nzb-note, .nzb-w .nzb--lista .nzb-phone, .nzb-w .nzb--prossima .nzb-phone, .nzb-w .nzb--prossima .nzb-pill, .nzb-w .nzb--match-largo .nzb-fs { display: none; }
  .nzb-w .nzb--match-largo .nzb-bg { display: block; left: 0; width: 100%; opacity: .95; } .nzb-w .nzb--match-largo { --shade: linear-gradient(0deg, rgba(28,24,37,.96) 0%, rgba(28,24,37,.82) 48%, rgba(28,24,37,.15) 100%); }
  .nzb-w .nzb--match-largo .nzb-c, .nzb-w .nzb--lista .nzb-c, .nzb-w .nzb--community .nzb-c, .nzb-w .nzb--prossima .nzb-c { max-width: none; padding: 2.4em; gap: 1.2em; } .nzb-w .nzb--match-largo .nzb-h, .nzb-w .nzb--lista .nzb-h, .nzb-w .nzb--community .nzb-h, .nzb-w .nzb--prossima .nzb-h { font-size: 3.6em; } .nzb-w .nzb--match-largo .nzb-p, .nzb-w .nzb--lista .nzb-p, .nzb-w .nzb--community .nzb-p, .nzb-w .nzb--prossima .nzb-p { font-size: 1.7em; }
  .nzb-w .nzb--match-largo .nzb-btn, .nzb-w .nzb--lista .nzb-btn, .nzb-w .nzb--community .nzb-btn, .nzb-w .nzb--prossima .nzb-btn { font-size: 1.8em; align-self: stretch; justify-content: center; }
  .nzb-w .nzb--community .nzb-cmw { position: static; width: auto; margin: 0 2.4em 2.4em; display: block; } .nzb-w .nzb--community .nzb-c { height: auto; } .nzb-w .nzb--community .nzb-cmi:nth-child(n+3) { display: none; }
  .nzb-w .nzb--striscia-match, .nzb-w .nzb--striscia-generica { aspect-ratio: auto; font-size: min(calc(100cqw / 38), 11.5px); } .nzb-w .nzb--striscia-match .nzb-c, .nzb-w .nzb--striscia-generica .nzb-c { padding: 1.4em 1.6em; flex-wrap: wrap; row-gap: 1em; } .nzb-w .nzb--striscia-match .nzb-bg { display: none; } .nzb-w .nzb--striscia-match .nzb-ic { display: none; } .nzb-w .nzb--striscia-match .nzb-sl, .nzb-w .nzb--striscia-generica .nzb-sl { font-size: 1.9em; flex: 1 1 60%; } .nzb-w .nzb--striscia-match .nzb-btn, .nzb-w .nzb--striscia-generica .nzb-btn { font-size: 1.7em; margin-left: 0; }
  .nzb-w .nzb--striscia-generica .nzb-tile { display: none; }
}

.nzb-w .nzb p, .nzb-w .nzb h3, .nzb-w .nzb b, .nzb-w .nzb small, .nzb-w .nzb a, .nzb-w .nzb span { font-family: inherit; font-style: normal; text-decoration: none; }
.nzb-w .nzb .nzb-note { font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive; font-style: italic; }
.nzb-w .nzb .nzb-btn { color: #1C1825; }
.nzb-w .nzb--match-largo .nzb-bg { object-position: 100% 24% !important; }
.nzb-w .nzb--match-largo .nzb-btn { position: absolute; right: 4em; bottom: 3.4em; }
.nzb-w .nzb--match-quadrato .nzb-c { max-width: none; } .nzb-w .nzb--match-quadrato .nzb-h { max-width: 68%; } .nzb-w .nzb--match-quadrato .nzb-btn { align-self: flex-end; }
.nzb-w .nzb--prossima .nzb-phone { left: 44%; } .nzb-w .nzb--prossima .nzb-pill { right: 3.2em; top: 2.4em; } .nzb-w .nzb--prossima .nzb-btn { position: absolute; right: 3.2em; bottom: 2.6em; }
.nzb-w .nzb .nzb-bg--mos { opacity: .85; }
@container (max-width: 700px) { .nzb-w .nzb--match-largo .nzb-btn, .nzb-w .nzb--prossima .nzb-btn { position: relative; right: auto; bottom: auto; } }

/* ---- mood banners, 4:5 (560 × 700 design) ---- */
.nzb-w .nzb--stasera, .nzb-w .nzb--romantico, .nzb-w .nzb--amici, .nzb-w .nzb--sorprendimi { background: linear-gradient(160deg, #1C1825 0%, #17131f 100%); border-radius: 2em; }
.nzb-w .nzb .nzb-logo--c { position: absolute; z-index: 3; left: 4.5em; top: 4.2em; height: 3em; }
.nzb-w .nzb--stasera .nzb-h, .nzb-w .nzb--romantico .nzb-h, .nzb-w .nzb--amici .nzb-h, .nzb-w .nzb--sorprendimi .nzb-h { position: absolute; z-index: 3; left: calc(var(--u) * 4.5); top: calc(var(--u) * 11); font-size: 5.6em; line-height: .98; font-weight: 900; letter-spacing: -.045em; }
.nzb-w .nzb--stasera .nzb-p, .nzb-w .nzb--romantico .nzb-p, .nzb-w .nzb--amici .nzb-p, .nzb-w .nzb--sorprendimi .nzb-p { position: absolute; z-index: 3; left: calc(var(--u) * 4.5); font-size: 2.1em; line-height: 1.28; color: #f1ebe0; max-width: none; }
.nzb-w .nzb .nzb-ph { position: absolute; z-index: 1; display: block; object-fit: cover; }
.nzb-w .nzb .nzb-btn--dk { background: #1C1825; color: #F5F1E9; } .nzb-w .nzb .nzb-btn--dk .nzb-bi { color: #FE6448; }

/* stasera */
.nzb-w .nzb--stasera .nzb-ph { right: 0; top: 0; width: 23em; height: 36em; object-position: 60% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 22%); mask-composite: intersect; }
.nzb-w .nzb--stasera .nzb-h { top: calc(var(--u) * 11.4); } .nzb-w .nzb--stasera .nzb-p { top: calc(var(--u) * 28.4); }
.nzb-w .nzb--stasera .nzb-card { position: absolute; z-index: 3; left: 2.8em; right: 2.8em; top: 35.4em; height: 20.4em; padding: 2.5em 2.8em; border-radius: 2em; background: linear-gradient(100deg, #FF6F52 0%, #F2523A 100%); color: #1C1825; }
.nzb-w .nzb--stasera .nzb-eb { display: block; font-size: 1em; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; } .nzb-w .nzb--stasera .nzb-ct { display: block; margin-top: .55em; font-size: 3.7em; font-weight: 900; letter-spacing: -.04em; line-height: 1; } .nzb-w .nzb--stasera .nzb-cs { display: block; max-width: 17em; margin-top: .75em; font-size: 1.8em; line-height: 1.3; color: rgba(28,24,37,.92); }
.nzb-w .nzb--stasera .nzb-card .nzb-btn { margin-top: 1.2em; font-size: 2.05em; padding: .6em 1.1em; border-radius: .7em; }
.nzb-w .nzb--stasera .nzb-fan { position: absolute; right: -.4em; top: -1.8em; width: 26em; height: 22em; pointer-events: none; transform: scale(.84); transform-origin: right top; } .nzb-w .nzb--stasera .nzb-fan img { position: absolute; width: 9.6em; height: 14.6em; object-fit: cover; border-radius: .9em; box-shadow: 0 .8em 1.6em rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.18); }
.nzb-w .nzb--stasera .nzb-fan img:nth-child(1) { left: 0; top: 5.4em; transform: rotate(-9deg); } .nzb-w .nzb--stasera .nzb-fan img:nth-child(2) { left: 4.6em; top: 3em; transform: rotate(-4deg); } .nzb-w .nzb--stasera .nzb-fan img:nth-child(3) { left: 9.4em; top: 0; width: 11.2em; height: 16.8em; transform: rotate(2deg); z-index: 2; } .nzb-w .nzb--stasera .nzb-fan img:nth-child(4) { left: 16em; top: 3.6em; transform: rotate(9deg); }
.nzb-w .nzb--stasera .nzb-tri { position: absolute; z-index: 3; left: 3em; right: 3em; top: 56.9em; display: grid; grid-template-columns: repeat(3, 1fr); } .nzb-w .nzb--stasera .nzb-tri > span { display: flex; flex-direction: column; align-items: center; gap: 1.1em; text-align: center; font-size: 1.7em; line-height: 1.22; color: #F5F1E9; } .nzb-w .nzb--stasera .nzb-tri > span + span { border-left: 1px solid rgba(245,241,233,.16); } .nzb-w .nzb--stasera .nzb-tri i { font-style: normal; color: #cfc8d8; }
.nzb-w .nzb .nzb-tc { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #2D2536; color: #FE6448; } .nzb-w .nzb .nzb-tc svg { width: 1.3em; height: 1.3em; }

/* romantico */
.nzb-w .nzb--romantico .nzb-ph { right: 0; top: 0; width: 25em; height: 34.7em; object-position: 50% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(0deg, transparent 0, #000 25%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(0deg, transparent 0, #000 25%); mask-composite: intersect; }
.nzb-w .nzb--romantico .nzb-h { top: calc(var(--u) * 10.6); font-size: 5.3em; } .nzb-w .nzb--romantico .nzb-p { top: calc(var(--u) * 27.6); }
.nzb-w .nzb--romantico .nzb-ask { position: absolute; z-index: 3; left: 2.6em; right: 2.6em; top: 33.2em; padding: 2em 2.2em; border-radius: 1.8em; background: rgba(36,28,44,.72); border: 1px solid rgba(245,241,233,.14); backdrop-filter: blur(6px); } .nzb-w .nzb--romantico .nzb-ask b { display: block; font-size: 1.9em; font-weight: 800; letter-spacing: -.01em; }
.nzb-w .nzb--romantico .nzb-ask-r { display: flex; gap: 1.2em; margin-top: 1.4em; align-items: stretch; } .nzb-w .nzb--romantico .nzb-in { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1em; padding: 0 1.4em; border: 1px solid rgba(245,241,233,.5); border-radius: 1.2em; font-size: 1.4em; color: #9A93A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nzb-w .nzb--romantico .nzb-in > span { color: #FE6448; display: grid; flex: none; } .nzb-w .nzb--romantico .nzb-in svg { width: 1.5em; height: 1.5em; }
.nzb-w .nzb--romantico .nzb-ask .nzb-btn { font-size: 1.75em; padding: .85em 1.1em; border-radius: .75em; }
.nzb-w .nzb--romantico .nzb-rom { position: absolute; z-index: 2; left: 0; right: 0; top: 47.8em; bottom: 0; } .nzb-w .nzb--romantico .nzb-rom > span { position: absolute; width: 16em; height: 17.6em; overflow: hidden; border-radius: 1.5em; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 1em 2em rgba(0,0,0,.45); } .nzb-w .nzb--romantico .nzb-rom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nzb-w .nzb--romantico .nzb-rom > span:nth-child(1) { left: 5.4em; top: 1.2em; transform: rotate(-5deg); } .nzb-w .nzb--romantico .nzb-rom > span:nth-child(2) { left: 21em; top: 2.2em; transform: rotate(1.5deg); } .nzb-w .nzb--romantico .nzb-rom > span:nth-child(3) { left: 36.2em; top: .6em; transform: rotate(5deg); }
.nzb-w .nzb--romantico .nzb-hrt { position: absolute; z-index: 3; right: 2em; top: 43.6em; color: #FE6448; } .nzb-w .nzb--romantico .nzb-hrt svg { width: 3.2em; height: 3.2em; fill: none; stroke: currentColor; stroke-width: 2; }
.nzb-w .nzb--romantico::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 12em; background: linear-gradient(0deg, rgba(40,28,26,.9), transparent); pointer-events: none; }

/* amici */
.nzb-w .nzb--amici .nzb-ph { right: 0; bottom: 0; width: 27.6em; height: 52em; object-position: 50% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 30%), linear-gradient(180deg, transparent 0, #000 16%); mask-composite: intersect; }
.nzb-w .nzb--amici .nzb-h { top: calc(var(--u) * 11.2); font-size: 4.7em; } .nzb-w .nzb--amici .nzb-p { top: calc(var(--u) * 24.4); font-size: 2.2em; }
.nzb-w .nzb--amici .nzb-btn--big { position: absolute; z-index: 4; left: calc(var(--u) * 4); top: calc(var(--u) * 32); width: calc(var(--u) * 25.6); justify-content: space-between; font-size: 2.1em; padding: .9em 1.1em; border-radius: .7em; }
.nzb-w .nzb--amici .nzb-fr { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1.3em; padding: 1.3em 1.5em; border-radius: 1.6em; background: rgba(36,28,44,.84); border: 1px solid rgba(245,241,233,.14); backdrop-filter: blur(6px); box-shadow: 0 .8em 1.6em rgba(0,0,0,.35); transform: rotate(var(--r)); }
.nzb-w .nzb--amici .nzb-fr--0 { right: -.8em; top: 8.4em; width: 21em; --r: -3deg; } .nzb-w .nzb--amici .nzb-fr--1 { left: 4.4em; top: 38.8em; width: 26em; --r: 3deg; } .nzb-w .nzb--amici .nzb-fr--2 { left: 2.8em; top: 49.2em; width: 26em; --r: 2.5deg; }
.nzb-w .nzb--amici .nzb-av { width: 2.3em; height: 2.3em; font-size: 1.8em; flex: none; } .nzb-w .nzb--amici .nzb-frt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; } .nzb-w .nzb--amici .nzb-frt b { font-size: 1.65em; font-weight: 800; } .nzb-w .nzb--amici .nzb-frt small { font-size: 1.3em; color: #d8d1e0; line-height: 1.2; } .nzb-w .nzb--amici .nzb-frt .nzb-dim { color: #9A93A6; }
.nzb-w .nzb--amici .nzb-fr img { width: 5.4em; height: 5.4em; flex: none; object-fit: cover; border-radius: .9em; }

/* sorprendimi */
.nzb-w .nzb--sorprendimi .nzb-bgb { position: absolute; inset: -10%; z-index: 0; width: 120%; height: 120%; object-fit: cover; filter: blur(2.6em) saturate(1.3) brightness(.5); opacity: .6; }
.nzb-w .nzb--sorprendimi::before { background: radial-gradient(60% 40% at 80% 36%, rgba(255,140,80,.35), transparent 70%), linear-gradient(180deg, rgba(23,19,31,.55) 0%, rgba(23,19,31,.85) 100%); z-index: 1; }
.nzb-w .nzb--sorprendimi .nzb-h { top: calc(var(--u) * 10.4); } .nzb-w .nzb--sorprendimi .nzb-p { top: calc(var(--u) * 27); }
.nzb-w .nzb--sorprendimi .nzb-vc { position: absolute; z-index: 2; overflow: hidden; border-radius: 1.6em; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 1em 2.4em rgba(0,0,0,.5); } .nzb-w .nzb--sorprendimi .nzb-vc > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nzb-w .nzb--sorprendimi .nzb-vb { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1em; padding: 1.4em; background: linear-gradient(0deg, rgba(28,24,37,.96) 40%, transparent); } .nzb-w .nzb--sorprendimi .nzb-vp { width: 3.4em; height: 3.4em; flex: none; border-radius: 50%; display: grid; place-items: center; background: #FE6448; color: #fff; } .nzb-w .nzb--sorprendimi .nzb-vp svg { width: 1.7em; height: 1.7em; } .nzb-w .nzb--sorprendimi .nzb-vl { flex: 1; } .nzb-w .nzb--sorprendimi .nzb-vl i { display: block; height: .75em; margin: .45em 0; border-radius: .4em; background: rgba(245,241,233,.35); } .nzb-w .nzb--sorprendimi .nzb-vl i + i { width: 60%; }
.nzb-w .nzb--sorprendimi .nzb-vc--a { left: 2.6em; top: 34.4em; width: 14em; height: 19em; transform: rotate(-6deg); } .nzb-w .nzb--sorprendimi .nzb-vc--b { left: 11.6em; top: 37.2em; width: 11em; height: 15.6em; transform: rotate(3deg); filter: brightness(.8); }
.nzb-w .nzb--sorprendimi .nzb-vc--big { right: 3.6em; top: 28.4em; width: 19.6em; height: 28.4em; transform: rotate(4deg); border: .22em solid #FE6448; box-shadow: 0 0 3.4em rgba(254,100,72,.55), 0 1em 2.4em rgba(0,0,0,.5); z-index: 3; }
.nzb-w .nzb--sorprendimi .nzb-shf { position: absolute; z-index: 4; left: 19.4em; top: 42.4em; width: 7em; height: 7em; color: #F5F1E9; filter: drop-shadow(0 0 1.2em rgba(254,100,72,.8)); } .nzb-w .nzb--sorprendimi .nzb-shf svg { width: 100%; height: 100%; stroke-width: 2.4; }
.nzb-w .nzb--sorprendimi .nzb-btn--wide { position: absolute; z-index: 4; left: calc(var(--u) * 4.5); right: calc(var(--u) * 4.5); top: calc(var(--u) * 58.8); width: auto; height: calc(var(--u) * 6.8); justify-content: space-between; padding: 0 calc(var(--u) * 2); font-size: 3em; border-radius: .7em; } .nzb-w .nzb--sorprendimi .nzb-sp svg { width: 1.6em; height: 1.6em; } .nzb-w .nzb--sorprendimi .nzb-sp { display: grid; }

.bslot-m { display: none; }
@media (max-width: 700px) { .bslot-d { display: none; } .bslot-m { display: block; } }

.bslot-side { position: sticky; top: 24px; } .bslot-side .nzb-w { margin: 0 auto; }
@media (max-width: 920px) { .bslot-side { display: none; } }