/* Siti dei professionisti, grafica 2 «Margine» (docs/design/redesign-siti-clienti.md). I siti in grafica 1 usano site-v1.css.
   Colori e caratteri arrivano dallo stile scelto (riga <style> di render.js): --bg carta, --surface riquadri, --ink testo,
   --muted testo secondario, --accent colore dello stile (pulsanti, pagina a colori), --deco dettagli (filetti, segni,
   mai testo), --soft fondo tenue, --head/--head-w/--body caratteri, --head-scale/--h3-w/--strong-w dalla coppia.
   Marchio di fabbrica BSiteMe, uguale in tutti i siti: pulsanti rettangolari in maiuscolo spaziato, la fascia firma
   con la «b» una volta per pagina (nota 8.7) e il sigillo nel colophon (decisione 14).
   Fondo e testata (nota 8.6): body[data-variante] 'chiara' cambia solo --bg, --surface e --soft (riga <style>),
   'testata' colora la testata con --header-bg; senza attributo è la variante 'classica'. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  /* griglia: 12 colonne dentro --max, due assi (colonna 1 e colonna 5) */
  --max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --header-h: 72px;
  --sticky-top: calc(52px + var(--header-h) + 24px); /* anteprima: barra BSiteMe alta 52 px */
  /* margine della pagina e larghezza di una colonna: 100cqw è la larghezza di main, senza la barra di scorrimento */
  --edge: max(var(--gutter), (100cqw - var(--max)) / 2);
  --col: calc((min(100cqw - 2 * var(--gutter), var(--max)) + var(--col-gap)) / 12);

  /* spazi, base 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: clamp(72px, 9vw, 128px);
  --row-y: clamp(24px, 2vw, 28px);

  /* tipografia */
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-label: .875rem;
  --fs-cap: .8125rem;
  --fs-lead: clamp(1.2rem, 1.05rem + .55vw, 1.45rem);
  --fs-h3: calc(clamp(1.3rem, 1.15rem + .5vw, 1.6rem) * var(--head-scale, 1));
  --fs-h2: calc(clamp(2.1rem, 1.4rem + 2.3vw, 3.25rem) * var(--head-scale, 1));
  --fs-h2-side: calc(clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem) * var(--head-scale, 1));
  --fs-h1: calc(clamp(2.6rem, 1.5rem + 4.4vw, 5rem) * var(--head-scale, 1));
  --fs-h1-page: calc(clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem) * var(--head-scale, 1));
  --fs-quote: calc(clamp(1.9rem, 1.2rem + 2.8vw, 3.5rem) * var(--head-scale, 1));
  --fs-price: 1.375rem;
  --fs-phone: calc(1.75rem * var(--head-scale, 1));

  /* colori ricavati dallo stile */
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);            /* righe tra le voci */
  --rule-chapter: color-mix(in oklab, var(--deco) 70%, var(--ink));   /* filetti di capitolo, almeno 3,1:1 */
  --rule-head: var(--accent);                                         /* testa del filetto "testa" */
  --link-line: color-mix(in oklab, var(--deco) 55%, var(--ink));      /* sottolineature */
  /* bordi di campi, giorni e orari: almeno 3:1 sui fondi (WCAG 1.4.11; negli stili pronti 3,3-3,7:1). lib/contrasto.js
     lo ridefinisce solo se un colore su misura non passa */
  --field-line: color-mix(in srgb, var(--muted) 80%, var(--surface));
  --link: var(--accent);
  --on-color: var(--surface);                                         /* testo su --accent */
  --on-color-2: color-mix(in oklab, var(--surface) 78%, var(--accent)); /* testo secondario su --accent */
  --accent-hover: color-mix(in oklab, var(--accent) 84%, #000);
  --wash: color-mix(in oklab, var(--accent) 7%, var(--surface));      /* riga del primo incontro */
  --light: radial-gradient(ellipse 60% 70% at 85% 0%, color-mix(in oklab, var(--surface) 90%, transparent), transparent 70%);

  /* testata e pulsanti (nota 8.6): uguali allo stile nella variante classica, la variante «testata» li ridefinisce */
  --header-bg: var(--bg);
  --header-ink: var(--ink);
  --header-muted: var(--muted);
  --header-line: var(--rule);
  --cta-bg: var(--accent);
  --cta-ink: var(--on-color);
}
/* «Testata a colori»: testata nel colore scuro dello stile (--header-bg dalla riga <style>), testo chiaro.
   --on-color sulla testata 9,1-15,1:1, --on-color-2 6,1-9,2:1 */
[data-variante='testata'] {
  --header-ink: var(--on-color);
  --header-muted: var(--on-color-2);
  --header-line: color-mix(in srgb, var(--on-color) 16%, transparent);
}
.s-live { --sticky-top: calc(var(--header-h) + 24px); }
@media (max-width: 699px) { :root { --header-h: 64px; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3 { font-family: var(--head); font-weight: var(--head-w, 400); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); font-weight: var(--h3-w, 500); line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Parole lunghe, email e indirizzi vanno a capo invece di uscire dallo schermo */
h1, h2, h3, p, li, dt, dd, summary, figcaption { overflow-wrap: break-word; }
@media (max-width: 559px) { h1, h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
/* il titolo fattuale dell'apertura va a capo solo dove render.js mette il trattino morbido («psico-terapeuta»), non
   dove lo decide il dizionario del browser («psicotera-peuta»): così misura uguale su ogni telefono (revisione del
   23/10, giro 1). overflow-wrap resta la rete di sicurezza per le parole lunghe. */
.s-hero.is-fattuale h1 { -webkit-hyphens: manual; hyphens: manual; }
::selection { background: var(--soft); color: var(--ink); }
.s-tone-colore ::selection, .s-hero-panel ::selection { background: var(--on-color); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.s-tone-colore :focus-visible, .s-hero-panel :focus-visible, .s-ph--colore :focus-visible { outline-color: var(--on-color); }
[hidden] { display: none !important; }
/* titoli solo per lo screen reader (pagine Aree e Percorsi, dove la testata ha già il titolo) */
.s-sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section[id] { scroll-margin-top: calc(52px + var(--header-h) + 16px); }
.s-live section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (max-width: 699px) { section[id] { scroll-margin-top: 64px; } .s-live section[id] { scroll-margin-top: 12px; } }
/* main è il contenitore delle unità cqw (--edge, --col); dentro non ci sono elementi position: fixed */
main { display: block; container-type: inline-size; }
/* Rete di sicurezza contro lo scorrimento di lato (clip non rompe gli elementi fissi) */
main, .s-footer { overflow-x: clip; }
.s-prose a, .s-footer a, .s-card a { overflow-wrap: anywhere; }
/* Cifre nel carattere del testo, allineate (Cormorant ha i numeri "in stile antico") */
.s-price, .s-scheda dd, .s-dato dd, .s-day strong, .s-slot, .s-step-n, .s-targa-reg, .s-reg, .s-phone a, .s-big { font-variant-numeric: lining-nums tabular-nums; }

/* Griglia (§3.5): sotto i 1024 px 8 colonne, sotto i 700 una. I numeri di colonna valgono solo dai 1024 px. */
.s-wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.s-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.s-g > * { min-width: 0; grid-column: 1 / -1; }
@media (max-width: 1023px) { .s-g { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 699px) { .s-g { grid-template-columns: minmax(0, 1fr); } }

/* Testi */
.s-prose { max-width: 66ch; }
.s-prose > :last-child { margin-bottom: 0; }
.s-prose h3 { margin: var(--s6) 0 var(--s2); }
.s-muted { color: var(--muted); font-size: var(--fs-small); }
.s-label { margin: 0; font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); }
.s-link { color: var(--link); font-weight: var(--strong-w, 600); font-size: var(--fs-small); text-decoration: underline; text-decoration-color: var(--link-line); position: relative; }
.s-link:hover { text-decoration-color: currentColor; }
/* Area di tocco di almeno 44 px sui link piccoli, senza cambiarne l'aspetto */
.s-link::after, .s-check a::after { content: ''; position: absolute; inset: -12px -6px; }
.s-check a { position: relative; }
.s-more { margin: var(--s5) 0 0; }
.s-note { margin: var(--s5) 0 0; max-width: 66ch; font-size: var(--fs-small); color: var(--muted); }
.s-block + .s-block { margin-top: var(--s8); }
.s-block > h3 { margin-bottom: var(--s3); }
.s-block > p { color: var(--muted); max-width: 60ch; margin: 0; }
.has-dropcap { text-wrap: wrap; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .has-dropcap::first-letter { -webkit-initial-letter: 3; initial-letter: 3; font-family: var(--head); font-weight: var(--head-w, 400); color: var(--accent); margin-right: .08em; }
}

/* Pulsanti: rettangolari, testo maiuscolo spaziato (marchio BSiteMe) */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--cta-bg); color: var(--cta-ink) !important; border: 0; border-radius: 2px; padding: 14px 24px; font: var(--strong-w, 600) 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s ease; }
.s-btn:hover { background: color-mix(in oklab, var(--cta-bg) 84%, #000); }
.s-btn:disabled { opacity: .45; cursor: not-allowed; }
.s-btn-sm { min-height: 40px; padding: 10px 16px; font-size: 12px; }
.s-btn-ghost { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); }
.s-btn-ghost:hover { background: var(--soft); }
/* pulsante chiaro e pieno sui fondi colorati: --surface con testo --accent, 9,1-15,1:1 */
.s-btn-light { background: var(--on-color); color: var(--accent) !important; }
.s-btn-light:hover { background: var(--soft); }
.s-btn-wide { width: 100%; margin-top: var(--s5); }

/* ---------- Testata (§4.1) ---------- */
.s-header { position: sticky; top: 52px; z-index: 50; background: var(--header-bg); color: var(--header-ink); border-bottom: 1px solid var(--header-line); }
.s-live .s-header { top: 0; }
.s-header-in { display: flex; align-items: stretch; justify-content: space-between; gap: var(--s5); min-height: var(--header-h); }
/* il nome si stringe e va a capo solo se non entra accanto al menù: con nome e cognome al massimo (70 caratteri) il pulsante
   della testata usciva dallo schermo a 1280-1366 px (30/10). Con i nomi che entrano non cambia nulla */
.s-brand { display: flex; align-items: center; gap: var(--s3); flex: 0 1 auto; min-width: 0; text-decoration: none; padding-block: 8px; }
.s-logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
/* logo caricato senza fondo che sulla testata non si leggerebbe (scuro su testata scura, lib/logo.js): piccola base
   chiara arrotondata. Un logo con il suo fondo resta com'è */
.s-logo-base { padding: 4px 7px; background: var(--surface); border-radius: 6px; }
.s-brand-mark { color: var(--accent); display: grid; flex: none; }
.s-brand-mark svg { display: block; width: auto; height: 40px; }
.s-brand-text { display: grid; line-height: 1.2; min-width: 0; }
.s-brand-text strong { font: var(--head-w, 400) calc(20px * var(--head-scale, 1))/1.15 var(--head); }
/* "Nome scritto": dritto, niente corsivo sintetico */
.s-brand-text.is-word strong { font-weight: var(--h3-w, 500); font-size: 23px; }
.s-brand-text > span { margin-top: 2px; font-size: 13px; color: var(--header-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nav { display: flex; flex: none; align-items: center; gap: var(--s5); }
.s-nav a:not(.s-btn) { position: relative; align-self: stretch; display: flex; align-items: center; font-size: 15px; color: var(--header-muted); text-decoration: none; white-space: nowrap; }
.s-nav a:not(.s-btn):hover, .s-nav a[aria-current] { color: var(--header-ink); }
.s-nav a[aria-current] { font-weight: var(--strong-w, 600); }
/* pagina attiva: filetto --accent che coincide con il bordo inferiore della testata */
.s-nav a[aria-current]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
/* hamburger: tre linee che diventano una X, legate ad aria-expanded */
.s-burger { display: none; position: relative; flex: none; align-self: center; width: 48px; height: 48px; margin-right: -12px; background: none; border: 0; cursor: pointer; }
.s-burger span { position: absolute; left: 14px; width: 20px; height: 2px; background: var(--header-ink); transition: transform .2s ease, opacity .2s ease; }
.s-burger span:nth-child(1) { top: 17px; }
.s-burger span:nth-child(2) { top: 23px; }
.s-burger span:nth-child(3) { top: 29px; }
.s-burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.s-burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.s-burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Menù a tendina: sotto i 1024 px, oppure sotto i 1280 se nome e voci sono lunghi (data-dense) */
@media (max-width: 1279px) {
  .s-header[data-dense] .s-burger { display: block; }
  .s-header[data-dense] .s-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--gutter) var(--s4); background: var(--surface); border-bottom: 1px solid var(--header-line); }
  .s-header[data-dense] .s-nav.open { display: flex; }
  .s-header[data-dense] .s-nav a:not(.s-btn) { min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--header-line); }
  .s-header[data-dense] .s-nav a[aria-current]::after { display: none; }
  .s-header[data-dense] .s-nav .s-btn { margin-top: var(--s4); min-height: 48px; }
}
@media (max-width: 1023px) {
  .s-burger { display: block; }
  .s-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--gutter) var(--s4); background: var(--surface); border-bottom: 1px solid var(--header-line); }
  .s-nav.open { display: flex; }
  .s-nav a:not(.s-btn) { min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--header-line); }
  .s-nav a[aria-current]::after { display: none; }
  .s-nav .s-btn { margin-top: var(--s4); min-height: 48px; }
}
/* Testata fissa (tablet): il menù non va oltre lo schermo, scorre al suo interno */
@media (min-width: 700px) and (max-width: 1279px) and (min-height: 561px) {
  .s-nav { max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); overflow-y: auto; overscroll-behavior: contain; }
  .s-live .s-nav { max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); }
}
/* «Testata a colori»: segno del logo, menù e pulsante chiari; il menù a tendina resta nel colore della testata.
   Nell'anteprima una riga chiara separa la testata dalla barra BSiteMe, anch'essa scura (contrasto tra le due 1,1-1,4:1). */
[data-variante='testata'] .s-brand-mark { color: var(--header-ink); }
[data-variante='testata'] .s-header .s-nav { background: var(--header-bg); }
[data-variante='testata'] .s-nav a[aria-current]::after { background: var(--deco); }
[data-variante='testata'] .s-nav .s-btn { background: var(--header-ink); color: var(--header-bg) !important; }
[data-variante='testata'] .s-nav .s-btn:hover { background: var(--soft); }
[data-variante='testata'] .s-header :focus-visible { outline-color: var(--header-ink); }
[data-variante='testata']:not(.s-live) .s-header { border-top: 3px solid var(--bg); }
/* Testata non fissa su telefono e sugli schermi bassi; il nome va a capo (anche su 2-3 righe), mai tagliato */
@media (max-width: 699px), (max-height: 560px) { .s-header { position: relative; top: 0; } }
@media (max-width: 699px) {
  .s-brand { flex: 1 1 auto; }
  .s-brand-text strong { font-size: calc(clamp(15px, 4.4vw, 18px) * var(--head-scale, 1)); overflow-wrap: anywhere; }
  .s-brand-text.is-word strong { font-size: clamp(18px, 5.4vw, 23px); }
  .s-brand-mark svg { height: 34px; }
}

/* ---------- Capitoli (§3.5-3.7) ---------- */
.s-ch { padding-block: var(--section-y); }
.s-ch-rule { grid-column: 1 / -1; height: 1px; margin-bottom: 40px; background: var(--rule-chapter); }
/* la voce del filetto cambia con la coppia di caratteri */
[data-filetto='doppio'] .s-ch-rule { height: 5px; background: none; border-block: 1px solid var(--rule-chapter); }
[data-filetto='testa'] .s-ch-rule { height: 2px; background: linear-gradient(var(--rule-head), var(--rule-head)) 0 0 / 40px 2px no-repeat, linear-gradient(var(--rule-chapter), var(--rule-chapter)) 0 50% / 100% 1px no-repeat; }
.s-ch-num { display: inline-block; transform: translateY(-1.6em); font: var(--strong-w, 600) var(--fs-label)/1 var(--body); color: var(--muted); }
/* toni dei fondi, decisi da compose(): carta, tenue, colore (una volta per pagina), inchiostro (piè di pagina) */
.s-tone-carta { background-color: var(--bg); --tone-bg: var(--bg); }
.s-tone-tenue { background-color: var(--soft); --tone-bg: var(--soft); }
.s-tone-colore { background-color: var(--accent); color: var(--on-color); --tone-bg: var(--accent); --ink: var(--on-color); --muted: var(--on-color-2); --rule: color-mix(in srgb, var(--on-color) 22%, transparent); --rule-chapter: color-mix(in srgb, var(--on-color) 45%, transparent); --rule-head: var(--on-color); --link: var(--on-color); --link-line: var(--on-color-2); }
/* testa (colonne 1-4) e corpo (5-12): sul desktop partono alla stessa altezza, subito dopo il filetto */
.s-ch-head { grid-column: 1 / 5; align-self: start; }
.s-ch-body { grid-column: 5 / 13; }
.s-ch-head h2 { font-size: var(--fs-h2-side); }
.s-ch-intro { margin: var(--s4) 0 0; max-width: 40ch; color: var(--muted); }
.s-ch-head > .s-targa, .s-ch-head > .s-fig, .s-ch-head > .s-addr, .s-ch-head > .s-card, .s-ch-head > .s-phone { margin-top: var(--s6); }
.s-ch-head > .s-fig + .s-targa { margin-top: var(--s7); }
.s-ch-head > :first-child, .s-ch-body > :first-child { margin-top: 0; }
.s-prose + .s-block, .s-ch-body > .s-block:first-child + .s-block { margin-top: var(--s7); }
.s-ch--indice .s-ch-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s3) var(--s5); }
.s-ch--indice .s-ch-head h2 { font-size: var(--fs-h2); max-width: calc(8 * var(--col)); }
.s-ch--indice .s-ch-body { grid-column: 1 / -1; margin-top: var(--s7); }
.s-ch--indice .s-ch-rule + .s-ch-body { margin-top: 0; }
.s-ch-body > .s-prose { max-width: 66ch; }
/* la testa senza immagini resta ferma mentre il corpo scorre, solo su schermi abbastanza alti */
@media (min-width: 1024px) and (min-height: 700px) { .s-ch-head.is-sticky { position: sticky; top: var(--sticky-top); } }
@media (max-width: 1023px) {
  .s-ch-head, .s-ch-body { grid-column: 1 / -1; }
  .s-ch--testo .s-ch-head + .s-ch-body { margin-top: var(--s7); }
  .s-ch-head > .s-targa, .s-ch-head > .s-fig { max-width: 420px; }
  /* l'immagine delle aree, quando la testa sta sopra il corpo, è in 3:2 */
  .s-ch-head > .s-side-fig.s-fig--portrait .s-frame img { aspect-ratio: 3 / 2; }
}
@media (max-width: 699px) {
  .s-ch-rule { margin-bottom: 32px; }
  .s-ch--testo .s-ch-head + .s-ch-body, .s-ch--indice .s-ch-body { margin-top: var(--s6); }
}
/* La fascia firma BSiteMe (nota 8.7, decisione 14; ridisegnata il 14/10/2026), una volta per pagina tra due sezioni:
   il filetto che apre il capitolo scelto da compose() si apre attorno a un piccolo sigillo rotondo con la «b», lo stesso
   del colophon («Sito creato da BSiteMe»), così si riconosce. Un colore solo, quello dei filetti (--rule-chapter, almeno
   3:1, nei colori del cliente), e nessun fondo: regge carta, tenue, colore e la luce dell'invito. Segue la voce del
   filetto (singolo, doppio, testa). Il sigillo sta sempre al centro: così si riconosce a colpo d'occhio. */
.s-ch-rule.s-firma { position: relative; display: flex; align-items: center; gap: 14px; height: auto; margin-bottom: 24px; background: none; border: 0; color: var(--rule-chapter); }
.s-firma::before, .s-firma::after { content: ''; flex: 1 1 0; min-width: 0; height: 1px; background: var(--rule-chapter); }
.s-firma .s-ch-num { position: absolute; left: 0; top: 0; }
.s-firma-sigillo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; }
.s-firma-sigillo svg { width: 15px; height: 20px; }   /* la «b» è 44,29 × 60: riquadri larghi 0,74 volte l'altezza */
/* filetto «doppio»: due tratti e un secondo anello dentro il sigillo, alla stessa distanza (3 px) */
[data-filetto='doppio'] .s-firma::before, [data-filetto='doppio'] .s-firma::after { height: 5px; background: none; border-block: 1px solid var(--rule-chapter); }
[data-filetto='doppio'] .s-firma-sigillo { width: 48px; height: 48px; }
[data-filetto='doppio'] .s-firma-sigillo::before { content: ''; position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 50%; }
/* filetto «testa»: la testa colorata resta all'inizio del filetto */
[data-filetto='testa'] .s-firma::before { height: 2px; background: linear-gradient(var(--rule-head), var(--rule-head)) 0 0 / 40px 2px no-repeat, linear-gradient(var(--rule-chapter), var(--rule-chapter)) 0 50% / 100% 1px no-repeat; }
@media (max-width: 699px) {
  .s-ch-rule.s-firma { gap: 12px; margin-bottom: 20px; }
  .s-firma-sigillo { width: 40px; height: 40px; }
  .s-firma-sigillo svg { width: 13px; height: 18px; }
  [data-filetto='doppio'] .s-firma-sigillo { width: 44px; height: 44px; }
}
/* due capitoli su carta di fila: li separa già il filetto, quindi meno spazio sopra il secondo (niente vuoti) */
.s-tone-carta + .s-tone-carta { padding-top: clamp(24px, 3.4vw, 48px); }
/* tenue e carta vicini (nota 4.9): il cambio di fondo separa già i capitoli, quindi meno spazio sopra il secondo
   (a 1440 px circa 214 px tra i due testi invece di 256, a 834 px 125 invece di 150, a 375 px 120 invece di 144) */
.s-tone-tenue + .s-tone-carta, .s-tone-carta + .s-tone-tenue { padding-top: clamp(48px, 6vw, 88px); }
/* capitolo sotto la scheda a cavallo dell'apertura: fa spazio */
@media (min-width: 700px) { .s-ch.is-under-scheda { padding-top: calc(var(--section-y) + 48px); } }

/* Righe (aree, listino, orientamenti, recapiti): reggono da 1 a 17 voci senza orfani (§4.6) */
.s-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.s-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--row-y); border-top: 1px solid var(--rule); }
.s-row > * { min-width: 0; }
.s-row-name { grid-column: 1 / 5; margin: 0; font: var(--h3-w, 500) var(--fs-h3)/1.25 var(--head); }
.s-row-text { grid-column: 5 / 12; margin: 0; color: var(--muted); max-width: 60ch; }
.s-row-text:empty { display: none; }
.s-ch--testo .s-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.s-ch--testo .s-row-name { grid-column: 1 / 4; }
.s-ch--testo .s-row-text { grid-column: 4 / 9; }
.s-rows--sm .s-row-name { font-size: calc(var(--fs-h3) * .85); }
@media (max-width: 1023px) {
  .s-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .s-row-name { grid-column: 1 / 4; }
  .s-row-text { grid-column: 4 / 9; }
}
@media (max-width: 699px) {
  .s-row, .s-ch--testo .s-row { display: block; }
  .s-row-name { margin-bottom: var(--s2); }
}
@media (min-width: 1024px) {
  .s-rows[data-cols='2'] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: calc(2 * var(--col-gap)); border-bottom: 0; }
  .s-rows[data-cols='2'] .s-row { display: block; }
  .s-rows[data-cols='2'] .s-row-name { margin-bottom: var(--s2); }
}

/* Listino (§4.9): nome, descrizione, prezzo a destra; il primo incontro a pagamento sul fondo --wash */
.s-row--price .s-row-text { grid-column: 5 / 10; }
.s-price { grid-column: 10 / 13; margin: 0; text-align: right; }
.s-price strong { display: block; font: var(--strong-w, 600) var(--fs-price)/1.2 var(--body); }
.s-price span { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--muted); }
.s-row--first.is-paid { background: var(--wash); margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); border-top-color: transparent; }
.s-row--first.is-paid + .s-row { border-top-color: transparent; }
.s-row-cta { grid-column: 10 / 13; margin: var(--s3) 0 0; text-align: right; }
@media (max-width: 1023px) {
  .s-row--price .s-row-text { grid-column: 4 / 7; }
  .s-price, .s-row-cta { grid-column: 7 / 9; }
}
@media (max-width: 699px) {
  .s-row--price { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); }
  .s-row--price .s-row-name { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .s-price { grid-column: 2; grid-row: 1; }
  .s-row--price .s-row-text { grid-column: 1 / -1; margin-top: var(--s2); }
  .s-row-cta { grid-column: 1 / -1; text-align: left; }
}

/* Recapiti a righe (contatti senza modulo) */
.s-row-name.s-label { font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); padding-top: .45em; }
.s-row-big { color: var(--ink); font-size: 18px; }
.s-row-big a { display: inline-flex; align-items: center; min-height: 44px; }
.s-big { font: var(--strong-w, 600) 1.5rem/1.2 var(--body); text-decoration: none; }

/* ---------- Apertura (§4.2-4.4): niente animazioni, la prima immagine ha fetchpriority="high" ---------- */
.s-hero { position: relative; background-color: var(--bg); background-image: var(--light); }
.s-hero-in { align-items: center; }
.s-hero h1 { margin: 0 0 var(--s5); }
/* Capitoli 2 (analisi del motore del 23/10, modifiche 1 e 3): sopra, piccolo, l'occhiello con la frase del motore;
   poi il titolo fattuale (professione, luogo, aree), che è un'informazione e non uno slogan: 36-64 px (BSITEME.md),
   corretti per l'occhio dei caratteri, mai a muro. Il riquadro C tiene la sua misura sul computer; sul telefono
   almeno 36 px (più sotto, con l'apertura C). */
.s-occhiello { margin: 0 0 var(--s3); max-width: 44ch; font-size: clamp(1rem, .94rem + .3vw, 1.2rem); line-height: 1.45; color: var(--muted); }
.s-hero.is-fattuale:not(.s-hero-c) h1 { font-size: max(calc(2.25rem * var(--head-scale, 1)), min(calc(var(--fs-h1) * .8), calc(4rem * var(--head-scale, 1)))); line-height: 1.08; }
/* telefono: volto, titolo e pulsante il più possibile nella prima schermata (743 px liberi a 375×812 sopra la barra
   fissa): spazi più stretti e sottotitolo al corpo del testo. Il ritratto fino a 3:4 sta in 1:1 (is-quadro, revisione
   del giro 2, più sotto), quelli più alti o senza misure in 4:5: quando il pulsante non entra, resta la barra fissa.
   is-lungo: professione e luogo oltre i 60 caratteri (una dicitura «Altro» lunga), il titolo scende al minimo di
   BSITEME.md, 36 px, per tutti i caratteri; più piccolo no. */
@media (max-width: 699px) {
  .s-occhiello { margin-bottom: var(--s2); font-size: 1rem; }
  .s-hero.is-fattuale:not(.s-hero-c) h1 { margin-bottom: var(--s3); line-height: 1.04; }
  .s-hero.is-fattuale.is-lungo:not(.s-hero-c) h1 { font-size: 2.25rem; }
  .s-hero.is-fattuale .s-lead { font-size: var(--fs-body); line-height: 1.45; }
  .s-hero.is-fattuale .s-ctas { margin-top: var(--s4); }
  .s-hero-a.is-fattuale .s-hero-fig { margin-bottom: var(--s3); }
  .s-hero-d.is-fattuale .s-hero-panel { padding-top: var(--s5); }
}
.s-hero.is-long h1 { font-size: calc(var(--fs-h1) * .84); line-height: 1.06; }
.s-lead { margin: 0; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.s-lead strong { color: var(--ink); font-weight: var(--strong-w, 600); }
.s-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin-top: var(--s6); }
.s-cta-note { margin: var(--s4) 0 0; max-width: 52ch; font-size: var(--fs-small); color: var(--muted); }
.s-cta-note a { color: var(--ink); }

/* La scheda pratica: 1-4 celle (Studio, Online, Seduta, Primo incontro) */
.s-scheda { --line: var(--rule); --n: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: var(--s8) 0 0; background: var(--surface); border-top: 2px solid var(--ink); }
.s-scheda[data-n='1'] { --n: 1; }
@media (min-width: 700px) { .s-scheda[data-n='1'] { width: calc(4 * var(--col) - var(--col-gap)); min-width: 280px; } }
.s-scheda[data-n='2'] { --n: 2; }
.s-scheda[data-n='3'] { --n: 3; }
.s-scheda > div { padding: var(--s4) var(--s5) var(--s5); }
.s-scheda > div + div { border-left: 1px solid var(--line); }
.s-scheda dt { font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); }
.s-scheda dd { margin: 4px 0 0; font: var(--strong-w, 600) 18px/1.35 var(--body); color: var(--ink); -webkit-hyphens: auto; hyphens: auto; }
/* nella colonna del testo (pannello D, velo, riquadro C) e sotto i 1024 px: 3 o 4 celle su 2 colonne */
.s-scheda.is-narrow[data-n='3'], .s-scheda.is-narrow[data-n='4'] { --n: 2; }
.s-scheda.is-narrow[data-n='3'] > div, .s-scheda.is-narrow[data-n='4'] > div { border-left: 0; }
.s-scheda.is-narrow[data-n='3'] > div:nth-child(2), .s-scheda.is-narrow[data-n='4'] > div:nth-child(2n) { border-left: 1px solid var(--line); }
.s-scheda.is-narrow[data-n='3'] > div:nth-child(n+3), .s-scheda.is-narrow[data-n='4'] > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.s-scheda.is-narrow[data-n='3'] > div:last-child { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .s-scheda[data-n='3'], .s-scheda[data-n='4'] { --n: 2; }
  .s-scheda[data-n='3'] > div, .s-scheda[data-n='4'] > div { border-left: 0; }
  .s-scheda[data-n='3'] > div:nth-child(2), .s-scheda[data-n='4'] > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .s-scheda[data-n='3'] > div:nth-child(n+3), .s-scheda[data-n='4'] > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .s-scheda[data-n='3'] > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .s-scheda { margin-top: var(--s7); }
  .s-scheda > div { padding: var(--s3) var(--s4) var(--s4); }
  .s-scheda[data-n='2'] { --n: 1; }
  .s-scheda[data-n='2'] > div + div { border-left: 0; border-top: 1px solid var(--line); }
  /* l'indirizzo dello studio su tutta la riga, poi le altre celle a due a due (con 4 celle l'ultima su tutta la riga) */
  .s-hero:not(.s-hero-c) .s-scheda.has-studio > div { grid-column: auto; border-left: 0; border-top: 1px solid var(--line); }
  .s-hero:not(.s-hero-c) .s-scheda.has-studio > div:first-child { grid-column: 1 / -1; border-top: 0; }
  .s-hero:not(.s-hero-c) .s-scheda.has-studio[data-n='4'] > div:last-child { grid-column: 1 / -1; }
  .s-hero:not(.s-hero-c) .s-scheda.has-studio[data-n='3'] > div:nth-child(3), .s-hero:not(.s-hero-c) .s-scheda.has-studio[data-n='4'] > div:nth-child(3) { border-left: 1px solid var(--line); }
  .s-hero-panel .s-scheda.has-studio > div { padding-left: 0; }
  .s-hero-panel .s-scheda.has-studio > div:nth-child(3) { padding-left: var(--s4); }
}
/* scheda a cavallo (A, B, «Sopra»): metà sull'apertura e metà sul capitolo dopo */
@media (min-width: 700px) {
  .s-hero.is-straddle { padding-bottom: 0; }
  .s-hero.is-straddle .s-scheda { position: relative; z-index: 2; margin-bottom: -48px; }
}

/* Figure (§5): tre formati, angoli vivi, didascalia sotto (a pastiglia solo sulle foto al vivo) */
.s-fig { margin: 0; position: relative; }
.s-frame { position: relative; }
.s-frame img { width: 100%; object-fit: cover; }
.s-fig--portrait .s-frame img { aspect-ratio: 4 / 5; object-position: 50% 22%; }
.s-fig--portrait.is-gen .s-frame img { object-position: 50% 40%; }
.s-fig--wide .s-frame img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
.s-fig--band .s-frame img { aspect-ratio: 21 / 9; max-height: 680px; object-position: 50% 45%; }
.s-cap { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s3) 0 0; font-size: var(--fs-cap); line-height: 1.45; letter-spacing: .01em; color: var(--muted); }
.s-cap::before { content: ''; flex: none; width: 24px; height: 1px; background: var(--rule-chapter); transform: translateY(-.32em); }
.s-cap--pill { position: absolute; z-index: 2; right: 12px; bottom: 12px; margin: 0; padding: 4px 10px; border-radius: 2px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); }
.s-cap--pill::before { display: none; }
/* ritratto con il blocco tenue sfalsato, dentro la colonna (apertura A e pagina Chi sono) */
.s-fig--offset .s-frame img { position: relative; z-index: 1; width: 88%; }
.s-fig--offset .s-frame::before { content: ''; position: absolute; inset: 32px 0 -24px 12%; background: var(--soft); }
.s-tone-tenue .s-fig--offset .s-frame::before { background: var(--bg); }
.s-fig--offset .s-cap { margin-top: 36px; }
/* una foto verticale nella fascia non va schiacciata in 21:9: 3:2, che ne mostra di più */
.s-fig--band.is-tall .s-frame img { aspect-ratio: 3 / 2; max-height: 560px; }
@media (max-width: 699px) { .s-fig--band .s-frame img, .s-fig--band.is-tall .s-frame img { aspect-ratio: 4 / 3; } }

/* A · ritratto: testo nelle colonne 1-7, foto 4:5 nelle 8-12; variante larga 3:2 (testo 1-6, foto 7-12) */
.s-hero-a, .s-hero-b { padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 104px); }
.s-hero-a .s-hero-text { grid-column: 1 / 8; }
.s-hero-a .s-hero-fig { grid-column: 8 / 13; }
.s-hero-a.is-wide .s-hero-text { grid-column: 1 / 7; }
.s-hero-a.is-wide .s-hero-fig { grid-column: 7 / 13; }
/* foto di dettaglio dello studio (solo foto vere), sull'angolo in basso a sinistra del ritratto */
/* (selettore più forte di .s-fig--offset .s-frame img, che altrimenti la allarga all'88%) */
.s-fig .s-frame img.s-detail { position: absolute; z-index: 2; left: 0; bottom: -40px; width: 36%; aspect-ratio: 1; object-fit: cover; object-position: 50% 50%; border: 6px solid var(--bg); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 24px 48px -24px rgb(0 0 0 / .28); }
@media (max-width: 1023px) {
  .s-hero-a .s-hero-text { grid-column: 1 / 6; }
  .s-hero-a .s-hero-fig { grid-column: 6 / 9; }
  .s-hero-a.is-wide .s-hero-text { grid-column: 1 / 5; }
  .s-hero-a.is-wide .s-hero-fig { grid-column: 5 / 9; }
  .s-fig .s-frame img.s-detail { display: none; }
}
/* telefono: prima la foto, al vivo, poi il testo, tutto allineato a sinistra.
   Le orizzontali in 4:3; un ritratto verticale (is-tall) resta verticale. Nei siti dei capitoli 2, fino a 3:4 e con le
   misure salvate (is-quadro, revisione del giro 2), in 1:1: 94 px più basso del 4:5, così a 375×812 il pulsante entra
   nella prima schermata. Il fuoco --fuoco-tel lo calcola render.js dalla forma della foto (QUADRO_FINO): si toglie
   soprattutto sotto, e di un 3:4 si vede la fascia dal 6,5% all'81,5%, che tiene interi sia i capelli di un ritratto
   con poca aria sopra (7,8%) sia il mento di uno con molta aria sopra la testa (81%). Le foto più alte (2:3, 9:16) e
   quelle senza misure restano in 4:5, che di un 3:4 mostra dall'1% al 95%: la cornice 4:3 col fuoco al 15% provata il
   23/10 (modifica 1) mostrava solo dal 7% al 63% e tagliava naso e mento (revisione del giro 1). Il pulsante, quando
   non entra nella prima schermata, lo porta la barra fissa (pageScript in render.js). */
@media (max-width: 699px) {
  .s-hero-a { padding-top: 0; }
  .s-hero-a .s-hero-text, .s-hero-a .s-hero-fig, .s-hero-a.is-wide .s-hero-text, .s-hero-a.is-wide .s-hero-fig { grid-column: 1 / -1; }
  .s-hero-a .s-hero-fig { order: -1; margin: 0 calc(-1 * var(--gutter)) var(--s4); }
  .s-hero-a .s-hero-fig .s-frame img { width: 100%; aspect-ratio: 4 / 3; }
  .s-hero-a .s-hero-fig.is-tall .s-frame img { aspect-ratio: 4 / 5; max-height: min(132vw, 78svh); }
  .s-hero-a .s-hero-fig.is-quadro .s-frame img { aspect-ratio: 1 / 1; object-position: var(--fuoco-tel, 50% 22%); }
  .s-hero-a .s-hero-fig .s-frame::before { display: none; }
  /* didascalia a pastiglia sulla foto, come nel pannello D: sotto avrebbe spinto giù il pulsante di 40 px */
  .s-hero-a .s-hero-fig .s-cap { position: absolute; z-index: 2; right: 12px; bottom: 12px; max-width: calc(100% - 24px); margin: 0; padding: 4px 10px; border-radius: 2px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); }
  .s-hero-a .s-hero-fig .s-cap::before { display: none; }
}

/* B · solo parole, con la targa dello studio nelle colonne 9-12 */
.s-hero-b .s-hero-text { grid-column: 1 / 8; grid-row: 1; }
.s-hero-b .s-hero-targa { grid-column: 9 / 13; grid-row: 1; }
.s-hero-b .s-scheda { grid-row: 2; }
@media (max-width: 1023px) {
  .s-hero-b .s-hero-text { grid-column: 1 / -1; }
  .s-hero-b .s-hero-targa { grid-column: 1 / 5; grid-row: 3; margin-top: var(--s6); }
  /* sul tablet la targa sta sotto la scheda: niente cavallo */
  .s-hero-b.is-straddle { padding-bottom: clamp(56px, 7vw, 104px); }
  .s-hero-b.is-straddle .s-scheda { margin-bottom: 0; }
  .s-hero-b.is-straddle + .s-ch.is-under-scheda { padding-top: var(--section-y); }
}
@media (max-width: 699px) { .s-hero-b .s-hero-targa { grid-column: 1 / -1; } }

/* C · foto piena 21:9 con il riquadro --surface che si appoggia sul bordo basso */
.s-hero-c { padding-bottom: var(--s8); }
.s-hero-c .s-hero-media .s-cap { position: absolute; top: 100%; right: var(--edge); width: calc(5 * var(--col) - var(--col-gap)); justify-content: flex-end; text-align: right; }
.s-hero-c .s-hero-card { grid-column: 1 / 7; position: relative; z-index: 1; margin-top: -64px; padding: 40px; background: var(--surface); }
.s-hero-c .s-hero-card h1 { font-size: calc(var(--fs-h1) * .72); }
.s-hero-c .s-scheda { margin-top: var(--s6); background: none; }
.s-hero-c .s-scheda > div:nth-child(odd) { padding-left: 0; }
@media (max-width: 1023px) {
  .s-hero-c .s-hero-card { grid-column: 1 / 8; }
  .s-hero-c .s-hero-media .s-cap { width: auto; max-width: 50%; }
}
@media (max-width: 699px) {
  .s-hero-c .s-hero-card { grid-column: 1 / -1; margin-top: -48px; padding: 24px 20px; }
  .s-hero-c .s-hero-card h1 { font-size: calc(var(--fs-h1) * .84); }
  /* titolo fattuale anche nel riquadro C: almeno 36 px (BSITEME.md); a 320-390 px restava a 31-35 (giro 1) */
  .s-hero-c.is-fattuale .s-hero-card h1 { font-size: max(calc(2.25rem * var(--head-scale, 1)), calc(var(--fs-h1) * .84)); }
  /* nel riquadro la scheda è stretta: una cella per riga */
  .s-hero-c .s-scheda.is-narrow[data-n] { --n: 1; }
  .s-hero-c .s-scheda.is-narrow[data-n] > div { grid-column: auto; padding-left: 0; border-left: 0; }
  .s-hero-c .s-scheda.is-narrow[data-n] > div + div { border-top: 1px solid var(--line); }
  /* sul telefono la didascalia sta sulla foto, sopra il riquadro */
  .s-hero-c .s-hero-media .s-cap { top: auto; bottom: 60px; right: 12px; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 2px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); }
  .s-hero-c .s-hero-media .s-cap::before { display: none; }
}

/* D · pannello --accent fino alla colonna 7, foto 4:5 al vivo dalla colonna 8; il testo parte dall'asse del logo */
.s-hero-d { display: grid; min-height: clamp(520px, 74vh, 720px); grid-template-columns: minmax(0, 1fr) calc(var(--edge) + 5 * var(--col) - var(--col-gap)); }
.s-hero-panel { display: grid; align-items: center; padding: clamp(48px, 7vw, 104px) var(--col-gap) clamp(48px, 7vw, 104px) var(--edge); background: var(--accent); color: var(--on-color); --ink: var(--on-color); --muted: var(--on-color-2); --link: var(--on-color); --link-line: var(--on-color-2); --line: color-mix(in srgb, var(--on-color) 24%, transparent); }
.s-hero-panel .s-hero-text { max-width: calc(6 * var(--col) - var(--col-gap)); }
.s-hero-panel .s-btn { background: var(--on-color); color: var(--accent) !important; }
.s-hero-panel .s-btn:hover { background: var(--soft); }
.s-hero-d .s-hero-media { position: relative; min-height: 320px; }
.s-hero-d .s-hero-media .s-frame { position: absolute; inset: 0; }
.s-hero-d .s-hero-media img { height: 100%; object-position: 50% 22%; }
@media (max-width: 819px) {
  .s-hero-d { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .s-hero-d .s-hero-media { order: -1; min-height: 0; }
  .s-hero-d .s-hero-media .s-frame { position: relative; }
  .s-hero-d .s-hero-media img { height: auto; aspect-ratio: 4 / 3; }
  /* il pannello D porta sempre un ritratto verticale: sul telefono e sul tablet resta in 4:5, non tagliato in 4:3;
     sul telefono, fino a 3:4 e con le misure, in 1:1 (qui sotto) */
  .s-hero-d .s-hero-media.is-tall img { aspect-ratio: 4 / 5; max-height: min(132vw, 78svh); }
  .s-hero-panel { padding: 40px var(--gutter) 48px; }
  .s-hero-panel .s-hero-text { max-width: none; }
}
/* sul telefono meno aria sopra il testo del pannello (modifica 1 del 23/10) e il ritratto fino a 3:4 in 1:1, come
   nell'apertura A (is-quadro, revisione del giro 2) */
@media (max-width: 699px) {
  .s-hero-panel { padding-top: 32px; }
  .s-hero-d .s-hero-media.is-quadro img { aspect-ratio: 1 / 1; object-position: var(--fuoco-tel, 50% 22%); }
}
/* computer: la didascalia a pastiglia (ritratto di esempio, foto dello studio) sta in alto a destra della foto. Il
   pannello cresce col testo e in basso cadeva fuori dalla prima schermata, a 1.029-1.055 px a 1440×900 (revisione del
   23/10, giro 1). Sotto gli 820 px la foto sta sopra il testo e la pastiglia in basso si vede già. */
@media (min-width: 820px) {
  .s-hero-d .s-hero-media .s-cap--pill { top: 12px; bottom: auto; }
}
/* scheda sul colore (D e velo): nessun fondo, etichette in --on-color-2 e valori in --on-color */
.s-hero-panel .s-scheda { --line: color-mix(in srgb, var(--on-color) 24%, transparent); margin-top: var(--s7); background: none; border-top-color: var(--on-color); }
.s-hero-panel .s-scheda > div:nth-child(odd) { padding-left: 0; }

/* «Sopra»: fascia 21:9 a tutta larghezza, poi h1 nelle colonne 1-7 e introduzione nelle 8-12 */
.s-hero-top .s-hero-media .s-cap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; justify-content: flex-end; }
.s-hero-top .s-hero-in { align-items: start; padding-block: var(--s8) clamp(56px, 7vw, 104px); }
.s-hero-top.is-straddle .s-hero-in { padding-bottom: 0; }
.s-hero-top .s-hero-title { grid-column: 1 / 8; }
.s-hero-top .s-hero-title h1 { margin: 0; }
.s-hero-top .s-hero-text { grid-column: 8 / 13; padding-top: .5em; }
@media (max-width: 1023px) {
  .s-hero-top .s-hero-title, .s-hero-top .s-hero-text { grid-column: 1 / -1; }
  .s-hero-top .s-hero-text { padding-top: var(--s5); }
}
/* telefono, capitoli 2: sotto la foto e la didascalia meno aria, come nel velo, così anche con «Sopra» il pulsante
   resta nella prima schermata (modifica 1 del 23/10) */
@media (max-width: 699px) {
  .s-hero-top.is-fattuale .s-hero-in { padding-top: var(--s6); }
  .s-hero-top.is-fattuale .s-hero-text { padding-top: var(--s3); }
}

/* «Sfondo velato»: il velo copre solo la parte con il testo (88% fino al 56%), testo nelle colonne 1-6.
   Sul telefono diventa «Sopra»: foto 4:3 sopra, testo sotto su carta, niente velo.
   Revisione del 23/10 (giro 1): il velo sta sulla foto (.s-frame::after) e non più su tutta l'apertura, così la
   didascalia a pastiglia «Immagine illustrativa generata con IA» gli resta sopra e si legge a ogni larghezza (tra 700 e
   1023 px il velo arriva all'80% e la copriva quasi tutta); e la pastiglia sta in alto a destra, dove il velo è
   trasparente: l'apertura cresce col testo e in basso la didascalia usciva dalla prima schermata (a 1440×900 cadeva a
   920-997 px, con il velo predefinito della modifica 2). */
.s-hero-veil .s-hero-media .s-frame img { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .s-hero-veil { display: grid; min-height: clamp(520px, 74vh, 720px); isolation: isolate; }
  .s-hero-veil .s-hero-media { position: absolute; inset: 0; z-index: -1; }
  .s-hero-veil .s-hero-media .s-frame { position: absolute; inset: 0; }
  .s-hero-veil .s-hero-media .s-frame img { height: 100%; aspect-ratio: auto; object-position: 50% 45%; }
  .s-hero-veil .s-hero-media .s-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, transparent) 0 56%, transparent 90%); }
  .s-hero-veil .s-hero-media .s-cap--pill { top: 12px; bottom: auto; }
  .s-hero-veil .s-hero-in { align-self: center; padding-block: clamp(56px, 8vw, 112px); color: var(--on-color); --ink: var(--on-color); --muted: var(--on-color-2); --link: var(--on-color); --link-line: var(--on-color-2); --line: color-mix(in srgb, var(--on-color) 24%, transparent); }
  .s-hero-veil .s-hero-text { grid-column: 1 / 7; }
  .s-hero-veil .s-btn { background: var(--on-color); color: var(--accent) !important; }
  .s-hero-veil .s-btn:hover { background: var(--soft); }
  .s-hero-veil .s-scheda { margin-top: var(--s7); background: none; border-top-color: var(--on-color); }
  .s-hero-veil .s-scheda > div:nth-child(odd) { padding-left: 0; }
  .s-hero-veil :focus-visible { outline-color: var(--on-color); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .s-hero-veil .s-hero-media .s-frame::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, transparent) 0 80%, transparent 100%); }
}
@media (max-width: 699px) { .s-hero-veil .s-hero-in { padding-block: var(--s6) var(--s7); } }

/* ---------- La targa dello studio (§6.2): piatta, solo dati veri ---------- */
.s-targa { display: grid; justify-items: center; padding: 32px 24px; text-align: center; background: var(--surface); border: 1px solid var(--ink); outline: 1px solid var(--rule); outline-offset: -6px; }
.s-targa-mark { display: grid; margin-bottom: var(--s4); color: var(--deco); }
.s-targa-mark svg { width: auto; height: 40px; }
.s-targa-text { display: grid; justify-items: center; min-width: 0; }
.s-targa-text p { margin: 0; }
.s-targa-name { font: var(--head-w, 400) calc(1.5rem * var(--head-scale, 1))/1.2 var(--head); text-wrap: balance; }
.s-targa-role { margin-top: 4px !important; font-size: 15px; color: var(--muted); }
.s-targa-rule { width: 24px; height: 1px; margin: var(--s4) 0; background: var(--deco); }
.s-targa-where { font-size: var(--fs-small); }
.s-targa-reg { margin-top: var(--s2) !important; font-size: 14px; color: var(--muted); text-wrap: balance; }.s-reg { margin: var(--s5) 0 0; font-size: var(--fs-small); color: var(--muted); max-width: 40ch; }
/* targa compatta in fondo all'apertura B, sul telefono: segno a sinistra, nome e professione a destra */
@media (max-width: 699px) {
  .s-hero-b .s-targa { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: center; justify-items: start; padding: var(--s4) var(--s5); text-align: left; }
  .s-hero-b .s-targa-mark { margin: 0; }
  .s-hero-b .s-targa-mark svg { height: 36px; }
  .s-hero-b .s-targa-text { justify-items: start; }
  .s-hero-b .s-targa-name { font-size: calc(1.15rem * var(--head-scale, 1)); }
  .s-hero-b .s-targa-rule, .s-hero-b .s-targa-where { display: none; }
}

/* ---------- Chi sono ---------- */
.s-lead-p { margin: 0; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; }
.s-lead-p + .s-lead-p { margin-top: var(--s4); } /* biografia corta mostrata tutta in home (nota 4.9) */
.s-about-h { font-size: var(--fs-h2-side); }
.s-about-h + .s-ch-intro { margin-bottom: var(--s6); }
.s-about-h + .s-prose { margin-top: var(--s6); }
/* la formazione come linea del tempo, senza numeri */
.s-timeline { list-style: none; margin: var(--s5) 0 0; padding: 0 0 0 var(--s6); border-left: 1px solid var(--rule-chapter); }
.s-timeline li { position: relative; padding-bottom: var(--s5); }
.s-timeline li:last-child { padding-bottom: 0; }
.s-timeline li::before { content: ''; position: absolute; left: calc(-1 * var(--s6) - 4.5px); top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--deco); }

/* ---------- La voce, pagina a colori (§4.7) ---------- */
.s-voce { padding-block: var(--section-y); }
.s-voce .s-g { align-items: end; row-gap: var(--s6); }
.s-voce-mark { display: grid; justify-items: start; color: var(--deco); }
.s-voce-mark svg { width: auto; height: 40px; }
.s-voce-q { grid-column: 1 / 10; margin: 0; }
.s-voce-q p { position: relative; margin: 0; font: var(--head-w, 400) var(--fs-quote)/1.15 var(--head); letter-spacing: -.01em; text-wrap: balance; color: var(--on-color); }
.s-voce-open { position: absolute; left: -.55em; color: var(--deco); }
.s-voce-text { grid-column: 1 / 9; margin: 0; font: var(--head-w, 400) var(--fs-h2-side)/1.2 var(--head); text-wrap: balance; }
.s-voce-sign { grid-column: 1 / 8; margin: 0; font-size: var(--fs-small); color: var(--on-color-2); }
.s-voce .s-btn { grid-column: 9 / 13; justify-self: end; }
.s-voce--invito .s-btn { grid-column: 10 / 13; }
/* la voce fuori dalla pagina a colori (compose può darle il fondo tenue): testo scuro, mai chiaro sul chiaro */
.s-voce:not(.s-tone-colore) .s-voce-q p { color: var(--ink); }
.s-voce:not(.s-tone-colore) .s-voce-sign { color: var(--muted); }
.s-voce:not(.s-tone-colore) .s-voce-open { color: var(--accent); }
@media (max-width: 1023px) {
  .s-voce-q, .s-voce-text { grid-column: 1 / -1; }
  .s-voce-sign { grid-column: 1 / 5; }
  .s-voce .s-btn, .s-voce--invito .s-btn { grid-column: 5 / 9; }
}
@media (max-width: 699px) {
  .s-voce-open { position: static; }
  .s-voce-sign, .s-voce .s-btn, .s-voce--invito .s-btn { grid-column: 1 / -1; }
  .s-voce .s-btn { justify-self: stretch; }
}

/* ---------- Come lavoro: i 3 passi (la sola numerazione del sito) ---------- */
.s-addr { margin-bottom: 0; font-size: var(--fs-small); }
.s-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.s-step { position: relative; }
/* linea che unisce i cerchi */
.s-step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 48px; right: calc(-1 * var(--s5) + 8px); height: 1px; background: var(--rule-chapter); transform-origin: left; }
.s-step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-chapter); background: var(--tone-bg, var(--bg)); font: var(--strong-w, 600) 15px/1 var(--body); }
.s-step-t { margin: var(--s4) 0 var(--s2); font: var(--h3-w, 500) calc(var(--fs-h3) * .85)/1.25 var(--head); }
.s-step-d { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.s-step-m { display: block; margin-top: var(--s2); color: var(--ink); font-weight: var(--strong-w, 600); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 699px) {
  .s-steps { grid-template-columns: minmax(0, 1fr); }
  .s-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s4); }
  .s-step:not(:last-child)::after { top: 48px; left: 20px; right: auto; bottom: calc(-1 * var(--s5) + 8px); width: 1px; height: auto; transform-origin: top; }
  .s-step-t { margin-top: 8px; }
}
/* foto vere dello studio, una didascalia per il gruppo: 2 affiancate, 3 = una grande e due piccole */
.s-gallery { margin: var(--s8) 0 0; }
.s-gallery-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.s-gallery-in img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.s-gallery[data-n='3'] .s-gallery-in img:first-child { grid-column: 1 / -1; }

/* ---------- Domande frequenti: il segno a due tratti che diventa una X ---------- */
.s-faq details { border-bottom: 1px solid var(--rule); }
.s-faq details:first-child { border-top: 1px solid var(--rule); }
.s-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 48px; padding: var(--s4) 0; cursor: pointer; list-style: none; font: var(--h3-w, 500) var(--fs-h3)/1.3 var(--head); }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary i { position: relative; flex: none; width: 24px; height: 24px; }
.s-faq summary i::before, .s-faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--accent); transform: translate(-50%, -50%); transition: transform .2s ease; }
.s-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.s-faq details[open] summary i::before { transform: translate(-50%, -50%) rotate(45deg); }
.s-faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(135deg); }
.s-faq details p { max-width: 60ch; margin: 0 0 var(--s5); color: var(--muted); }

/* ---------- Contatti: il biglietto da visita e il modulo (§4.11) ---------- */
.s-phone { display: grid; gap: 2px; margin-bottom: 0; }
.s-phone span { font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); }
/* il numero nel carattere del testo: le cifre del carattere dei titoli scendono sotto la riga */
.s-phone a { display: inline-flex; align-items: center; min-height: 48px; font: var(--strong-w, 600) 1.5rem/1.2 var(--body); text-decoration: none; }
.s-card { display: grid; margin-bottom: 0; }
.s-card > div { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.s-ch-head > .s-card:first-child > div:first-child { padding-top: 0; border-top: 0; }
.s-card dt { font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); }
.s-card dd { margin: 2px 0 0; font-size: 18px; line-height: 1.4; }
.s-card dd a { display: inline-flex; align-items: center; min-height: 44px; }
.s-form-intro { max-width: 52ch; color: var(--muted); }
.s-form { display: grid; gap: var(--s4); padding: clamp(20px, 3vw, 32px); background: var(--surface); border-top: 2px solid var(--ink); }
.s-form label { display: grid; gap: 6px; font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); }
.s-form input, .s-form textarea { width: 100%; padding: 12px 14px; font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--field-line); border-radius: 2px; }
.s-form input:focus, .s-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
/* segnaposto nel colore del testo secondario, che correggi() tiene sopra 4,5:1 anche con i colori su misura (il grigio
   del browser restava a 3,9-4,1:1); opacity 1 perché Firefox lo schiarisce (revisione del 23/10, giro 1) */
.s-form input::placeholder, .s-form textarea::placeholder { color: var(--muted); opacity: 1; }
.s-form .s-btn { justify-self: start; }
.s-check { display: flex !important; align-items: center; gap: 10px; min-height: 48px; font-weight: 400 !important; font-size: var(--fs-small) !important; }
.s-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.s-check a { color: var(--accent); }
.s-form-small { margin: 0; font-size: var(--fs-label); color: var(--muted); }
.s-demo { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--deco) 18%, var(--surface)); }
/* riga per le urgenze sopra il pulsante e, dopo l'invio, sotto il ringraziamento (modifiche 7 e 8 del 23/10); il
   ringraziamento sul sito pubblicato al corpo del testo piccolo, non sotto 0,9 rem (BSITEME.md) */
.s-form-sos a, .s-demo-sos a { color: inherit; }
.s-demo-sos { display: block; margin-top: var(--s2); }
[data-contact-form] .s-demo { font-size: var(--fs-small); }
.s-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Invito finale (piani con più pagine), con la luce dell'apertura e il segno in filigrana ---------- */
.s-invito { position: relative; overflow: hidden; background-image: var(--light); }
.s-invito.s-tone-colore { background-image: none; }
.s-invito .s-wrap { position: relative; }
.s-invito .s-g { align-items: end; row-gap: var(--s6); }
.s-invito-text { grid-column: 1 / 8; margin: 0; font: var(--head-w, 400) var(--fs-h2)/1.12 var(--head); letter-spacing: -.015em; text-wrap: balance; }
.s-invito-ctas { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.s-invito-mark { position: absolute; right: var(--gutter); bottom: -24px; color: var(--deco); opacity: .35; pointer-events: none; }
.s-invito-mark svg { display: block; width: auto; height: 160px; }
@media (max-width: 1023px) { .s-invito-text, .s-invito-ctas { grid-column: 1 / -1; } }
@media (max-width: 699px) { .s-invito-text { font-size: calc(var(--fs-h2) * .82); } .s-invito-ctas .s-btn { align-self: stretch; } .s-invito-mark svg { height: 120px; } }

/* ---------- Testate delle pagine interne (§4.13) ---------- */
.s-ph { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); background-image: var(--light); }
.s-ph .s-g { align-items: end; row-gap: var(--s6); }
.s-ph-text { grid-column: 1 / 9; }
.s-ph h1 { font-size: var(--fs-h1-page); line-height: 1.06; letter-spacing: -.02em; }
.s-ph-lead { margin: var(--s4) 0 0; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
/* il dato chiave, come una cella della scheda */
.s-dato { grid-column: 9 / 13; margin: 0; padding-top: var(--s3); border-top: 2px solid var(--ink); }
.s-dato dt { font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--muted); }
.s-dato dd { margin: 4px 0 0; font: var(--strong-w, 600) 22px/1.25 var(--body); }
.s-ph--img .s-ph-text { grid-column: 1 / 8; grid-row: 1; align-self: end; }
.s-ph--img .s-ph-fig { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; }
.s-ph--img .s-dato { grid-column: 1 / 5; grid-row: 2; align-self: start; }
.s-ph--band .s-ph-media { margin-bottom: var(--s7); }
.s-ph--band .s-ph-media .s-cap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; justify-content: flex-end; }
/* famiglia dell'apertura D e di «Sfondo velato»: fascia --accent (con l'immagine della pagina a destra, se c'è) */
.s-ph--colore { padding-bottom: clamp(40px, 5vw, 72px); background: var(--accent); color: var(--on-color); --ink: var(--on-color); --muted: var(--on-color-2); --rule-chapter: color-mix(in srgb, var(--on-color) 45%, transparent); }
.s-ph--colore ::selection { background: var(--on-color); color: var(--accent); }
/* il primo capitolo dopo la testata ha il suo filetto: niente vuoto grande */
.s-ph + .s-ch { padding-top: clamp(32px, 4vw, 56px); }
.s-ph--colore + .s-ch { padding-top: var(--section-y); }
.s-ph--veil { position: relative; isolation: isolate; }
@media (min-width: 700px) {
  .s-ph--veil { padding-block: clamp(80px, 11vw, 150px) clamp(40px, 6vw, 72px); color: var(--on-color); --ink: var(--on-color); --muted: var(--on-color-2); }
  .s-ph--veil .s-ph-media { position: absolute; inset: 0; z-index: -1; }
  .s-ph--veil .s-ph-media .s-frame { position: absolute; inset: 0; }
  .s-ph--veil .s-ph-media img { height: 100%; }
  .s-ph--veil::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, transparent) 0 56%, transparent 90%); }
  .s-ph--veil .s-ph-text { grid-column: 1 / 7; }
}
@media (min-width: 700px) and (max-width: 1023px) { .s-ph--veil::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, transparent) 0 80%, transparent 100%); } }
@media (max-width: 699px) { .s-ph--veil { padding-top: 0; } .s-ph--veil .s-ph-media { margin-bottom: var(--s6); } .s-ph--veil .s-ph-media img { aspect-ratio: 4 / 3; } .s-ph--veil .s-ph-media.is-tall img { aspect-ratio: 1 / 1; } }
@media (max-width: 1023px) {
  .s-ph-text, .s-dato, .s-ph--img .s-ph-text, .s-ph--img .s-ph-fig, .s-ph--img .s-dato { grid-column: 1 / -1; grid-row: auto; }
  .s-dato { max-width: 320px; }
}

/* Firma dell'approfondimento, nella testa ferma: il segno, il nome e la professione */
.s-byline { display: grid; gap: var(--s3); justify-items: start; }
.s-byline-mark { display: grid; color: var(--deco); }
.s-byline-mark svg { width: auto; height: 32px; }
.s-byline p { margin: 0; font-size: var(--fs-small); color: var(--muted); }
/* Segno del professionista sui fondi chiari (targa, firma, voce fuori dalla pagina a colori): --deco da solo è circa 2:1
   sulla carta e sembra sbiadito, qui prende il colore dei filetti di capitolo (almeno 3:1). Sul colophon scuro e sulla
   pagina a colori resta --deco; la filigrana dell'invito resta leggera di proposito. */
.s-targa-mark, .s-byline-mark, .s-voce:not(.s-tone-colore) .s-voce-mark { color: var(--rule-chapter); }
.s-byline strong { color: var(--ink); font-weight: var(--strong-w, 600); }

/* Indice della pagina privacy */
.s-toc ul { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.s-toc a { display: inline-flex; align-items: center; min-height: 40px; color: var(--link); font-size: var(--fs-small); }

/* Prenotazione */
.s-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.s-day { flex: none; width: 72px; padding: 10px 0; border-radius: 2px; border: 1px solid var(--field-line); background: var(--surface); display: flex; flex-direction: column; align-items: center; cursor: pointer; font: inherit; color: var(--ink); }
.s-day span { font-size: 12px; color: var(--muted); }
.s-day strong { font: var(--strong-w, 600) 1.4rem/1.2 var(--body); }
.s-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); }
.s-day.on span { color: var(--on-color-2); }
.s-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 16px; }
.s-slots p { grid-column: 1 / -1; margin: 0; }
.s-slot { min-height: 44px; padding: 10px 0; border-radius: 2px; border: 1px solid var(--field-line); background: var(--surface); cursor: pointer; font: var(--strong-w, 600) 15px var(--body); color: var(--ink); }
.s-slot.on { background: var(--accent); color: var(--on-color); border-color: var(--accent); }
.s-booking + .s-muted, .s-btn-wide + .s-muted, .s-muted + .s-muted { margin-top: var(--s4); }

/* ---------- Piè di pagina: il colophon (§4.15) ---------- */
.s-footer { padding: var(--s9) 0 var(--s7); background: var(--ink); color: color-mix(in srgb, var(--bg) 80%, transparent); font-size: var(--fs-small); --link-line: color-mix(in srgb, var(--bg) 40%, transparent); }
.s-footer .s-g { row-gap: var(--s7); }
.s-footer p { margin: 0 0 var(--s2); }
.s-footer strong { color: var(--bg); font-weight: var(--strong-w, 600); }
.s-footer a { color: inherit; }
.s-footer ul { list-style: none; margin: 0; padding: 0; }
.s-footer li a { display: inline-flex; align-items: center; min-height: 40px; }
.s-colo-id { grid-column: 1 / 5; padding: var(--s5); border: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); }
.s-colo-mark { display: grid; justify-items: start; margin-bottom: var(--s3); color: var(--deco); }
.s-colo-mark svg { width: auto; height: 32px; }
.s-colo-toc { grid-column: 6 / 9; }
.s-colo-contact { grid-column: 10 / 13; }
.s-colo-h { margin: 0 0 var(--s2) !important; font: var(--strong-w, 600) var(--fs-label)/1.4 var(--body); color: var(--bg); }
/* il sigillo BSiteMe, come oggi (decisione 14) */
.s-sign { grid-column: 1 / -1; margin: 0 !important; padding-top: var(--s5); border-top: 1px solid color-mix(in srgb, var(--bg) 16%, transparent); }
.s-sign a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.s-sign-mark { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--deco); display: grid; place-items: center; color: var(--deco); flex: none; }
.s-sign-mark svg { width: 14px; height: 19px; }
.s-sign a > span:last-child { font: 600 10.5px/1.5 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.s-sign a:hover > span:last-child { color: var(--bg); }
@media (max-width: 1023px) {
  .s-colo-id { grid-column: 1 / -1; }
  .s-colo-toc { grid-column: 1 / 5; }
  .s-colo-contact { grid-column: 5 / 9; }
}
@media (max-width: 699px) {
  .s-colo-toc, .s-colo-contact { grid-column: 1 / -1; }
  .s-colo-toc ul { display: flex; flex-wrap: wrap; column-gap: var(--s4); }
}

/* ---------- Ritmo e calma competente (flusso 4 del piano 3.0): body[data-ritmo], solo le anteprime nuove ----------
   Si estende «Margine», non si rifà: stessi colori, caratteri, filetti, pulsanti e firma. Cambiano la scala dei
   titoli e del testo (P3-23, misure ottiche: --head-scale compensa l'occhio piccolo di Cormorant): h1 36-64 px, h2
   29-43, h3 1,35-1,7 rem, testo 17-19 px, niente di importante sotto 0,9 rem; l'interlinea per coppia di caratteri
   (--lh-body da render.js); lo spazio dentro ogni fascia (48 px sul telefono, 96 sul computer, estremi in base 8) e tre
   composizioni nuove che compose() alterna a «divisa» e «piena»: «specchio» (titolo sopra, testo a sinistra, foto o
   targa a destra), «narrativa» (una colonna editoriale stretta) e «processo» (i passi in fila, con i numeri nel
   carattere dei titoli invece dei cerchi: il cerchio resta accento). */
body[data-ritmo] {
  --fs-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-label: .9rem;
  --fs-cap: .9rem;
  --fs-h1: calc(clamp(2.3rem, 1.6rem + 3vw, 4rem) * var(--head-scale, 1));
  --fs-h2: calc(clamp(1.8rem, 1.2rem + 1.9vw, 2.7rem) * var(--head-scale, 1));
  --fs-h2-side: calc(clamp(1.7rem, 1.25rem + 1.2vw, 2.35rem) * var(--head-scale, 1));
  --fs-h3: calc(clamp(1.35rem, 1.22rem + .35vw, 1.7rem) * var(--head-scale, 1));
  --fs-quote: calc(clamp(1.75rem, 1.2rem + 2.2vw, 3rem) * var(--head-scale, 1));
  --section-y: clamp(48px, 6.25vw, 96px);
  --row-y: 24px;
  line-height: var(--lh-body, 1.65);
}
/* l'h1 lungo resta nella scala, mai sotto i 36 px del telefono */
body[data-ritmo] .s-hero.is-long h1 { font-size: max(calc(2.25rem * var(--head-scale, 1)), calc(var(--fs-h1) * .88)); }
body[data-ritmo] .s-ch-rule { margin-bottom: 40px; }
/* pulsanti e sottotitolo della testata a 14 px: il maiuscolo spaziato resta, ma leggibile (P3-23) */
body[data-ritmo] .s-btn, body[data-ritmo] .s-btn-sm { font-size: .9rem; }
body[data-ritmo] .s-brand-text > span { font-size: .9rem; }

/* Il cerchio come accento (P3-24): il ritratto vero, piccolo, accanto alla firma della voce. Mai nell'apertura. */
.s-avatar { display: inline-block; flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 2px var(--tone-bg, var(--bg)), 0 0 0 3px var(--rule-chapter); }
body[data-ritmo] .s-voce-sign { display: flex; align-items: center; gap: var(--s4); }

/* «Specchio»: titolo (e riga d'introduzione) sopra, nelle colonne 1-8; il corpo sotto, nelle stesse colonne; ciò che
   nella forma divisa stava nella testa (foto, targa, indirizzo) a destra, nelle 9-12. Sotto i 1024 px tutto in
   colonna, con la foto dopo il testo. */
body[data-ritmo] .s-ch--specchio .s-ch-head { grid-column: 1 / 9; }
body[data-ritmo] .s-ch--specchio .s-ch-head h2 { font-size: var(--fs-h2); }
body[data-ritmo] .s-ch--specchio .s-ch-body { grid-column: 1 / 9; margin-top: var(--s7); }
body[data-ritmo] .s-ch--specchio .s-ch-side { grid-column: 9 / 13; grid-row: 2 / 4; align-self: start; display: grid; gap: var(--s6); }
body[data-ritmo] .s-ch--specchio .s-ch-side > .s-fig + .s-targa { margin-top: var(--s4); }
body[data-ritmo] .s-ch--specchio .s-ch-body > .s-prose { max-width: 62ch; }
body[data-ritmo] .s-ch--specchio .s-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
body[data-ritmo] .s-ch--specchio .s-row-name { grid-column: 1 / 4; }
body[data-ritmo] .s-ch--specchio .s-row-text { grid-column: 4 / 9; }
@media (max-width: 1023px) {
  body[data-ritmo] .s-ch--specchio .s-ch-head, body[data-ritmo] .s-ch--specchio .s-ch-body, body[data-ritmo] .s-ch--specchio .s-ch-side { grid-column: 1 / -1; grid-row: auto; }
  body[data-ritmo] .s-ch--specchio .s-ch-side { margin-top: var(--s7); max-width: 420px; }
}
@media (max-width: 699px) {
  body[data-ritmo] .s-ch--specchio .s-ch-body { margin-top: var(--s6); }
  body[data-ritmo] .s-ch--specchio .s-row { display: block; }
}

/* «Narrativa»: titolo e testo in una colonna editoriale (colonne 3-10 sul computer), il testo un po' più grande.
   Le situazioni del riconoscimento diventano righe nel carattere dei titoli, separate da un filetto, senza punti. */
body[data-ritmo] .s-ch--narrativo .s-ch-head, body[data-ritmo] .s-ch--narrativo .s-ch-body { grid-column: 3 / 11; }
body[data-ritmo] .s-ch--narrativo .s-ch-head h2 { font-size: var(--fs-h2); max-width: 22ch; }
body[data-ritmo] .s-ch--narrativo .s-ch-head > .s-more, body[data-ritmo] .s-ch--narrativo .s-ch-head > .s-addr { margin-top: var(--s4); }
body[data-ritmo] .s-ch--narrativo .s-ch-head + .s-ch-body { margin-top: var(--s7); }
body[data-ritmo] .s-ch--narrativo .s-prose { font-size: calc(var(--fs-body) * 1.06); }
body[data-ritmo] .s-ch--narrativo .s-timeline { margin: 0; padding: 0; border-left: 0; border-bottom: 1px solid var(--rule); }
body[data-ritmo] .s-ch--narrativo .s-timeline li { padding: var(--s5) 0; border-top: 1px solid var(--rule); font: var(--head-w, 400) var(--fs-h3)/1.35 var(--head); text-wrap: pretty; }
body[data-ritmo] .s-ch--narrativo .s-timeline li::before { display: none; }
body[data-ritmo] #formazione.s-ch--narrativo .s-timeline li { font: inherit; padding-block: var(--s4); }
@media (max-width: 1023px) {
  body[data-ritmo] .s-ch--narrativo .s-ch-head, body[data-ritmo] .s-ch--narrativo .s-ch-body { grid-column: 1 / -1; max-width: 46rem; }
}
@media (max-width: 699px) {
  body[data-ritmo] .s-ch--narrativo .s-ch-head + .s-ch-body { margin-top: var(--s6); }
  body[data-ritmo] .s-ch--narrativo .s-timeline li { padding-block: var(--s4); }
}

/* «Processo»: i tre passi come una tabella di Margine, senza riquadri: sul computer tre colonne con il bordo alto
   della scheda pratica e filetti verticali, il numero grande nel carattere dei titoli nel colore dello stile; sotto i
   1024 px una riga per passo, con il numero nella colonna del margine. */
body[data-ritmo] .s-ch--processo .s-ch-head { grid-column: 1 / -1; }
body[data-ritmo] .s-ch--processo .s-ch-head h2 { font-size: var(--fs-h2); max-width: calc(8 * var(--col)); }
body[data-ritmo] .s-ch--processo .s-ch-body { grid-column: 1 / -1; margin-top: var(--s7); }
body[data-ritmo] .s-ch--processo .s-steps { margin: 0; gap: 0; border-top: 2px solid var(--ink); }
body[data-ritmo] .s-ch--processo .s-step { display: block; padding: var(--s5) var(--s5) var(--s2); }
body[data-ritmo] .s-ch--processo .s-step:first-child { padding-left: 0; }
body[data-ritmo] .s-ch--processo .s-step + .s-step { border-left: 1px solid var(--rule); }
body[data-ritmo] .s-ch--processo .s-step::after { display: none; }
body[data-ritmo] .s-ch--processo .s-step-n { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; font: var(--head-w, 400) calc(2.75rem * var(--head-scale, 1))/1 var(--head); color: var(--accent); }
body[data-ritmo] .s-ch--processo .s-step-t { margin: var(--s4) 0 var(--s2); font-size: var(--fs-h3); }
body[data-ritmo] .s-ch--processo .s-step-d { font-size: var(--fs-body); max-width: 36ch; }
body[data-ritmo] .s-ch--processo .s-steps + .s-more { margin-top: var(--s7); }
@media (max-width: 1023px) {
  body[data-ritmo] .s-ch--processo .s-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-bottom: 1px solid var(--rule); }
  body[data-ritmo] .s-ch--processo .s-step, body[data-ritmo] .s-ch--processo .s-step:first-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s4); padding: var(--s5) 0; border-left: 0; border-top: 1px solid var(--rule); }
  body[data-ritmo] .s-ch--processo .s-step:first-child { border-top: 2px solid var(--ink); }
  body[data-ritmo] .s-ch--processo .s-step + .s-step { border-left: 0; }
  body[data-ritmo] .s-ch--processo .s-step-t { margin-top: 4px; }
  body[data-ritmo] .s-ch--processo .s-step-d { max-width: 60ch; }
}
@media (max-width: 699px) {
  body[data-ritmo] .s-ch--processo .s-ch-body { margin-top: var(--s6); }
  body[data-ritmo] .s-ch--processo .s-step, body[data-ritmo] .s-ch--processo .s-step:first-child { grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s3); padding-block: var(--s4); }
  body[data-ritmo] .s-ch--processo .s-step-n { font-size: calc(2.25rem * var(--head-scale, 1)); }
}

/* ---------- Barra contatti sul telefono: due pulsanti uguali, su una riga ---------- */
.s-dock { display: none; }
@media (max-width: 699px) {
  .s-dock { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); box-shadow: 0 -6px 20px rgb(0 0 0 / .06); transition: transform .2s ease; }
  .s-dock .s-btn { min-height: 48px; padding: 12px; white-space: nowrap; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* si nasconde quando i contatti sono sullo schermo, mentre si scrive nel modulo e, dal 23/10, finché il pulsante
     dell'apertura si vede per intero (render.js, pageScript): nella prima schermata non copre il pulsante, e con un
     pulsante tagliato dal bordo resta, così c'è sempre un pulsante intero da toccare */
  body.is-contatti .s-dock, body.is-eroe .s-dock { transform: translateY(110%); }
  body:has(.s-form :focus) .s-dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .s-btn, .s-faq summary i::before, .s-faq summary i::after, .s-burger span, .s-dock { transition: none; }
}

/* ---------- Ingresso una tantum (§7) ----------
   rv su <html> (nel <head>), rv-w e rv-in dallo script in fondo alla pagina. Solo opacity e transform, quindi
   niente spostamenti del layout; senza JavaScript, con il movimento ridotto e in stampa tutto resta visibile. */
.rv .rv-w { opacity: 0; transform: translate3d(0, 14px, 0); }
.rv .rv-w.rv-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s); }
/* il filetto di capitolo si disegna da sinistra: il filo conduttore che si vede nascere */
.rv .s-ch-rule.rv-w { opacity: 1; transform: scaleX(0); transform-origin: left; }
.rv .s-ch-rule.rv-w.rv-in { transform: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s); }
/* la fascia firma: compare il sigillo, poi i tratti nascono da lui verso i bordi (la «b» non si deforma) */
.rv .s-firma.rv-w { transform: none; }
.rv .s-firma.rv-w .s-firma-sigillo { opacity: 0; transform: scale(.9); }
.rv .s-firma.rv-w::before { transform: scaleX(0); transform-origin: right; }
.rv .s-firma.rv-w::after { transform: scaleX(0); transform-origin: left; }
.rv .s-firma.rv-in .s-firma-sigillo { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.rv .s-firma.rv-in::before, .rv .s-firma.rv-in::after { transform: none; transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s; }
/* la voce: la frase, poi la firma (+120 ms) e il pulsante (+240 ms) */
.rv .s-voce .rv-w.rv-in { transition-duration: .7s; }
.rv .s-voce-sign.rv-w { --rv-d: 120ms !important; }
.rv .s-voce .s-btn.rv-w { --rv-d: 240ms !important; }
/* i 3 passi: la linea si disegna (orizzontale, sul telefono verticale), poi i passi uno dopo l'altro */
.rv .s-steps.rv-w { opacity: 1; transform: none; }
.rv .s-steps.rv-w .s-step-n, .rv .s-steps.rv-w .s-step-c { opacity: 0; transform: translate3d(0, 10px, 0); }
.rv .s-steps.rv-w .s-step::after { transform: scaleX(0); }
.rv .s-steps.rv-in .s-step-n, .rv .s-steps.rv-in .s-step-c { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.rv .s-steps.rv-in .s-step::after { transform: none; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.rv .s-steps.rv-in .s-step:nth-child(2) > * { transition-delay: 80ms; }
.rv .s-steps.rv-in .s-step:nth-child(3) > * { transition-delay: 160ms; }
.rv .s-steps.rv-in .s-step:nth-child(2)::after { transition-delay: 80ms; }
@media (max-width: 699px) { .rv .s-steps.rv-w .s-step::after { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
  .rv .rv-w, .rv .s-ch-rule.rv-w, .rv .s-steps.rv-w .s-step-n, .rv .s-steps.rv-w .s-step-c, .rv .s-steps.rv-w .s-step::after,
  .rv .s-firma.rv-w .s-firma-sigillo, .rv .s-firma.rv-w::before, .rv .s-firma.rv-w::after { opacity: 1; transform: none; transition: none; }
}

/* Stampa: niente barre BSiteMe né contatti rapidi, tutto visibile (anche gli elementi in attesa di animazione) */
@media print {
  .pv-bar, .pv-tip, .pv-notice, .pv-welcome, .s-dock, .s-burger { display: none !important; }
  .s-header { position: static; }
  body { padding-bottom: 0; }
  .rv .rv-w, .rv .s-steps.rv-w .s-step-n, .rv .s-steps.rv-w .s-step-c, .rv .s-steps.rv-w .s-step::after,
  .rv .s-firma.rv-w .s-firma-sigillo, .rv .s-firma.rv-w::before, .rv .s-firma.rv-w::after { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ======================= Barra e finestre dell'anteprima (BSiteMe, uguali in tutti gli stili) ======================= */
.pv-bar { position: sticky; top: 0; z-index: 60; background: #2f2b5b; color: #ece9f8; font: 500 14px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-in { width: min(1120px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 0; flex-wrap: wrap; }
.pv-brand { font-weight: 800; letter-spacing: .02em; color: #ed93d3; display: inline-flex; align-items: center; gap: 8px; }
.pv-brand::before { content: ''; width: 22px; height: 22px; background: url(/favicon.svg) center / contain no-repeat; }
.pv-label { flex: 1; min-width: 180px; color: #d4d0ec; }
.pv-label strong { color: #fff; }
.pv-btn { background: #ed93d3; color: #1f1c3d; border: 0; border-radius: 999px; padding: 9px 18px; font: 700 14px/1 system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pv-btn:hover { background: #f3afdf; }
.pv-paid { background: #24204a; }
.pv-dialog { border: 0; border-radius: 18px; padding: 0; width: min(460px, 100% - 32px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d2a2f; }
.pv-dialog::backdrop { background: rgba(10, 20, 18, .55); }
/* con una finestra aperta la pagina dietro non scorre */
html:has(dialog[open]) { overflow: hidden; }
.pv-form { padding: 28px; display: grid; gap: 14px; }
.pv-form h2 { font: 700 22px/1.2 system-ui, sans-serif; letter-spacing: 0; }
.pv-sum { width: 100%; border-collapse: collapse; font-size: 15px; }
.pv-sum td { padding: 8px 0; border-bottom: 1px solid #e3e8e6; }
.pv-sum td:last-child { text-align: right; white-space: nowrap; }
.pv-total td { font-weight: 800; border-bottom: 0; font-size: 17px; }
/* sotto il totale, in piccolo, se l'addebito è annuale o mensile (decisione 40) */
.pv-total small { display: block; font-size: 12.5px; font-weight: 600; color: #5d6b67; }
.pv-note, .pv-small { font-size: 13px; color: #5d6b67; margin: 0; }
.pv-check { display: flex; gap: 10px; font-size: 14px; align-items: center; min-height: 44px; }
.pv-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: #2f2b5b; }
.pv-pay { background: #2f2b5b; color: #fff; border: 0; border-radius: 999px; padding: 14px; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
.pv-pay:hover { background: #221f45; }
.pv-close { background: none; border: 0; color: #5d6b67; cursor: pointer; font: 500 14px system-ui, sans-serif; min-height: 44px; padding: 10px 14px; }
/* finestre BSiteMe e dati di chi acquista */
.pv-form p { margin: 0; font-size: 15px; line-height: 1.55; color: #1d2a2f; }
.pv-form a.pv-pay { display: block; text-align: center; text-decoration: none; }
.pv-pay-alt { background: #fff; color: #2f2b5b; box-shadow: inset 0 0 0 2px #2f2b5b; }
.pv-pay-alt:hover { background: #f1f0f8; }
.pv-link { background: none; border: 0; color: #ece9f8; font: 600 14px/1 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 4px; white-space: nowrap; }
.pv-link:hover { color: #fff; }
.pv-vers { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid #e3e8e6; }
.pv-vers h3 { font: 700 16px/1.3 system-ui, sans-serif; margin: 0; }
.pv-vers ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-ver { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1.5px solid #e3e8e6; border-radius: 12px; }
.pv-ver.on { border-color: #2f2b5b; }
.pv-ver-off { background: #f6f7f6; border-style: dashed; } /* acquistata, annullata o scaduta: solo per contare */
.pv-sw { display: inline-flex; }
.pv-sw i { width: 18px; height: 34px; display: block; }
.pv-sw i:first-child { border-radius: 6px 0 0 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pv-sw i:last-child { border-radius: 0 6px 6px 0; }
.pv-ver-t { flex: 1; min-width: 140px; display: grid; font: 14px/1.35 system-ui, sans-serif; color: #1d2a2f; }
.pv-ver-t small { color: #5d6b67; font-size: 13px; }
.pv-ver-b { display: flex; align-items: center; gap: 12px; }
.pv-ver-b .pv-pay { padding: 10px 14px; font-size: 14px; text-decoration: none; }
.pv-ver-b .pv-close { text-decoration: underline; }
.pv-ver-b .pv-close, .pv-ver-b .pv-pay { min-height: 44px; display: inline-flex; align-items: center; }
.pv-upsell { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: #f4f2fb; }
.pv-upsell strong { font: 700 15px/1.3 system-ui, sans-serif; color: #2f2b5b; }
.pv-upsell p { font-size: 14px; }
.pv-buyer { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.pv-period { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-period legend { font-weight: 700; margin-bottom: 4px; }
.pv-period-opt { display: flex; gap: 10px; align-items: center; border: 1px solid #e3e8e6; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 15px; }
.pv-period-opt:has(input:checked) { border-color: #2f2b5b; background: #f4f2fa; }
.pv-period-opt input { width: 18px; height: 18px; accent-color: #2f2b5b; }
.pv-period-opt em { font-style: normal; font-size: 12px; font-weight: 700; color: #a83f8c; background: #f4e9f4; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
/* seconda riga del periodo (decisione 40): quanto fa al mese e il confronto con il mensile, senza prezzi barrati */
.pv-period-opt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #5d6b67; }
.pv-err { background: #fdecec; color: #8a1f1f; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.pv-buyer legend { font: 700 15px/1.3 system-ui, sans-serif; margin-bottom: 8px; padding: 0; }
.pv-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.pv-row label { display: grid; gap: 4px; font: 600 13px system-ui, sans-serif; color: #5d6b67; }
.pv-row input { font: 400 16px system-ui, sans-serif; color: #1d2a2f; padding: 10px 12px; border: 1.5px solid #cfd6d3; border-radius: 10px; background: #fff; min-width: 0; }
.pv-row input:focus { outline: none; border-color: #2f2b5b; }
/* Galleria "Cambia immagine" */
.pv-ghost { background: transparent; color: #ece9f8; box-shadow: inset 0 0 0 1px rgba(236, 233, 248, .5); }
.pv-ghost:hover { background: rgba(255, 255, 255, .08); }
.pv-gallery { width: min(820px, 100% - 32px); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 42%), 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.pv-pick { border: 0; padding: 0; background: #eee; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; outline: 3px solid transparent; outline-offset: 2px; }
.pv-pick img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pv-pick.on, .pv-pick:hover { outline-color: #ed93d3; }
/* Immagini su misura dopo il pagamento */
.pv-compare { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid #e3e8e6; }
.pv-compare h3 { font: 700 15px/1.3 system-ui, sans-serif; }
.pv-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.pv-pair figure { margin: 0; display: grid; gap: 4px; }
.pv-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.pv-pair figcaption { font-size: 13px; color: #5d6b67; }
.pv-choose { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pv-choose .pv-pay { padding: 12px 20px; }
.pv-test { background: #8a5d12; margin-top: -4px; font-size: 14px; }
.pv-test:hover { background: #6e4a0e; }
/* Pagamento simulato del primo incontro (solo anteprima ed esempi) */
.pv-methods { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-methods legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.pv-methods-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pv-method { position: relative; display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border: 1.5px solid #e3e8e6; border-radius: 10px; cursor: pointer; font: 600 15px/1.2 system-ui, sans-serif; color: #1d2a2f; }
.pv-method input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-method span { display: inline-flex; align-items: center; gap: 8px; }
.pv-method:has(input:checked) { border-color: #2f2b5b; background: #f4f2fa; }
.pv-method:has(input:focus-visible) { outline: 2px solid #2f2b5b; outline-offset: 2px; }
.pv-form .pv-ok { background: #e8f3ec; color: #1d4a2f; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
/* etichetta in cima alla finestra: è una simulazione, nessun addebito (nota 4.9) */
.pv-form .pv-sim-tag { justify-self: start; margin-bottom: -4px; padding: 4px 10px; border-radius: 999px; background: #fdf6e3; color: #4a3a12; font: 700 12.5px/1.3 system-ui, sans-serif; letter-spacing: .02em; }
/* Piani senza i pagamenti, solo nell'anteprima: link piccolo sotto il pulsante del primo incontro verso la simulazione
   del pagamento online (Pro).
   È di BSiteMe, non del sito: carattere di sistema, come la barra */
.pv-sim-link { display: block; margin: 8px 0 0 auto; padding: 4px 0; min-height: 32px; background: none; border: 0; color: var(--muted); font: 500 13px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-sim-link:hover { color: var(--ink); }
@media (max-width: 699px) { .pv-sim-link { margin-left: 0; } }
/* riga sotto il listino (nota 6.2), con lo stesso carattere di sistema: il link resta nel testo */
.pv-sim-note { margin: var(--s5) 0 0; max-width: 66ch; color: var(--muted); font: 13px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-sim-note .pv-sim-link { display: inline; margin: 0; min-height: 0; padding: 0; }
/* Simulazione dei 5 passi (Pro e Premium, solo anteprima ed esempi): in cima, in ogni passo, «Simulazione · nessun
   addebito», il titolo e a che passo si è; in fondo i pulsanti, fermi anche quando il passo scorre dentro la finestra.
   Il riquadro bianco è quello che vede il paziente, pulito come il calendario di Cal.com, con il colore del sito per
   giorno e orario scelti; fuori dal riquadro le note di BSiteMe. Pulsanti alti almeno 44 px. */
/* altezza fissa (sul telefono quasi tutto lo schermo): passando da un passo all'altro la finestra non salta e i pulsanti
   restano nello stesso punto, in fondo.
   La barra dei pulsanti (.pv-sim-nav) è alta --sim-nav-h: bordo, spazio sopra, pulsante, spazio sotto. Quando il passo
   scorre (passo 1 a 320×640 e 375×667) scroll-padding-bottom tiene libera quell'altezza più l'anello del fuoco: con Tab
   l'orario o il campo che prende il fuoco sale sopra la barra e non ci finisce sotto. Spazi e altezza del pulsante si
   cambiano solo nelle variabili, così finestra e barra restano in sincronia (revisione del 24/10, giro 1). */
.pv-dialog.pv-sim5 { width: min(480px, 100% - 32px); height: min(780px, 100dvh - 48px); --sim-nav-pt: 12px; --sim-nav-pb: 24px; --sim-nav-btn: 48px; --sim-nav-h: calc(1px + var(--sim-nav-pt) + var(--sim-nav-btn) + var(--sim-nav-pb)); scroll-padding-bottom: calc(var(--sim-nav-h) + 10px); }
.pv-sim5 .pv-form { min-height: 100%; grid-template-rows: auto auto auto 1fr; gap: 12px; padding-bottom: 0; }
.pv-sim-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -10px -14px -6px 0; }
.pv-sim5 .pv-sim-top .pv-sim-tag { margin: 0; }
.pv-sim5 .pv-x { width: 44px; height: 44px; }
.pv-sim5 .pv-x:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 0; }
.pv-sim5 h2 { font-size: 19px; line-height: 1.25; }
.pv-sim-prog { display: grid; gap: 8px; }
.pv-form .pv-sim-prog p { font-size: 13.5px; line-height: 1.4; color: #5d6b67; }
.pv-sim-prog strong { color: #2f2b5b; }
.pv-sim-dots { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pv-sim-dots li { flex: 1; height: 4px; border-radius: 2px; background: #e3e8e6; }
.pv-sim-dots li.on { background: #2f2b5b; }
/* senza il prezzo della seduta niente importi né pagamento */
.pv-sim5:not(.is-nopay) [data-nopay-only], .pv-sim5.is-nopay [data-pay-only] { display: none !important; }
.pv-sim-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; animation: pv-sim-in .22s ease-out; }
.pv-sim-step[hidden] { display: none; }
@keyframes pv-sim-in { from { opacity: 0; transform: translateY(6px); } }
.pv-sim-step h3:focus { outline: none; }
.pv-sim-card { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #e3e8e6; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.pv-sim-card h3 { margin: 0; font: 700 17px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d2a2f; }
.pv-sim-who { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid #eef1f0; }
.pv-form .pv-sim-pro { font-size: 13.5px; color: #5d6b67; }
.pv-form .pv-sim-svc { font: 700 18px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-sim-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #3d4a47; }
.pv-sim-meta li { display: inline-flex; align-items: center; gap: 6px; }
.pv-sim-meta svg, .pv-sim-lines svg { flex: none; color: #5d6b67; }
/* il mese, con le frecce fin dove ci sono giorni liberi; i giorni liberi su fondo grigio, gli altri spenti */
.pv-sim-month { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-form .pv-sim-month p { font-weight: 700; text-transform: capitalize; }
.pv-sim-mbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #e3e8e6; border-radius: 10px; background: #fff; color: #1d2a2f; cursor: pointer; }
.pv-sim-mbtn:disabled { opacity: .35; cursor: default; }
.pv-sim-wd, .pv-sim-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pv-sim-wd span { padding: 2px 0; text-align: center; font: 600 11.5px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5d6b67; }
.pv-sim-day, .pv-sim-off { display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 0; border-radius: 8px; font: 600 15px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; }
.pv-sim-day { border: 0; background: #eef0f5; color: #1d2a2f; cursor: pointer; }
.pv-sim-day:hover { box-shadow: inset 0 0 0 1.5px #1d2a2f; }
.pv-sim-off { color: #9aa5a2; font-weight: 400; }
.pv-form .pv-sim-dayname { font-weight: 700; }
/* sfogliando i mesi la scelta resta: questa riga, solo quando il giorno scelto è in un altro mese, lo dice sopra il
   giorno e i suoi orari */
.pv-form .pv-sim-altro { margin-bottom: -8px; font-size: 13.5px; color: #5d6b67; }
.pv-sim-altro[hidden] { display: none; }
.pv-sim-dayname::first-letter, .pv-sim-recap strong::first-letter, .pv-sim5 .pv-sum td::first-letter { text-transform: uppercase; }
.pv-sim-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.pv-sim-slot { min-width: 0; min-height: 44px; padding: 0; border: 1px solid #cfd6d3; border-radius: 8px; background: #fff; color: #1d2a2f; font: 600 15px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.pv-sim-slot:hover { border-color: #1d2a2f; }
.pv-sim-day.on, .pv-sim-slot.on { background: var(--accent); border-color: var(--accent); color: var(--on-color); box-shadow: none; }
.pv-sim-day:focus-visible, .pv-sim-slot:focus-visible, .pv-sim-mbtn:focus-visible, .pv-sim-back:focus-visible, .pv-sim-nav .pv-pay:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
.pv-form .pv-sim-hint, .pv-form .pv-sim-small { font-size: 13.5px; color: #5d6b67; }
.pv-sim-hint[hidden] { display: none; }
/* passi 2-4: l'appuntamento scelto, i dati finti in sola lettura, il pagamento senza campi della carta, la conferma */
.pv-sim-recap { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f4f5f7; }
.pv-sim-recap strong { display: block; }
.pv-form .pv-sim-recap > span { font-size: 14px; line-height: 1.45; color: #5d6b67; }
.pv-sim-field { display: grid; gap: 4px; font: 600 13px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #5d6b67; }
.pv-sim-field input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1.5px solid #dfe4e2; border-radius: 10px; background: #f6f7f6; color: #1d2a2f; font: 400 16px system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-sim5 .pv-sum td { padding: 7px 0; vertical-align: top; }
.pv-sim5 .pv-sum td:first-child { padding-right: 12px; color: #5d6b67; white-space: nowrap; }
.pv-sim5 .pv-sum td:last-child { white-space: normal; }
.pv-sim5 .pv-sum .pv-total td { color: #1d2a2f; }
.pv-sim5 .pv-methods-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-sim5 .pv-method { justify-content: center; padding: 8px 4px; font-size: 13.5px; text-align: center; }
.pv-sim5 .pv-method span { flex-direction: column; gap: 4px; }
.pv-sim-pay .pv-sim-wait, .pv-sim-pay.is-wait .pv-sim-pay-t { display: none; }
.pv-sim-pay.is-wait .pv-sim-wait { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pv-sim-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: pv-spin .8s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-sim-check { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8f3ec; color: #1d6b3f; }
.pv-sim-lines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pv-sim-lines li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font: 14.5px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d2a2f; }
.pv-sim-lines svg { margin-top: 2px; }
/* passo 5: il telefono stilizzato con le due notifiche, poi gli incassi del mese */
.pv-sim-you { margin: 0; font: 700 19px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #1d2a2f; }
.pv-sim-phone { position: relative; width: min(260px, 100%); margin: 2px auto 0; padding: 26px 12px 14px; border: 7px solid #1d2a2f; border-bottom: 0; border-radius: 34px 34px 0 0; background: linear-gradient(165deg, #e2e6f3, #f5eff6); }
.pv-sim-phone::before { content: ''; position: absolute; top: 7px; left: 50%; width: 60px; height: 6px; margin-left: -30px; border-radius: 3px; background: #1d2a2f; }
.pv-sim-notis { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pv-sim-notis li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.pv-sim-app { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #2f2b5b; color: #fff; }
.pv-sim-app.is-pay { background: #1d6b3f; }
.pv-sim-app svg { width: 16px; height: 16px; }
.pv-form .pv-sim-notis p { font-size: 13px; line-height: 1.35; }
.pv-sim-notis small { display: block; font-size: 11.5px; color: #5d6b67; }
.pv-sim-notis strong { display: block; }
.pv-form .pv-sim-incassi { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f4f2fb; color: #2f2b5b; }
.pv-sim-incassi strong { font: 800 22px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* pulsanti in fondo, fermi mentre il passo scorre: Indietro a sinistra, il passo dopo a destra */
.pv-sim-nav { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px; margin: auto -28px 0; padding: var(--sim-nav-pt) 28px var(--sim-nav-pb); border-top: 1px solid #eef1f0; background: #fff; }
.pv-sim-nav .pv-pay { flex: 1; min-height: var(--sim-nav-btn); }
/* «Avanti» spento: la scritta si legge (5:1 sul fondo); accanto, finché manca l'orario, il perché (data-sim-hint) */
.pv-sim-nav .pv-pay:disabled { background: #c9c6dc; color: #4d4973; cursor: not-allowed; }
.pv-sim-nav .pv-sim-hint { flex: 1 1 0; min-width: 0; line-height: 1.35; }
.pv-sim-nav .pv-sim-pay.is-wait { background: #2f2b5b; cursor: progress; }
.pv-sim-back { flex: none; min-height: 44px; padding: 10px 4px; border: 0; background: none; color: #2f2b5b; font: 600 15px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-sim-end { flex-direction: column; align-items: stretch; gap: 4px; }
.pv-sim-end .pv-pay { flex: none; }
.pv-sim-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 420px) {
  .pv-dialog.pv-sim5 { width: calc(100% - 20px); height: calc(100dvh - 24px); --sim-nav-pt: 10px; --sim-nav-pb: 16px; }
  .pv-sim-top { margin-right: -10px; }
  .pv-sim-card { padding: 12px; }
  .pv-sim-nav { margin: auto -16px 0; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pv-sim-step { animation: none; } .pv-sim-spin { display: none; } }

/* Barra dell'anteprima compatta da mobile */
.pv-show-sm { display: none; }
@media (max-width: 560px) {
  .pv-in { gap: 8px 12px; }
  .pv-label { min-width: 0; flex-basis: calc(100% - 110px); }
  /* anteprima e esempi: una riga sola, resta l'icona del marchio e i testi si accorciano */
  .pv-main .pv-in, .pv-demo .pv-in { flex-wrap: nowrap; gap: 8px; }
  .pv-main .pv-brand, .pv-demo .pv-brand { font-size: 0; gap: 0; flex: none; }
  .pv-main .pv-label { display: none; }
  .pv-main .pv-btn { margin-left: auto; }
  .pv-demo .pv-label { flex: 1; font-size: 13px; line-height: 1.25; }
  .pv-demo .pv-btn { padding-inline: 14px; }
  .pv-hide-sm { display: none; }
  .pv-show-sm { display: inline; }
  .pv-btn, .pv-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pv-chip { min-height: 40px; }
  /* «Le tue anteprime (N)» dal telefono si apre da «Modifica» */
  .pv-bar .pv-lg { display: none; }
}
/* Schermi bassi (telefono in orizzontale): la barra scorre via con la pagina */
@media (max-height: 500px) { .pv-bar { position: relative; } }
/* Finestre BSiteMe da telefono: più spazio per il contenuto */
@media (max-width: 420px) {
  .pv-dialog { width: calc(100% - 20px); max-width: none; }
  .pv-form { padding: 22px 16px; }
}

/* «Vuoi cambiare qualcosa?» sotto la barra (nota 8.3): stile per primo e in evidenza, poi layout, foto e risposte,
   ognuno con la sua riga. Sul telefono una riga di pulsanti che scorre di lato, senza andare a capo. */
.pv-tip { background: #f4f2fb; color: #2f2b5b; border-bottom: 1px solid #e3e0f3; font: 500 14px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-tip .pv-in { min-height: 0; padding: 8px 0; gap: 8px 14px; }
.pv-tip-t { flex: none; font-weight: 700; }
.pv-acts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pv-act { display: grid; gap: 2px; align-content: center; text-align: left; background: #fff; color: #2f2b5b; border: 1.5px solid #cfcbe6; border-radius: 10px; padding: 7px 12px; cursor: pointer; font: inherit; white-space: nowrap; }
.pv-act strong { font: 700 13.5px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-act small { font: 12px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #57536f; }
.pv-act:hover { border-color: #2f2b5b; }
.pv-act[data-open='stile'] { background: #2f2b5b; border-color: #2f2b5b; color: #fff; }
.pv-act[data-open='stile'] small { color: #d4d0ec; }
.pv-act[data-open='stile']:hover { background: #221f45; }
.pv-act:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
@media (max-width: 560px) {
  .pv-tip .pv-in { width: 100%; padding: 8px 0; }
  .pv-tip-t, .pv-tip .pv-act small { display: none; }
  .pv-tip .pv-acts { flex: 1; flex-wrap: nowrap; overflow-x: auto; padding-inline: 16px; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pv-tip .pv-acts::-webkit-scrollbar { display: none; }
  .pv-tip .pv-acts.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .pv-tip .pv-act { flex: none; min-height: 40px; border-radius: 999px; padding: 8px 14px; }
}
/* «Prova una prenotazione» (Pro e Premium, solo anteprima ed esempi) apre la simulazione dei 5 passi. Nell'anteprima è
   l'ultima voce della striscia, a destra e staccata dalle modifiche (non è una modifica); sul telefono la seconda, dove
   la striscia scorre di lato senza alzarsi. Negli esempi sta nella barra, prima di «Crea il tuo»: fino ai 820 px
   resta «Prova» con il calendario, sul telefono il segno BSiteMe le lascia il posto e la barra resta alta uguale. */
.pv-acts:has(.pv-act-sim) { flex: 1 1 auto; }
.pv-act-sim { order: 1; margin-left: auto; border-color: #e7b6da; background: #fbf0f8; color: #4b1d42; }
.pv-act-sim strong { display: inline-flex; align-items: center; gap: 6px; }
.pv-act-sim svg { width: 15px; height: 15px; margin: -2px 0; }
.pv-act-sim small { color: #6b3b60; }
.pv-act-sim:hover { border-color: #4b1d42; }
.pv-act-sim:focus-visible { outline: 2px solid #4b1d42; outline-offset: 2px; }
.pv-try { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1.5px solid rgba(236, 233, 248, .6); border-radius: 999px; background: transparent; color: #fff; font: 700 14px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; white-space: nowrap; }
.pv-try:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.pv-try:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv-try svg { flex: none; }
@media (max-width: 820px) { .pv-try .pv-hide-sm { display: none; } }
/* fino ai tablet (1023 px) i due pulsanti dell'esempio si toccano su almeno 44 px e sono alti uguali (revisione del
   24/10, giro 1: a 768 e 820 px «Prova» era alto 36 px). «Crea il tuo» arriva a 44 px con lo spazio sopra e sotto, non
   con inline-flex: lo spazio prima del prezzo (pv-hide-sm) si perderebbe («Crea il tuoda 35 €») */
@media (max-width: 1023px) { .pv-demo .pv-try { min-height: 44px; } .pv-demo .pv-btn { padding-block: 15px; } }
@media (max-width: 560px) {
  /* alta 40 px come le altre voci della striscia (che così non si alza), ma si tocca su 44 px */
  .pv-tip .pv-acts:has(.pv-act-sim) { padding-block: 2px; margin-block: -2px; }
  .pv-tip .pv-act-sim { position: relative; order: 0; margin-left: 0; }
  .pv-tip .pv-act-sim::after { content: ''; position: absolute; inset: -3.5px 0; }
  .pv-demo .pv-try { min-height: 44px; padding: 0 12px; }
  .pv-demo:has(.pv-try) .pv-brand { display: none; }
}
/* sotto i 360 px la scritta dell'esempio va su tre righe: un po' più piccola, così non supera i pulsanti alti 44 px */
@media (max-width: 359px) { .pv-demo:has(.pv-try) .pv-label { font-size: 12px; line-height: 1.2; } }
/* le stesse azioni nella finestra «Vuoi cambiare qualcosa?», una per riga */
.pv-acts-list { display: grid; gap: 8px; }
.pv-acts-list .pv-act { padding: 12px 14px; white-space: normal; }
.pv-acts-list .pv-act strong { font-size: 15px; }
.pv-acts-list .pv-act small { font-size: 13px; }
/* avviso dopo un cambio di stile: le foto scelte dal cliente restano */
.pv-notice { background: #fdf6e3; color: #4a3a12; border-bottom: 1px solid #efe2bd; font: 500 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-notice .pv-in { min-height: 0; padding: 8px 0; flex-wrap: nowrap; }
.pv-notice p { flex: 1; margin: 0; }
.pv-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: inherit; font: 400 22px/1 system-ui, sans-serif; cursor: pointer; }
.pv-x:hover { background: rgba(0, 0, 0, .06); }
@media (max-width: 560px) { .pv-notice .pv-in { flex-wrap: wrap; } .pv-notice p { flex-basis: calc(100% - 48px); } }
/* sotto la testata, solo se abbiamo tolto lo sfondo al logo caricato: «Togli lo sfondo / Tieni lo sfondo» */
.pv-logo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-logo .pv-chip { min-height: 40px; border-color: #4a3a12; color: #4a3a12; background: transparent; }
.pv-logo .pv-chip:hover:not([aria-pressed='true']) { background: rgba(74, 58, 18, .08); }
.pv-logo .pv-chip[aria-pressed='true'] { background: #4a3a12; color: #fdf6e3; cursor: default; }
@media (max-width: 560px) { .pv-logo .pv-in { flex-wrap: wrap; gap: 4px 8px; } .pv-logo p { order: 1; } .pv-logo .pv-x { order: 2; } .pv-logo-btns { order: 3; flex-basis: 100%; } }
/* Sconto di benvenuto (decisione 40, solo nell'anteprima e finché vale): fascia breve sotto la barra con il tempo che
   manca, chiudibile con la ×; nella finestra di pagamento la riga con la data e, nel riepilogo, la riga dello sconto prima
   del totale. Niente muri e niente prezzi barrati: il prezzo pieno resta scritto per intero. */
.pv-welcome { background: #fbf0f8; color: #4b1d42; border-bottom: 1px solid #f0d6e9; font: 500 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; }
.pv-welcome .pv-in { min-height: 0; padding: 6px 0; flex-wrap: nowrap; gap: 8px 14px; }
.pv-welcome p { flex: 1; margin: 0; }
.pv-welcome strong { color: #3a1433; }
.pv-welcome-left { white-space: nowrap; } /* «scade tra 6 giorni e 4 ore» su una riga */
.pv-welcome .pv-chip { border-color: #4b1d42; color: #4b1d42; }
.pv-welcome .pv-chip:hover { background: #4b1d42; color: #fff; }
/* da telefono la fascia resta bassa: «Vedi il prezzo» diventa un link in fondo alla frase (al posto del pulsante), la × a destra */
.pv-welcome-go { background: none; border: 0; padding: 6px 0; margin: -6px 0; font: inherit; font-weight: 700; color: #4b1d42; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
/* da telefono lo sconto su una riga e il tempo che manca sotto, senza il punto in mezzo */
@media (max-width: 560px) { .pv-welcome .pv-in { gap: 8px; padding: 4px 0; } .pv-welcome p { flex: 1; min-width: 0; } .pv-welcome strong { display: block; } .pv-welcome-dot { display: none; } }
.pv-form .pv-promo { background: #fbf0f8; color: #4b1d42; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.pv-off td:last-child { font-weight: 700; color: #8a2f74; }
/* «Hai un codice sconto?»: un link piccolo sotto il pulsante del pagamento (manda il modulo con codice=1) */
.pv-gift-go { background: none; border: 0; padding: 10px 0; margin: -10px 0; font: inherit; font-weight: 600; color: #2f2b5b; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pv-gift-go:hover { color: #1d1a3d; }
/* Finestra di pagamento corta (17/10): una riga di cosa è compreso, la data dello sconto sotto la sua riga, i dati già
   compilati in una riga con «Modifica», i loghi dei metodi di pagamento attivi sotto il pulsante; note più leggere */
.pv-form .pv-incl { margin-top: -4px; font-size: 14px; }
[data-pv-dialog] .pv-note, [data-pv-dialog] .pv-small { font-size: 13.5px; line-height: 1.5; color: #5d6b67; }
.pv-form .pv-center { text-align: center; }
.pv-off small { display: block; font-size: 12.5px; font-weight: 400; color: #5d6b67; }
.pv-more { border: 1px solid #e3e8e6; border-radius: 10px; }
.pv-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; font: 400 14px/1.4 system-ui, sans-serif; color: #1d2a2f; }
.pv-more > summary::-webkit-details-marker { display: none; }
.pv-more-in { display: grid; gap: 10px; padding: 2px 12px 12px; }
.pv-who > summary span { min-width: 0; overflow-wrap: anywhere; }
.pv-who > summary u { flex: none; font-weight: 600; color: #2f2b5b; text-underline-offset: 3px; }
.pv-who .pv-nw { white-space: nowrap; }
.pv-secure { display: grid; justify-items: center; gap: 6px; margin-top: -4px; }
.pv-paylogos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pv-paylogos svg { display: block; }
[data-pv-dialog] .pv-secure .pv-small { display: flex; align-items: center; gap: 5px; font-weight: 600; color: #3d4a47; }
/* Offerte al pagamento (Logo o Kit, 17/10): come le scelte del periodo, un po' più basse; «Facoltativo» piccolo accanto */
.pv-extras .pv-opt { font-weight: 400; font-size: 13px; color: #5d6b67; margin-left: 4px; }
.pv-extra-opt { padding: 8px 12px; }
/* con un'offerta la riga sotto il totale si allunga («addebito annuale + logo una tantum»): va a capo, così non stringe le etichette */
.pv-sum .pv-total small { white-space: normal; max-width: 13em; margin-left: auto; }
/* «Prova un altro stile»: i 6 stili con i campioni di colore, poi fondo e testata; quello attuale è segnato */
.pv-styles { width: min(660px, 100% - 32px); }
.pv-styles h3 { font: 700 16px/1.3 system-ui, sans-serif; margin: 6px 0 0; }
.pv-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.pv-variants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pv-style, .pv-var { display: grid; gap: 8px; align-content: start; text-align: left; padding: 10px; border: 1.5px solid #e3e8e6; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: #1d2a2f; }
.pv-style:hover:not(:disabled), .pv-var:hover:not(:disabled), .pv-style.on, .pv-var.on { border-color: #2f2b5b; box-shadow: 0 0 0 3px rgba(47, 43, 91, .15); }
.pv-style.on, .pv-var.on { cursor: default; }
.pv-style:disabled, .pv-var:disabled { opacity: .6; cursor: progress; }
.pv-style .pv-sw { display: flex; }
.pv-style .pv-sw i { flex: 1; width: auto; height: 30px; }
.pv-style-t { display: grid; gap: 2px; }
.pv-style strong, .pv-var strong { font: 700 14px/1.25 system-ui, sans-serif; }
.pv-style small, .pv-var small { font: 12.5px/1.35 system-ui, sans-serif; color: #5d6b67; }
.pv-style em, .pv-var em { font: 700 11px/1.6 system-ui, sans-serif; color: #a83f8c; background: #f4e9f4; border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.pv-var-pic { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.pv-var-pic i { position: absolute; left: 0; right: 0; top: 0; height: 24%; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); }
.pv-var-pic b { position: absolute; left: 12%; top: 40%; width: 52%; height: 8%; border-radius: 2px; }
.pv-var-pic u { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; }
.pv-form .pv-pay small { font-weight: 500; font-size: 13px; }
@media (max-width: 420px) { .pv-style, .pv-var { padding: 8px; } .pv-style .pv-sw i { height: 24px; } .pv-var small { display: none; } }
.pv-chip { background: #fff; color: #2f2b5b; border: 1.5px solid #2f2b5b; border-radius: 999px; padding: 7px 14px; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.pv-chip:hover { background: #2f2b5b; color: #fff; }
/* "Cambia foto": schede per apertura, Chi sono e aree; il riquadro con le iniziali */
.pv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tab { border: 1.5px solid #cfd6d3; background: #fff; border-radius: 999px; padding: 8px 14px; font: 600 14px/1 system-ui, sans-serif; color: #1d2a2f; cursor: pointer; }
.pv-tab[aria-selected='true'] { background: #2f2b5b; border-color: #2f2b5b; color: #fff; }
.pv-pick-initials { display: grid; place-content: center; justify-items: center; gap: 6px; background: var(--accent); color: var(--deco); }
.pv-pick-initials span { font: var(--head-w, 400) 38px/1 var(--head); letter-spacing: .04em; }
.pv-pick-initials small { font: 500 12px system-ui, sans-serif; color: #fff; opacity: .85; }
/* «Scegli tra le nostre» o «Carica la tua» (nota 8.2) */
.pv-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f0f8; }
.pv-mode { min-height: 40px; border: 0; border-radius: 9px; background: none; color: #2f2b5b; font: 600 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.pv-mode[aria-pressed='true'] { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pv-mode:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
.pv-pane { display: grid; gap: 12px; }
.pv-pane[hidden] { display: none; }
.pv-form .pv-warn { padding: 10px 12px; border-radius: 8px; background: #fdf6e3; color: #4a3a12; font-size: 14px; }
.pv-file { position: relative; display: block; text-align: center; }
.pv-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pv-file:has(input:disabled) { opacity: .6; cursor: progress; }
.pv-file:has(input:focus-visible) { outline: 2px solid #2f2b5b; outline-offset: 3px; }
/* "Cambia layout": tre schede con lo schema; quelle non adatte alla foto restano visibili ma spente */
.pv-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv-layout { display: grid; gap: 6px; align-content: start; text-align: left; padding: 10px; border: 1.5px solid #e3e8e6; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: #1d2a2f; }
.pv-layout:hover:not(:disabled):not([data-off]), .pv-layout.on { border-color: #2f2b5b; box-shadow: 0 0 0 3px rgba(47, 43, 91, .15); }
/* non adatto alla foto: si tocca (richiama la spiegazione sotto) ma resta spento; il motivo resta leggibile */
.pv-layout[data-off] { cursor: help; background: #fafafc; }
.pv-layout[data-off] .pv-lay, .pv-layout[data-off] strong { opacity: .45; }
.pv-layout:disabled { cursor: progress; }
.pv-layout strong { font: 700 14px/1.2 system-ui, sans-serif; }
.pv-layout small { font: 12.5px/1.35 system-ui, sans-serif; color: #5d6b67; }
.pv-lay { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: #f1f0f8; overflow: hidden; }
.pv-lay i { position: absolute; background: var(--deco); }
.pv-lay b { position: absolute; z-index: 1; height: 6px; border-radius: 3px; background: #2f2b5b; opacity: .6; }
.pv-lay-lato i { right: 8%; top: 14%; width: 40%; height: 72%; }
.pv-lay-lato b { left: 8%; top: 40%; width: 38%; }
.pv-lay-lato b + b { top: 56%; width: 26%; }
.pv-lay-sopra i { left: 0; right: 0; top: 0; height: 50%; }
.pv-lay-sopra b { left: 10%; top: 64%; width: 60%; }
.pv-lay-sopra b + b { top: 80%; width: 40%; }
.pv-lay-sfondo i { inset: 0; }
.pv-lay-sfondo::after { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .6; }
.pv-lay-sfondo b { left: 20%; top: 42%; width: 60%; background: #fff; opacity: .95; }
.pv-lay-sfondo b + b { left: 30%; top: 58%; width: 40%; }
/* perché alcuni layout sono spenti, con la via d'uscita (Cambia foto) quando c'è */
.pv-layout-why { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f4f2fb; color: #2f2b5b; font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; outline: none; }
.pv-layout-why p { margin: 0; }
.pv-layout-why .pv-chip { margin-top: 10px; }
.pv-layout-why.is-flash { animation: pv-flash .9s ease-out; }
@keyframes pv-flash { from { box-shadow: 0 0 0 3px #2f2b5b; } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .pv-layout-why.is-flash { animation: none; box-shadow: 0 0 0 2px #2f2b5b; } }
/* da telefono una scheda per riga: lo schema a sinistra, nome e motivo a destra, sempre leggibili */
@media (max-width: 560px) {
  .pv-layouts { grid-template-columns: 1fr; gap: 8px; }
  .pv-layout { grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 8px 12px 8px 8px; min-height: 64px; }
  .pv-layout .pv-lay { grid-row: 1 / 3; }
  .pv-layout strong { align-self: end; font-size: 15px; }
  .pv-layout small { align-self: start; font-size: 13px; }
}

/* ===== Direzione B · struttura (blocco 1, parte A) =====
   Specifica del 26/10 (docs/fonti/landing-page-efficace/prove/direzione-b/spec-blocco1.md, §1-3). Solo
   body[data-dir="b"], cioè le anteprime con il ritmo 3 (render.js, direzioneBOf): togliendo i blocchi della direzione B
   questo file è identico a quello di produzione (tests/direzione-b-struttura.test.mjs).
   - La pagina è una pila di pannelli arrotondati sulla carta calda della tinta, staccati da una striscia di --gap. La
     testata è la parte alta del primo pannello: l'apertura ci sale sotto (margine negativo) e la testata, trasparente in
     cima (is-sopra), lascia vedere il suo colore e la sua trama; quando l'apertura esce dalla vista diventa una barra
     arrotondata con l'ombra (is-staccata). La foto comincia sempre sotto la testata.
   - Colori per contesto (§2.3): apertura e testata --ap, invito e contatti della pagina unica --forte, piè di pagina
     --piede, il resto pannelli chiari (--sup, --t1, --t2, --acc) con --ink. Ogni contesto ridefinisce --ink, --muted,
     --link, i pulsanti (--cta-bg, --cta-ink, --cta-h) e il contorno del focus (--focus, §2.8). Le isole chiare dentro un
     pannello scuro (menù del telefono, scheda del modulo) tornano ai token, con gli alias --b-*.
   - Una scala sola di forme (§2.8): pannelli --r-pan, foto e lastra --r-img, riquadri --r-box, campi --r-campo, tutto ciò
     che si tocca a pillola. Ombre tinte del colore del testo, mai nere. Titoli a peso 600, mai maiuscolo spaziato.
   - La trama dei Blu solo su apertura, invito e piè di pagina (§2.7), spenta con il contrasto alto e in stampa.
   - Le figure dell'apertura e di «Chi sono» (cornici, lastra, velo, foto tonda) sono della parte B, nel suo blocco più
     sotto; qui solo dove stanno. */
body[data-dir="b"] {
  --gap: 8px;
  --r-pan: 28px;
  --pan-x: 20px;
  --pan-y: 48px;
  --r-img: 20px;
  --r-box: 18px;
  --r-campo: 14px;
  --lastra-off: 10px;
  --header-h: 64px;
  --gutter: var(--pan-x);
  --col-gap: clamp(16px, 2.2vw, 32px);
  /* gli alias dei token per le isole chiare dentro i pannelli scuri (custom property: il valore si fissa qui) */
  --b-ink: var(--ink);
  --b-ink2: var(--ink2);
  --b-link: var(--link);
  --b-cta-ink: var(--cta-ink);
  --b-cta-h: var(--cta-h);
  --cta-bg: var(--cta);
  --focus: var(--ink);
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-chapter: color-mix(in srgb, var(--ink) 30%, transparent);
  --link-line: currentColor;
  --light: none;
  --ombra-foto: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 10px 28px -8px color-mix(in srgb, var(--ink) 28%, transparent);
  --ombra-scheda: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  --ombra-testata: 0 10px 30px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  /* scala tipografica (§2.6): testo 17-18 px, titoli 600 con --head-ls, h1 32-56 px, h2 28-44 px */
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .9375rem;
  --fs-cap: .875rem;
  --fs-lead: 1.1875rem;
  --fs-h1-page: calc(clamp(2rem, 1.6rem + 1.6vw, 3rem) * var(--head-scale, 1));
  --fs-h2: calc(clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem) * var(--head-scale, 1));
  --fs-h2-side: var(--fs-h2);
  --fs-h3: calc(clamp(1.25rem, 1.1rem + .5vw, 1.5rem) * var(--head-scale, 1));
  --section-y: var(--pan-y);
  background: var(--carta);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body, 1.62);
}
@media (min-width: 700px) {
  body[data-dir="b"] { --gap: 10px; --r-pan: 32px; --pan-x: 32px; --pan-y: 72px; --r-box: 20px; --lastra-off: 12px; }
}
@media (min-width: 1024px) {
  body[data-dir="b"] { --gap: 12px; --r-pan: 36px; --pan-x: clamp(40px, 4vw, 64px); --pan-y: 96px; --r-box: 24px; --lastra-off: 16px; --header-h: 80px; --fs-body: 1.125rem; }
}
/* la lastra cresce con la foto (correzioni del blocco 1, punto 15): a 16 px dietro una foto di 466 px sembrava un'ombra
   fuori registro; circa 24 px a 1440 */
@media (min-width: 1280px) { body[data-dir="b"] { --lastra-off: clamp(16px, 1.7vw, 28px); } }

/* ---------- La pila di pannelli (§3.1) ---------- */
body[data-dir="b"] :is(.s-header, main, .s-footer) { margin-inline: var(--gap); }
body[data-dir="b"] .s-pan { margin-top: var(--gap); padding-block: var(--pan-y); border-radius: var(--r-pan); }
body[data-dir="b"] main > .s-pan:first-child { margin-top: calc(-1 * var(--header-h)); }
body[data-dir="b"] .s-pan--sup { background-color: var(--sup); }
body[data-dir="b"] .s-pan--t1 { background-color: var(--t1); }
body[data-dir="b"] .s-pan--t2 { background-color: var(--t2); }
body[data-dir="b"] .s-pan--acc { background-color: var(--acc); --link: var(--b-ink); }
body[data-dir="b"] :is(.s-pan--ap, .s-header) {
  background-color: var(--ap); color: var(--ap-ink);
  --ink: var(--ap-ink); --muted: var(--ap-ink2); --link: var(--ap-ink); --cta-bg: var(--pill); --cta-ink: var(--pill-ink); --cta-h: var(--pill-h); --focus: var(--pill);
  --rule: color-mix(in srgb, var(--ap-ink) 22%, transparent);
}
body[data-dir="b"] .s-pan--forte {
  background-color: var(--forte); color: var(--forte-ink);
  --ink: var(--forte-ink); --muted: var(--forte-ink2); --link: var(--forte-ink); --cta-bg: var(--pill-f); --cta-ink: var(--pill-f-ink); --cta-h: var(--pill-f-h); --focus: var(--pill-f);
  --rule: color-mix(in srgb, var(--forte-ink) 22%, transparent);
}
body[data-dir="b"] .s-footer {
  margin-block: var(--gap); padding: var(--pan-y) 0 28px; border-radius: var(--r-pan); background-color: var(--piede); color: var(--piede-ink2);
  --ink: var(--piede-ink); --muted: var(--piede-ink2); --link: var(--piede-ink); --focus: var(--piede-ink); --link-line: color-mix(in srgb, var(--piede-ink) 45%, transparent);
}
/* la trama dei Blu (§2.7): mai sotto le foto (le coprono) né sotto i pulsanti (hanno il loro fondo pieno) */
body[data-dir="b"] :is(.s-pan--ap, .s-pan--forte, .s-footer) { background-image: var(--trama, none); }
@media (prefers-contrast: more), (forced-colors: active), print { body[data-dir="b"] :is(.s-pan--ap, .s-pan--forte, .s-footer) { background-image: none; } }
/* le isole chiare dentro i pannelli scuri: i token di sempre */
body[data-dir="b"] :is(.s-form, .s-nav-tendina) {
  color: var(--b-ink);
  --ink: var(--b-ink); --muted: var(--b-ink2); --link: var(--b-link); --cta-bg: var(--cta); --cta-ink: var(--b-cta-ink); --cta-h: var(--b-cta-h); --focus: var(--b-ink);
  --rule: color-mix(in srgb, var(--b-ink) 16%, transparent);
}
body[data-dir="b"] ::selection { background: var(--lastra); color: var(--b-ink); }
body[data-dir="b"] :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Testi (§2.6) ---------- */
body[data-dir="b"] :is(h1, h2, h3) { font-weight: var(--head-w, 600); text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
body[data-dir="b"] :is(h1, h2) { letter-spacing: var(--head-ls, -.02em); }
body[data-dir="b"] h2 { line-height: 1.1; }
body[data-dir="b"] h3 { font-weight: var(--h3-w, 600); letter-spacing: -.01em; line-height: 1.25; }
body[data-dir="b"] p { text-wrap: pretty; }
body[data-dir="b"] :is(.s-note, .s-ch-intro, .s-muted, .s-form-intro) { color: var(--muted); }
body[data-dir="b"] .s-prose a, body[data-dir="b"] .s-note a:not(.s-link) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
body[data-dir="b"] .s-link { color: var(--link); font-size: var(--fs-small); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
body[data-dir="b"] .s-link-cta { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--fs-body); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: .28em; }
/* i link da soli (Tariffe, Altre domande, Continua a leggere…) si toccano su 44 px; quelli dentro una frase allargano
   solo l'area di tocco, senza spostare le righe */
body[data-dir="b"] :is(.s-more, .s-step-k, .s-addr) .s-link { display: inline-flex; align-items: center; min-height: 44px; }
body[data-dir="b"] :is(.s-note .s-link, .s-colo-sos a, .s-sos a, .s-check a) { padding-block: 13px; margin-block: -13px; }
body[data-dir="b"] .s-solo-tel { display: none; }
@media (max-width: 699px) { body[data-dir="b"] .s-solo-tel { display: block; } }
/* «Vai al contenuto»: il primo Tab della pagina */
body[data-dir="b"] .s-skip { position: absolute; left: 16px; top: -120px; z-index: 100; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--cta); color: var(--cta-ink); font: 600 16px/1 var(--body); text-decoration: none; }
body[data-dir="b"] .s-skip:focus { top: 12px; }

/* ---------- Pulsanti (§2.8): a pillola, in testo normale, alti 52 (apertura e invito), 48 o 44 (testata) ---------- */
body[data-dir="b"] .s-btn { min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--cta-bg); color: var(--cta-ink) !important; font: 600 17px/1.2 var(--body); letter-spacing: 0; text-transform: none; transition: background-color .15s ease, transform .15s ease; }
body[data-dir="b"] .s-btn:hover { background: var(--cta-h, var(--cta-bg)); }
body[data-dir="b"] .s-btn:active { transform: translateY(1px); }
body[data-dir="b"] :is(.s-ctas, .s-invito-ctas) .s-btn { min-height: 52px; }
body[data-dir="b"] .s-btn-sm { min-height: 48px; padding: 0 22px; font-size: 16px; }
body[data-dir="b"] .s-btn-ghost { background: transparent; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
body[data-dir="b"] .s-btn-ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-dir="b"] .s-btn-wide { max-width: 28rem; }
body[data-dir="b"] :is(.s-ctas, .s-invito-ctas) .s-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font: 600 var(--fs-body)/1.3 var(--body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em; }

/* ---------- Testata (§3.2) ---------- */
body[data-dir="b"] .s-header { position: sticky; top: calc(52px + var(--gap)); margin-top: var(--gap); border: 0; border-radius: var(--r-pan) var(--r-pan) 0 0; transition: background-color .15s ease, border-radius .15s ease, box-shadow .15s ease; }
body[data-dir="b"].s-live .s-header { top: var(--gap); }
/* sopra la testata ferma, la striscia di carta: niente pagina che scorre tra la testata e il bordo */
body[data-dir="b"] .s-header::before { content: ''; position: absolute; left: calc(-1 * var(--gap)); right: calc(-1 * var(--gap)); bottom: 100%; height: var(--gap); background: var(--carta); }
body[data-dir="b"] .s-header.is-sopra { background-color: transparent; }
body[data-dir="b"] .s-header.is-staccata { border-radius: var(--r-pan); background-image: var(--trama, none); box-shadow: var(--ombra-testata); }
body[data-dir="b"] .s-header-in { align-items: center; gap: var(--s4); min-height: var(--header-h); }
body[data-dir="b"] .s-brand { gap: 12px; min-height: 44px; padding-block: 8px; color: var(--ap-ink); }
body[data-dir="b"] .s-brand-mark { color: var(--ap-ink); }
body[data-dir="b"] .s-brand-mark svg { height: 40px; }
/* il nome con la scala dei titoli della voce (correzioni del blocco 1, punto 13: il Cormorant a 17 px era debole) */
body[data-dir="b"] .s-brand-text strong { font: var(--head-w, 600) calc(17px * var(--head-scale, 1))/1.15 var(--head); letter-spacing: -.01em; }
body[data-dir="b"] .s-brand-text > span { margin-top: 3px; font-size: 14px; line-height: 1.3; color: var(--ap-ink2); }
@media (min-width: 1024px) { body[data-dir="b"] .s-brand-text strong { font-size: calc(19px * var(--head-scale, 1)); } }
@media (max-width: 359px) { body[data-dir="b"] .s-brand-text strong { font-size: calc(16px * var(--head-scale, 1)); } }
/* al telefono il nome al massimo su due righe e senza la professione, che il titolo dice già (correzioni del blocco 1,
   punto 24): con un nome lungo il blocco usciva dal pannello, sopra la striscia di carta */
@media (max-width: 699px) {
  body[data-dir="b"] .s-brand-text > span { display: none; }
  body[data-dir="b"] .s-brand-text strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
/* il menù sul computer: voci a pillola, la pagina attiva su un fondo appena più chiaro, mai un filetto */
body[data-dir="b"] .s-header .s-nav { gap: 2px; }
body[data-dir="b"] .s-header .s-nav a:not(.s-btn) { align-self: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 600 16px/1 var(--body); color: var(--ap-ink); }
body[data-dir="b"] .s-header .s-nav a:not(.s-btn):hover { background: color-mix(in srgb, var(--ap-ink) 12%, transparent); }
body[data-dir="b"] .s-header .s-nav a[aria-current] { background: color-mix(in srgb, var(--ap-ink) 16%, transparent); }
body[data-dir="b"] .s-header .s-nav a[aria-current]::after { display: none; }
body[data-dir="b"] .s-header .s-nav .s-btn { min-height: 44px; margin-left: 12px; padding: 0 22px; font-size: 16px; }
/* finché il pulsante dell'apertura si vede, quello della testata ha solo il contorno: un elemento solo che spicca
   (correzioni del blocco 1, punto 4; is-cta-vista la mette pageScript). Senza JavaScript resta pieno. */
@media (min-width: 1024px) {
  body[data-dir="b"] .s-header.is-cta-vista:not([data-dense]) .s-nav .s-btn { background: transparent; color: var(--ap-ink) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
}
@media (min-width: 1280px) {
  body[data-dir="b"] .s-header.is-cta-vista .s-nav .s-btn { background: transparent; color: var(--ap-ink) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
}
/* l'etichetta breve del pulsante sul computer stretto, la lunga dai 1280 px e nel menù del telefono (§3.14) */
body[data-dir="b"] .s-lab-lunga { display: none; }
@media (min-width: 1280px) {
  body[data-dir="b"] .s-header[data-lunga] .s-lab-breve { display: none; }
  body[data-dir="b"] .s-header[data-lunga] .s-lab-lunga { display: inline; }
}
/* il menù del telefono: un tondo da 48 px che apre una tendina chiara (§3.2) */
body[data-dir="b"] .s-burger { width: 48px; height: 48px; margin-right: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ap-ink2); }
body[data-dir="b"] .s-burger span { left: 15px; width: 18px; height: 2px; border-radius: 2px; background: var(--ap-ink); }
@media (max-width: 1023px) {
  body[data-dir="b"] .s-header .s-nav { left: auto; right: 0; top: calc(100% + 6px); width: min(320px, 100%); padding: 8px; border: 0; border-radius: 20px; background: var(--sup); box-shadow: var(--ombra-testata); }
  body[data-dir="b"] .s-header .s-nav a:not(.s-btn) { min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; color: var(--b-ink); }
  body[data-dir="b"] .s-header .s-nav a:not(.s-btn):hover { background: color-mix(in srgb, var(--b-ink) 8%, transparent); }
  body[data-dir="b"] .s-header .s-nav a[aria-current] { background: var(--t1); }
  body[data-dir="b"] .s-header .s-nav .s-btn { margin: 8px 0 0; min-height: 48px; background: var(--cta); color: var(--b-cta-ink) !important; --focus: var(--b-ink); }
  body[data-dir="b"] .s-header .s-nav .s-lab-breve { display: none; }
  body[data-dir="b"] .s-header .s-nav .s-lab-lunga { display: inline; }
  body[data-dir="b"] .s-header .s-nav :focus-visible { outline-color: var(--b-ink); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-dir="b"] .s-header[data-dense] .s-nav { left: auto; right: 0; top: calc(100% + 6px); width: 320px; padding: 8px; border: 0; border-radius: 20px; background: var(--sup); box-shadow: var(--ombra-testata); }
  body[data-dir="b"] .s-header[data-dense] .s-nav a:not(.s-btn) { min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; color: var(--b-ink); }
  body[data-dir="b"] .s-header[data-dense] .s-nav .s-btn { margin: 8px 0 0; background: var(--cta); color: var(--b-cta-ink) !important; }
  body[data-dir="b"] .s-header[data-dense] .s-nav .s-lab-breve { display: none; }
  body[data-dir="b"] .s-header[data-dense] .s-nav .s-lab-lunga { display: inline; }
}
@media (max-height: 560px) { body[data-dir="b"] .s-header { position: relative; top: 0; } }

/* ---------- Apertura (§3.3): la colonna del testo; la foto la dispone qui, le sue cornici sono della parte B ---------- */
body[data-dir="b"] .s-hero { padding-block: calc(var(--header-h) + 8px) 28px; background-color: var(--ap); }
body[data-dir="b"] .s-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
body[data-dir="b"] .s-hero-media { order: -1; margin-bottom: 20px; }
body[data-dir="b"] .s-hero-text, body[data-dir="b"] .s-hero-capo { min-width: 0; }
body[data-dir="b"] .s-occhiello { margin: 0 0 8px; max-width: 46ch; font: 400 15px/1.45 var(--body); letter-spacing: 0; color: var(--ap-ink2); }
body[data-dir="b"] .s-hero h1 { margin: 0; font-size: calc(clamp(2rem, 1.55rem + 1.9vw, 3.5rem) * var(--head-scale, 1)); line-height: 1.08; }
body[data-dir="b"] .s-evid { font-style: normal; color: var(--evid); }
body[data-dir="b"] .s-hero .s-lead { margin: 14px 0 0; max-width: 46ch; font-size: var(--fs-body); line-height: 1.5; color: var(--ap-ink2); }
body[data-dir="b"] .s-hero .s-ctas { margin-top: 18px; gap: 8px 24px; }
body[data-dir="b"] .s-hero-righe { margin-top: 16px; max-width: 52ch; font-size: 15px; line-height: 1.45; color: var(--ap-ink2); font-variant-numeric: lining-nums; }
body[data-dir="b"] .s-hero-righe p { margin: 0; }
body[data-dir="b"] .s-hero-righe p + p { margin-top: 4px; }
/* la frase firmata (§3.4): un corsivo con le grazie, mai sintetico; la firma sotto, piccola */
body[data-dir="b"] .s-frase { margin: 14px 0 0; }
body[data-dir="b"] .s-frase blockquote { margin: 0; }
body[data-dir="b"] .s-frase p { margin: 0; padding-bottom: 2px; font: italic var(--corsivo-w, 400) calc(clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) * var(--corsivo-scale, 1)) / 1.18 var(--corsivo); font-synthesis: none; letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
body[data-dir="b"] .s-frase figcaption { margin-top: 6px; font: 400 15px/1.4 var(--body); color: var(--muted); }
@media (max-width: 699px) {
  body[data-dir="b"] .s-hero .s-ctas { flex-direction: column; align-items: flex-start; }
  body[data-dir="b"] .s-occhiello.is-no-tel { display: none; }
  /* ripiego del telefono (§3.3.3): la frase sotto i pulsanti, sempre nell'apertura */
  body[data-dir="b"] .s-hero.is-frase-sotto .s-hero-text { display: flex; flex-direction: column; }
  body[data-dir="b"] .s-hero.is-frase-sotto .s-hero-text > :is(.s-frase, .s-lead) { order: 1; margin-top: 20px; }
  body[data-dir="b"] .s-hero.is-frase-sotto .s-hero-text > .s-hero-righe { order: 2; }
}
@media (min-width: 700px) {
  body[data-dir="b"] .s-occhiello { font-size: 16px; }
  body[data-dir="b"] .s-hero-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  body[data-dir="b"] .s-hero-in > * { grid-row: 1; }
  body[data-dir="b"] .s-hero-text { grid-column: 1 / 7; }
  body[data-dir="b"] .s-hero-media { grid-column: 7 / 13; order: 0; margin: 0; }
  body[data-dir="b"] .s-hero[data-lato="sinistra"] .s-hero-text { grid-column: 7 / 13; }
  body[data-dir="b"] .s-hero[data-lato="sinistra"] .s-hero-media { grid-column: 1 / 7; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  body[data-dir="b"] .s-hero { padding-block: calc(var(--header-h) + 40px) 40px; }
  body[data-dir="b"] .s-hero-text { grid-column: 1 / 8; }
  body[data-dir="b"] .s-hero-media { grid-column: 8 / 13; }
  body[data-dir="b"] .s-hero[data-lato="sinistra"] .s-hero-text { grid-column: 6 / 13; }
  body[data-dir="b"] .s-hero[data-lato="sinistra"] .s-hero-media { grid-column: 1 / 6; }
  body[data-dir="b"] .s-hero .s-frase { margin-top: 20px; }
  body[data-dir="b"] .s-hero .s-ctas { margin-top: 28px; }
  /* «Chiama» accanto al pulsante (correzioni del blocco 1, punto 11): andava sotto in metà dei siti, a caso. Accanto
     dove la colonna del testo è di 7 colonne o più (almeno 526 px a 1024); con il velo la colonna è di 5 (369 px a 1024,
     482 a 1440) e i due non ci stanno: lì «Chiama» va sempre sotto, in tutti i siti */
  body[data-dir="b"] .s-hero .s-ctas { flex-wrap: nowrap; column-gap: 24px; }
  body[data-dir="b"] .s-hero .s-ctas .s-link { white-space: nowrap; }
  body[data-dir="b"] .s-hero.s-ap--sfondo .s-ctas { flex-direction: column; align-items: flex-start; row-gap: 8px; }
}
/* «Solo testo» (§3.3.2): al telefono titolo, la frase in grande (la protagonista) e il pulsante; sul computer due
   colonne, a sinistra titolo, pulsanti e riga, a destra la frase grande con la firma. Senza frase, una colonna sola con
   il sottotitolo più grande. Nessun filetto tra le colonne: l'unico filetto del sito è quello del listino (§3.12). */
body[data-dir="b"] .s-hero.s-ap--parole { padding-bottom: 36px; }
body[data-dir="b"] .s-hero.s-ap--parole .s-frase { margin-top: 18px; }
body[data-dir="b"] .s-hero.s-ap--parole .s-frase p { font-size: calc(clamp(1.75rem, 1.3rem + 1.9vw, 3rem) * var(--corsivo-scale, 1)); line-height: 1.14; }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-hero.s-ap--parole { padding-block: calc(var(--header-h) + 56px) 64px; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text { grid-column: 1 / -1; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text:has(> .s-frase) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: calc(2 * var(--col-gap)); align-items: center; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text:has(> .s-frase) > * { grid-column: 1; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text > .s-frase { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding-left: var(--col-gap); }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text > .s-lead { max-width: 40ch; margin-top: 18px; font-size: clamp(1.375rem, 1.1rem + .6vw, 1.625rem); line-height: 1.45; color: var(--ap-ink); }
  /* senza frase (correzioni finali del blocco 1, punto 4; nota 10): una colonna sola centrata di 10/12, il titolo più
     grande e il pannello più basso, invece di titolo e pulsanti a sinistra e mezzo pannello vuoto */
  body[data-dir="b"] .s-hero.s-ap--parole:not(:has(.s-frase)) { padding-block: calc(var(--header-h) + 48px) 56px; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text:not(:has(> .s-frase)) { grid-column: 2 / 12; display: flex; flex-direction: column; align-items: center; text-align: center; }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text:not(:has(> .s-frase)) h1 { max-width: 20ch; font-size: calc(clamp(2.75rem, 1.5rem + 2.6vw, 4.25rem) * var(--head-scale, 1)); }
  body[data-dir="b"] .s-hero.s-ap--parole .s-hero-text:not(:has(> .s-frase)) .s-ctas { justify-content: center; }
}

/* ---------- Capitoli dentro i pannelli (§3.1): le composizioni di sempre ---------- */
body[data-dir="b"] .s-ch-head h2 { font-size: var(--fs-h2); }
body[data-dir="b"] .s-ch-intro { margin-top: 12px; max-width: 46ch; }
body[data-dir="b"] .s-ch-rule { display: none; }
body[data-dir="b"] .s-ch-head > .s-more { margin-top: var(--s5); }
body[data-dir="b"] .s-more { margin-top: var(--s5); }
body[data-dir="b"] .s-note { margin-top: var(--s5); font-size: var(--fs-small); }
body[data-dir="b"] .s-prose { max-width: 62ch; }
body[data-dir="b"] .s-prose p { margin-bottom: .9em; }
/* l'indice dell'informativa e degli approfondimenti: voci alte 44 px come tutto ciò che si tocca (§3.15) */
body[data-dir="b"] .s-toc a { min-height: 44px; }
@media (max-width: 1023px) { body[data-dir="b"] .s-ch--testo .s-ch-head + .s-ch-body { margin-top: var(--s6); } }

/* ---------- Come si comincia (§3.6): cifre grandi, niente linee, frecce o icone ---------- */
body[data-dir="b"] .s-ch--processo .s-ch-head h2 { max-width: 22ch; }
body[data-dir="b"] .s-ch--processo .s-ch-body { margin-top: 28px; }
body[data-dir="b"] .s-ch--processo .s-steps { margin: 0; gap: 22px; border: 0; }
body[data-dir="b"] .s-ch--processo .s-step,
body[data-dir="b"] .s-ch--processo .s-step:first-child { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 0; border: 0; }
body[data-dir="b"] .s-ch--processo .s-step + .s-step { border-left: 0; }
body[data-dir="b"] .s-ch--processo .s-step::after { display: none; }
body[data-dir="b"] .s-ch--processo .s-step-n { display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; font: var(--head-w, 600) calc(4rem * var(--head-scale, 1))/.85 var(--head); font-variant-numeric: lining-nums; letter-spacing: -.03em; color: var(--vivo); }
body[data-dir="b"] .s-ch--processo .s-step-t { margin: 2px 0 6px; font: var(--h3-w, 600) var(--fs-h3)/1.2 var(--head); }
body[data-dir="b"] .s-ch--processo .s-step-d { margin: 0; max-width: 40ch; font-size: var(--fs-body); color: var(--muted); }
body[data-dir="b"] .s-ch--processo .s-step-m { color: var(--ink); }
body[data-dir="b"] .s-step-k { margin: 6px 0 0; }
body[data-dir="b"] .s-ch--processo .s-steps + .s-more { margin-top: 20px; }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-ch--processo .s-ch-body { margin-top: 48px; }
  body[data-dir="b"] .s-ch--processo .s-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  body[data-dir="b"] .s-ch--processo .s-step,
  body[data-dir="b"] .s-ch--processo .s-step:first-child { display: block; }
  body[data-dir="b"] .s-ch--processo .s-step-n { margin-bottom: 18px; font-size: calc(7rem * var(--head-scale, 1)); }
  body[data-dir="b"] .s-ch--processo .s-steps + .s-more { margin-top: 32px; }
}

/* ---------- Riconoscimento e liste: senza pallini né righe ---------- */
body[data-dir="b"] .s-timeline, body[data-dir="b"] .s-ch--narrativo .s-timeline { margin: var(--s4) 0 0; padding: 0; border: 0; }
body[data-dir="b"] .s-timeline li { padding: 0; border: 0; }
body[data-dir="b"] .s-timeline li::before { display: none; }
/* le situazioni sono la voce dei pazienti: il corsivo con le grazie della frase firmata, senza schede (correzioni del
   blocco 1, punto 19: quattro riquadri bianchi uguali erano lo schema da modello che il §1.3 vieta); la prima più grande */
body[data-dir="b"] #riconoscimento .s-timeline { display: grid; gap: 28px; max-width: 34em; }
body[data-dir="b"] #riconoscimento .s-timeline li { font: italic var(--corsivo-w, 400) calc(clamp(1.25rem, 1.1rem + .6vw, 1.625rem) * var(--corsivo-scale, 1))/1.3 var(--corsivo); font-synthesis: none; color: var(--ink); text-wrap: pretty; }
body[data-dir="b"] #riconoscimento .s-timeline li:first-child { font-size: calc(clamp(1.25rem, 1.1rem + .6vw, 1.625rem) * 1.15 * var(--corsivo-scale, 1)); }
body[data-dir="b"] .s-timeline--2 li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: var(--s4); padding-block: var(--s2); }
body[data-dir="b"] .s-timeline--2 li > span:only-child { grid-column: 1 / -1; }
body[data-dir="b"] .s-anno { font-weight: 600; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Aree (§3.7): la principale grande, le altre in 2 colonne ---------- */
body[data-dir="b"] .s-area-main { max-width: 62ch; }
body[data-dir="b"] .s-area-main h3 { margin-bottom: 10px; font-size: calc(var(--fs-h3) * 1.25); }
body[data-dir="b"] .s-area-first { margin: 0 0 10px; font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); }
body[data-dir="b"] .s-area-main p:not(.s-area-first) { margin: 0; color: var(--muted); }
body[data-dir="b"] .s-area-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px calc(2 * var(--col-gap)); margin: 36px 0 0; padding: 0; }
body[data-dir="b"] .s-area-grid h3 { margin-bottom: 6px; font-size: var(--fs-h3); }
body[data-dir="b"] .s-area-grid p { margin: 0; color: var(--muted); }
body[data-dir="b"] .s-area-grid--sm { margin-top: 16px; gap: 20px calc(2 * var(--col-gap)); }
body[data-dir="b"] .s-area-grid--sm h3 { font-size: calc(var(--fs-h3) * .85); }
body[data-dir="b"] .s-area-also { margin-top: 48px; }
body[data-dir="b"] #aree .s-side-fig .s-frame img { border-radius: var(--r-img); }
@media (max-width: 699px) { body[data-dir="b"] .s-area-grid, body[data-dir="b"] .s-area-grid--sm { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; } }
/* senza l'immagine accanto, al computer il titolo a sinistra e le aree in una colonna a destra, come le domande
   (correzioni del blocco 1, punto 12: la principale da sola in mezza riga sembrava rimasta fuori dalla griglia). Il
   titolo resta in vista mentre le aree scorrono, sotto la testata anche nell'anteprima (52 px di barra in più) */
@media (min-width: 1024px) {
  body[data-dir="b"] #aree.s-ch--indice .s-ch-head { grid-column: 1 / 6; grid-row: 1; align-self: start; display: block; position: sticky; top: calc(var(--header-h) + 72px); }
  body[data-dir="b"] #aree.s-ch--indice .s-ch-body { grid-column: 7 / 13; grid-row: 1; margin-top: 0; }
  body[data-dir="b"] #aree.s-ch--indice .s-area-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Chi sono nella home (§3.8): titolo, foto, testo; niente vuoti ---------- */
body[data-dir="b"] .s-chi .s-g { row-gap: 24px; align-items: center; }
body[data-dir="b"] .s-chi-testa h2 { font-size: var(--fs-h2); }
body[data-dir="b"] .s-chi .s-frase-2 { margin-top: 16px; }
body[data-dir="b"] .s-chi .s-frase-2 p { font-size: calc(clamp(1.75rem, 1.4rem + 1vw, 2.5rem) * var(--corsivo-scale, 1)); }
body[data-dir="b"] .s-chi-testo .s-prose { font-size: var(--fs-lead); line-height: 1.55; }
body[data-dir="b"] .s-chi-fig .s-frame img { border-radius: var(--r-img); }
body[data-dir="b"] .s-chi .s-link { color: var(--ink); }
body[data-dir="b"] .s-about-dati { margin-top: 28px; padding-top: 0; font-size: var(--fs-small); color: var(--muted); }
body[data-dir="b"] .s-about-dati .s-reg { margin: 0; max-width: none; }
body[data-dir="b"] .s-about-studi { margin: 12px 0 0; padding: 0; list-style: none; }
body[data-dir="b"] .s-reg { color: var(--muted); }
/* virgola e punto con la loro larghezza (correzioni del blocco 1, punti 2 e 17): con tabular-nums lo Schibsted Grotesk
   scriveva «Lombardia , n . 00000» */
body[data-dir="b"] :is(.s-reg, .s-targa-reg) { font-variant-numeric: lining-nums proportional-nums; }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-chi.has-foto .s-chi-foto { grid-column: 1 / 6; grid-row: 1 / 3; align-self: center; }
  body[data-dir="b"] .s-chi.has-foto .s-chi-testa { grid-column: 7 / 13; grid-row: 1; align-self: end; }
  body[data-dir="b"] .s-chi.has-foto .s-chi-testo { grid-column: 7 / 13; grid-row: 2; align-self: start; }
  body[data-dir="b"] .s-chi:not(.has-foto) :is(.s-chi-testa, .s-chi-testo) { grid-column: 1 / -1; max-width: 62ch; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  body[data-dir="b"] .s-chi-foto { max-width: 420px; }
}
/* Chi sono senza foto e con la biografia corta (correzioni finali del blocco 1, punto 4; nota 10, niente pannelli pieni
   a metà): accanto alla biografia le informazioni pratiche, in una seconda colonna sul computer e sotto al telefono; il
   pannello è più basso. Le voci in tondo, mai in maiuscolo spaziato. */
body[data-dir="b"] .s-chi-info { display: grid; gap: 16px; margin: 0; font-size: var(--fs-small); }
body[data-dir="b"] .s-chi-info dt { font-weight: var(--strong-w, 600); color: var(--ink); }
body[data-dir="b"] .s-chi-info dd { margin: 2px 0 0; color: var(--muted); }
body[data-dir="b"] .s-chi-info :is(.s-reg, .s-about-studi) { margin: 0; max-width: none; }
@media (max-width: 1023px) {
  body[data-dir="b"] .s-chi-lato { margin-top: 8px; }
}
@media (min-width: 1024px) {
  body[data-dir="b"] .s-chi.is-breve { padding-block: 64px; }
  body[data-dir="b"] .s-chi.is-breve .s-g { align-items: start; }
  body[data-dir="b"] .s-chi.is-breve :is(.s-chi-testa, .s-chi-testo) { grid-column: 1 / 8; max-width: 64ch; }
  body[data-dir="b"] .s-chi.is-breve .s-chi-testa { grid-row: 1; align-self: end; }
  body[data-dir="b"] .s-chi.is-breve .s-chi-testo { grid-row: 2; }
  body[data-dir="b"] .s-chi.is-breve .s-chi-lato { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; }
}

/* ---------- Come lavoro, formazione, listino ---------- */
body[data-dir="b"] .s-rows:not(.s-rows--price) { border-bottom: 0; }
body[data-dir="b"] .s-rows:not(.s-rows--price) > .s-row { border-top: 0; padding-block: var(--s4); }
body[data-dir="b"] .s-row-name { font-weight: var(--h3-w, 600); }
body[data-dir="b"] .s-addr { font-size: var(--fs-small); color: var(--muted); }
/* il listino: l'unico filetto del sito (§3.12); il prezzo nel carattere dei titoli, il primo incontro su un riquadro */
body[data-dir="b"] .s-rows--price { border-bottom: 1px solid var(--rule); }
body[data-dir="b"] .s-rows--price > .s-row { border-top: 1px solid var(--rule); }
body[data-dir="b"] .s-price strong { font: var(--head-w, 600) calc(1.75rem * var(--head-scale, 1))/1.1 var(--head); letter-spacing: -.02em; }
body[data-dir="b"] .s-row--first.is-paid, body[data-dir="b"] .s-row--first { margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); border-radius: var(--r-box); border-top-color: transparent; background: var(--t1); }
body[data-dir="b"] .s-pan--t1 .s-row--first { background: var(--t2); }
body[data-dir="b"] .s-row--first + .s-row { border-top-color: transparent; }

/* ---------- Domande (§3.9): riquadri che si aprono con il «+» a pillola ---------- */
body[data-dir="b"] .s-faq { display: grid; gap: 10px; border: 0; }
body[data-dir="b"] .s-faq details, body[data-dir="b"] .s-faq details:first-child { border: 0; border-radius: var(--r-box); background: var(--t1); }
body[data-dir="b"] .s-pan--t1 .s-faq details { background: var(--t2); }
body[data-dir="b"] .s-faq summary { min-height: 64px; padding: 12px 14px 12px 22px; gap: 16px; font: 600 17px/1.35 var(--body); letter-spacing: 0; }
body[data-dir="b"] .s-faq summary i { width: 40px; height: 40px; border-radius: 999px; background: var(--cta); transition: transform .2s ease, background-color .2s ease; }
body[data-dir="b"] .s-faq summary i::before, body[data-dir="b"] .s-faq summary i::after { width: 14px; height: 2px; border-radius: 2px; background: var(--b-cta-ink); transition: none; }
body[data-dir="b"] .s-faq details[open] summary i { transform: rotate(45deg); background: var(--vivo); }
body[data-dir="b"] .s-faq details[open] summary i::before { transform: translate(-50%, -50%); }
body[data-dir="b"] .s-faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
body[data-dir="b"] .s-faq details p { margin: 0; padding: 0 22px 22px; max-width: 64ch; color: var(--muted); }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-faq summary { min-height: 72px; padding: 14px 18px 14px 28px; font-size: 19px; }
  body[data-dir="b"] .s-faq details p { padding: 0 28px 26px; }
}

/* ---------- Invito finale (§3.10) ---------- */
body[data-dir="b"] .s-invito { overflow: visible; background-image: var(--trama, none); }
body[data-dir="b"] .s-invito .s-g { align-items: end; row-gap: 28px; }
body[data-dir="b"] .s-invito-text { grid-column: 1 / 8; margin: 0; font: var(--head-w, 600) calc(clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem) * var(--head-scale, 1))/1.15 var(--head); letter-spacing: var(--head-ls, -.02em); text-wrap: balance; }
body[data-dir="b"] .s-invito-ctas { grid-column: 9 / 13; gap: 12px; }
@media (max-width: 1023px) { body[data-dir="b"] .s-invito-text, body[data-dir="b"] .s-invito-ctas { grid-column: 1 / -1; } }

/* ---------- Contatti (§3.10): i recapiti grandi a sinistra, il modulo su una scheda chiara ---------- */
body[data-dir="b"] .s-phone span, body[data-dir="b"] .s-card dt { font: 400 var(--fs-small)/1.4 var(--body); color: var(--muted); }
body[data-dir="b"] .s-phone a { min-height: 44px; font: var(--head-w, 600) calc(1.5rem * var(--head-scale, 1))/1.2 var(--head); letter-spacing: -.01em; }
body[data-dir="b"] .s-card > div { padding: 10px 0; border-top: 0; }
body[data-dir="b"] .s-card dd { margin-top: 2px; font: var(--head-w, 600) calc(1.375rem * var(--head-scale, 1))/1.25 var(--head); overflow-wrap: anywhere; }
body[data-dir="b"] .s-card dd a { min-height: 44px; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
body[data-dir="b"] .s-rows--contact .s-row-big { font: var(--head-w, 600) calc(1.5rem * var(--head-scale, 1))/1.25 var(--head); overflow-wrap: anywhere; }
body[data-dir="b"] .s-form { gap: 16px; padding: 24px 20px; border: 0; border-radius: var(--r-box); background: var(--sup); box-shadow: var(--ombra-scheda); }
body[data-dir="b"] .s-form label { gap: 6px; font: 600 var(--fs-small)/1.4 var(--body); color: var(--b-ink); }
body[data-dir="b"] .s-form label small { font-size: max(14px, .875rem); font-weight: 400; color: var(--b-ink2); }
body[data-dir="b"] .s-form :is(input, textarea) { min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--bordo); border-radius: var(--r-campo); background: var(--sup); color: var(--b-ink); }
body[data-dir="b"] .s-form textarea { min-height: 110px; resize: vertical; }
body[data-dir="b"] .s-form :is(input, textarea):focus { outline: 3px solid var(--b-ink); outline-offset: 1px; border-color: var(--b-ink); }
body[data-dir="b"] .s-form .s-check input { min-height: 0; accent-color: var(--cta); }
body[data-dir="b"] .s-form .s-check a { color: var(--b-link); }
body[data-dir="b"] .s-form-small { color: var(--b-ink2); }
body[data-dir="b"] .s-demo { border-radius: var(--r-campo); }
body[data-dir="b"] .s-sos { margin-top: 24px; padding: 14px 18px; border-left: 0; border-radius: var(--r-box); background: color-mix(in srgb, var(--ink) 6%, transparent); }
@media (max-width: 699px) { body[data-dir="b"] .s-form .s-btn { justify-self: stretch; } }
@media (min-width: 1024px) { body[data-dir="b"] .s-form { padding: 40px; } }

/* ---------- Testate delle pagine interne (§3.12): un pannello con la testata ---------- */
body[data-dir="b"] .s-ph { padding-block: calc(var(--header-h) + 24px) 40px; background-image: var(--trama, none); }
body[data-dir="b"] .s-ph .s-g { align-items: center; row-gap: 28px; }
body[data-dir="b"] .s-ph h1 { font-size: var(--fs-h1-page); line-height: 1.08; }
body[data-dir="b"] .s-ph-lead { margin-top: 12px; color: var(--ap-ink2); font-size: var(--fs-lead); }
body[data-dir="b"] .s-ph-dato { margin: 14px 0 0; font-size: var(--fs-small); color: var(--ap-ink2); }
body[data-dir="b"] .s-ph-dato span { font-weight: 600; color: var(--ap-ink); }
body[data-dir="b"] .s-ph-text { grid-column: 1 / -1; }
body[data-dir="b"] .s-ph-media .s-frame img { border-radius: var(--r-img); }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-ph { padding-block: calc(var(--header-h) + 48px) 64px; }
  body[data-dir="b"] .s-ph.has-img .s-ph-text { grid-column: 1 / 8; }
  body[data-dir="b"] .s-ph.has-img .s-ph-media { grid-column: 8 / 13; }
}
@media (min-width: 700px) and (max-width: 1023px) { body[data-dir="b"] .s-ph-media { max-width: 420px; } }

/* ---------- Prenotazione ---------- */
body[data-dir="b"] .s-day { border-radius: var(--r-box); border: 1.5px solid var(--bordo); }
body[data-dir="b"] .s-slot { border-radius: 999px; border: 1.5px solid var(--bordo); }
body[data-dir="b"] :is(.s-day, .s-slot).on { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
body[data-dir="b"] .s-day.on span { color: var(--cta-ink); }

/* ---------- Piè di pagina (§3.11): l'unica targa, le pagine, i recapiti, la firma «b» a pillola ---------- */
body[data-dir="b"] .s-footer .s-g { row-gap: 32px; }
body[data-dir="b"] .s-footer p { margin: 0 0 4px; }
body[data-dir="b"] .s-footer a { color: var(--piede-ink); text-underline-offset: 3px; }
body[data-dir="b"] .s-footer li a { min-height: 44px; }
body[data-dir="b"] .s-colo-id { padding: 0; border: 0; }
body[data-dir="b"] .s-colo-mark { display: inline-grid; margin-bottom: 14px; color: var(--piede-ink); }
body[data-dir="b"] .s-colo-mark svg { height: 40px; }
body[data-dir="b"] .s-colo-mark.is-tondo { border-radius: 999px; box-shadow: 0 0 0 2px var(--lastra); }
body[data-dir="b"] .s-colo-nome { margin-bottom: 6px !important; font: var(--head-w, 600) calc(1.25rem * var(--head-scale, 1))/1.2 var(--head); letter-spacing: -.01em; color: var(--piede-ink); }
body[data-dir="b"] .s-colo-h { margin-bottom: 6px !important; font: 600 var(--fs-small)/1.4 var(--body); color: var(--piede-ink); }
body[data-dir="b"] .s-colo-firma { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--piede-ink2) 25%, transparent); }
body[data-dir="b"] .s-colo-sos { max-width: 60ch; margin: 0 !important; font-size: var(--fs-small); }
body[data-dir="b"] .s-sign { margin: 0 0 0 auto !important; padding: 0; border: 0; }
body[data-dir="b"] .s-sign a { min-height: 44px; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--piede-ink2) 45%, transparent); color: var(--piede-ink); }
body[data-dir="b"] .s-sign a:hover { box-shadow: inset 0 0 0 1px var(--piede-ink); }
body[data-dir="b"] .s-sign-mark { width: 30px; height: 30px; border-radius: 999px; box-shadow: none; background: var(--pill-f); color: var(--pill-f-ink); }
body[data-dir="b"] .s-sign-mark svg { width: 10px; height: 14px; }
body[data-dir="b"] .s-sign a > span:last-child { font: 400 14px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
@media (min-width: 1024px) {
  body[data-dir="b"] .s-footer .s-g { grid-template-columns: 1.3fr 1fr 1fr; column-gap: 48px; }
  body[data-dir="b"] .s-footer .s-g > :is(.s-colo-id, .s-colo-toc, .s-colo-contact) { grid-column: auto; }
}
@media (max-width: 699px) {
  body[data-dir="b"] .s-colo-toc ul { display: grid; column-gap: 0; }
  body[data-dir="b"] .s-sign { margin-left: 0 !important; }
}

/* ---------- La barra del telefono (§3.13): una pillola sospesa, nel colore dell'apertura ---------- */
@media (max-width: 699px) {
  body[data-dir="b"] .s-dock { left: var(--gap); right: var(--gap); bottom: calc(var(--gap) + env(safe-area-inset-bottom)); gap: 6px; padding: 6px; border: 0; border-radius: 999px; background-color: var(--ap); background-image: var(--trama, none); box-shadow: var(--ombra-testata); --focus: var(--pill); }
  body[data-dir="b"] .s-dock .s-btn { min-height: 48px; padding: 0 12px; background: var(--pill); color: var(--pill-ink) !important; }
  body[data-dir="b"] .s-dock .s-btn-ghost { background: transparent; color: var(--ap-ink) !important; box-shadow: inset 0 0 0 1.5px var(--ap-ink2); }
  body[data-dir="b"] { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-dir="b"] :is(.s-header, .s-btn, .s-faq summary i) { transition: none; }
}
@media print {
  body[data-dir="b"] .s-header { position: static; }
  body[data-dir="b"] .s-header::before { display: none; }
}

/* ---------- L'anteprima al telefono (correzioni del blocco 1, punti 20 e 23) ----------
   Una barra sola, con «Mettilo online» e «Modifica». Le voci della striscia sono nella finestra «Modifica» (con «Prova
   una prenotazione», solo qui), lo sconto è «−10%» sul pulsante e nella finestra di acquisto.
   La barra sta in basso, al posto di quella Chiama/Prenota del sito (correzioni del blocco 1, struttura, punto 24): in
   alto spingeva il pulsante dell'apertura di 52 px, fino a 783 px a 375×812. Così la prima schermata dell'anteprima e
   degli esempi è quella del sito pubblicato, con il pulsante entro i 743 px. */
body[data-dir="b"] :is(.pv-btn-sconto, .pv-acts-list .pv-solo-tel) { display: none; }
@media (max-width: 699px) {
  body[data-dir="b"] :is(.pv-tip, .pv-welcome) { display: none; }
  body[data-dir="b"] :is(.pv-main, .pv-demo) { position: fixed; inset: auto 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgb(20 16 40 / .18); }
  body[data-dir="b"] :is(.pv-main, .pv-demo) .pv-in { min-height: 52px; padding-block: 4px; }
  body[data-dir="b"] .pv-btn-sconto { display: inline; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: #2f2b5b; color: #fff; font-size: 12.5px; }
  body[data-dir="b"] .pv-acts-list .pv-solo-tel { display: grid; }
  body[data-dir="b"]:has(:is(.pv-main, .pv-demo)) .s-header { top: var(--gap); }
  body[data-dir="b"]:has(:is(.pv-main, .pv-demo)) .s-dock { display: none; }
  body[data-dir="b"]:has(:is(.pv-main, .pv-demo)) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ---------- Chat delle modifiche nell'anteprima (fase B, lib/chat-anteprima.js): solo con la direzione B ---------- */
body[data-dir="b"] .pv-act-chat { border-color: #2f2b5b; }
body[data-dir="b"] .pv-act-chat strong { display: inline-flex; align-items: center; gap: 6px; }
body[data-dir="b"] .pv-act-chat svg { flex: none; margin: -2px 0; }
@media (max-width: 560px) {
  body[data-dir="b"] .pv-tip .pv-act-chat { position: relative; }
  body[data-dir="b"] .pv-tip .pv-act-chat::after { content: ''; position: absolute; inset: -3.5px 0; }
}
body[data-dir="b"] .pv-chat { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(400px, 100%); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-left: 1px solid #e3e0f3; background: #fff; color: #1d2a2f; box-shadow: -24px 0 60px -36px rgba(16, 24, 40, .5); font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; overscroll-behavior: contain; }
body[data-dir="b"] .pv-chat::backdrop { background: rgba(10, 20, 18, .45); }
body[data-dir="b"] .pv-chat-in { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body[data-dir="b"] .pv-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 12px 20px; border-bottom: 1px solid #eef1f0; }
body[data-dir="b"] .pv-chat-head h2 { margin: 0; font: 700 19px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #2f2b5b; letter-spacing: 0; }
body[data-dir="b"] .pv-chat-tag { margin: 0 0 3px; font: 600 12.5px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #5d6b67; }
body[data-dir="b"] .pv-chat .pv-x { width: 44px; height: 44px; margin: -6px -4px 0 0; color: #2f2b5b; }
body[data-dir="b"] .pv-chat-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; overscroll-behavior: contain; }
body[data-dir="b"] .pv-chat-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
body[data-dir="b"] .pv-chat-msg.is-tu { align-self: flex-end; background: #2f2b5b; color: #fff; border-bottom-right-radius: 4px; }
body[data-dir="b"] .pv-chat-msg.is-bs { align-self: flex-start; background: #f4f2fb; color: #2f2b5b; border-bottom-left-radius: 4px; }
body[data-dir="b"] .pv-chat-msg small { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: #4f4b69; }
body[data-dir="b"] .pv-chat-msg .pv-chip { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 8px; }
body[data-dir="b"] .pv-chat-msg.is-wait::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid #cfcbe6; border-top-color: #2f2b5b; border-radius: 50%; animation: pv-chat-giro .8s linear infinite; }
@keyframes pv-chat-giro { to { transform: rotate(360deg); } }
body[data-dir="b"] .pv-chat-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
body[data-dir="b"] .pv-chat-ex p { flex-basis: 100%; margin: 0; font-size: 13.5px; color: #5d6b67; }
body[data-dir="b"] .pv-chat-ex button { min-height: 44px; padding: 8px 14px; border: 1.5px solid #cfcbe6; border-radius: 999px; background: #fff; color: #2f2b5b; font: 600 14px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: left; cursor: pointer; }
body[data-dir="b"] .pv-chat-ex button:hover { border-color: #2f2b5b; }
body[data-dir="b"] .pv-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #eef1f0; }
body[data-dir="b"] .pv-chat-form textarea { flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 160px; padding: 12px 14px; border: 1.5px solid #cfcbe6; border-radius: 14px; background: #fff; color: #1d2a2f; font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; resize: vertical; }
body[data-dir="b"] .pv-chat-form textarea::placeholder { color: #6b6884; }
body[data-dir="b"] .pv-chat-form textarea:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 1px; border-color: #2f2b5b; }
body[data-dir="b"] .pv-chat-form .pv-pay { flex: none; min-height: 48px; padding: 0 20px; }
body[data-dir="b"] .pv-chat-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 0 20px calc(12px + env(safe-area-inset-bottom)); font-size: 13.5px; color: #5d6b67; }
body[data-dir="b"] .pv-chat-foot p { margin: 0; }
body[data-dir="b"] .pv-chat-undo { min-height: 44px; padding: 8px 2px; border: 0; background: none; color: #2f2b5b; font: 600 14px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body[data-dir="b"] .pv-chat :is(button, textarea):disabled { cursor: progress; opacity: .6; }
body[data-dir="b"] .pv-chat :is(button, .pv-chip):focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
@media (max-width: 899px) { body[data-dir="b"] .pv-chat { width: 100%; border-left: 0; box-shadow: none; } }
@media (max-width: 420px) {
  body[data-dir="b"] .pv-chat-head, body[data-dir="b"] .pv-chat-log, body[data-dir="b"] .pv-chat-form { padding-inline: 16px; }
  body[data-dir="b"] .pv-chat-foot { padding-inline: 16px; }
  body[data-dir="b"] .pv-chat-form .pv-pay { padding: 0 16px; }
}
body[data-dir="b"] .pv-chat-toast { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 75; display: grid; gap: 8px; padding: 12px 12px 10px 16px; border-radius: 16px; background: #2f2b5b; color: #fff; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .55); font: 14.5px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body[data-dir="b"] .pv-chat-toast[hidden] { display: none; }
body[data-dir="b"] .pv-chat-toast p { margin: 0; overflow-wrap: anywhere; }
body[data-dir="b"] .pv-chat-toast-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body[data-dir="b"] .pv-chat-tbtn { min-height: 44px; padding: 8px 14px; border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 999px; background: transparent; color: #fff; font: 700 14px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; }
body[data-dir="b"] .pv-chat-tbtn[hidden] { display: none; }
body[data-dir="b"] .pv-chat-tbtn:focus-visible, body[data-dir="b"] .pv-chat-toast .pv-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body[data-dir="b"] .pv-chat-toast .pv-x { width: 44px; height: 44px; margin-left: auto; color: #fff; }
body[data-dir="b"] .pv-chat-toast .pv-x:hover { background: rgba(255, 255, 255, .1); }
@media (min-width: 900px) { body[data-dir="b"] .pv-chat-toast { left: auto; width: 380px; } }
body[data-dir="b"] .pv-chat-toast p small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: #e6e3f7; }
@media (min-width: 1280px) { body[data-dir="b"]:has(.pv-chat[open]:not(:modal)) { padding-right: 400px; } }
@media (prefers-reduced-motion: reduce) { body[data-dir="b"] .pv-chat-msg.is-wait::after { animation-duration: 2.4s; } }
/* ---------- fine chat delle modifiche ---------- */
/* ===== fine struttura ===== */

/* ===== Direzione B · ritratto (blocco 1, parte B) =====
   Specifica del 26/10 (docs/fonti/landing-page-efficace/prove/direzione-b/spec-blocco1.md, §3.3.2 e §4). Solo
   body[data-dir="b"]. Le figure dell'apertura, di «Chi sono» e della testata di Chi sono (figuraB in render.js) portano
   le cornici vere e le posizioni che tengono la testa intera, calcolate con public/js/ritaglio.js: --ar-tel e --ar-pc
   (il valore di aspect-ratio, larghezza / altezza), --k-tel e --k-pc (la stessa cornice come numero, altezza /
   larghezza, per i conti) e --pos-tel e --pos-pc (object-position). Le cornici del telefono valgono fino a 699 px (il
   velo fino a 819, «Chi sono» e la testata di Chi sono fino a 1023), poi quelle del computer. Una foto non prende mai
   l'altezza del testo accanto: così le posizioni calcolate sulla cornice valgono a ogni larghezza (§3.3.4).
   - «Di lato» (s-ap--lato): con la lastra in tinta sfalsata verso l'esterno e in basso (al telefono a destra), con la
     frase accanto (data-forma="frase": titolo sopra, foto e frase grande sotto) o con la foto a filo del pannello
     (data-forma="vivo", senza lastra);
   - lo sfondo velato (s-ap--sfondo): al telefono la foto sotto la testata e il velo nel colore dell'apertura che sale dal
     basso, con il titolo dall'88% della foto; sul computer la foto sul 56% del pannello, sfumata verso il testo e in
     basso; con una foto larga senza persone (data-forma="pieno") tutto il pannello, con il velo dal lato del testo;
   - «Sopra» (s-ap--sopra): la fascia sotto la testata, a filo dei lati del pannello;
   - la foto tonda (s-tondo) al posto delle iniziali, in testata e nel piè di pagina, con l'anello --lastra;
   - nell'anteprima, «Cambia layout» con le 4 aperture, le forme e il lato, e la correzione del viso con un tocco.
   La foto comincia sempre sotto la testata: nome, menù e pulsante non stanno mai sulla foto (§3.2). Mai trasformazioni
   né filtri sulle foto, mai testo su una foto senza velo: la didascalia sulle foto a filo sta su una pastiglia piena. */

/* ---------- Le figure con le cornici (§4.3) ---------- */
body[data-dir="b"] .s-figb { margin: 0; min-width: 0; }
body[data-dir="b"] .s-figb .s-frame { position: relative; }
body[data-dir="b"] .s-figb .s-frame img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: var(--ar-tel); object-fit: cover; object-position: var(--pos-tel); border-radius: var(--r-img); box-shadow: var(--ombra-foto); }
body[data-dir="b"] .s-figb .s-cap { margin: 10px 0 0; font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0; color: var(--muted); }
body[data-dir="b"] .s-figb .s-cap::before { display: none; }
/* la didascalia sulle foto a filo: una pastiglia piena nell'angolo in alto (contrasto come il velo, §2.5) */
body[data-dir="b"] .s-figb.is-filo .s-cap { position: absolute; z-index: 2; top: 12px; right: 12px; max-width: calc(100% - 24px); margin: 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ap) 92%, transparent); color: var(--ap-ink); line-height: 1.3; }
@media (min-width: 700px) {
  body[data-dir="b"] .s-hero:not(.s-ap--sfondo) .s-figb .s-frame img { aspect-ratio: var(--ar-pc); object-position: var(--pos-pc); }
}
@media (min-width: 820px) {
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-frame img { aspect-ratio: var(--ar-pc, auto); object-position: var(--pos-pc); }
}
@media (min-width: 1024px) {
  body[data-dir="b"] :is(.s-chi-fig, .s-ph-fig).s-figb .s-frame img { aspect-ratio: var(--ar-pc); object-position: var(--pos-pc); }
}

/* ---------- La lastra in tinta (§4.6, nota 8) ---------- */
/* un rettangolo pieno --lastra dietro la foto, sfalsato verso l'esterno e in basso; la foto si stringe dello sfalsamento,
   così niente esce dal pannello, e la lastra sta dietro: il volto non si copre mai. Al telefono va a destra in basso. */
body[data-dir="b"] .s-figb.is-lastra .s-frame { padding: 0 var(--lastra-off) var(--lastra-off) 0; }
body[data-dir="b"] .s-figb.is-lastra .s-frame::before { content: ''; position: absolute; inset: var(--lastra-off) 0 0 var(--lastra-off); border-radius: var(--r-img); background: var(--lastra); box-shadow: var(--ombra-foto); }
@media (min-width: 700px) {
  body[data-dir="b"] .s-hero .s-figb.is-lastra[data-lato="sinistra"] .s-frame { padding: 0 0 var(--lastra-off) var(--lastra-off); }
  body[data-dir="b"] .s-hero .s-figb.is-lastra[data-lato="sinistra"] .s-frame::before { inset: var(--lastra-off) var(--lastra-off) 0 0; }
}
@media (min-width: 1024px) {
  body[data-dir="b"] .s-ph .s-figb.is-lastra[data-lato="sinistra"] .s-frame { padding: 0 0 var(--lastra-off) var(--lastra-off); }
  body[data-dir="b"] .s-ph .s-figb.is-lastra[data-lato="sinistra"] .s-frame::before { inset: var(--lastra-off) var(--lastra-off) 0 0; }
  /* la testata di Chi sono con il ritratto a sinistra (latoFotoDi); il ritratto largo al massimo 380 px (4:5), verso
     l'esterno, così la testata resta bassa e la biografia comincia presto */
  body[data-dir="b"] .s-ph.has-img:has(.s-figb[data-lato="sinistra"]) .s-ph-text { grid-column: 6 / 13; grid-row: 1; }
  body[data-dir="b"] .s-ph.has-img:has(.s-figb[data-lato="sinistra"]) .s-ph-media { grid-column: 1 / 6; grid-row: 1; }
  body[data-dir="b"] .s-ph .s-figb { max-width: calc(380px + var(--lastra-off)); margin-left: auto; }
  body[data-dir="b"] .s-ph .s-figb[data-lato="sinistra"] { margin: 0 auto 0 0; }
}

/* ---------- «Di lato» (§3.3.2): con la lastra e con la frase accanto ---------- */
@media (min-width: 700px) {
  /* colonne allineate al centro; con il testo più alto la foto resta in alto */
  body[data-dir="b"] .s-ap--lato .s-hero-media { align-self: start; }
  body[data-dir="b"] .s-ap--lato .s-hero-text { align-self: center; }
  /* la foto mai più alta della finestra meno 220 px: si stringe tenendo la sua cornice */
  body[data-dir="b"] .s-ap--lato:not([data-forma="vivo"]) .s-figb { max-width: calc((100svh - 220px) / var(--k-pc) + var(--lastra-off)); margin-left: auto; }
  body[data-dir="b"] .s-ap--lato[data-lato="sinistra"]:not([data-forma="vivo"]) .s-figb { margin: 0 auto 0 0; }
  /* con la frase (studiocolamonico.it): la riga dei pazienti e il titolo sopra, a tutta larghezza; sotto la foto e,
     accanto, la frase grande con i pulsanti */
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] .s-hero-capo { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(24px, 3.2vw, 44px); }
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] :is(.s-hero-text, .s-hero-media) { grid-row: 2; }
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] .s-hero-text { align-self: start; padding-top: clamp(8px, 2.4vw, 40px); }
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] .s-hero-capo h1 { max-width: 30ch; }
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] .s-hero-text > .s-frase { margin-top: 0; }
  body[data-dir="b"] .s-ap--lato[data-forma="frase"] .s-hero-text > .s-frase p { font-size: calc(clamp(1.75rem, 1.3rem + 1.9vw, 3rem) * var(--corsivo-scale, 1)); line-height: 1.14; }
}

/* ---------- «Di lato» con la foto a filo del pannello (forma 2, «al vivo») ---------- */
/* al telefono sotto la testata, a filo dei lati; dal tablet sul bordo esterno, larga 5 colonne più lo spazio fino al
   bordo, cornice fissa 4:5: gli angoli esterni li arrotonda il pannello, i due interni (verso il testo) hanno --r-img,
   così l'angolo in alto non sembra tagliato per sbaglio. Senza lastra.
   Le colonne si contano dallo spazio interno del pannello (--pan-x), come .s-wrap. */
@media (max-width: 699px) {
  body[data-dir="b"] .s-hero.s-ap--lato[data-forma="vivo"] { padding-top: var(--header-h); }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"] .s-hero-media { margin: 0 calc(-1 * var(--pan-x)) 20px; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"] .s-figb .s-frame img { border-radius: 0 0 var(--r-img) var(--r-img); box-shadow: none; }
}
@media (min-width: 700px) {
  body[data-dir="b"] .s-hero.s-ap--lato[data-forma="vivo"] {
    --vivo-bordo: max(var(--pan-x), (100cqw - var(--max)) / 2);
    --vivo-col: calc((min(100cqw - 2 * var(--pan-x), var(--max)) + var(--col-gap)) / 12);
    --vivo-w: calc(var(--vivo-bordo) + 5 * var(--vivo-col) - var(--col-gap));
    position: relative; display: grid; align-content: center; min-height: calc(var(--header-h) + 1.25 * var(--vivo-w)); overflow: hidden;
  }
  /* grid-area auto: l'apertura è una griglia, e con la riga e le colonne del testo la foto si misurerebbe dalla riga
     centrata in altezza invece che dal bordo del pannello */
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"] .s-hero-media { position: absolute; top: var(--header-h); right: 0; grid-area: auto; width: var(--vivo-w); margin: 0; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"][data-lato="sinistra"] .s-hero-media { right: auto; left: 0; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"] .s-hero-text { grid-column: 1 / 7; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"][data-lato="sinistra"] .s-hero-text { grid-column: 7 / 13; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"] .s-figb .s-frame img { border-radius: var(--r-img) 0 0 var(--r-img); box-shadow: none; }
  body[data-dir="b"] .s-ap--lato[data-forma="vivo"][data-lato="sinistra"] .s-figb .s-frame img { border-radius: 0 var(--r-img) var(--r-img) 0; }
}

/* ---------- Sfondo velato (§4.5) ---------- */
/* telefono e tablet fino a 819 px: la foto sotto la testata, a filo dei lati del pannello; il velo nel colore
   dell'apertura, trasparente fino al 62%, al 92% all'88%, pieno in fondo; il titolo comincia all'88% della foto, quindi
   sta sempre sopra almeno il 92% del colore dell'apertura (colonna «velo» del §2.5) */
@media (max-width: 819px) {
  body[data-dir="b"] .s-hero.s-ap--sfondo { padding-top: var(--header-h); }
  body[data-dir="b"] .s-ap--sfondo .s-hero-media { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(-1 * var(--pan-x)); }
  body[data-dir="b"] .s-ap--sfondo .s-hero-text { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; }
  body[data-dir="b"] .s-ap--sfondo .s-figb { margin-bottom: calc(-.12 * var(--k-tel) * 100%); }
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-frame img { border-radius: 0; box-shadow: none; }
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 62%, color-mix(in srgb, var(--ap) 92%, transparent) 88%, var(--ap)); }
}
/* computer: il ritratto sul 56% del pannello dal suo lato, sotto la testata, con la cornice fissa 1 / 0,82; verso il
   testo il velo è pieno sul bordo e trasparente al 25% della foto, in basso trasparente fino all'88%. Il testo sta sul
   colore pieno, nelle colonne dell'altro lato; se è più alto della foto il pannello continua in --ap sotto la sfumatura. */
@media (min-width: 820px) {
  body[data-dir="b"] .s-hero.s-ap--sfondo { position: relative; display: grid; align-content: center; min-height: calc(var(--header-h) + .56 * .82 * 100cqw); overflow: hidden; }
  body[data-dir="b"] .s-ap--sfondo .s-hero-media { position: absolute; top: var(--header-h); right: 0; grid-area: auto; width: 56%; margin: 0; }
  body[data-dir="b"] .s-ap--sfondo[data-lato="sinistra"] .s-hero-media { right: auto; left: 0; }
  body[data-dir="b"] .s-ap--sfondo .s-hero-text { grid-column: 1 / 6; position: relative; z-index: 1; }
  body[data-dir="b"] .s-ap--sfondo[data-lato="sinistra"] .s-hero-text { grid-column: 8 / 13; }
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-frame img { border-radius: 0; box-shadow: none; }
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--ap), transparent 25%), linear-gradient(to bottom, transparent 88%, var(--ap)); }
  body[data-dir="b"] .s-ap--sfondo[data-lato="sinistra"] .s-figb .s-frame::after { background: linear-gradient(to left, var(--ap), transparent 25%), linear-gradient(to bottom, transparent 88%, var(--ap)); }
  /* una foto larga senza persone (studio, archivio): tutto il pannello sotto la testata, il velo dal lato del testo,
     --ap al 96% fino al 40% e trasparente al 75% */
  body[data-dir="b"] .s-hero.s-ap--sfondo[data-forma="pieno"] { min-height: calc(var(--header-h) + clamp(460px, 40cqw, 620px)); }
  body[data-dir="b"] .s-ap--sfondo[data-forma="pieno"] .s-hero-media { inset: var(--header-h) 0 0; width: auto; }
  body[data-dir="b"] .s-ap--sfondo[data-forma="pieno"] :is(.s-figb, .s-frame) { height: 100%; }
  body[data-dir="b"] .s-ap--sfondo[data-forma="pieno"] .s-figb .s-frame img { height: 100%; aspect-ratio: auto; }
  body[data-dir="b"] .s-ap--sfondo[data-forma="pieno"] .s-figb .s-frame::after { background: linear-gradient(to right, color-mix(in srgb, var(--ap) 96%, transparent) 40%, transparent 75%); }
}

/* ---------- Sopra (§3.3.2): la fascia sotto la testata, a filo dei lati del pannello ---------- */
@media (max-width: 699px) {
  body[data-dir="b"] .s-hero.s-ap--sopra { padding-top: var(--header-h); }
  body[data-dir="b"] .s-ap--sopra .s-hero-media { margin: 0 calc(-1 * var(--pan-x)) 20px; }
  body[data-dir="b"] .s-ap--sopra .s-figb .s-frame img { border-radius: 0 0 var(--r-img) var(--r-img); box-shadow: none; }
}
/* dal tablet: la fascia (rapporto 0,3; senza un viso da tenere intero, alta al massimo 42vh), poi il titolo con i
   pulsanti a sinistra e la frase a destra */
@media (min-width: 700px) {
  body[data-dir="b"] .s-hero.s-ap--sopra { padding-top: var(--header-h); }
  body[data-dir="b"] .s-ap--sopra .s-hero-media { grid-column: 1 / -1; grid-row: 1; margin: 0 calc((100% - 100cqw) / 2) clamp(20px, 1.6vw, 28px); }
  body[data-dir="b"] .s-ap--sopra .s-hero-text { grid-column: 1 / -1; grid-row: 2; }
  body[data-dir="b"] .s-ap--sopra .s-figb .s-frame img { border-radius: 0; box-shadow: none; }
  body[data-dir="b"] .s-ap--sopra .s-figb:not(.is-volto) .s-frame img { max-height: 42vh; }
  body[data-dir="b"] .s-ap--sopra .s-hero-text:has(> .s-frase) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(2 * var(--col-gap)); align-items: start; }
  body[data-dir="b"] .s-ap--sopra .s-hero-text:has(> .s-frase) > * { grid-column: 1; }
  body[data-dir="b"] .s-ap--sopra .s-hero-text > .s-frase { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
  body[data-dir="b"] .s-ap--sopra .s-hero-text > .s-ctas { margin-top: 18px; }
}

/* ---------- La foto tonda (§4.8, nota 12): al posto delle iniziali, con l'anello in tinta ---------- */
body[data-dir="b"] .s-tondo { display: block; border-radius: 999px; object-fit: cover; background: var(--ap); }
body[data-dir="b"] .s-brand-mark.is-tondo { flex: none; border-radius: 999px; box-shadow: 0 0 0 2px var(--lastra); }
body[data-dir="b"] .s-brand-mark .s-tondo { width: 40px; height: 40px; }
body[data-dir="b"] .s-colo-mark .s-tondo { width: 56px; height: 56px; }

/* ---------- «Cambia layout» con la direzione B e la correzione del viso (§5.4): finestre BSiteMe ---------- */
body[data-dir="b"] .pv-lb { width: min(560px, 100% - 32px); }
body[data-dir="b"] .pv-layouts--b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 561px) { body[data-dir="b"] .pv-layouts--b .pv-lay { aspect-ratio: 9 / 4; } }
body[data-dir="b"] .pv-layouts--b .pv-layout[aria-pressed="true"] { background: #f4f2fb; }
body[data-dir="b"] .pv-layout[aria-disabled="true"] small { color: #4f4b69; }
body[data-dir="b"] .pv-cons { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #f4f2fb; color: #2f2b5b; font: 700 12.5px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; vertical-align: 1px; }
body[data-dir="b"] .pv-lay-parole i { display: none; }
body[data-dir="b"] .pv-lay-parole b { left: 10%; top: 30%; width: 66%; height: 8px; border-radius: 4px; }
body[data-dir="b"] .pv-lay-parole b + b { top: 50%; width: 46%; }
body[data-dir="b"] .pv-lb-part { display: grid; gap: 8px; padding-top: 4px; }
body[data-dir="b"] .pv-lb-part h3 { margin: 0; font: 700 15px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: #1d2a2f; }
body[data-dir="b"] .pv-lb-part .pv-chip { justify-self: start; min-height: 44px; padding: 0 18px; font-size: 14px; }
body[data-dir="b"] .pv-lb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-dir="b"] .pv-lb-chip { display: grid; gap: 2px; min-height: 44px; padding: 8px 14px; border: 1.5px solid #cfcbe6; border-radius: 14px; background: #fff; color: #2f2b5b; font: 600 14px/1.25 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: left; cursor: pointer; }
body[data-dir="b"] .pv-lb-chip:hover:not([aria-pressed="true"]):not([aria-disabled="true"]) { border-color: #2f2b5b; }
body[data-dir="b"] .pv-lb-chip[aria-pressed="true"] { border-color: #2f2b5b; background: #2f2b5b; color: #fff; cursor: default; }
body[data-dir="b"] .pv-lb-chip[aria-disabled="true"] { border-color: #e3e0f3; background: #fafafc; color: #5d5a76; cursor: not-allowed; }
body[data-dir="b"] .pv-lb-chip small { font: 400 13px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #4f4b69; }
body[data-dir="b"] .pv-lb-chip:focus-visible, body[data-dir="b"] .pv-layout:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
body[data-dir="b"] .pv-volto { width: min(520px, 100% - 32px); }
body[data-dir="b"] .pv-volto-foto { position: relative; justify-self: center; width: 100%; overflow: hidden; border-radius: 12px; background: #f1f0f8; cursor: crosshair; touch-action: manipulation; }
body[data-dir="b"] .pv-volto-foto img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
body[data-dir="b"] .pv-volto-foto:focus-visible { outline: 3px solid #2f2b5b; outline-offset: 3px; }
body[data-dir="b"] .pv-volto-cerchio { position: absolute; border-radius: 999px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2f2b5b, 0 0 0 999px rgb(16 14 40 / .35); pointer-events: none; }
body[data-dir="b"] .pv-volto-scala { display: flex; align-items: center; gap: 10px; font: 13.5px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #4f4b69; }
body[data-dir="b"] .pv-volto-scala input { flex: 1 1 auto; min-width: 0; min-height: 44px; accent-color: #2f2b5b; }
@media (max-width: 560px) { body[data-dir="b"] .pv-layouts--b { grid-template-columns: minmax(0, 1fr); } }
/* ===== fine ritratto ===== */

/* ===== Direzione B · stile (blocco 1, parte C) =====
   «Prova un altro stile» con la direzione B (specifica del 26/10, §5.4; render.js, styleDialogB e scriptStileB): le 4
   famiglie con le miniature fatte con la sua foto (public/js/miniature-b.js, le stesse del passo dello stile del
   questionario) e sotto le 6 voci dei caratteri, senza «Fondo e testata». Dal computer ogni famiglia sta su una riga (tre
   schede, quattro i Pastelli: --n); da telefono una fila che scorre di lato, con la scheda dopo che si intravede. Le
   finestre dell'anteprima sono di BSiteMe: caratteri di sistema, colori di BSiteMe, uguali in tutte le tinte. */
body[data-dir="b"] .pv-stile-b { width: min(940px, 100% - 32px); }
body[data-dir="b"] .pv-stile-b .pv-form { gap: 16px; }
body[data-dir="b"] .pv-fam { display: grid; gap: 10px; }
body[data-dir="b"] .pv-fam h3, body[data-dir="b"] .pv-voci-t { margin: 8px 0 0; font: 700 16px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: #1d2a2f; }
body[data-dir="b"] .pv-fam h3 small { margin-left: 6px; font: 400 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #5d6b67; }
body[data-dir="b"] .pv-tinte { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
body[data-dir="b"] .pv-tinta, body[data-dir="b"] .pv-voce { display: grid; align-content: start; min-width: 0; padding: 0; overflow: hidden; border: 2px solid #e3e0f3; border-radius: 16px; background: #fff; color: #1d2a2f; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
body[data-dir="b"] .pv-tinta:hover, body[data-dir="b"] .pv-voce:hover { border-color: #9d98c4; }
body[data-dir="b"] .pv-tinta.on, body[data-dir="b"] .pv-voce.on { border-color: #2f2b5b; box-shadow: 0 0 0 3px rgba(47, 43, 91, .18); cursor: default; }
body[data-dir="b"] .pv-tinta:focus-visible, body[data-dir="b"] .pv-voce:focus-visible { outline: 3px solid #2f2b5b; outline-offset: 2px; }
body[data-dir="b"] .pv-tinta:disabled, body[data-dir="b"] .pv-voce:disabled { cursor: progress; opacity: .6; }
body[data-dir="b"] .pv-tinta.is-busy, body[data-dir="b"] .pv-voce.is-busy { opacity: 1; border-color: #2f2b5b; }
body[data-dir="b"] .pv-tinta-mini { display: block; }
body[data-dir="b"] .pv-tinta-mini .mb { border-bottom: 1px solid #eceaf5; }
body[data-dir="b"] .pv-tinta-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; }
body[data-dir="b"] .pv-tinta-t strong, body[data-dir="b"] .pv-voce-t strong { font: 700 14.5px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body[data-dir="b"] .pv-tinta-t em, body[data-dir="b"] .pv-voce-t em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f4e9f4; color: #a83f8c; font: 700 11px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; }
body[data-dir="b"] .pv-tinta .pv-sw { flex: none; gap: 3px; }
body[data-dir="b"] .pv-tinta .pv-sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
body[data-dir="b"] .pv-voci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body[data-dir="b"] .pv-voce .mb-car { padding: 14px 14px 10px; font-size: 17px; color: #1d2a2f; }
body[data-dir="b"] .pv-voce-t { display: grid; gap: 2px; padding: 8px 14px 12px; border-top: 1px solid #eceaf5; }
body[data-dir="b"] .pv-voce-t small { font-size: 13px; line-height: 1.4; color: #5d6b67; }
@media (max-width: 760px) {
  body[data-dir="b"] .pv-tinte { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: -2px -2px 0; }
  body[data-dir="b"] .pv-tinta { scroll-snap-align: start; }
  body[data-dir="b"] .pv-fam h3 small { display: block; margin: 2px 0 0; }
  body[data-dir="b"] .pv-voci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-dir="b"] .pv-voce .mb-car { padding: 12px 12px 8px; font-size: 15.5px; }
  body[data-dir="b"] .pv-voce-t { padding: 8px 12px 10px; }
}
@media (max-width: 359px) { body[data-dir="b"] .pv-voci { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { body[data-dir="b"] .pv-tinta, body[data-dir="b"] .pv-voce { transition: none; } }
/* ===== fine stile ===== */

/* ===== Direzione B · foto (blocco 2, parte A) =====
   Specifica del 27/10 (docs/fonti/landing-page-efficace/prove/direzione-b/blocco2/spec-blocco2.md, §2-4). Solo
   body[data-b2], cioè le anteprime nate con versioneB 2 (render.js, blocco2Of): togliendo i tre blocchi del blocco 2
   questo file è identico a quello del blocco 1 (tests/blocco2-invarianza.test.mjs).
   - Le aree con un'immagine sono righe illustrate (§4.6): al telefono la figura a tutta larghezza in 4:3, poi il testo;
     dal tablet figura e testo affiancati, i lati alternati; dal computer figura 5/12 in 3:2 (4/12 in 16:9 con un testo
     corto, is-corta; 3/12 con una riga sola, is-mini), centrati in verticale, senza lastra: la lastra resta dell'apertura e di «Chi sono».
   - «Cambia foto» (§2.4, §3.3): le pillole del filtro e le schede alte 44 px, che al telefono scorrono di lato dentro la
     finestra (mai la pagina), con la sfumatura a destra; la prima casella è la foto sua. */
body[data-b2] .s-aree-capo { margin-bottom: 32px; }
body[data-b2] .s-aree-capo h2 { margin: 0; }
body[data-b2] .s-aree-capo .s-ch-intro { margin: 12px 0 0; }
body[data-b2] .s-area-riga { display: grid; gap: 18px; margin: 0; }
body[data-b2] .s-area-riga + .s-area-riga { margin-top: 32px; }
body[data-b2] .s-area-fig { margin: 0; }
body[data-b2] .s-area-fig .s-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); border-radius: var(--r-img); box-shadow: var(--ombra-foto); }
body[data-b2] .s-area-fig .s-cap { margin: 10px 0 0; font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0; color: var(--muted); }
body[data-b2] .s-area-fig .s-cap::before { display: none; }
body[data-b2] .s-area-testo { max-width: 62ch; }
body[data-b2] .s-area-testo h3 { margin: 0 0 10px; font-size: calc(var(--fs-h3) * 1.25); text-wrap: balance; }
body[data-b2] .s-area-testo p:not(.s-area-first) { margin: 0; color: var(--muted); }
body[data-b2] .s-area-testo .s-more { margin: 14px 0 0; }
body[data-b2] .s-area-testo .s-link { color: var(--ink); }
body[data-b2] .s-aree-b2 .s-area-grid { margin-top: 40px; }
@media (min-width: 700px) {
  body[data-b2] .s-area-riga { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  body[data-b2] .s-area-riga + .s-area-riga { margin-top: 48px; }
  body[data-b2] .s-area-fig { grid-column: 1 / 7; grid-row: 1; }
  body[data-b2] .s-area-testo { grid-column: 7 / 13; grid-row: 1; }
  body[data-b2] .s-area-riga:nth-of-type(2n) .s-area-fig { grid-column: 7 / 13; }
  body[data-b2] .s-area-riga:nth-of-type(2n) .s-area-testo { grid-column: 1 / 7; }
  body[data-b2] .s-area-fig .s-frame img { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  body[data-b2] .s-area-fig { grid-column: 1 / 6; }
  body[data-b2] .s-area-testo { grid-column: 6 / 13; padding-left: var(--col-gap); }
  body[data-b2] .s-area-riga:nth-of-type(2n) .s-area-fig { grid-column: 8 / 13; }
  body[data-b2] .s-area-riga:nth-of-type(2n) .s-area-testo { grid-column: 1 / 8; padding: 0 var(--col-gap) 0 0; }
  body[data-b2] .s-area-riga.is-corta .s-area-fig { grid-column: 1 / 5; }
  body[data-b2] .s-area-riga.is-corta .s-area-testo { grid-column: 5 / 13; }
  body[data-b2] .s-area-riga.is-corta:nth-of-type(2n) .s-area-fig { grid-column: 9 / 13; }
  body[data-b2] .s-area-riga.is-corta:nth-of-type(2n) .s-area-testo { grid-column: 1 / 9; }
  /* con il testo corto la figura più bassa, in 16:9: con 2 righe di testo il 3:2 lasciava il testo al 56% */
  body[data-b2] .s-area-riga.is-corta .s-area-fig .s-frame img { aspect-ratio: 16 / 9; }
  body[data-b2] .s-area-riga.is-mini .s-area-fig { grid-column: 1 / 4; }
  body[data-b2] .s-area-riga.is-mini .s-area-testo { grid-column: 4 / 13; }
  body[data-b2] .s-area-riga.is-mini:nth-of-type(2n) .s-area-fig { grid-column: 10 / 13; }
  body[data-b2] .s-area-riga.is-mini:nth-of-type(2n) .s-area-testo { grid-column: 1 / 10; }
}

/* ---------- «Cambia foto» (§2.4, §3.3) ---------- */
body[data-b2] .pv-gallery .pv-tab { min-height: 44px; padding: 0 16px; font-size: 15px; }
body[data-b2] .pv-gallery .pv-mode { min-height: 44px; font-size: 15px; }
body[data-b2] .pv-cat { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
body[data-b2] .pv-cat[hidden] { display: none; }
body[data-b2] .pv-cat-b { min-height: 44px; padding: 0 16px; border: 1.5px solid #cfd6d3; border-radius: 999px; background: #fff; color: #1d2a2f; font: 600 15px/1.2 system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
body[data-b2] .pv-cat-b[aria-pressed='true'] { background: #2f2b5b; border-color: #2f2b5b; color: #fff; }
body[data-b2] .pv-cat-b:focus-visible { outline: 2px solid #2f2b5b; outline-offset: 2px; }
body[data-b2] .pv-pick { position: relative; min-height: 44px; }
body[data-b2] .pv-pick-mia small { position: absolute; left: 8px; bottom: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1d2a2f; font: 600 14px/1.2 system-ui, sans-serif; }
body[data-b2] .pv-pick-mia.is-vuota { display: grid; place-content: center; padding: 12px; border: 1.5px dashed #8d97a8; background: #f6f5fb; color: #1d2a2f; font: 600 15px/1.3 system-ui, sans-serif; text-align: center; }
body[data-b2] .pv-pick-box { display: grid; gap: 6px; align-content: start; }
body[data-b2] .pv-pick-box .pv-pick { width: 100%; }
body[data-b2] .pv-pick-nota { margin: 0; font: 400 14px/1.35 system-ui, sans-serif; color: #3d4a46; }
body[data-b2] .pv-grid-vuota { grid-column: 1 / -1; margin: 0; }
/* la casella scelta (correzioni AD-12): il bordo dentro la casella, mai tagliato dal contenitore che scorre, e la spunta
   nell'angolo; 10 px anche tra le righe */
body[data-b2] .pv-gallery .pv-grid { gap: 10px; grid-auto-rows: max-content; align-items: start; padding: 2px; }
body[data-b2] .pv-pick { outline: 0; }
body[data-b2] .pv-pick::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px transparent; pointer-events: none; }
body[data-b2] .pv-pick:hover::after { box-shadow: inset 0 0 0 3px #ed93d3; }
body[data-b2] .pv-pick.on::after { box-shadow: inset 0 0 0 4px #2f2b5b, inset 0 0 0 6px #fff; }
body[data-b2] .pv-pick.on::before { content: '✓'; position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-content: center; width: 28px; height: 28px; border-radius: 50%; background: #2f2b5b; color: #fff; font: 700 16px/1 system-ui, sans-serif; }
body[data-b2] .pv-pick:focus-visible { outline: 2px solid #2f2b5b; outline-offset: -8px; }
@media (max-width: 699px) {
  body[data-b2] .pv-scorre { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 2px 4px; margin-inline: -2px; }
  body[data-b2] .pv-scorre::-webkit-scrollbar { display: none; }
  body[data-b2] .pv-scorre > * { flex: none; scroll-snap-align: start; }
  body[data-b2] .pv-scorre.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  body[data-b2] .pv-gallery .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ===== fine foto ===== */

/* ===== Direzione B · contatti (blocco 2, parte B) =====
   Specifica del 27/10 (docs/fonti/landing-page-efficace/prove/direzione-b/blocco2/spec-blocco2.md, §5-§7). Solo
   body[data-b2]: togliendo i tre blocchi del blocco 2 questo file è identico a quello del blocco 1.
   - Pagina Contatti (§6.1): dopo la testata il riquadro «Come si prenota e come si paga», un elenco numerato su un riquadro
     t1 (t2 se il pannello è t1). Cifre nel colore vivo, più piccole di «Come si comincia» (40 px al telefono, 56 al
     computer), nome in h3 a 19 px, testo in --muted. Al telefono in colonna, la cifra in una colonna di 44 px; dal
     computer 3 o 4 colonne uguali (data-n), la cifra sopra. Niente frecce, linee, icone o puntini.
   - «Lo studio» (§6.3): testo 7/12 a sinistra, foto 5/12 a destra (la prima in 4:3, le altre due in 2:1 sotto); al
     telefono prima le foto. Senza foto una colonna di 62ch. «Apri la mappa» alto 44 px, mai una mappa incorporata.
   - Pagina unica (§6.4): nel biglietto la descrizione dello studio a 16 px, le righe «Pagamento» e «Risposta» con il
     testo corrente (non i recapiti grandi), una foto dello studio in 4:3.
   - Prenota (§7.2): «Cosa succede dopo» sotto il riepilogo, sempre in colonna.
   - «Cambia foto», scheda «Lo studio» (§5.4): le miniature con «Togli» (44 px). */
body[data-b2] .s-ph-lead a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
body[data-b2] #come-funziona .s-ch-body { margin-top: 24px; }
body[data-b2] .s-box-prenota { padding: 24px; border-radius: var(--r-box); background: var(--t1); color: var(--b-ink); }
body[data-b2] .s-pan--t1 .s-box-prenota { background: var(--t2); }
body[data-b2] .s-box-passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
body[data-b2] .s-box-passo { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0; }
body[data-b2] .s-box-n { display: block; font: var(--head-w, 600) calc(2.5rem * var(--head-scale, 1))/.9 var(--head); font-variant-numeric: lining-nums; letter-spacing: -.03em; color: var(--vivo); }
body[data-b2] .s-box-c h3 { margin: 2px 0 4px; font: var(--h3-w, 600) calc(1.1875rem * var(--head-scale, 1))/1.25 var(--head); letter-spacing: var(--head-ls, -.01em); }
body[data-b2] .s-box-c p { margin: 0; max-width: 40ch; color: var(--muted); }
body[data-b2] .s-box-nota { margin: 20px 0 0; font-size: var(--fs-small); color: var(--muted); }
body[data-b2] .s-box-cta { margin: 24px 0 0; }
body[data-b2] .s-box-h, body[data-b2] .s-ch-head h2.s-box-h { margin: 28px 0 14px; max-width: none; font: var(--h3-w, 600) calc(1.1875rem * var(--head-scale, 1))/1.25 var(--head); }
body[data-b2] .s-box-passi--col { gap: 16px; }
/* Prenota (correzioni AD-03 e AD-09): «Cosa succede dopo» sotto il pulsante o il calendario; la riga sotto il titolo
   in un colore solo */
body[data-b2] .s-prenota-dopo { margin-top: 40px; }
body[data-b2] .s-prenota-dopo .s-box-h { margin-top: 0; }
body[data-b2] .s-ph-dato span { color: inherit; }
@media (max-width: 359px) {
  body[data-b2] .s-box-prenota { padding: 20px 16px; }
  body[data-b2] .s-box-passo { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
}
body[data-b2] .s-box-passi--col .s-box-c p { font-size: var(--fs-small); }
@media (min-width: 1024px) {
  body[data-b2] #come-funziona .s-ch-body { margin-top: 32px; }
  body[data-b2] .s-box-prenota { padding: 40px; }
  body[data-b2] .s-box-passi:not(.s-box-passi--col) { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; }
  body[data-b2] .s-box-passi[data-n="4"] { --n: 4; }
  body[data-b2] .s-box-passi[data-n="2"] { --n: 2; }
  body[data-b2] .s-box-passi:not(.s-box-passi--col) .s-box-passo { display: block; }
  body[data-b2] .s-box-passi:not(.s-box-passi--col) .s-box-n { margin-bottom: 14px; font-size: calc(3.5rem * var(--head-scale, 1)); }
  body[data-b2] .s-box-passi--col .s-box-n { font-size: calc(2.25rem * var(--head-scale, 1)); }
}

/* ---------- Lo studio (§6.3) ---------- */
body[data-b2] #studio .s-ch-body { margin-top: 24px; }
body[data-b2] .s-studio-b { display: grid; gap: 24px; }
body[data-b2] .s-studio-fig { margin: 0; }
body[data-b2] .s-studio-fig .s-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); box-shadow: var(--ombra-foto); }
body[data-b2] .s-studio-fig .s-cap, body[data-b2] .s-studio-foto .s-area-fig .s-cap { margin: 10px 0 0; font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0; color: var(--muted); }
body[data-b2] .s-studio-fig .s-cap::before { display: none; }
body[data-b2] .s-studio-altre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
body[data-b2] .s-studio-altre .s-studio-fig .s-frame img { aspect-ratio: 2 / 1; }
body[data-b2] .s-studio-altre > :only-child { grid-column: 1 / -1; }
body[data-b2] .s-studio-testo { max-width: 62ch; order: -1; } /* al telefono le parole prima delle foto */
body[data-b2] .s-studio-desc { margin: 0 0 20px; font-size: var(--fs-lead); line-height: 1.55; }
body[data-b2] .s-studio-dove { margin: 0; font: var(--head-w, 600) calc(1.5rem * var(--head-scale, 1))/1.25 var(--head); letter-spacing: -.01em; overflow-wrap: anywhere; }
body[data-b2] .s-studio-mappa { margin: 4px 0 0; }
body[data-b2] .s-studio-mappa a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--fs-body); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
body[data-b2] .s-studio-anche { margin: 12px 0 0; color: var(--muted); }
body[data-b2] .s-studio-desc:last-child { margin-bottom: 0; }
/* solo le foto, senza parole (correzioni AD-06): non a tutta larghezza */
body[data-b2] .s-studio-b.is-solo .s-studio-foto { max-width: 720px; }
@media (min-width: 1024px) {
  body[data-b2] #studio .s-ch-body { margin-top: 32px; }
  body[data-b2] .s-studio-b:not(.is-solo) { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  /* le foto sono il contenuto del pannello (correzioni AD-06): 7 colonne, le parole accanto, in alto */
  body[data-b2] .s-studio-b:not(.is-solo) .s-studio-testo { grid-column: 1 / 6; grid-row: 1; padding-right: var(--col-gap); }
  body[data-b2] .s-studio-b:not(.is-solo) .s-studio-foto { grid-column: 6 / 13; grid-row: 1; }
}

/* ---------- Pagina unica, il biglietto (§6.4) ---------- */
body[data-b2] .s-card-nota { display: block; margin-top: 8px; font: 400 1rem/1.5 var(--body); letter-spacing: 0; color: var(--muted); }
body[data-b2] .s-card .is-info dd { font: 400 var(--fs-body)/1.45 var(--body); letter-spacing: 0; }
body[data-b2] .s-rows--contact .is-info .s-row-big { font: 400 var(--fs-body)/1.45 var(--body); letter-spacing: 0; }
body[data-b2] .s-card-foto { margin: 20px 0 0; max-width: 420px; }
body[data-b2] .s-card-foto .s-frame img { aspect-ratio: 4 / 3; }

/* ---------- Il modulo: entro quando rispondo (§6.5) ---------- */
body[data-b2] .s-form-entro { margin: -4px 0 0; }

/* ---------- «Cambia foto», scheda «Lo studio» (§5.4) ---------- */
body[data-b2] .pv-gallery .pv-modes[hidden] { display: none; }
body[data-b2] .pv-studio { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; padding: 0; }
body[data-b2] .pv-studio-foto { display: grid; gap: 8px; margin: 0; }
body[data-b2] .pv-studio-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
body[data-b2] .pv-studio-foto .pv-chip { min-height: 44px; justify-self: start; }
@media (max-width: 699px) { body[data-b2] .pv-studio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== fine contatti ===== */

/* ===== Direzione B · massime (blocco 2, parte C) =====
   Specifica del 27/10 (spec-blocco2.md, §9.6). Solo body[data-b2]. La firma della massima d'autore nella prima
   schermata: l'opera dopo l'autore, a 14 px, nello stesso colore della firma e senza corsivo; nella forma «Solo testo» e
   in «Di lato con la frase» la firma resta a 15 px sotto la frase grande. L'avviso della citazione sostituita
   (massimaAvviso) ha lo stile di fotoAvviso, con il filetto che lo separa da un avviso sopra. */
body[data-b2] .s-frase-opera { font-size: 14px; font-style: normal; color: inherit; }
body[data-b2] .pv-notice + .pv-notice[data-massima-avviso] { border-top: 1px solid #efe2bd; }
/* gli avvisi della home sotto l'apertura (correzioni AD-05) */
body[data-b2] .pv-avvisi-b { margin: 8px 8px 0; border: 1px solid #efe2bd; border-radius: 16px; overflow: hidden; }
body[data-b2] .pv-avvisi-b > .pv-notice { border-bottom: 0; }
body[data-b2] .pv-avvisi-b > .pv-notice + .pv-notice { border-top: 1px solid #efe2bd; }
/* i pulsanti degli avvisi (citazione, logo in testata: rifiniture del 27/10) si toccano su 44 px */
body[data-b2] .pv-avvisi-b .pv-chip { display: inline-flex; align-items: center; min-height: 44px; }
/* ===== fine massime ===== */

/* ===== Direzione B · modelli (modelli, parte unica) =====
   Specifica del 27/10 (spec-modelli.md, §4.5). Solo body[data-modello]: i siti non hanno regole nuove. In cima a «Prova
   un altro stile» le cinque schede dei modelli, con la prima schermata del sito in piccolo (miniature-b.js), come le tinte
   di sotto: dal computer tre per riga (3 + 2), da telefono una fila che scorre di lato con la scheda dopo che si
   intravede. «consigliato» con il colore di «attuale» ma vuoto, così si distinguono. */
body[data-modello] .pv-modelli { display: grid; gap: 10px; }
body[data-modello] .pv-modelli h3 { margin: 8px 0 0; font: 700 16px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; color: #1d2a2f; }
body[data-modello] .pv-modelli .pv-small { margin: 0; }
body[data-modello] .pv-modelli-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
body[data-modello] .pv-modello { display: grid; grid-template-rows: auto 1fr; align-content: start; min-width: 0; padding: 0; overflow: hidden; border: 2px solid #e3e0f3; border-radius: 16px; background: #fff; color: #1d2a2f; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
body[data-modello] .pv-modello:hover { border-color: #9d98c4; }
body[data-modello] .pv-modello.on { border-color: #2f2b5b; box-shadow: 0 0 0 3px rgba(47, 43, 91, .18); cursor: default; }
body[data-modello] .pv-modello:focus-visible { outline: 3px solid #2f2b5b; outline-offset: 2px; }
body[data-modello] .pv-modello:disabled { cursor: progress; opacity: .6; }
body[data-modello] .pv-modello.is-busy { opacity: 1; border-color: #2f2b5b; }
body[data-modello] .pv-modello-mini { display: block; }
body[data-modello] .pv-modello-mini .mb { border-bottom: 1px solid #eceaf5; }
body[data-modello] .pv-modello-t { display: grid; align-content: start; gap: 3px; padding: 10px 12px 12px; }
body[data-modello] .pv-modello-t strong { font: 700 14.5px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body[data-modello] .pv-modello-t small { font-size: 13px; line-height: 1.4; color: #5d6b67; }
body[data-modello] .pv-modello-t em { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f4e9f4; color: #a83f8c; font: 700 11px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; }
body[data-modello] .pv-modello-t em.is-consigliato { background: none; box-shadow: inset 0 0 0 1px #c98ab7; }
body[data-modello] .pv-tinte-t { margin-top: 18px; }
/* i segni di tinte e caratteri con la maiuscola, come quelli dei modelli («Attuale», «Consigliato») */
body[data-modello] .pv-tinta-t em, body[data-modello] .pv-voce-t em { display: inline-block; }
body[data-modello] .pv-tinta-t em::first-letter, body[data-modello] .pv-voce-t em::first-letter { text-transform: uppercase; }
body[data-modello] .pv-torna-modello { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 6px; padding: 8px 0; border: 0; background: none; color: #2f2b5b; font: 600 14.5px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body[data-modello] .pv-torna-modello small { font-weight: 400; color: #5d6b67; }
body[data-modello] .pv-torna-modello:focus-visible { outline: 3px solid #2f2b5b; outline-offset: 2px; }
body[data-modello] .pv-torna-modello:disabled { cursor: progress; opacity: .6; }
/* 3 + 2 con la seconda riga al centro, come nel questionario: niente buco in basso a destra */
@media (min-width: 761px) {
  body[data-modello] .pv-modelli-fila { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body[data-modello] .pv-modello { grid-column: span 2; }
  body[data-modello] .pv-modello:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (max-width: 760px) {
  body[data-modello] .pv-modelli-fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 8px; margin: -2px -2px 0; }
  body[data-modello] .pv-modello { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { body[data-modello] .pv-modello { transition: none; } }
/* Le aree senza immagine dopo le righe illustrate (art director finale, 27/10): una sola voce non sta più a metà di una
   griglia a due colonne, con l'altra metà del pannello vuota, ma nella colonna del testo della riga sopra, come il suo
   seguito; con un numero dispari di voci l'ultima prende tutta la riga. Solo dal tablet: al telefono è già una colonna. */
@media (min-width: 700px) {
  body[data-modello] .s-aree-b2 .s-area-riga + .s-area-grid[data-n="1"] { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  body[data-modello] .s-aree-b2 .s-area-riga + .s-area-grid[data-n="1"] > li { grid-column: 7 / 13; max-width: 62ch; }
  body[data-modello] .s-aree-b2 .s-area-riga:nth-of-type(2n) + .s-area-grid[data-n="1"] > li { grid-column: 1 / 7; }
  body[data-modello] .s-aree-b2 .s-area-grid:not([data-n="1"]) > li:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 62ch; }
}
@media (min-width: 1024px) {
  body[data-modello] .s-aree-b2 .s-area-riga + .s-area-grid[data-n="1"] > li { grid-column: 6 / 13; padding-left: var(--col-gap); }
  body[data-modello] .s-aree-b2 .s-area-riga:nth-of-type(2n) + .s-area-grid[data-n="1"] > li { grid-column: 1 / 8; padding: 0 var(--col-gap) 0 0; }
  body[data-modello] .s-aree-b2 .s-area-riga.is-corta + .s-area-grid[data-n="1"] > li { grid-column: 5 / 13; }
  body[data-modello] .s-aree-b2 .s-area-riga.is-corta:nth-of-type(2n) + .s-area-grid[data-n="1"] > li { grid-column: 1 / 9; }
  body[data-modello] .s-aree-b2 .s-area-riga.is-mini + .s-area-grid[data-n="1"] > li { grid-column: 4 / 13; }
  body[data-modello] .s-aree-b2 .s-area-riga.is-mini:nth-of-type(2n) + .s-area-grid[data-n="1"] > li { grid-column: 1 / 10; }
}
/* I numeri d'emergenza (112, 118, Telefono Amico) sul fondo velato della nota: con il colore dei link alcune tinte
   (terracotta, inchiostro) restavano sotto 4,5:1 (galleria del blocco 2, 27/10), e il testo grigio della nota appena sopra
   (4,6:1 con la tinta del profilo 14). Tutta la nota con l'inchiostro del testo, i link sottolineati. */
body[data-modello] .s-sos, body[data-modello] .s-sos a:not(.s-link) { color: var(--ink); }
/* «Cambia la descrizione dello studio» nella scheda «Lo studio» di «Cambia foto»: un bersaglio di 44 px */
body[data-modello] .pv-pane[data-pane="studio"] .pv-small a { display: inline-flex; align-items: center; min-height: 44px; }
/* Il ritratto di esempio degli esempi (is-esempio): la didascalia «generato con IA» sempre sulla foto e in vista con la
   prima schermata. Al computer con la lastra era sotto la foto, sotto la piega: va in alto a sinistra sulla foto, nell'aria
   sopra la testa che il ritaglio lascia sempre. Al telefono la foto a filo la aveva in alto, su due righe sopra i capelli:
   va in basso a sinistra, sulle spalle, divisa in due righe pari. Al telefono con la lastra resta sotto la foto, dove la
   stima del pulsante la conta (didascaliaTel). */
@media (max-width: 699px) {
  body[data-modello] .s-figb.is-esempio.is-filo .s-cap { top: auto; right: auto; bottom: 10px; left: 10px; max-width: calc(100% - 20px); padding: 4px 10px; font-size: 12px; text-wrap: balance; }
}
@media (min-width: 700px) {
  body[data-modello] .s-figb.is-esempio { position: relative; }
  body[data-modello] .s-figb.is-esempio.is-lastra .s-cap { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: calc(100% - var(--lastra-off) - 24px); margin: 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ap) 92%, transparent); color: var(--ap-ink); line-height: 1.3; text-wrap: balance; }
  body[data-modello] .s-hero .s-figb.is-esempio.is-lastra[data-lato="sinistra"] .s-cap { left: calc(var(--lastra-off) + 12px); }
}
/* ===== fine modelli ===== */

/* ===== Segno IA (27/10) =====
   Il segno «AI» sulle immagini generate e sul ritratto di esempio (lib/segno-ia.js), al posto della didascalia
   «Immagine illustrativa generata con IA» (decisione del titolare del 27/10). È l'icona europea del Codice di buone
   pratiche (Allegato 1, variante nera), piena e mai trasparente, alta 26 px: sta sulla foto, nell'angolo in alto a
   destra o in quello libero dal volto (data-angolo), e si vede subito, senza azioni. Al tocco, al passaggio del mouse e
   con il fuoco della tastiera si apre il testo lungo, dentro la foto. Senza JavaScript: <details> e <summary>, con un
   bersaglio alto 44 px. La zona del segno (.s-ia) copre solo la foto (non la lastra né il blocco sfalsato) e lascia
   passare i clic. Solo regole nuove, in questo blocco: senza, site.css è quello di prima (tests/*-invarianza). */
.s-ia { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; container-type: inline-size; }
/* Dal 28/10 sera (titolare, dal telefono sull'anteprima Campagnano: «non in alto a destra… in basso a destra, ancora
   meglio… ancora più piccole, soprattutto sulle immagini piccole») il segno sta in basso a destra, l'angolo di partenza;
   data-angolo dice gli altri. */
.s-ia > summary { position: absolute; bottom: 0; right: 0; display: block; padding: 12px 10px; list-style: none; cursor: pointer; pointer-events: auto; line-height: 0; -webkit-tap-highlight-color: transparent; }
.s-ia > summary::-webkit-details-marker { display: none; }
.s-ia > summary::marker { content: ''; }
/* le lettere «AI» bianche, senza pillola (titolare, 27/10 notte): un'ombra leggera le fa leggere sulle zone chiare.
   Dal 28/10 sera 14 × 10 px (prima 18 × 13) e 11 × 8 sulle foto strette meno di 340 px (schede, capitoli al telefono);
   bersaglio 12 + 10 + 12 = 34 px in altezza e 10 + 14 + 10 = 34 in larghezza (WCAG 2.5.8 chiede almeno 24) */
.s-ia-ico { display: block; width: 14px; height: 10px; filter: drop-shadow(0 0 1px rgb(0 0 0 / .55)) drop-shadow(0 1px 3px rgb(0 0 0 / .35)); }
@container (max-width: 339px) { .s-ia-ico { width: 11px; height: 8px; } }
.s-ia-t { display: none; position: absolute; bottom: 34px; right: 6px; width: max-content; max-width: min(300px, calc(100cqw - 16px)); margin: 0; padding: 10px 12px; border-radius: 10px; background: #000; color: #fff; font: 400 14px/1.45 var(--body, system-ui, sans-serif); letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; overflow-wrap: break-word; box-shadow: 0 8px 24px rgb(0 0 0 / .28); }
.s-ia[open] .s-ia-t, .s-ia > summary:focus-visible .s-ia-t { display: block; }
@media (hover: hover) { .s-ia > summary:hover .s-ia-t { display: block; } }
.s-ia > summary:focus-visible { outline: none; }
.s-ia > summary:focus-visible .s-ia-ico { outline: 2px solid #fff; outline-offset: 3px; }
/* Esc (lo script del segno, SCRIPT_IA) chiude il testo anche quando lo mostrano il mouse o il fuoco (WCAG 1.4.13) */
.s-ia[data-chiuso] > summary .s-ia-t { display: none; }
/* Con Tab il browser porta il segno appena dentro lo schermo: l'aria intorno lascia in vista anche il testo lungo, che si
   apre sotto il segno (sopra, con il segno in basso), la testata fissa in alto e la barra Chiama/Scrivimi in basso. Lo
   script, aperto il testo con il tocco, lo porta in vista con la stessa aria. */
.s-ia > summary { scroll-margin: 300px 0 96px; }
.s-ia-t { scroll-margin: 150px 0 96px; }
/* gli altri angoli, quando il volto è vicino a quello in basso a destra */
.s-ia[data-angolo$="s"] > summary { right: auto; left: 0; }
.s-ia[data-angolo$="s"] .s-ia-t { right: auto; left: 6px; }
.s-ia[data-angolo^="a"] > summary { bottom: auto; top: 0; scroll-margin: 150px 0 210px; }
.s-ia[data-angolo^="a"] .s-ia-t { bottom: auto; top: 34px; }
/* sulle foto larghe del computer (almeno 440 px, da 1024 px di finestra) l'angolo data-largo, calcolato su quella cornice:
   la zona del segno è il contenitore della container query */
@media (min-width: 1024px) {
  @container (min-width: 440px) {
    .s-ia[data-largo] > summary { top: auto; right: 0; bottom: 0; left: auto; scroll-margin: 300px 0 96px; }
    .s-ia[data-largo] .s-ia-t { top: auto; right: 6px; bottom: 34px; left: auto; }
    .s-ia[data-largo$="s"] > summary { right: auto; left: 0; }
    .s-ia[data-largo$="s"] .s-ia-t { right: auto; left: 6px; }
    .s-ia[data-largo^="a"] > summary { bottom: auto; top: 0; scroll-margin: 150px 0 210px; }
    .s-ia[data-largo^="a"] .s-ia-t { bottom: auto; top: 34px; }
  }
}
/* «Sfondo velato» dei ritmi 1 e 2 (apertura e testata delle pagine): la foto sta dietro il testo con z-index: -1, un
   livello a parte da cui il segno non esce, e il blocco del testo, largo quanto la pagina, prendeva il clic e il mouse sul
   segno (da 900 a 1340 px) e copriva il testo aperto (revisione del 27/10). Con il segno la foto non fa più un livello a
   parte: foto e velo sotto (livello 0), testo sopra (1), segno in cima (3). */
@media (min-width: 700px) {
  .s-hero-veil > .s-hero-media:has(.s-ia), .s-ph--veil > .s-ph-media:has(.s-ia) { z-index: auto; }
  .s-hero-veil:has(> .s-hero-media .s-ia) > .s-hero-in, .s-ph--veil:has(> .s-ph-media .s-ia) > .s-wrap { position: relative; z-index: 1; }
  .s-ph--veil:has(> .s-ph-media .s-ia)::after { z-index: 0; }
}
/* «Sfondo velato» della direzione B, telefono e tablet fino a 819 px: il titolo sale sul 12% basso della foto (margine
   negativo della figura). Il segno e la pillola del ritratto di esempio restano sopra quella striscia, mai sul titolo
   (lib/segno-ia.js conta la striscia nella scelta dell'angolo: basso) */
@media (max-width: 819px) {
  body[data-dir="b"] .s-ap--sfondo .s-figb .s-ia { bottom: 12%; }
}
/* dal computer, nello stesso velo, la foto a filo arriva all'angolo arrotondato del pannello (--r-pan, fino a 36 px): il
   segno in basso a destra (dal 28/10 sera) sta 12 px più dentro, così la curva non taglia la zona da toccare */
@media (min-width: 820px) {
  body[data-dir="b"] .s-ap--sfondo .s-figb.is-filo .s-ia { inset: 0 12px 12px 0; }
}
/* la foto più stretta della cornice: il ritratto sfalsato (88%, apertura A dei siti di prima); al telefono è piena */
.s-fig--offset .s-ia { right: 12%; }
@media (max-width: 699px) { .s-hero-a .s-hero-fig .s-ia { right: 0; } }
/* la lastra della direzione B sta fuori dalla foto, dal lato della foto (come il padding della cornice) */
body[data-dir="b"] .s-figb.is-lastra .s-ia { inset: 0 var(--lastra-off) var(--lastra-off) 0; }
@media (min-width: 700px) { body[data-dir="b"] .s-hero .s-figb.is-lastra[data-lato="sinistra"] .s-ia { inset: 0 0 var(--lastra-off) var(--lastra-off); } }
@media (min-width: 1024px) { body[data-dir="b"] .s-ph .s-figb.is-lastra[data-lato="sinistra"] .s-ia { inset: 0 0 var(--lastra-off) var(--lastra-off); } }
/* Il ritratto di esempio (anteprime ed esempi) ha il segno e la pillola breve «Ritratto d'esempio: qui andrà il tuo»:
   la pillola resta dov'era, salvo dove avrebbe coperto il segno. Siti di prima: la pastiglia in alto o in basso a destra
   (pannello D, velo) passa a sinistra. Direzione B, foto a filo: al telefono in basso a sinistra, sulle spalle (come con i
   modelli), sul computer in alto a sinistra; con il segno spostato dal volto, nell'angolo libero. */
.s-fig:has(> .s-frame > .s-ia) > .s-cap--pill { right: auto; left: 12px; }
body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia) > .s-cap { right: auto; left: 12px; max-width: calc(100% - 24px); text-wrap: balance; }
body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia[data-angolo="as"]) > .s-cap { top: auto; bottom: 12px; }
@media (max-width: 699px) {
  body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia) > .s-cap { top: auto; bottom: 10px; left: 10px; max-width: calc(100% - 20px); padding: 4px 10px; font-size: 12px; }
  body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia:not([data-angolo])) > .s-cap { max-width: calc(100% - 64px); }
  body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia[data-angolo="bs"]) > .s-cap { left: auto; right: 10px; max-width: calc(100% - 172px); }
}
@media (min-width: 700px) {
  body[data-modello] .s-figb.is-esempio.is-lastra:has(> .s-frame > .s-ia[data-angolo="as"]) .s-cap { top: 56px; }
  /* il segno in alto a sinistra sulle foto larghe: la pillola in basso a sinistra, accanto al segno in basso a destra
     delle foto più strette */
  body[data-dir="b"] .s-figb.is-filo:has(> .s-frame > .s-ia[data-largo="as"]) > .s-cap { top: auto; bottom: 12px; max-width: calc(100% - 196px); }
}
/* con il velo della direzione B fino a 819 px la pillola in basso sale sopra la striscia del titolo, come il segno */
@media (max-width: 699px) {
  body[data-dir="b"] .s-ap--sfondo .s-figb.is-filo:has(> .s-frame > .s-ia) > .s-cap { bottom: calc(12% + 10px); }
}
@media (min-width: 700px) and (max-width: 819px) {
  body[data-dir="b"] .s-ap--sfondo .s-figb.is-filo:has(> .s-frame > .s-ia[data-angolo="as"]) > .s-cap, body[data-dir="b"] .s-ap--sfondo .s-figb.is-filo:has(> .s-frame > .s-ia[data-largo="as"]) > .s-cap { bottom: calc(12% + 12px); }
}
/* ===== fine segno IA ===== */

/* ===== Direzione B · aree4 (versioneB 4, notte del 28/10) =====
   struttura-aree/proposta.md, opzione A, con le risposte del titolare del 27/10 sera. Solo body[data-b4], cioè le
   anteprime nate con versioneB 4 (render.js, b4Of): togliendo questo blocco site.css è quello di 2272762
   (tests/b4-invarianza.test.mjs).
   - Le schede delle aree in home: la prima grande, le altre compatte, tutte visibili. Al telefono in colonna (niente
     fila da scorrere), la compatta con la foto a sinistra; dal computer la grande a sinistra e le due compatte a destra.
     Il riquadro del testo si appoggia sul bordo basso della foto solo con le immagini del lotto «aree» (is-lotto: il
     soggetto sta nei due terzi alti) e solo dal tablet, per non coprire mai un volto; altrimenti il testo sta sotto.
   - La pagina Aree: le pillole sotto il titolo, un capitolo per area principale (a zig-zag dal computer, senza foto il
     titolo nel margine e il testo accanto: niente metà vuota), la fascia di foto, «Mi occupo anche di», «Il primo
     incontro» con la mappa.
   - La mappa (B7): mai ritagliata (3:2 come l'immagine), così l'attribuzione nell'angolo resta; i crediti anche come testo.
   - Movimento: immagini, schede e titoli entrano solo con l'opacità, 300 ms, una volta (lo script della pagina, mai nella
     prima schermata); le schede si alzano di poco al passaggio del mouse, solo al computer. Niente con
     prefers-reduced-motion (la classe rv non c'è e qui si spengono le transizioni); senza JavaScript tutto è visibile. */
.rv body[data-b4] .s-rv4.rv-w { transform: none; }
.rv body[data-b4] .s-rv4.rv-w.rv-in { transition: opacity .3s ease var(--rv-d, 0s), transform .2s ease; }

/* ---------- Le figure nuove ---------- */
body[data-b4] .s-fig4 { margin: 0; }
body[data-b4] .s-fig4 .s-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--focus, 50% 50%); border-radius: var(--r-img); box-shadow: var(--ombra-foto); }
body[data-b4] .s-fig4 .s-cap { margin: 8px 0 0; font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0; color: var(--muted); }
body[data-b4] .s-fig4 .s-cap::before { display: none; }

/* ---------- Le schede delle aree (home e pagina unica) ---------- */
body[data-b4] .s-aree4 .s-aree-capo { margin-bottom: 28px; }
body[data-b4] .s-aree4 .s-aree-capo h2 { margin: 0; }
body[data-b4] .s-aree4 .s-aree-capo .s-ch-intro { margin: 12px 0 0; }
body[data-b4] .s-schede4 { display: grid; gap: 28px; }
body[data-b4] .s-scheda4 { position: relative; display: grid; align-content: start; margin: 0; min-width: 0; border-radius: var(--r-box); }
body[data-b4] .s-scheda4-testo { min-width: 0; padding: 16px 2px 0; }
body[data-b4] .s-scheda4 h3 { margin: 0 0 8px; font-size: var(--fs-h3); text-wrap: balance; }
body[data-b4] .s-scheda4 p { margin: 0; }
body[data-b4] .s-scheda4 p:not(.s-area-first):not(.s-scheda4-link) { margin-top: 10px; color: var(--muted); }
body[data-b4] .s-scheda4-link { margin-top: 6px !important; }
body[data-b4] .s-scheda4-link .s-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
/* tutta la scheda si tocca: il link si allarga sulla scheda; il segno IA resta sopra (z-index 3) e si tocca da solo */
body[data-b4] .s-scheda4.is-link .s-scheda4-link .s-link { position: static; }
body[data-b4] .s-scheda4.is-link .s-scheda4-link .s-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-box); }
body[data-b4] .s-scheda4 .s-ia { z-index: 3; }
/* senza immagine: la scheda tipografica, su un riquadro in tinta */
body[data-b4] .s-scheda4.is-tipo { padding: 22px 20px 18px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
body[data-b4] .s-scheda4.is-tipo .s-scheda4-testo { padding: 0; }
/* al telefono la compatta con la foto a sinistra, in 4:3 (il fuoco della foto la tiene in quadro) */
@media (max-width: 699px) {
  body[data-b4] .s-schede4 { gap: 20px; }
  body[data-b4] .s-scheda4.is-compatta:not(.is-tipo) { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 14px; align-items: start; }
  body[data-b4] .s-scheda4.is-compatta .s-fig4 .s-frame img { aspect-ratio: 4 / 3; border-radius: calc(var(--r-img) * .7); }
  body[data-b4] .s-scheda4.is-compatta .s-scheda4-testo { padding: 0; }
  body[data-b4] .s-scheda4.is-compatta h3 { margin-bottom: 4px; font-size: calc(var(--fs-h3) * .9); }
  body[data-b4] .s-scheda4.is-compatta .s-area-first { font-size: var(--fs-small); line-height: 1.45; }
  /* nella pagina unica le schede hanno il testo intero: la compatta con la foto sopra, in 16:9, e il testo pieno */
  body[data-b4] .s-schede4.is-unica .s-scheda4.is-compatta:not(.is-tipo) { grid-template-columns: minmax(0, 1fr); }
  body[data-b4] .s-schede4.is-unica .s-scheda4.is-compatta .s-fig4 .s-frame img { aspect-ratio: 16 / 9; border-radius: var(--r-img); }
  body[data-b4] .s-schede4.is-unica .s-scheda4.is-compatta .s-scheda4-testo { padding-top: 14px; }
  body[data-b4] .s-schede4.is-unica .s-scheda4.is-compatta h3 { margin-bottom: 8px; font-size: var(--fs-h3); }
  body[data-b4] .s-schede4.is-unica .s-scheda4.is-compatta .s-area-first { font-size: inherit; line-height: inherit; }
  /* il testo lungo del segno IA nella compatta con la foto a sinistra (un terzo della scheda): largo come la scheda,
     sopra il suo testo, e la scheda aperta sopra quelle che seguono. Largo come la foto era alto 360 px e a 320 px usciva
     dallo schermo; il segno della scheda sotto lo copriva (tests/browser-segno-ia.test.mjs, esempio Pro, notte del 28/10) */
  body[data-b4] .s-schede4:not(.is-unica) .s-scheda4.is-compatta:not(.is-tipo) .s-ia-t { max-width: none; width: min(300px, calc(100vw - 72px)); }
  /* il riquadro sta nel segno (summary nell'angolo; 100% è la sua larghezza, 34 px e 31 sulle foto strette dal 28/10
     sera): con il segno a destra parte 8 px dopo il bordo sinistro della foto (100cqw è la larghezza della foto, .s-ia è
     il contenitore) e si apre verso destra, sopra il testo della scheda */
  body[data-b4] .s-schede4:not(.is-unica) .s-scheda4.is-compatta:not(.is-tipo) .s-ia:not([data-angolo$="s"]) .s-ia-t { right: auto; left: calc(100% + 8px - 100cqw); }
  body[data-b4] .s-scheda4:has(.s-ia[open]), body[data-b4] .s-scheda4:has(.s-ia > summary:focus-visible) { z-index: 4; }
}
/* dal tablet il riquadro sul bordo basso della foto (is-lotto): sale di 48 px, cioè nel quarto più basso */
@media (min-width: 700px) {
  body[data-b4] .s-schede4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; }
  body[data-b4] .s-scheda4.is-grande { grid-column: 1 / -1; }
  body[data-b4] .s-scheda4.is-grande.is-lotto .s-scheda4-testo { position: relative; z-index: 2; margin: -48px 0 0 24px; padding: 20px 24px 14px; border-radius: var(--r-box); background: var(--sup); color: var(--ink); box-shadow: var(--ombra-scheda), 0 12px 32px -18px color-mix(in srgb, var(--ink) 40%, transparent); }
  body[data-b4] .s-scheda4.is-grande .s-fig4 .s-frame img { aspect-ratio: 16 / 9; }
  body[data-b4] .s-schede4[data-n="2"] .s-scheda4.is-compatta { grid-column: 1 / -1; }
}
/* dal computer la grande su tutta la riga, foto e testo affiancati; sotto le due compatte, una accanto all'altra, con
   la foto a sinistra: nessuna colonna più alta dell'altra, nessun vuoto (con due schede, due schede uguali affiancate) */
@media (min-width: 1024px) {
  body[data-b4] .s-schede4 { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 40px; align-items: stretch; }
  body[data-b4] .s-scheda4.is-grande:not(.is-tipo) { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(2 * var(--col-gap)); align-items: center; }
  body[data-b4] .s-scheda4.is-grande { grid-column: 1 / -1; }
  body[data-b4] .s-scheda4.is-grande .s-fig4 .s-frame img { aspect-ratio: 3 / 2; }
  body[data-b4] .s-scheda4.is-grande .s-scheda4-testo, body[data-b4] .s-scheda4.is-grande.is-lotto .s-scheda4-testo { margin: 0; padding: 0; max-width: 46ch; background: none; box-shadow: none; }
  body[data-b4] .s-scheda4.is-grande h3 { font-size: calc(var(--fs-h3) * 1.3); }
  body[data-b4] .s-scheda4.is-compatta { grid-column: span 6; }
  body[data-b4] .s-scheda4.is-compatta:not(.is-tipo) { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 24px; align-items: center; }
  body[data-b4] .s-scheda4.is-compatta .s-scheda4-testo { padding: 0; }
  body[data-b4] .s-scheda4.is-compatta .s-fig4 .s-frame img { aspect-ratio: 4 / 3; }
  body[data-b4] .s-schede4[data-n="2"] .s-scheda4 { grid-column: span 6; grid-template-columns: minmax(0, 1fr); align-items: start; }
  body[data-b4] .s-schede4[data-n="2"] .s-scheda4 .s-scheda4-testo { padding-top: 16px; }
  body[data-b4] .s-schede4[data-n="2"] .s-scheda4 .s-fig4 .s-frame img { aspect-ratio: 3 / 2; }
}
@media (hover: hover) and (min-width: 1024px) {
  body[data-b4] .s-scheda4.is-link { transition: transform .2s ease; }
  body[data-b4] .s-scheda4.is-link:hover { transform: translateY(-3px); }
  body[data-b4] .s-scheda4.is-link:hover .s-scheda4-link .s-link { text-decoration-thickness: 2.5px; }
}
/* le altre aree in home: una frase con «Tutte le aree», oltre 4 le pillole */
body[data-b4] .s-anche4-frase { margin: 32px 0 0; }
body[data-b4] .s-anche4-home { margin-top: 32px; }
body[data-b4] .s-anche4-h { margin: 0; font-weight: 600; }
body[data-b4] .s-anche4-home .s-more { margin: 6px 0 0; }

/* ---------- Le pillole (testata della pagina Aree, altre aree in home) ---------- */
body[data-b4] .s-pillole4 { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
body[data-b4] .s-pillole4 a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, currentColor 11%, transparent); color: inherit; font: 600 var(--fs-small)/1.25 var(--body); text-decoration: none; }
body[data-b4] .s-pillole4 a:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
body[data-b4] .s-pillole4 a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 699px) { body[data-b4] .s-pillole4 { gap: 6px; } body[data-b4] .s-pillole4 a { padding: 0 14px; } }
body[data-b4] .s-ph-text .s-pillole4-nav { margin-top: 4px; }
/* giro 4: la riga dei fatti della pagina Aree (dove, durata, WhatsApp), una volta sola sotto il titolo, piccola come le
   righe sotto i pulsanti dell'apertura */
body[data-b4] .s-ph-text .s-ph-fatti4 { margin: 12px 0 0; max-width: 62ch; font-size: var(--fs-small); line-height: 1.45; color: var(--ap-ink2); font-variant-numeric: lining-nums; }
@media (min-width: 1024px) { body[data-b4] .s-ph-text:has(.s-pillole4-nav) { grid-column: 1 / 11; } }

/* ---------- I capitoli della pagina Aree ---------- */
body[data-b4] .s-cap4 .s-g { row-gap: 20px; align-items: start; }
body[data-b4] .s-cap4 h2 { margin: 0; text-wrap: balance; }
body[data-b4] .s-cap4 .s-area-first { margin: 12px 0 0; font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
body[data-b4] .s-cap4-corpo p { margin: 0; max-width: 62ch; }
body[data-b4] .s-cap4-corpo .s-cap4-cta { margin-top: 24px; }
body[data-b4] .s-cap4-corpo .s-cap4-fatti { margin-top: 12px; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
/* argomenti sviluppati (lavoro 14 del 28/10, interruttore acceso il 28/10 sera): «Come si presenta» e «Come lavoro su questo», il
   titolo in grassetto in testa al paragrafo, che da solo riassume (seconda lettura) */
body[data-b4] .s-cap4-corpo .s-cap4-parte { text-wrap: pretty; }
body[data-b4] .s-cap4-corpo .s-cap4-parte + .s-cap4-parte { margin-top: 14px; }
/* le parti si aggiungono sotto il resto del testo dell'area (ok del titolare del 28/10 sera): un po' più di spazio
   prima della prima, perché si leggano come un gruppo a sé */
body[data-b4] .s-cap4-corpo > p:not(.s-cap4-parte):not(.s-cap4-cta) + .s-cap4-parte { margin-top: 20px; }
body[data-b4] .s-cap4-parte strong { font-weight: 600; color: var(--ink); }
@media (min-width: 1024px) {
  body[data-b4] .s-cap4 .s-g { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; align-items: start; }
  body[data-b4] .s-cap4 .s-cap4-fig { grid-row: 1 / 5; align-self: center; }
  body[data-b4] .s-cap4 .s-cap4-capo { grid-row: 2; }
  body[data-b4] .s-cap4 .s-cap4-corpo { grid-row: 3; margin-top: 20px; }
  body[data-b4] .s-cap4.is-sx .s-cap4-fig { grid-column: 1 / 7; }
  body[data-b4] .s-cap4.is-sx :is(.s-cap4-capo, .s-cap4-corpo) { grid-column: 7 / 13; padding-left: var(--col-gap); }
  body[data-b4] .s-cap4.is-dx .s-cap4-fig { grid-column: 7 / 13; }
  body[data-b4] .s-cap4.is-dx :is(.s-cap4-capo, .s-cap4-corpo) { grid-column: 1 / 7; padding-right: var(--col-gap); }
  /* senza figura: il titolo e la riga nel margine, il resto accanto */
  body[data-b4] .s-cap4.is-senza .s-g { grid-template-rows: auto; }
  body[data-b4] .s-cap4.is-senza .s-cap4-capo { grid-column: 1 / 6; grid-row: 1; }
  body[data-b4] .s-cap4.is-senza .s-cap4-corpo { grid-column: 7 / 13; grid-row: 1; margin-top: 0; }
  body[data-b4] .s-cap4.is-senza .s-cap4-corpo > p:first-child:not(.s-cap4-cta) { font-size: var(--fs-lead); line-height: 1.5; }
  body[data-b4] .s-cap4.is-senza .s-cap4-corpo > p.s-cap4-parte:first-child { font-size: inherit; line-height: inherit; }
}

/* ---------- La fascia di foto a tutta larghezza ---------- */
body[data-b4] .s-fascia4 { margin-top: var(--gap); }
body[data-b4] .s-fascia4 .s-fig4 .s-frame img { aspect-ratio: 2 / 1; border-radius: var(--r-pan); box-shadow: none; }
body[data-b4] .s-fascia4.is-vera .s-cap { margin: 8px var(--pan-x) 0; }
@media (min-width: 700px) { body[data-b4] .s-fascia4 .s-fig4 .s-frame img { aspect-ratio: 21 / 9; } }
body[data-b4] .s-fascia4.is-frase .s-frase { margin: 0 auto; max-width: 34ch; text-align: center; }
body[data-b4] .s-fascia4.is-frase .s-frase p { font-size: calc(clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem) * var(--corsivo-scale, 1)); }

/* ---------- «Mi occupo anche di» ---------- */
body[data-b4] .s-anche4 h2 { margin: 0; }
body[data-b4] .s-anche4 .s-area-grid { margin-top: 24px; }
@media (min-width: 1024px) {
  body[data-b4] .s-anche4 h2 { grid-column: 1 / 5; }
  body[data-b4] .s-anche4 .s-area-grid { grid-column: 5 / 13; margin-top: 0; }
  body[data-b4] .s-anche4 .s-area-grid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- «Il primo incontro» ---------- */
body[data-b4] .s-primo4 .s-g { row-gap: 28px; }
body[data-b4] .s-primo4 h2 { margin: 0 0 20px; }
body[data-b4] .s-primo4-dl { display: grid; gap: 16px; margin: 0; }
body[data-b4] .s-primo4-dl > div { display: grid; gap: 2px; }
body[data-b4] .s-primo4-dl dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
body[data-b4] .s-primo4-dl dd { margin: 0; max-width: 62ch; }
body[data-b4] .s-primo4-albo { margin: 22px 0 0; font-size: var(--fs-small); color: var(--muted); }
body[data-b4] .s-primo4-albo .s-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
@media (min-width: 1024px) {
  body[data-b4] .s-primo4.has-mappa .s-primo4-testo { grid-column: 1 / 7; }
  body[data-b4] .s-primo4.has-mappa .s-primo4-mappa { grid-column: 8 / 13; align-self: center; }
  body[data-b4] .s-primo4:not(.has-mappa) .s-primo4-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--col-gap)); row-gap: 24px; }
}

/* ---------- La mappa dello studio (B7) ----------
   Correzioni del 28/10: angoli di 6 px, non --r-img. Geoapify scrive l'attribuzione nell'angolo in basso a destra
   dell'immagine, fino a 10 px dal bordo dell'immagine da 1200: con 20 px di raggio l'arco tagliava la «s» di
   «contributors» (misurato con la mappa vera: fino a 5 px dentro la scritta con la mappa larga 216 px, Chi sono a 320).
   Con 6 px la scritta resta intera a 320, 375, 768, 1024 e 1440 px (almeno 0,8 px dall'arco con la mappa più stretta);
   l'angolo resta smussato, come i pulsanti. I crediti sotto la mappa sono link (termini di Geoapify e OpenStreetMap). */
body[data-b4] .s-mappa4-box { min-width: 0; }
body[data-b4] .s-card + .s-mappa4-box, body[data-b4] .s-rows--contact + .s-mappa4-box { margin-top: 24px; }
body[data-b4] .s-mappa4 { margin: 0; }
body[data-b4] .s-mappa4 .s-frame img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
body[data-b4] .s-mappa4-crediti { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
body[data-b4] .s-mappa4-crediti a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
body[data-b4] .s-mappa4-ind { margin: 0; }
body[data-b4] .s-mappa4-btn { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
body[data-b4] .s-pill4 { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--ink); font: 600 var(--fs-small)/1.2 var(--body); text-decoration: none; }
body[data-b4] .s-pill4:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-b4] .s-pill4:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }

/* ---------- Giro 3 della notte del 28/10 (anteprima Campagnano) ----------
   - «Chi sono»: la scheda pratica «Dove e quando» accanto a come lavora, in un riquadro chiaro (senza la mappa la colonna
     destra aveva solo l'indirizzo). Sul pannello del colore del riquadro un filetto la tiene staccata.
   - Home: i percorsi scritti dal professionista, nome e una riga, dopo le aree, a righe con un filetto come un indice:
     al telefono il nome sopra la riga, dal tablet il nome a sinistra e la riga accanto.
   - Il logo sulla base chiara: la base con gli angoli del sito, un po' più grande, così tronco e figure si vedono. */
body[data-b4] .s-pratica4 { padding: 24px; border-radius: var(--r-box); background: var(--sup); box-shadow: inset 0 0 0 1px var(--rule); }
body[data-b4] .s-pratica4 h3 { margin: 0 0 16px; }
body[data-b4] .s-pratica4 dl { display: grid; gap: 14px; margin: 0; }
body[data-b4] .s-pratica4 dl > div { display: grid; gap: 2px; }
body[data-b4] .s-pratica4 dt { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
body[data-b4] .s-pratica4 dd { margin: 0; }
body[data-b4] .s-pratica4 .s-mappa4-box { margin-top: 20px; }
body[data-b4] .s-pratica4 .s-mappa4-btn { margin-top: 0; }
@media (min-width: 1024px) { body[data-b4] .s-pratica4 { padding: 32px; } }
body[data-b4] .s-percorsi4-lista { display: grid; margin: 0; padding: 0; list-style: none; }
body[data-b4] .s-percorsi4-lista li { padding: 20px 0 22px; border-top: 1px solid var(--rule); }
body[data-b4] .s-percorsi4-lista h3 { margin: 0; }
body[data-b4] .s-percorsi4-lista p { margin: 6px 0 0; max-width: 58ch; color: var(--muted); }
@media (min-width: 700px) {
  body[data-b4] .s-percorsi4-lista li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: baseline; }
  body[data-b4] .s-percorsi4-lista p { margin: 0; }
}
body[data-b4] .s-logo.s-logo-base { height: 56px; max-width: 180px; padding: 4px 8px; border-radius: 14px; background: var(--sup); }
/* (verifica del giro 3) al telefono un logo largo resta largo al massimo 110 px, come prima della base più alta: a 136 px
   (logo 3:1) il nome accanto si tagliava già a 375 px («Dott.ssa Giulia…»); i loghi quadrati (l'albero) non cambiano */
@media (max-width: 699px) { body[data-b4] .s-logo.s-logo-base { height: 48px; max-width: 110px; border-radius: 12px; } }
/* Import completo (P1, analisi §3 J): un logo largo che in testata si legge (lib/logo.js, formaLogo: consiglio «intero»,
   più di 3,5 volte largo quanto alto) sul computer arriva a 240 px invece di 140, così non si schiaccia; al telefono
   resta come gli altri. Con la scritta troppo piccola la testata mostra il simbolo (lib/render.js, logoInTestata). */
@media (min-width: 1024px) { body[data-b4] .s-header .s-logo.is-largo { max-width: 240px; } }
/* Giro 4 del 28/10: sotto i 360 px un logo largo lasciava al nome 78 px (68 senza la base) e il nome si tagliava dopo due
   righe («Dott.ssa Paola…»). Qui il logo, con o senza base, si stringe con lo schermo (76 px a 320, di nuovo 110 dai 354),
   gli spazi della testata sono più corti e il nome un punto più piccolo: il nome sta intero su due righe e la testata
   resta alta 64 px. Un nome che non ci sta nemmeno così va su una terza riga invece di tagliarsi. */
@media (max-width: 359px) {
  body[data-b4] .s-header-in { gap: 10px; }
  body[data-b4] .s-brand { gap: 10px; }
  body[data-b4] .s-header .s-logo { max-width: clamp(64px, calc(100vw - 244px), 110px); }
  body[data-b4] .s-brand-text strong { font-size: calc(15px * var(--head-scale, 1)); -webkit-line-clamp: 3; }
}
/* Verifica del giro 3: nella pagina Percorsi (o Tariffe) il listino non ha titolo visibile (solo l'h2 per i lettori di
   schermo), ma lo spazio sopra il corpo dell'indice restava: 80 px vuoti al telefono, circa 150 al computer, sopra
   «Primo incontro». Senza titolo il corpo parte dal bordo interno del pannello. */
body[data-b4] .s-ch--indice > .s-wrap > .s-ch-body:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  body[data-b4] .s-scheda4.is-link, body[data-b4] .s-scheda4.is-link:hover { transition: none; transform: none; }
}
/* Contatti (28/10 sera, titolare: «uno si aspetta che il form arrivi subito»): fino a 1023 px prima il modulo, poi i
   recapiti (contattiB, is-form-prima); dal computer modulo e recapiti stanno già sulla stessa riga */
@media (max-width: 1023px) {
  body[data-b4] .s-ch.is-form-prima .s-ch-head { order: 2; margin-top: var(--s7); }
  body[data-b4] .s-ch.is-form-prima .s-ch-head + .s-ch-body { margin-top: 0; }
}
/* La pagina Percorsi (28/10 sera, paginaPercorsi4): le tappe nel riquadro dei passi, poi un capitolo per percorso come
   quelli delle aree; nell'anteprima del Pro le note dei prezzi d'esempio */
body[data-b4] .s-tappe4-intro { margin: 0 0 24px; max-width: 62ch; font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
body[data-b4] .s-tappe4 .s-box-passi .s-box-c p { max-width: 62ch; text-wrap: pretty; }
body[data-b4] .s-percorso4 .s-cap4-corpo > p:first-child:not(.s-cap4-parte) { margin-bottom: 14px; }
body[data-b4] .s-percorso4 .s-cap4-fatti { font-weight: 600; color: var(--ink); }
body[data-b4] .s-percorso4 .pv-esempio4 { margin-top: 8px; }
/* «Scorri l'apertura» nell'anteprima (titolare, 28/10; lib/render.js, scorriBar e SCRIPT_SCORRI, solo versione 4): in basso al centro
   finché l'apertura si vede, sopra il sito e sotto le finestre; da telefono larga quanto lo schermo meno 12 px per lato e
   sopra la barra BSiteMe. Bottoni rettangolari con gli angoli smussati, alti almeno 44 px. Con l'avviso della chat
   aperto la barra non c'è (stesso posto). */
body[data-b4] .pv-scorri { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 74; width: min(440px, calc(100% - 24px)); transform: translateX(-50%); display: grid; gap: 6px; padding: 6px; border-radius: 16px; background: #2f2b5b; color: #fff; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .55); font: 14.5px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; }
body[data-b4] .pv-scorri[hidden], body[data-b4]:has(.pv-chat-toast:not([hidden])) .pv-scorri { display: none; }
body[data-b4] .pv-sc-riga { display: flex; align-items: center; gap: 6px; }
body[data-b4] .pv-sc-fr { flex: none; width: 48px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font: 400 28px/1 system-ui, sans-serif; cursor: pointer; }
body[data-b4] .pv-sc-fr:hover { background: rgba(255, 255, 255, .24); }
body[data-b4] .pv-sc-t { flex: 1; min-width: 0; margin: 0; text-align: center; }
body[data-b4] .pv-sc-t strong { display: block; font-weight: 600; }
body[data-b4] .pv-sc-t small { display: block; color: #d9d5ef; font-size: 12.5px; }
body[data-b4] .pv-sc-t small[hidden] { display: none; }
body[data-b4] .pv-scorri .pv-sc-x { width: 36px; height: 44px; color: #fff; }
body[data-b4] .pv-scorri .pv-sc-x:hover { background: rgba(255, 255, 255, .14); }
body[data-b4] .pv-sc-nota { margin: 0 8px; color: #f3d9ea; font-size: 13px; }
body[data-b4] .pv-sc-nota[hidden], body[data-b4] .pv-sc-acts[hidden] { display: none; }
body[data-b4] .pv-sc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-b4] .pv-sc-acts button { min-height: 44px; padding: 0 12px; border-radius: 8px; font: 600 14.5px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; }
body[data-b4] .pv-sc-ok { border: 0; background: #ed93d3; color: #2f2b5b; }
body[data-b4] .pv-sc-ok:hover { background: #f3aedf; }
body[data-b4] .pv-sc-no { border: 1.5px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; }
body[data-b4] .pv-sc-acts button:disabled { opacity: .6; cursor: default; }
body[data-b4] .pv-sc-msg { margin: 0 8px; font-size: 13px; }
body[data-b4] .pv-sc-msg:empty { display: none; }
body[data-b4] .pv-scorri button:focus-visible { outline: 2px solid #ed93d3; outline-offset: 2px; }
/* al telefono, la barra BSiteMe sta in basso (alta 52 px più il bordo sicuro): la barra sta sopra */
@media (max-width: 699px) {
  body[data-b4] .pv-scorri { bottom: calc(52px + 8px + env(safe-area-inset-bottom)); }
}
/* ---------- I pulsanti: rettangoli con gli angoli smussati, mai a pillola (regola del titolare, 29/10) ----------
   Un raggio solo, --r-btn (12 px), per tutti i pulsanti della versione 4: principali e secondari (apertura, capitoli,
   chiusure, Prenota, landing), quello della testata, il menù del telefono, «Vai al contenuto», i giorni e gli orari del
   calendario (i giorni avevano il raggio dei riquadri, 18-24 px) e la firma BSiteMe nel piè di pagina. La barra del
   telefono che li contiene ha il raggio dei pulsanti più il suo spazio interno (6 px), così gli angoli corrono
   paralleli. Le voci del menù prendono lo stesso raggio (la pagina attiva ha un fondo). Restano tonde le pillole delle aree (.s-pillole4, link ai capitoli, non azioni) e i pulsanti
   sotto la mappa (.s-pill4, «Indicazioni stradali», «Apri in Google Maps»), che al titolare piacciono così.
   Altezze e spazi non cambiano: 52 px (apertura e chiusure), 48 (gli altri e la barra), 44 (testata e orari). */
body[data-b4] { --r-btn: 12px; }
body[data-b4] :is(.s-btn, .s-skip, .s-burger, .s-day, .s-slot, .s-sign a) { border-radius: var(--r-btn); }
body[data-b4] .s-header .s-nav a:not(.s-btn) { border-radius: var(--r-btn); }
@media (max-width: 699px) { body[data-b4] .s-dock { border-radius: calc(var(--r-btn) + 6px); } }
/* ---------- Prenota: il blocco «Il primo incontro» in cima (versione 4, titolare 29/10: «Sì, prenotabile»; lib/render.js,
   primoIncontroPrenota4). Il pulsante con il raggio di tutti (--r-btn, qui sopra). ---------- */
body[data-b4] .s-primo-prenota4 .s-primo-prenota4-cta { margin: 24px 0 0; }
body[data-b4] .s-primo-prenota4 .s-muted { margin: 12px 0 0; }
@media (max-width: 699px) {
  body[data-b4] .s-primo-prenota4 .s-btn { width: 100%; }
}
/* ---------- La barra del telefono con il primo incontro prenotabile (versione 4, titolare 29/10: «Sì, allinea»; lib/render.js,
   contactDock): le parole intere del pulsante, su due righe quando non stanno in una (a 320 px «Prenota e paga il primo
   incontro»), mai tagliate; «Chiama» resta stretto accanto ---------- */
@media (max-width: 699px) {
  body[data-b4] .s-dock-primo4 .s-btn { white-space: normal; line-height: 1.15; text-align: center; }
  body[data-b4] .s-dock-primo4.s-dock-due { grid-auto-flow: row; grid-template-columns: auto minmax(0, 1fr); }
  body[data-b4] .s-dock-primo4 .s-btn-ghost { padding: 0 16px; }
}
/* Al telefono, con il velo, il titolo sale sull'ultimo 12% della foto: la pillola del ritratto di esempio sta sopra quella
   striscia. La regola uguale nel blocco del segno IA vale solo con il segno, spento dal 31/10. */
@media (max-width: 699px) {
  body[data-b4] .s-ap--sfondo .s-figb.is-esempio.is-filo .s-cap { bottom: calc(12% + 10px); }
}
/* ---------- Pagine dedicate: Approccio e pagine per area (Blocco 3). Solo colori e caratteri del tema: valgono con ogni tinta ---------- */
body[data-b4] .s-bricole { margin: 0 0 14px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
body[data-b4] .s-bricole ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
body[data-b4] .s-bricole li + li::before { content: '›'; margin-right: 8px; opacity: .7; }
body[data-b4] .s-bricole a { display: inline-flex; align-items: center; min-height: 28px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
body[data-b4] .s-ph-text .s-ph-cta5 { margin: 20px 0 0; }
@media (max-width: 699px) { body[data-b4] .s-ph-text .s-ph-cta5 .s-btn { width: 100%; } }
body[data-b4] .s-cap5-fig { margin-top: 20px; }
body[data-b4] .s-prose5 strong { font-weight: var(--strong-w, 600); color: var(--ink); }
/* il nome fisso della sezione sopra il titolo proprio della pagina */
body[data-b4] .s-occh5 { margin: 0 0 6px; font-size: var(--fs-small); font-weight: var(--strong-w, 600); line-height: 1.4; color: var(--muted); }
/* il riquadro finale: stessa griglia dell'invito, con un titolo e le righe pratiche al posto della frase grande */
body[data-b4] .s-contatto5-testo { grid-column: 1 / 8; }
body[data-b4] .s-contatto5-testo h2 { margin: 0 0 16px; }
body[data-b4] .s-contatto5-testo p { margin: 8px 0 0; max-width: 58ch; color: var(--muted); }
body[data-b4] .s-contatto5-testo p:first-of-type { color: var(--ink); font-size: var(--fs-lead); line-height: 1.45; }
@media (max-width: 1023px) { body[data-b4] .s-contatto5-testo { grid-column: 1 / -1; } }
body[data-b4] .s-altre5 h2 { grid-column: 1 / -1; margin: 0; }
body[data-b4] .s-altre5 .s-pillole4 { grid-column: 1 / -1; }
/* ---------- fine pagine dedicate ---------- */
/* ---------- Landing di campagna (/primo-incontro, offerta di lancio del 29/10; lib/render.js, paginaLanding) ----------
   Solo body[data-b4][data-landing]. Un'azione sola: i pulsanti con il raggio di tutti quelli della versione 4 (--r-btn,
   12 px, anche nella barra del telefono: «I pulsanti», più sopra). La testata senza menù: logo e nome, e dal tablet il pulsante
   (al telefono c'è la barra). Senza la barra dell'anteprima la testata sta in alto anche nell'anteprima. */
body[data-b4][data-landing] .s-header { top: var(--gap); }
body[data-b4][data-landing] .s-header-in { justify-content: space-between; }
body[data-b4][data-landing] .s-lp-testata-btn { display: none; }
body[data-b4][data-landing] .s-lp-primo h2 { text-wrap: balance; }
body[data-b4][data-landing] .s-lp-cta { margin: 28px 0 0; }
body[data-b4][data-landing] .s-lp-dati { margin: 0 0 28px; }
body[data-b4][data-landing] #come-lavoro .s-prose p { max-width: 62ch; }
body[data-b4][data-landing] .s-lp-piede { padding: 40px 0 32px; }
body[data-b4][data-landing] .s-lp-piede p { max-width: 72ch; margin: 0 0 8px; }
body[data-b4][data-landing] .s-lp-piede-chi { color: var(--piede-ink); }
body[data-b4][data-landing] .s-lp-piede-link a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 700px) {
  body[data-b4][data-landing] .s-lp-testata-btn { display: inline-flex; flex: none; min-height: 44px; padding: 0 20px; font-size: 16px; }
  body[data-b4][data-landing] .s-header.is-cta-vista .s-lp-testata-btn { background: transparent; color: var(--ap-ink) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
}
@media (max-width: 699px) {
  body[data-b4][data-landing] .s-dock .s-btn { white-space: normal; line-height: 1.15; text-align: center; }
  body[data-b4][data-landing] .s-lp-cta .s-btn { width: 100%; }
}
/* ===== fine aree4 ===== */

/* ===== Direzione B · ancore (tutti i siti della direzione B, giro 3 della notte del 28/10) =====
   Al telefono la testata della direzione B resta ferma in alto (sticky, a --gap dal bordo, alta --header-h). Lo
   scroll-margin di 12 px del sito pubblicato era quello della grafica 2, dove al telefono la testata scorre via: con un
   link come /aree#ansia il titolo del capitolo finiva sotto la testata. Ora il capitolo si ferma subito sotto la testata,
   con la striscia di carta in mezzo. Le voci con l'àncora che non sono pannelli (le aree di «Mi occupo anche di», le
   schede della pagina unica) non hanno lo spazio interno del pannello: lì un po' di spazio in più, anche nell'anteprima e
   al computer. Solo CSS: l'HTML dei siti già creati non cambia. */
body[data-dir="b"] main :is(article, li)[id] { scroll-margin-top: calc(52px + var(--gap) + var(--header-h) + 24px); }
body[data-dir="b"].s-live main :is(article, li)[id] { scroll-margin-top: calc(var(--gap) + var(--header-h) + 24px); }
@media (max-width: 699px) {
  body[data-dir="b"] main :is(article, li)[id] { scroll-margin-top: calc(var(--gap) + var(--header-h) + 24px); }
  body[data-dir="b"].s-live section[id] { scroll-margin-top: calc(var(--header-h) + 2 * var(--gap)); }
}
/* ===== fine ancore ===== */

/* ===== Direzione B · avvisi dell'anteprima (6/11) =====
   La scelta del logo («Togli lo sfondo / Tieni lo sfondo») sta nel riquadro degli avvisi sotto l'apertura (render.js),
   non più tra la testata e l'apertura, dove toglieva alla testata trasparente il colore dell'apertura dietro. Chiusa con
   la ×, se era l'ultimo avviso il riquadro non resta vuoto col bordo. Solo nell'anteprima, dal blocco 2 in poi. */
body[data-b2] .pv-avvisi-b:not(:has(> .pv-notice:not([hidden]))) { display: none; }
/* ===== fine avvisi ===== */

/* ===== Piè di pagina · social (richiesta del titolare del 2/11) =====
   Le icone dei profili social sotto i recapiti (lib/render.js, socialPiede): link, oppure pulsanti nell'anteprima per
   i profili da collegare. 44 × 44 px da toccare, nel colore del piè di pagina, con il disegno allineato al testo dei
   recapiti. Il selettore è lungo perché deve valere anche sul Quaderno, che mette i recapiti in riga. */
.s-footer .s-colo-contact ul.s-colo-social { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0 -11px; }
.s-footer .s-colo-contact .s-colo-social li { display: block; margin: 0; }
.s-footer .s-colo-contact .s-colo-social :is(a, button) { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.s-footer .s-colo-contact .s-colo-social :is(a, button):hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.s-footer .s-colo-contact .s-colo-social button { color: inherit; }
body[data-dir="b"] .s-footer .s-colo-contact .s-colo-social button { color: var(--piede-ink); }
.s-colo-social svg { display: block; width: 22px; height: 22px; fill: currentColor; }
/* ===== fine social ===== */