/* WooopHub :: sezioni della homepage (cosa offriamo, perche', per chi, domande) */
.wh-sec { max-width: 1160px; margin: 96px auto 0; scroll-margin-top: 90px; }
#offerte, #domande, #offriamo, #chi, #perche { scroll-margin-top: 90px; }
.wh-sec > h2 { max-width: 20ch; margin: 0 0 32px; font: 800 clamp(32px, 5vw, 52px)/1.02 var(--wh-display); letter-spacing: -0.035em; text-wrap: balance; }
.wh-kick { display: inline-block; margin: 0 0 14px; padding: 6px 12px; border: 2px solid var(--wh-edge); border-radius: 999px; background: var(--wh-orange-soft); color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
#perche .wh-kick { background: var(--wh-violet-soft); }
#chi .wh-kick { background: var(--wh-ok-soft); }

.wh-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wh-feat { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px 22px; border: 2px solid var(--wh-edge); border-radius: 22px; background: var(--wh-paper); box-shadow: 5px 5px 0 var(--wh-hard); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 500ms var(--ease); }
.wh-feat:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--wh-hard); }
.wh-feat__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border: 2px solid var(--wh-edge); border-radius: 14px; background: var(--wh-orange-soft); font-size: 24px; }
.wh-feat:nth-child(3n+2) .wh-feat__ico { background: var(--wh-violet-soft); }
.wh-feat:nth-child(3n) .wh-feat__ico { background: var(--wh-ok-soft); }
.wh-feat h3 { margin: 0; font: 800 21px/1.15 var(--wh-display); letter-spacing: -0.02em; }
.wh-feat p { margin: 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }
.wh-feat__tag { position: absolute; top: 20px; right: 18px; padding: 4px 9px; border: 1.5px solid var(--wh-edge); border-radius: 999px; background: var(--wh-violet); color: #FFFFFF; font-size: 11.5px; font-weight: 800; }

.wh-vp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.wh-vp > div { display: grid; gap: 6px; padding: 22px; border: 2px solid var(--wh-edge); border-radius: 22px; background: var(--wh-orange); color: #141210; box-shadow: 5px 5px 0 var(--wh-hard); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.wh-vp > div:nth-child(2) { background: var(--wh-violet); color: #FFFFFF; }
.wh-vp > div:nth-child(3) { background: var(--wh-paper); color: var(--ink); }
.wh-vp b { font: 800 clamp(26px, 3.2vw, 34px)/1 var(--wh-display); letter-spacing: -0.03em; }
.wh-vp > div > span { font-size: 16px; font-weight: 600; opacity: 0.88; }

.wh-vs { overflow: hidden; border: 2px solid var(--wh-edge); border-radius: 22px; background: var(--wh-paper); box-shadow: 5px 5px 0 var(--wh-hard); }
.wh-vs table { width: 100%; border-collapse: collapse; font-size: 16px; }
.wh-vs th { padding: 16px 20px; background: var(--ink); color: var(--bg); font: 800 17px/1.2 var(--wh-display); text-align: left; }
.wh-vs th + th { background: var(--wh-orange); color: #141210; }
.wh-vs td { width: 50%; padding: 15px 20px; border-top: 1.5px solid var(--line); vertical-align: top; }
.wh-vs td:first-child { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wh-orange) 70%, transparent); text-decoration-thickness: 2px; }
.wh-vs td + td { font-weight: 700; }
.wh-vs td + td::before { content: '✓'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1.5px solid var(--wh-edge); border-radius: 7px; background: var(--wh-ok-soft); color: var(--ink); font-size: 13px; vertical-align: -3px; }

.wh-who { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.wh-who > span { padding: 12px 18px; border: 2px solid var(--wh-edge); border-radius: 14px; background: var(--wh-paper); box-shadow: 3px 3px 0 var(--wh-hard); font-size: 16.5px; font-weight: 700; }
.wh-works { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 40px; }
.wh-works > p { margin: 0 8px 0 0; color: var(--ink-muted); font-weight: 700; }
.wh-chip { display: inline-grid; gap: 1px; padding: 9px 14px; border: 2px solid var(--wh-edge); border-radius: 12px; background: var(--wh-paper); font-size: 13px; color: var(--ink-muted); }
.wh-chip b { color: var(--ink); font-size: 16px; }
.wh-chip--soon { border-style: dashed; background: transparent; }
.wh-heard { padding: 30px; border: 2px solid var(--wh-edge); border-radius: 26px; background: var(--wh-violet-soft); box-shadow: 5px 5px 0 var(--wh-hard); }
.wh-heard h3 { margin: 0 0 6px; font: 800 26px/1.1 var(--wh-display); letter-spacing: -0.02em; }
.wh-heard__note { margin: 0 0 22px; color: var(--ink-muted); font-size: 14.5px; }
.wh-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wh-quotes blockquote { margin: 0; padding: 20px; border: 2px solid var(--wh-edge); border-radius: 18px; background: var(--wh-paper); font: 700 18px/1.35 var(--wh-display); letter-spacing: -0.01em; transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.wh-heard__own { margin: 22px 0 0; font-weight: 700; }

.wh-fair { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1160px; margin: 28px auto 0; padding: 0; list-style: none; }
.wh-fair li { padding: 14px 16px 14px 44px; border: 2px dashed var(--wh-edge); border-radius: 16px; font-size: 15px; font-weight: 700; background: var(--wh-paper); position: relative; }
.wh-fair li::before { content: '✓'; position: absolute; top: 13px; left: 14px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--wh-orange); color: #141210; font-size: 12px; }

.wh-faq { max-width: 820px; }
.wh-faq__q { margin-bottom: 12px; border: 2px solid var(--wh-edge); border-radius: 16px; background: var(--wh-paper); box-shadow: 3px 3px 0 var(--wh-hard); }
.wh-faq__q summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; font: 800 18px/1.25 var(--wh-display); cursor: pointer; list-style: none; }
.wh-faq__q summary::-webkit-details-marker { display: none; }
.wh-faq__q summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--wh-edge); border-radius: 9px; background: var(--wh-orange-soft); font: 800 18px/1 var(--sans); transition: transform 180ms var(--ease); }
.wh-faq__q[open] summary::after { transform: rotate(45deg); }
.wh-faq__q p { margin: 0; padding: 0 20px 20px; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.wh-faq__q summary:focus-visible { outline: 3px solid var(--wh-violet); outline-offset: 3px; border-radius: 14px; }

.wh-rise { opacity: 0; transform: translateY(18px); }
.wh-rise.wh-in { opacity: 1; transform: none; }
.wh-feat.wh-rise.wh-in:hover { transform: translate(-2px, -2px); }

@media (max-width: 900px) {
  .wh-feats, .wh-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-fair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wh-sec { margin-top: 72px; }
  .wh-sec > h2 { margin-bottom: 24px; }
  .wh-feats, .wh-vp, .wh-quotes, .wh-fair { grid-template-columns: 1fr; }
  .wh-feat { padding: 20px 18px; }
  .wh-heard { padding: 22px 18px; }
  .wh-vs table, .wh-vs thead, .wh-vs tbody, .wh-vs tr, .wh-vs td { display: block; width: auto; }
  .wh-vs thead { display: none; }
  .wh-vs tr { padding: 14px 16px; border-top: 1.5px solid var(--line); }
  .wh-vs tr:first-child { border-top: 0; }
  .wh-vs td { padding: 0; border: 0; }
  .wh-vs td + td { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .wh-rise { opacity: 1; transform: none; }
  .wh-feat, .wh-vp > div, .wh-quotes blockquote, .wh-faq__q summary::after { transition: none; }
}

/* Foto di persone al lavoro (stock, solo sfondo) */
.wh-photo--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.wh-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wh-who > span { overflow: hidden; padding: 0 16px 14px; line-height: 1.3; }
.wh-who > span img { display: block; width: calc(100% + 32px); max-width: none; margin: 0 -16px 12px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-sunken, #eee); }

.wh-post__img, .wh-phone__img { overflow: hidden; padding: 0; }
.wh-post__img img, .wh-phone__img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sh-body--land .wh-scene--live { background: linear-gradient(rgba(20, 14, 10, 0.18), rgba(20, 14, 10, 0.18)), url(/wp-content/socialhub/img/foto-scatto.jpg) center 40% / cover, #3a2a20; }

/* Scena calendario con foto vere */
.sh-body--land .wh-scene--cal { background: linear-gradient(rgba(20, 14, 10, 0.18), rgba(20, 14, 10, 0.18)), url(/wp-content/socialhub/img/foto-agenda.jpg) center / cover, #6b4a32; }
.wh-scene--cal .wh-week { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); }
.wh-scene--cal .wh-slot span { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.wh-scene--cal .wh-slot span img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.wh-scene--cal .wh-week__head .wh-av { overflow: hidden; padding: 0; }
.wh-scene--cal .wh-week__head .wh-av img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* E non finisce qui (#dipiu) */
.wh-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wh-tile { position: relative; display: grid; align-content: start; gap: 18px; padding: 24px 22px; border: 1px solid var(--wh-edge); border-radius: 22px; background: var(--wh-paper); overflow: hidden; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), opacity 500ms var(--ease); }
.wh-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.wh-tile--wide { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px; }
.wh-tile__txt { display: grid; gap: 8px; }
.wh-tile__kick { color: var(--wh-orange); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wh-tile h3 { margin: 0; font: 600 21px/1.15 var(--wh-display); letter-spacing: -0.015em; }
.wh-tile p { margin: 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.5; }
.wh-tile .wh-feat__tag { top: 18px; right: 18px; border-width: 1px; }
.wh-mock { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-sunken, #F4F1EC); font-size: 13.5px; line-height: 1.35; }
.wh-mk-card { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--wh-paper); }
.wh-mk-card > div { display: grid; gap: 3px; min-width: 0; }
.wh-mk-card img { flex: none; width: 64px; height: 64px; max-width: none; border-radius: 10px; object-fit: cover; }
.wh-mk-card small, .wh-mk-muted { color: var(--ink-muted); font-size: 12px; }
.wh-mk-card--soft { opacity: 0.85; transform: translateX(14px); }
.wh-mk-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--wh-violet-soft); font-size: 18px; }
.wh-mk-btn { justify-self: start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: var(--wh-orange); color: #FFFFFF; font-size: 12px; font-weight: 600; }
.wh-mk-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wh-mk-list li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--wh-paper); }
.wh-mk-list i { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 8px; background: var(--wh-sched-soft); color: var(--wh-sched); font-size: 11.5px; font-style: normal; font-weight: 700; }
.wh-mk-list i.wh-mk-ok { background: var(--wh-ok-soft); color: var(--wh-ok); }
.wh-mk-list i.wh-mk-warn { background: var(--wh-orange-soft); color: var(--wh-orange); }
.wh-mk-pill { margin-left: auto; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; }
.wh-mk-brand { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; padding: 12px; border-radius: 12px; background: var(--wh-paper); }
.wh-mk-brand dt { color: var(--ink-muted); font-size: 12px; }
.wh-mk-brand dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.wh-mk-frames { display: flex; gap: 12px; align-items: flex-end; justify-content: center; }
.wh-mk-frames figure { display: grid; gap: 6px; justify-items: center; margin: 0; color: var(--ink-muted); font-size: 12px; text-align: center; }
.wh-mk-frames img { display: block; width: 92px; max-width: none; border-radius: 10px; object-fit: cover; box-shadow: var(--shadow-1); }
.wh-mk-f1 { aspect-ratio: 1; }
.wh-mk-f2 { aspect-ratio: 4 / 5; }
.wh-mk-f3 { aspect-ratio: 9 / 16; }
.wh-mk-note { display: grid; gap: 7px; padding: 12px; border-radius: 12px; background: var(--wh-paper); }
.wh-mk-done { color: var(--ink-muted); text-decoration: line-through; }
.wh-mk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wh-mk-stats span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--wh-paper); color: var(--ink-muted); font-size: 12px; }
.wh-mk-stats b { color: var(--ink, #141210); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
@media (max-width: 900px) {
  .wh-more { grid-template-columns: 1fr; }
  .wh-tile--wide { grid-column: auto; }
}
@media (max-width: 640px) {
  .wh-tile--wide { grid-template-columns: 1fr; }
  .wh-tile { padding: 20px 18px; }
  .wh-mk-frames img { width: 76px; }
}
@media (prefers-reduced-motion: reduce) { .wh-tile { transition: none; } }

/* Pagina stile Notion nella sezione #dipiu */
.wh-tile--full { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: center; gap: 32px; }
.wh-tile--notion { order: -1; }
.wh-tile--full .wh-mk-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wh-tile--notion .wh-mock { padding: 18px; }
.wh-nt { border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; box-shadow: var(--shadow-1); overflow: hidden; color: #37352F; font-family: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.wh-nt__bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; border-bottom: 1px solid rgba(55,53,47,.09); font-size: 12px; color: rgba(55,53,47,.65); }
.wh-nt__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(55,53,47,.16); }
.wh-nt__bar span { margin-left: 8px; }
.wh-nt__bar em { margin-left: auto; font-style: normal; }
.wh-nt__doc { position: relative; display: grid; gap: 2px; padding: 18px 26px 22px 54px; font-size: 14px; }
.wh-nt__ico { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.wh-nt__h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.wh-nt__h2 { font-size: 16px; font-weight: 600; margin: 10px 0 2px; }
.wh-nt__row { position: relative; display: flex; gap: 8px; align-items: center; padding: 3px 4px; border-radius: 4px; }
.wh-nt__row b { width: 16px; text-align: center; font-weight: 400; color: rgba(55,53,47,.75); }
.wh-nt__done { color: rgba(55,53,47,.5); text-decoration: line-through; }
.wh-nt__hover { background: rgba(55,53,47,.05); }
.wh-nt__grip { position: absolute; left: -40px; color: rgba(55,53,47,.4); font-size: 13px; letter-spacing: -1px; }
.wh-nt__typing { color: rgba(55,53,47,.8); }
.wh-nt__caret { display: inline-block; width: 1.5px; height: 16px; background: #37352F; animation: wh-blink 1s steps(1) infinite; }
@keyframes wh-blink { 50% { opacity: 0; } }
.wh-nt__menu { position: absolute; left: 66px; bottom: -6px; display: grid; gap: 1px; width: 190px; padding: 6px; border: 1px solid rgba(55,53,47,.12); border-radius: 8px; background: #FFFFFF; box-shadow: 0 10px 30px rgba(15,15,15,.14); font-size: 13px; }
.wh-nt__menu small { padding: 2px 6px 4px; color: rgba(55,53,47,.55); font-size: 11px; }
.wh-nt__menu span { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 5px; }
.wh-nt__menu span.is-sel { background: rgba(55,53,47,.08); }
.wh-nt__menu i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(55,53,47,.14); border-radius: 4px; font-style: normal; font-size: 12px; }
.wh-tile--notion .wh-nt__doc { padding-bottom: 150px; }
@media (max-width: 640px) {
  .wh-tile--full { grid-template-columns: 1fr; gap: 20px; }
  .wh-tile--full .wh-mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-nt__doc { padding-left: 44px; padding-right: 16px; }
  .wh-nt__menu { left: 44px; }
}
@media (prefers-reduced-motion: reduce) { .wh-nt__caret { animation: none; } }

.wh-tile--notion .wh-nt__doc { padding-bottom: 168px; }
.wh-nt__menu { bottom: 12px; }
.wh-nt__typing { padding-left: 28px; }
.wh-tile--full h3 { font-size: 26px; }
.wh-tile--notion .wh-nt__doc { padding-bottom: 176px; }
.wh-nt__menu { bottom: 10px; left: 84px; }
@media (max-width: 640px) { .wh-nt__menu { left: 60px; } }
.wh-tile--notion .wh-nt__doc { padding-bottom: 202px; }

/* Mini video della pagina Notion (#dipiu) */
.wh-tile--notion .wh-mock { position: relative; }
.wh-tile--notion .wh-nt__doc { padding-bottom: 96px; transition: opacity 400ms var(--ease); }
.wh-nt__doc.is-fade { opacity: 0; }
.wh-nt__new { min-height: 25px; }
.wh-nt__new .wh-nt__grip, .wh-nt__new .wh-nt__caret { display: none; }
.wh-nt__new.is-hover { background: rgba(55,53,47,.05); }
.wh-nt__new.is-hover .wh-nt__grip, .wh-nt__new.is-typing .wh-nt__caret { display: inline-block; }
.wh-nt__row:not(.wh-nt__new) .wh-nt__grip { display: none; }
.wh-nt__row b { transition: transform 150ms var(--ease); }
.wh-nt__menu { bottom: auto; top: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.wh-nt__menu.is-open { opacity: 1; transform: none; }
.wh-nt__menu span { transition: background 120ms; }
.wh-nt__cur { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: transform 700ms cubic-bezier(.4,0,.2,1), opacity 200ms; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.wh-nt__cur.is-on { opacity: 1; }
.wh-nt__cur.is-click path { fill: #444; }
.wh-nt__play { position: absolute; left: 26px; bottom: 26px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(55,53,47,.16); border-radius: 50%; background: #FFFFFF; color: #37352F; font-size: 10px; cursor: pointer; box-shadow: var(--shadow-1); }
.wh-nt__play:focus-visible { outline: 2px solid var(--wh-orange); outline-offset: 2px; }

.wh-tile--notion .wh-nt__doc { padding-bottom: 132px; }

/* Mini video dei riquadri #dipiu (scene.js): senza data-s resta il disegno fermo */
.wh-more .wh-mock { position: relative; }
.wh-sc-b { display: none; }
.wh-sc-play { left: auto; right: 10px; bottom: 10px; width: 24px; height: 24px; font-size: 9px; opacity: .75; }
.wh-sc-play:hover, .wh-sc-play:focus-visible { opacity: 1; }
.wh-sc-chip, .wh-sc-ok { justify-self: start; margin: 0; padding: 4px 10px; border-radius: 10px; background: var(--wh-ok-soft); color: var(--wh-ok); font-size: 12px; font-weight: 600; }
.wh-mock[data-sc] .wh-mk-card, .wh-mock[data-sc] .wh-mk-list li, .wh-mock[data-sc] .wh-sc-chip, .wh-mock[data-sc] .wh-sc-ok { transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
/* Idee */
.wh-mock[data-s="0"] .wh-mk-card { opacity: 0; transform: translateY(12px); }
.wh-mock[data-sc="idee"]:not([data-s="3"]) .wh-mk-card--soft { opacity: 0; transform: translate(14px, 12px); }
.wh-mock[data-sc="idee"] .wh-mk-btn { transition: transform 150ms var(--ease), background 200ms; }
.wh-mock[data-sc="idee"][data-s="2"] .wh-mk-btn { transform: scale(.92); filter: brightness(.9); }
.wh-mock[data-s="3"] .wh-mk-btn { background: var(--wh-ok); }
.wh-mock[data-s="3"] .wh-sc-a, .wh-mock[data-sc="oggi"][data-s="3"] .wh-mk-pill { display: none; }
.wh-mock[data-s="3"] .wh-sc-b { display: inline; }
/* Oggi */
.wh-mock[data-sc="oggi"] .wh-mk-list li:nth-child(2) { transition-delay: 250ms; }
.wh-mock[data-sc="oggi"] .wh-mk-list li:nth-child(3) { transition-delay: 500ms; }
.wh-mock[data-sc="oggi"][data-s="0"] .wh-mk-list li { opacity: 0; transform: translateY(10px); transition-delay: 0ms; }
.wh-mock[data-sc="oggi"] .wh-mk-pill { transition: background 150ms, color 150ms, transform 150ms; }
.wh-mock[data-sc="oggi"][data-s="2"] .wh-mk-pill { background: var(--wh-orange); color: #FFFFFF; transform: scale(.92); }
.wh-mock[data-sc="oggi"][data-s="3"] i.wh-mk-warn { background: var(--wh-ok-soft); color: var(--wh-ok); }
/* Scheda del marchio */
.wh-mock[data-sc="marchio"] dd { transition: clip-path 600ms steps(14); clip-path: inset(0 0 0 0); }
.wh-mock[data-sc="marchio"][data-s="0"] dd, .wh-mock[data-sc="marchio"][data-s="1"] dd:nth-of-type(n+2), .wh-mock[data-sc="marchio"][data-s="2"] dd:nth-of-type(3) { clip-path: inset(0 100% 0 0); transition: none; }
.wh-mock[data-sc="marchio"]:not([data-s="4"]) .wh-sc-chip { opacity: 0; transform: translateY(6px); }
/* Foto e video */
.wh-mock[data-sc="foto"] figure { transition: opacity 300ms, transform 300ms var(--ease); }
.wh-mock[data-sc="foto"] img { transition: object-position 1200ms var(--ease), outline-color 300ms; outline: 2px solid transparent; outline-offset: 2px; object-position: 50% 50%; }
.wh-mock[data-sc="foto"]:not([data-s="3"]) figure { opacity: .45; transform: scale(.95); }
.wh-mock[data-s="0"] figure:nth-child(1), .wh-mock[data-s="1"] figure:nth-child(2), .wh-mock[data-s="2"] figure:nth-child(3) { opacity: 1; transform: none; }
.wh-mock[data-s="0"] figure:nth-child(1) img, .wh-mock[data-s="1"] figure:nth-child(2) img, .wh-mock[data-s="2"] figure:nth-child(3) img { outline-color: var(--wh-orange); object-position: 50% 30%; }
.wh-mock[data-sc="foto"]:not([data-s="3"]) .wh-sc-ok { opacity: 0; transform: translateY(6px); }
.wh-mock[data-sc="foto"] .wh-sc-ok { justify-self: center; }

/* Quaderno in vetrina (07/10): i tre pulsanti, la carta a quadretti e i colori come nell'app. */
.wh-nt__tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.wh-nt__tools span { padding: 4px 10px; border: 1px solid rgba(55,53,47,.16); border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 500; }
.wh-nt__doc { margin: 10px 12px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(55,53,47,.09); background-color: #FFFFFF; background-image: linear-gradient(rgba(55,53,47,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(55,53,47,.07) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.wh-nt__call { display: flex; gap: 8px; padding: 8px 10px; margin: 2px 0 4px; border-radius: 6px; background: rgba(227,161,92,.18); color: #7A4A12; font-size: 13px; }
.wh-nt__c-o { color: #D9730D; }
.wh-nt__c-b { color: #0B6E99; }

/* Quaderno in vetrina: prima si sceglie il modello, poi si lavora (07/10). */
.wh-nt__pick { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
.wh-nt__doc.is-pick .wh-nt__pick { opacity: 1; }
.wh-nt__doc > :not(.wh-nt__pick):not(.wh-nt__cur) { transition: opacity 300ms ease; }
.wh-nt__doc.is-pick > :not(.wh-nt__pick):not(.wh-nt__cur) { opacity: 0; }
.wh-nt__pick > b { font-size: 18px; font-weight: 700; }
.wh-nt__pick > small { margin-bottom: 10px; color: rgba(55,53,47,.6); font-size: 12px; }
.wh-nt__tps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 470px; }
.wh-nt__tp { display: grid; gap: 6px; padding: 7px; border: 1px solid rgba(55,53,47,.14); border-radius: 10px; background: #FFFFFF; font-size: 12px; font-weight: 500; text-align: center; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.wh-nt__tp.is-sel { border-color: #E3A15C; box-shadow: 0 0 0 3px rgba(227,161,92,.28); transform: translateY(-2px); }
.wh-nt__mini { display: block; height: 58px; border: 1px solid rgba(55,53,47,.08); border-radius: 6px; background-color: #FFFFFF; background-repeat: no-repeat; }
.wh-nt__mini--o { background-image: linear-gradient(#E3A15C, #E3A15C), linear-gradient(rgba(227,161,92,.28), rgba(227,161,92,.28)), linear-gradient(rgba(55,53,47,.16), rgba(55,53,47,.16)), linear-gradient(rgba(55,53,47,.16), rgba(55,53,47,.16)); background-size: 40% 6px, 82% 12px, 70% 4px, 55% 4px; background-position: 8px 8px, 8px 20px, 8px 39px, 8px 47px; }
.wh-nt__mini--g { background-image: linear-gradient(#6FB592, #6FB592), linear-gradient(rgba(111,181,146,.35), rgba(111,181,146,.35)), linear-gradient(rgba(55,53,47,.08), rgba(55,53,47,.08)), linear-gradient(rgba(55,53,47,.08), rgba(55,53,47,.08)); background-size: 45% 6px, 84% 9px, 84% 8px, 84% 8px; background-position: 8px 8px, 8px 20px, 8px 31px, 8px 41px; }
.wh-nt__mini--p { background-image: linear-gradient(#B191E0, #B191E0), linear-gradient(rgba(226,143,192,.35), rgba(226,143,192,.35)), linear-gradient(rgba(177,145,224,.3), rgba(177,145,224,.3)), linear-gradient(rgba(55,53,47,.16), rgba(55,53,47,.16)); background-size: 50% 6px, 38% 20px, 38% 20px, 60% 4px; background-position: 8px 8px, 8px 20px, 90% 20px, 8px 47px; }
.wh-nt__mini--w { background-image: linear-gradient(rgba(55,53,47,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(55,53,47,.09) 1px, transparent 1px); background-size: 8px 8px; background-repeat: repeat; }
@media (max-width: 640px) { .wh-nt__tps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wh-nt__mini { height: 40px; } }

/* avviso app in fase di sviluppo (07/10/2026) */
.wh-dev{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:rgba(255,90,31,.12);border:1px solid rgba(255,90,31,.45);color:#FF5A1F;font-size:13px;font-weight:700;letter-spacing:.02em}
.wh-dev-note{margin:0 0 18px;padding:12px 14px;border-left:3px solid #FF5A1F;background:rgba(255,90,31,.08);border-radius:8px;font-size:15px;line-height:1.5;max-width:560px}