/* GRAFICA 1, COPIA CONGELATA (12 ottobre 2026): non si modifica. La usano lib/render-v1.js, le anteprime e i siti
   creati prima della grafica 2. La grafica 2 è in site.css.
   Siti dei professionisti. Colori e caratteri arrivano dallo stile scelto (variabili impostate per ogni sito):
   --accent colore scuro di ancora (pulsanti, fasce), --accent-text etichette e link, --deco dettagli decorativi,
   --soft fondo tenue, --head/--head-w/--body caratteri.
   Marchio di fabbrica BSiteMe, uguale in tutti i siti: pulsanti rettangolari, etichette maiuscole spaziate,
   il filo con la "b" tra le sezioni e il sigillo in piè di pagina. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.7 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: var(--head-w, 400); line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; line-height: 1.25; }
p { margin: 0 0 1em; }
/* Parole lunghe, email e indirizzi vanno a capo invece di uscire dallo schermo */
h1, h2, h3, p, li, summary, figcaption { overflow-wrap: break-word; }
@media (max-width: 560px) { h1, h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } }
::selection { background: var(--soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 140px; }

.s-wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.s-eyebrow { font: 600 12px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.s-muted { color: var(--muted); font-size: 15px; }
.s-more { margin-top: 30px; }
.s-link { color: var(--accent-text); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--deco); padding-bottom: 2px; }
.s-link:hover { border-bottom-color: var(--accent-text); }
/* Area di tocco di almeno 44 px sui link piccoli (contatti, privacy), senza cambiarne l'aspetto */
.s-link, .s-contacts a, .s-footer-small a, .s-check a { position: relative; }
.s-link::after, .s-contacts a::after, .s-footer-small a::after, .s-check a::after { content: ''; position: absolute; inset: -12px -6px; }
.s-check a::after { inset: -14px -4px; }
/* 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 { overflow-wrap: anywhere; }

/* Barra dell'anteprima */
.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; }
.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; }
/* "Vuoi cambiare qualcosa?" 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-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-redo { display: grid; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid #e3e8e6; }
.pv-redo h3 { font: 700 16px/1.3 system-ui, sans-serif; margin: 0; }
.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-redo-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
.pv-redo-links .pv-pay { padding: 12px; font-size: 15px; }
.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; }
.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; }
.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; }

/* Testata */
.s-header { position: sticky; top: 52px; z-index: 50; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.s-live .s-header { top: 0; }
.s-header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.s-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.s-logo { height: 44px; width: auto; max-width: 140px; object-fit: contain; }
.s-brand-mark { color: var(--accent-text); display: grid; flex: none; }
.s-brand-mark svg { display: block; width: auto; height: 42px; }
.s-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.s-brand-text strong { font: var(--head-w, 400) 19px/1.15 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-brand-text.is-word strong { font-style: italic; font-size: 23px; }
.s-brand-text > span { font: 600 10px/1.6 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.s-nav { display: flex; align-items: center; gap: 24px; }
.s-nav a { text-decoration: none; font-size: 15px; color: var(--muted); white-space: nowrap; }
.s-nav a:hover, .s-nav a[aria-current] { color: var(--ink); }
.s-nav a[aria-current] { font-weight: 600; }
.s-burger { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; }
.s-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.s-burger span { transition: transform .2s ease; }
.s-burger[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.s-burger[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Testata non fissa su telefono e sugli schermi bassi (telefoni in orizzontale): il menù aperto si raggiunge scorrendo */
@media (max-width: 700px), (max-height: 560px) { .s-header { position: relative; top: 0; } }
@media (max-width: 1100px) {
  .s-burger { display: flex; }
  .s-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); display: none; }
  .s-nav.open { display: flex; }
  .s-nav a { padding: 12px 4px; font-size: 16px; }
  .s-nav .s-btn { margin-top: 8px; text-align: center; color: var(--accent-ink); }
}
/* Testata fissa (tablet): il menù non va oltre lo schermo, scorre al suo interno */
@media (min-width: 701px) and (max-width: 1100px) 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); }
}

/* Pulsanti: rettangolari, testo maiuscolo spaziato */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink) !important; border: 0; border-radius: 2px; padding: 15px 24px; font: 600 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s ease; }
.s-btn:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.s-btn:disabled { opacity: .45; cursor: not-allowed; }
.s-btn-sm { padding: 11px 16px; font-size: 12px; }
.s-btn-ghost { background: transparent; color: var(--accent-text) !important; box-shadow: inset 0 0 0 1px var(--accent-text); }
.s-btn-ghost:hover { background: var(--soft); }
.s-btn-light { background: var(--surface); color: var(--ink) !important; }
.s-btn-light:hover { background: var(--soft); }
.s-btn-wide { width: 100%; margin-top: 18px; }
.s-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }

/* Aperture */
.s-hero h1 { margin-bottom: 20px; }
.s-lead { font-size: 1.12rem; color: var(--muted); max-width: 34em; margin: 0; }
.s-hero-photo { margin: 0; position: relative; }
.s-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Scritta quasi invisibile sulle immagini generate */
.s-caption { position: absolute; right: 8px; bottom: 6px; z-index: 2; font: 400 9px/1 var(--body); letter-spacing: .02em; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* A · ritratto sfalsato su un blocco di colore */
.s-hero-a { padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.s-hero-a .s-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.s-hero-a .s-hero-photo { aspect-ratio: 4 / 5; width: 86%; justify-self: center; }
.s-hero-a .s-hero-photo::before { content: ''; position: absolute; inset: 7% -9% -7% 9%; background: var(--soft); }
.s-hero-a .s-hero-photo img { position: relative; object-position: 50% 25%; }
@media (max-width: 820px) {
  .s-hero-a .s-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .s-hero-a .s-hero-photo { width: min(76%, 320px); justify-self: start; }
}

/* B · solo parole */
.s-hero-b { padding: clamp(48px, 9vw, 120px) 0 clamp(48px, 7vw, 88px); }
.s-hero-b h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 15ch; }
.s-rule { height: 1px; background: var(--ink); opacity: .16; margin: 40px 0 26px; }
.s-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 18px 28px; }
.s-fact { display: grid; gap: 2px; font-size: 15px; }
.s-fact span:first-child { font: 600 11px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* C · foto piena con riquadro chiaro */
.s-hero-c { display: grid; }
.s-hero-c > * { grid-area: 1 / 1; }
.s-hero-c .s-hero-photo { height: clamp(420px, 66vh, 640px); }
.s-hero-c .s-hero-photo img { object-position: 50% 35%; }
.s-hero-c .s-caption { top: 12px; bottom: auto; }
.s-hero-c .s-wrap { align-self: end; padding-bottom: clamp(16px, 4vw, 48px); }
.s-hero-card { position: relative; background: var(--surface); padding: clamp(24px, 4vw, 44px); max-width: 560px; }
.s-hero-card h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
@media (max-width: 700px) {
  .s-hero-c > * { grid-area: auto; }
  .s-hero-c .s-hero-photo { height: 320px; }
  .s-hero-c .s-wrap { margin-top: -56px; padding-bottom: 8px; }
}

/* D · pannello nel colore dello stile e foto */
.s-hero-d { display: grid; grid-template-columns: minmax(0, 1fr) min(44vw, 560px); min-height: clamp(480px, 72vh, 700px); }
.s-hero-panel { background: var(--accent); color: #fff; display: grid; align-items: center; padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px); }
.s-hero-panel .s-hero-text { max-width: 520px; width: 100%; justify-self: end; }
.s-hero-panel .s-eyebrow { color: rgba(255, 255, 255, .74); }
.s-hero-panel .s-lead { color: rgba(255, 255, 255, .82); }
.s-hero-panel .s-btn { background: var(--deco); color: var(--ink) !important; }
.s-hero-panel .s-btn:hover { background: color-mix(in srgb, var(--deco) 85%, #fff); }
.s-hero-panel .s-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.s-hero-d .s-hero-photo { min-height: 320px; }
.s-hero-d .s-hero-photo img { position: absolute; inset: 0; object-position: 50% 22%; }
@media (max-width: 820px) {
  .s-hero-d { grid-template-columns: 1fr; min-height: 0; }
  .s-hero-d .s-hero-photo { aspect-ratio: 4 / 5; min-height: 0; }
  .s-hero-panel .s-hero-text { justify-self: start; }
}

/* Il filo: una riga sottile con la "b" BSiteMe tra le sezioni */
.s-thread { display: flex; align-items: center; gap: 16px; width: min(1120px, 100% - 32px); margin-inline: auto; padding-block: 22px; color: var(--deco); }
.s-thread::before, .s-thread::after { content: ''; flex: 1; height: 1px; background: currentColor; }
.s-thread span { width: 10px; height: 15px; display: grid; }
.s-thread svg { width: 100%; height: 100%; }

/* Sezioni */
.s-section { padding: clamp(48px, 7vw, 88px) 0; }
.s-alt { background: var(--soft); }
.s-head { max-width: 640px; margin-bottom: 36px; }
.s-pagehead { padding: clamp(48px, 7vw, 80px) 0 8px; }
.s-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.s-split-top { align-items: start; }
@media (max-width: 820px) { .s-split { grid-template-columns: 1fr; } }
/* Le colonne si stringono invece di allargarsi a una parola lunga */
.s-hero-grid > *, .s-split > *, .s-ph-grid > *, .s-areas-top > * { min-width: 0; }
.s-prose { max-width: 640px; }
.s-prose h3 { margin: 26px 0 10px; }
.s-narrow { margin-inline: auto; }
.s-list { padding-left: 20px; margin: 0 0 1em; }
.s-list li { margin-bottom: 6px; }
.s-portrait { margin: 0; position: relative; aspect-ratio: 4 / 5; max-width: 380px; }
.s-portrait::before { content: ''; position: absolute; inset: 6% -7% -6% 7%; background: var(--soft); }
.s-portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.s-alt .s-portrait::before { background: var(--bg); }
/* a una colonna il riquadro di colore dietro il ritratto resta dentro il margine */
@media (max-width: 820px) { .s-portrait { max-width: min(380px, 92%); } }

/* Immagine accanto al titolo delle aree */
.s-areas-top { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(24px, 5vw, 64px); align-items: end; margin-bottom: 36px; }
.s-areas-top .s-head { margin-bottom: 0; }
.s-side-photo { margin: 0; position: relative; aspect-ratio: 4 / 3; }
.s-side-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .s-areas-top { grid-template-columns: 1fr; } }

/* Elenchi a righe (aree, percorsi) */
.s-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 48px; }
.s-item { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding: 22px 0 26px; }
.s-item h3 { margin-bottom: 8px; }
.s-item p { color: var(--muted); font-size: 15.5px; margin: 0; }
.s-service .s-meta { margin-top: 12px; color: var(--accent-text); font: 600 12px/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.s-note { background: var(--surface); padding: 14px 18px; border-radius: 2px; color: var(--muted); font-size: 15px; max-width: 720px; }
.s-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.s-gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.s-gallery img:first-child { grid-column: 1 / -1; }

.s-faq { max-width: 760px; }
.s-faq details { border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.s-faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font: var(--head-w, 400) 1.25rem/1.35 var(--head); }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--accent-text); font: 300 1.6rem/1 var(--body); transition: transform .2s; }
.s-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.s-faq details p { color: var(--muted); padding-right: 36px; max-width: 65ch; }

.s-band { background: var(--accent); color: var(--accent-ink); padding: 48px 0; }
.s-band-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.s-band p { margin: 0; font: var(--head-w, 400) clamp(1.35rem, 2.4vw, 1.8rem)/1.3 var(--head); max-width: 640px; }

/* Contatti */
.s-contacts { list-style: none; padding: 0; margin: 0; display: grid; }
.s-contacts li { border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding: 14px 0; display: grid; gap: 2px; }
.s-contacts span:first-child { font: 600 11px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.s-contacts a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.s-contacts a:hover { color: var(--accent-text); }
.s-form { background: var(--surface); padding: clamp(20px, 3vw, 30px); display: grid; gap: 14px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.s-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.s-form input, .s-form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--bg); color: var(--ink); width: 100%; }
.s-form input:focus, .s-form textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.s-check { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; min-height: 44px; }
.s-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.s-check a { color: var(--accent-text); }
.s-demo { background: color-mix(in srgb, var(--deco) 18%, var(--surface)); color: var(--ink); padding: 12px 14px; font-size: 14px; margin: 0; }
.s-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Prenotazione */
.s-booking { background: var(--surface); padding: clamp(22px, 4vw, 36px); max-width: 760px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.s-booking-info { margin-bottom: 20px; }
.s-booking-info h2 { margin-bottom: 10px; }
.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 color-mix(in srgb, var(--ink) 18%, transparent); background: var(--bg); display: flex; flex-direction: column; align-items: center; cursor: pointer; font: inherit; color: var(--ink); }
.s-day span { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.s-day strong { font: var(--head-w, 400) 1.5rem/1.2 var(--head); }
.s-day.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.s-day.on span { color: var(--accent-ink); }
.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 { padding: 10px 0; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--bg); cursor: pointer; font: 600 15px var(--body); color: var(--ink); }
.s-slot.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Piè di pagina con il sigillo BSiteMe */
.s-footer { background: var(--ink); color: color-mix(in srgb, var(--bg) 80%, transparent); padding: 48px 0 40px; font-size: 14px; }
.s-footer p { margin: 0 0 6px; }
.s-footer strong { color: var(--bg); font-weight: 600; }
.s-footer a { color: inherit; }
.s-footer-small { margin-top: 16px !important; }
.s-sign { margin-top: 26px !important; padding-top: 20px; 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: 13px; 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); }

/* Contatti rapidi su telefono */
.s-dock { display: none; }
@media (max-width: 700px) {
  .s-dock { display: flex; 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 color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 -6px 20px rgb(0 0 0 / .06); }
  .s-dock .s-btn { flex: 1; padding: 14px 12px; white-space: nowrap; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* mentre si scrive nel modulo la barra non copre il campo (browser che la spostano sopra la tastiera) */
  body:has(.s-form :focus) .s-dock { display: none; }
}

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

/* Ingresso una tantum degli elementi sotto la piega: 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. */
.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); }
@media (prefers-reduced-motion: reduce) { .rv .rv-w { opacity: 1; transform: none; transition: none; } }

/* Da mobile l'apertura è centrata, in tutte le varianti */
@media (max-width: 820px) {
  .s-hero .s-hero-text, .s-hero-b .s-wrap { text-align: center; }
  .s-hero h1, .s-hero .s-lead { margin-inline: auto; }
  .s-hero .s-ctas { justify-content: center; }
  .s-hero-a .s-hero-photo { justify-self: center; }
  .s-hero-panel .s-hero-text { justify-self: center; }
  .s-hero-card { margin-inline: auto; }
  .s-hero-b .s-fact { justify-items: center; }
}
/* 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; }
}
/* 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; }
}

/* Suggerimento sotto la barra dell'anteprima: "Cambia foto" e "Cambia layout" */
.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 10px; }
.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; }
/* "Cambia layout": tre schede con lo schema */
.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, .pv-layout.on { border-color: #2f2b5b; box-shadow: 0 0 0 3px rgba(47, 43, 91, .15); }
.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%; }
@media (max-width: 420px) { .pv-layout { padding: 8px; } .pv-layout small { display: none; } }

/* Layout "di lato" con una foto orizzontale */
.s-hero-a.is-wide .s-hero-grid { grid-template-columns: 1fr 1fr; }
.s-hero-a.is-wide .s-hero-photo { aspect-ratio: 4 / 3; width: 86%; }
@media (max-width: 820px) { .s-hero-a.is-wide .s-hero-grid { grid-template-columns: minmax(0, 1fr); } .s-hero-a.is-wide .s-hero-photo { width: 86%; } }

/* Layout "sopra": fascia con la foto, poi il testo */
.s-hero-top .s-hero-photo { height: clamp(240px, 46vh, 460px); }
.s-hero-top .s-hero-photo img { object-position: 50% 35%; }
.s-hero-top .s-wrap { padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 88px); }
.s-hero-top .s-hero-text { max-width: 760px; }
@media (max-width: 700px) { .s-hero-top .s-hero-photo { height: 230px; } .s-hero-top .s-wrap { padding-top: 28px; } }

/* Layout "sfondo velato": la foto dietro il testo, con un velo nel colore dello stile */
.s-hero-veil { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(460px, 74vh, 680px); color: #fff; }
.s-hero-veil .s-hero-photo { position: absolute; inset: 0; z-index: -1; }
.s-hero-veil .s-hero-photo img { object-position: 50% 35%; }
.s-hero-veil .s-hero-photo::after, .s-ph-veil .s-ph-photo::after, .s-areas-veil .s-band-photo::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 72%, transparent); }
.s-hero-veil .s-hero-photo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 90%, transparent), color-mix(in srgb, var(--accent) 66%, transparent) 60%, color-mix(in srgb, var(--accent) 40%, transparent)); }
.s-hero-veil .s-wrap { padding: clamp(56px, 9vw, 120px) 0; }
.s-hero-veil .s-hero-text { max-width: 640px; }
.s-hero-veil .s-eyebrow, .s-ph-veil .s-eyebrow, .s-areas-veil .s-eyebrow { color: rgba(255, 255, 255, .8); }
.s-hero-veil .s-lead { color: rgba(255, 255, 255, .88); }
.s-hero-veil .s-btn { background: var(--deco); color: var(--ink) !important; }
.s-hero-veil .s-btn:hover { background: color-mix(in srgb, var(--deco) 85%, #fff); }
.s-hero-veil .s-link { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
@media (max-width: 820px) { .s-hero-veil .s-hero-photo::after { background: color-mix(in srgb, var(--accent) 78%, transparent); } }

/* Testate delle pagine interne con la loro immagine (Chi sono, Aree), secondo il layout */
.s-ph-photo { margin: 0; position: relative; }
.s-ph-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-ph-grid { display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: clamp(24px, 5vw, 64px); align-items: center; }
.s-ph-side .s-ph-photo { aspect-ratio: 4 / 3; }
.s-ph-top .s-ph-photo { aspect-ratio: 21 / 8; margin-bottom: clamp(28px, 4vw, 44px); }
.s-ph-veil { position: relative; isolation: isolate; color: #fff; padding: clamp(80px, 12vw, 150px) 0 clamp(40px, 6vw, 64px); }
.s-ph-veil .s-ph-photo { position: absolute; inset: 0; z-index: -1; }
@media (max-width: 820px) { .s-ph-grid { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 700px) { .s-ph-top .s-ph-photo { aspect-ratio: 16 / 9; } }
.s-areas-page { padding-top: clamp(28px, 4vw, 48px); }

/* Aree nella home: foto sopra il titolo o titolo sulla foto velata */
.s-band-photo { margin: 0 0 36px; position: relative; aspect-ratio: 21 / 8; }
.s-band-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-areas-veil { position: relative; isolation: isolate; margin-bottom: 36px; padding: clamp(40px, 7vw, 80px) clamp(20px, 4vw, 48px); color: #fff; }
.s-areas-veil .s-band-photo { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; z-index: -1; }
.s-areas-veil .s-head { margin: 0; }
@media (max-width: 700px) { .s-band-photo { aspect-ratio: 16 / 9; } }

/* "Chi sono" senza ritratto: riquadro con le iniziali nei colori dello stile */
.s-initials { position: relative; aspect-ratio: 4 / 5; max-width: 380px; }
.s-initials::before { content: ''; position: absolute; inset: 6% -7% -6% 7%; background: var(--soft); }
.s-alt .s-initials::before { background: var(--bg); }
.s-initials span { position: relative; height: 100%; display: grid; place-items: center; background: var(--accent); color: var(--deco); font: var(--head-w, 400) clamp(4rem, 9vw, 7rem)/1 var(--head); letter-spacing: .04em; }
@media (max-width: 820px) { .s-initials { aspect-ratio: 1; max-width: 180px; } .s-initials span { font-size: 3.6rem; } }

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