/* ImmoProf, WV-12 (18/10/2026): le home declinate per persona (/buyer/, /owner/, /seller/).

   Piano: docs/BRAND_V4_2026-10-16/60_PIANO_WIZARD_V4.md par. 3.4 e 4 (WV-12); 51 par. 2 (Q2 la grafica d'apertura per
   persona, Q3 la tipologia per prima). Studio: studio_wizard/WB_home_la_casa.html (la home WB approvata dal PO) e
   wizard_comune.css. Token: 02_TOKEN_V4.md (Figtree, colori, --bordo-campo, --castagno-3 #7B716A, tema scuro).

   Regola di convivenza: la pagina carica ancora global.css, che serve al wizard di oggi dentro #immoprof-wizard. Per non
   toccare il contenitore, OGNI regola di questo foglio vive sotto un blocco .hv4 (testata, apertura, sezioni, piede), e
   nessun blocco .hv4 contiene #immoprof-wizard: il v4 (assets/css/wizard_v4.css, scoped su #immoprof-wizard.wv4) e il
   wizard di oggi (global.css, .iw-*) non vedono niente di qui. I token stanno sui blocchi, non sul body. */

.hv4{
  --carta:#FFFFFF; --intonaco:#F4EFEC;
  --castagno:#2A2320; --castagno-2:#5F5550; --castagno-3:#7B716A;
  --linea:#E3DCD7; --linea-forte:#CFC6C0; --bordo-campo:#928882;
  --cobalto:#1B4F9C; --cobalto-chiaro:#E6EDF8; --cobalto-testo:#FFFFFF;
  --geranio:#B0245A;
  --f:"Figtree","Segoe UI",system-ui,sans-serif;
  --gutter:40px; --respiro:112px;
  color:var(--castagno);font-family:var(--f);font-size:17px;line-height:1.55;
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hv4{
  --carta:#1B1716; --intonaco:#262120;
  --castagno:#F3EDE9; --castagno-2:#C7BCB5; --castagno-3:#A69B94;
  --linea:#3A3330; --linea-forte:#4D4440; --bordo-campo:#746A64;
  --cobalto:#7FB0F0; --cobalto-chiaro:#1C2A40; --cobalto-testo:#0B1A30;
  --geranio:#F28AB0;
}}
:root[data-theme="dark"] .hv4{
  --carta:#1B1716; --intonaco:#262120;
  --castagno:#F3EDE9; --castagno-2:#C7BCB5; --castagno-3:#A69B94;
  --linea:#3A3330; --linea-forte:#4D4440; --bordo-campo:#746A64;
  --cobalto:#7FB0F0; --cobalto-chiaro:#1C2A40; --cobalto-testo:#0B1A30;
  --geranio:#F28AB0;
}
/* il fondo della pagina (02 par. 6: body con fondo esplicito), chiaro e scuro */
html:has(body.home-v4),body.home-v4{background:#FFFFFF;overflow-x:clip}
body.home-v4{color:#2A2320}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.home-v4{background:#1B1716;color:#F3EDE9;color-scheme:dark}
  html:root:not([data-theme="light"]):has(body.home-v4){background:#1B1716}}
:root[data-theme="dark"] body.home-v4,html[data-theme="dark"]:has(body.home-v4){background:#1B1716;color:#F3EDE9;color-scheme:dark}

.hv4 *,.hv4 *::before,.hv4 *::after{box-sizing:border-box}
.hv4 a{color:inherit}
.hv4 :where(a,button,summary):focus-visible{outline:3px solid var(--cobalto);outline-offset:3px;border-radius:6px}
.hv4 .wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.hv4 p{margin:0 0 12px}
.hv4 h1,.hv4 h2,.hv4 h3{font-family:var(--f);color:var(--castagno)}
.hv4 .n{white-space:nowrap}

/* la testata: marchio, le voci per chi, una uscita (studio WB). Porta anche la classe site-header: il v4 sulla landing
   misura l'altezza di .site-header per non finire sotto la testata appiccicata (wizard_v4/avvio.js) */
header.hv4.testata{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--carta) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--linea)}
header.hv4.testata .wrap{display:flex;align-items:center;gap:8px;height:64px}
.hv4 .marca{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;margin-right:16px;color:var(--castagno)}
.hv4 .marca svg{flex:0 0 28px;width:28px;height:28px}
.hv4 .voci{display:flex;gap:2px}
.hv4 .voci a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--castagno-2);text-decoration:none;white-space:nowrap}
.hv4 .voci a:hover{color:var(--castagno);background:var(--intonaco)}
.hv4 .voci a[aria-current]{color:var(--castagno);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.hv4 .spazio{flex:1}
.hv4 .link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;border-radius:10px;color:var(--castagno)}

/* l'apertura (WB): a sinistra chi, titolo, una riga, la domanda della tipologia; a destra la grafica della persona */
.hv4 .eroe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:64px 0 80px}
.hv4 .eroe .chi{font-size:18px;font-weight:600;color:var(--castagno-2);margin:0 0 18px}
.hv4 .eroe h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin:0;max-width:13ch;text-wrap:balance}
.hv4 .eroe .sotto{margin:26px 0 0;max-width:46ch;color:var(--castagno-2);font-size:19px}
.hv4 .tipi{margin:36px 0 0;padding:0;border:0;min-width:0}
.hv4 .tipi legend{font-size:22px;font-weight:700;margin:0 0 12px;padding:0;letter-spacing:-.01em;color:var(--castagno)}
.hv4 .tipi .g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hv4 .tipi button{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px;border:1.5px solid var(--bordo-campo);border-radius:14px;background:var(--carta);
  color:var(--castagno);font:700 17px var(--f);text-align:left;cursor:pointer;width:100%}
.hv4 .tipi button:hover{border-color:var(--castagno)}
.hv4 .tipi svg{flex:0 0 44px;width:44px;height:38px;display:block}
.hv4 .eroe .piccola{font-size:15px;color:var(--castagno-2);margin:16px 0 0}
.hv4 .eroe .piccola a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--castagno);text-underline-offset:3px}

/* la grafica: il plastico posato sul bianco (parere 9e), nessuna scatola; i cartellini sono HTML, come nel wizard */
.hv4 .plastico{margin:0;position:relative}
.hv4 .plastico .posa{position:relative;aspect-ratio:1152/896}
.hv4 .plastico img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.hv4 .plastico.taglio .posa{border-radius:14px;overflow:hidden}
.hv4 .plastico figcaption{margin-top:6px;text-align:center;font-size:14px;color:var(--castagno-2)}
.hv4 .cartellini{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.hv4 .cartellino{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translate(-6px,-6px);display:flex;align-items:flex-start;gap:6px;pointer-events:none}
.hv4 .cartellino i{flex:0 0 12px;width:12px;height:12px;border-radius:50%;background:var(--cobalto);box-shadow:0 0 0 3px #fff}
.hv4 .cartellino span{font-size:13px;line-height:1.25;font-weight:600;color:#2A2320;background:rgba(255,255,255,.96);border:1px solid #928882;border-radius:8px;padding:4px 8px;white-space:nowrap}
.hv4 .cartellino span b{display:block;font-weight:700}
.hv4 .cartellino span em{font-style:normal}
.hv4 .cartellino.sx{flex-direction:row-reverse;transform:translate(calc(-100% + 6px),-6px)}
/* il venditore: il cartellino in bianco, senza testo e senza cifre (51 par. 2) */
.hv4 .cartellino.vuoto span{display:block;width:92px;height:40px;padding:0;border-radius:6px;background:#fff;border-color:#928882;box-shadow:0 1px 2px rgba(42,35,32,.12)}
/* tema scuro: la foto e' bianca, posata su un fondo bianco col raggio delle immagini (come nel wizard) */
:root[data-theme="dark"] .hv4 .plastico .posa{background:#fff;border-radius:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hv4 .plastico .posa{background:#fff;border-radius:14px}}
/* il solo momento della pagina (02 par. 4): l'arrivo del plastico, che sale come un piano dopo l'altro. Lo stato finale
   e' nell'HTML; senza movimento (prefers-reduced-motion) non si muove niente */
@media (prefers-reduced-motion:no-preference){
  .hv4 .plastico .posa{animation:hv4-arriva 1.1s cubic-bezier(.65,0,.35,1) .25s both}
}
@keyframes hv4-arriva{from{clip-path:inset(100% 0 0 0 round 14px);transform:translateY(14px)}to{clip-path:inset(0 0 0 0 round 14px);transform:none}}

/* le sezioni: righe su fondo bianco separate da filetti (02 par. 3), una sola superficie in rilievo: nessuna */
.hv4.sez{padding:var(--respiro) 0;border-top:1px solid var(--linea)}
.hv4.sez h2{font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0 0 28px;max-width:34ch}
.hv4 .chi-sez{font-size:15px;font-weight:600;color:var(--castagno-2);margin:0 0 10px}
.hv4.sez .sotto{color:var(--castagno-2);margin:0 0 32px;max-width:60ch}
.hv4 .righe{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea);max-width:960px}
.hv4 .righe li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 40px;padding:18px 0;border-bottom:1px solid var(--linea)}
.hv4 .righe .t{font-weight:700;font-size:19px;line-height:1.3;color:var(--castagno)}
.hv4 .righe p{margin:0;color:var(--castagno-2)}

/* l'esempio di calcolo: righe, cifre a destra, tabulari; il segno meno e' U+2212 */
.hv4 .esempio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 40px;max-width:960px}
.hv4 .esempio .contesto p{color:var(--castagno-2)}
.hv4 .esempio .contesto p b{color:var(--castagno)}
.hv4 .conto{width:100%;border-collapse:collapse;font-size:16px}
.hv4 .conto th,.hv4 .conto td{padding:10px 0;white-space:nowrap;border-bottom:1px solid var(--linea);text-align:right;vertical-align:baseline;font-weight:500}
.hv4 .conto th:first-child,.hv4 .conto td:first-child{text-align:left;white-space:normal;padding-right:16px;color:var(--castagno-2);font-weight:500}
.hv4 .conto td + td,.hv4 .conto th + th{padding-left:16px}
.hv4 .conto thead th{font-size:14px;font-weight:600;color:var(--castagno-2);border-bottom:1.5px solid var(--castagno)}
.hv4 .conto td.s{color:var(--cobalto);font-weight:700}
.hv4 .conto tr.totale td{font-weight:700;color:var(--castagno);border-bottom:0;padding-top:14px}
.hv4 .conto tr.totale td:first-child{color:var(--castagno)}
.hv4 .nota{font-size:15px;color:var(--castagno-2);margin:16px 0 0}
.hv4 .esempio .link{padding:0;margin-top:4px}

/* le domande frequenti: righe che si aprono */
.hv4 .faq{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea);max-width:860px}
.hv4 .faq li{border-bottom:1px solid var(--linea)}
.hv4 .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:10px 0;font-weight:700;font-size:18px;line-height:1.3;cursor:pointer;list-style:none;color:var(--castagno)}
.hv4 .faq summary::-webkit-details-marker{display:none}
.hv4 .faq summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--castagno-2);border-bottom:2px solid var(--castagno-2);transform:rotate(45deg);margin:0 6px 4px 0}
.hv4 .faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.hv4 .faq details p{margin:0 0 18px;max-width:64ch;color:var(--castagno-2)}

/* la sezione del wizard: il titolo e' .hv4, il contenitore no (resta quello di prima, dentro .container) */
.sez-wizard{border-top:1px solid #E3DCD7;padding:var(--respiro-wizard,72px) 0 0;background:#FFFFFF}
.sez-wizard .hv4.testa-wizard{padding-bottom:8px}
.sez-wizard .hv4.testa-wizard h2{font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:700;letter-spacing:-.025em;margin:0 0 8px}
.sez-wizard .hv4.testa-wizard p{color:var(--castagno-2);margin:0;max-width:60ch}
.sez-wizard .hv4.testa-wizard p.senza-js{margin-top:12px;color:var(--castagno);font-weight:600}
/* in tema scuro la sezione e' scura solo se il contenitore porta il v4 (che ha i suoi token scuri); il wizard di oggi non
   ha un tema scuro e resta sul bianco */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sez-wizard:has(#immoprof-wizard.wv4){background:#1B1716;border-top-color:#3A3330}}
:root[data-theme="dark"] .sez-wizard:has(#immoprof-wizard.wv4){background:#1B1716;border-top-color:#3A3330}

/* il piede: le voci del sito in righe, la frase YMYL */
footer.hv4.piede{border-top:1px solid var(--linea);padding:40px 0 48px;font-size:15px;color:var(--castagno-2)}
.hv4.piede .voci-piede{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.hv4.piede li a{display:inline-flex;align-items:center;min-height:44px;color:var(--castagno-2);text-decoration:none}
.hv4.piede li a:hover{color:var(--castagno);text-decoration:underline;text-underline-offset:3px}
.hv4.piede .ymyl{max-width:80ch;font-size:14px;margin:0 0 8px}
.hv4.piede .riga-fine{font-size:14px;margin:0}
.hv4.piede .riga-fine a{display:inline-flex;align-items:center;min-height:44px;color:var(--castagno);text-underline-offset:3px}

@media (max-width:980px){
  .hv4{--respiro:80px}
  .sez-wizard{--respiro-wizard:64px}
  .hv4 .eroe{grid-template-columns:1fr;gap:28px}
  .hv4 .plastico{order:-1}
}
@media (max-width:720px){
  .hv4{--gutter:16px;--respiro:56px;font-size:16px}
  .sez-wizard{--respiro-wizard:40px}
  header.hv4.testata .wrap{height:56px}
  .hv4 .marca{margin-right:4px;font-size:17px}
  .hv4 .voci a{padding:0 8px;font-size:14px}
  .hv4 .voci .solo-largo{display:none}
  /* WV-14b (U-12): a 390 «Accedi» usciva dal bordo e le voci cambiavano da una pagina all'altra. Al telefono: le tre
     persone su ogni pagina (Professionisti resta nel piede), «Accedi» sempre, bersagli da 44 px, niente che esca */
  header.hv4.testata .wrap{gap:4px}
  .hv4 .voci{min-width:0}
  .hv4 .link{padding:0 8px}
  .hv4 .eroe{padding:12px 0 40px;gap:8px}
  .hv4 .eroe .chi{font-size:15px;margin-bottom:10px}
  .hv4 .eroe h1{font-size:38px;letter-spacing:-.03em}
  .hv4 .eroe .sotto{font-size:17px;margin-top:12px}
  .hv4 .tipi{margin-top:22px}
  .hv4 .tipi legend{font-size:20px}
  .hv4 .tipi button{min-height:58px;font-size:16px;gap:10px;padding:8px 10px}
  .hv4 .tipi svg{flex-basis:38px;width:38px;height:33px}
  .hv4 .plastico .posa{width:min(100%,280px);margin:0 auto}
  .hv4 .cartellino em{display:none}
  .hv4 .cartellino.solo-largo{display:none}
  .hv4 .eroe .piccola{margin-top:8px}
  .hv4 .conto{font-size:14px}
  .hv4 .conto td + td,.hv4 .conto th + th{padding-left:10px}
  .hv4 .nota{font-size:14px}
  .hv4 .plastico figcaption{font-size:13px;margin-top:2px}
  .hv4 .cartellino span{font-size:11px;padding:2px 6px}
  .hv4 .cartellino span b{display:inline}
  .hv4 .cartellino i{flex-basis:10px;width:10px;height:10px;box-shadow:0 0 0 2px #fff}
  .hv4 .cartellino.vuoto span{width:56px;height:26px}
  .hv4 .righe li{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .hv4 .righe .t{font-size:17px}
  .hv4 .esempio{grid-template-columns:1fr;gap:4px}
  .hv4 .faq summary{font-size:16px;min-height:56px}
  .hv4.piede .voci-piede{gap:0 18px}
  footer.hv4.piede{padding:24px 0 28px}
}
/* WV-14b (U-12): sotto i 480 px il marchio nella testata e' il solo segno (il nome resta per chi legge con la voce: il
   link dice «ImmoProf, pagina iniziale»); sotto i 375 le voci si stringono ancora */
@media (max-width:479px){
  .hv4 .marca{margin-right:2px;min-width:44px;justify-content:center}
  .hv4 .marca span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:374px){
  .hv4{--gutter:12px}
  .hv4 .voci a{padding:0 5px;font-size:13.5px}
  .hv4 .link{padding:0 5px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hv4 *,.hv4 *::before,.hv4 *::after{transition:none!important;animation:none!important}
}