/* ==========================================================================
vp-luce.css — Strato di luce delle pagine interne (05.11.2026)
--------------------------------------------------------------------------
Richiesta del titolare: «le pagine oltre la home hanno foto scure su una
cornice scura. Non sono piaciute». Standard: nero, oro, champagne, bianco
caldo, grigio perla, vetro, luce.
COSA FA
1. Toglie i filtri che scurivano le foto di contenuto (brightness .72-.90
di vp-tono-css, vp-NNN, vp-condiviso-*).
2. Porta i veli scuri degli hero solo dove c'e' il testo: la foto resta
piena dall'altra parte.
3. Mette le foto in una cornice di luce: filo champagne sui fondi chiari,
passe-partout avorio sui fondi scuri, ombra morbida e calda.
4. Il blu notte del modello locale (non e' un colore di marca, par. 4 di
CLAUDE.md) diventa inchiostro, come gli hero a tutta larghezza.
5. Tabelle leggibili sul telefono, larghezza di lettura, card con filo oro.
NON TOCCA la home, i testi, i moduli, le classi .vp-acq-*, .vp-buy,
.vp-wa2, .vp-mbar (css/vp-acquista.css).
ORDINE: dopo vp-fix-overflow.css, prima di vp-brand.css (che resta
l'ultimo). Inserito da scripts/conversione/estetica-luce.py.
REVERSIBILE: togliere la riga riporta tutto com'era.
========================================================================== */
:root{
--vp-luce-filo: rgba(217,193,118,.55); /* oro chiaro, filo sottile */
--vp-luce-filo: color-mix(in srgb, var(--vp-oro-chiaro, #D9C176) 55%, transparent);
--vp-luce-ombra: 0 22px 44px -28px rgba(10,9,8,.55), 0 2px 8px -4px rgba(10,9,8,.22);
--vp-luce-ombra-scura: 0 28px 60px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(217,193,118,.35);
--vp-luce-pp: 8px; /* passe-partout */
}
/* --------------------------------------------------------------------------
1. Foto di contenuto senza filtri scurenti
Restano i filtri delle foto con un titolo sopra (photo-break, art-hero,
hero-bg, vp-slogan-photo): li reggono i loro veli.
-------------------------------------------------------------------------- */
.vp-foto, .vp-foto-fredda, .vp-foto-chiara,
.vp-process-img, .vp-process-item:hover .vp-process-img,
.proc-item img, .proc-item:hover img,
.vp-gallery-item img, .tec-cell img, .mat-cell img, .spoke-gallery-cell img,
.art-card img, .vepa-visual img, .intro-visual img, .trasf-card img, .eco-card img{
filter:none!important;
}
/* la striscia del processo ha il titolo in basso: il velo resta solo li' */
.vp-process-overlay{
background:linear-gradient(180deg,rgba(3,3,3,0) 22%,rgba(3,3,3,.8) 44%,rgba(3,3,3,.93) 100%)!important;
}
@media (min-width:1025px){
.vp-process-overlay{
background:linear-gradient(180deg,rgba(3,3,3,0) 36%,rgba(3,3,3,.76) 58%,rgba(3,3,3,.92) 100%)!important;
}
}
/* --------------------------------------------------------------------------
3. Modello locale (.vl, 547 pagine): inchiostro al posto del blu notte,
foto in cornice di luce
-------------------------------------------------------------------------- */
.vl{--vl-notte:var(--vp-inchiostro,#0A0908);--vl-notte2:var(--vp-inchiostro,#0A0908)}
/* foto di sezione: filo champagne e ombra calda sui fondi chiari */
.vl-foto{
background:var(--vp-avorio,#EDEAE3);
box-shadow:0 0 0 1px var(--vp-luce-filo), var(--vp-luce-ombra);
}
.vl-foto figcaption{background:var(--vp-avorio,#EDEAE3);color:var(--vl-ink2,#474c55)}
/* sui fondi scuri: passe-partout avorio */
.vl-scuro .vl-foto{padding:var(--vp-luce-pp);box-shadow:var(--vp-luce-ombra-scura)}
.vl-scuro .vl-foto img{border-radius:9px}
.vl-scuro .vl-foto figcaption{padding:10px 4px 2px}
/* galleria e card delle soluzioni: filo oro sottile, ombra calda al passaggio */
.vl-gal-g figure{border-color:var(--vp-luce-filo);box-shadow:var(--vp-luce-ombra)}
.vl-gal-g a{background:var(--vp-avorio,#EDEAE3)}
.vl-sol-g a{border-color:var(--vp-luce-filo)}
.vl-sol-g a:hover,.vl-sol-g a:focus-visible{border-color:var(--vp-oro,#C4A84A);box-shadow:var(--vp-luce-ombra)}
/* --------------------------------------------------------------------------
4. Blog
Articoli generati (vp-blog.css): la foto d'apertura e la galleria escono
dal nero con un passe-partout avorio; didascalie in inchiostro.
-------------------------------------------------------------------------- */
.vp-a-fig{
padding:var(--vp-luce-pp);background:var(--vp-avorio,#EDEAE3)!important;border-radius:14px;
box-shadow:var(--vp-luce-ombra-scura);
}
.vp-a-fig img{border-radius:8px}
.vp-a-fig figcaption{color:var(--vp-inchiostro,#0A0908);padding:10px 4px 2px}
.vp-a-gal figure{
padding:6px 6px 10px;background:var(--vp-avorio,#EDEAE3);border-radius:12px;
box-shadow:var(--vp-luce-ombra-scura);
}
.vp-a-gal img{border-radius:7px}
.vp-a-gal figcaption{color:var(--vp-inchiostro,#0A0908);margin-top:8px;padding:0 4px;font-size:.82rem}
.vp-a-vid a,.vp-a-vid--v video{box-shadow:var(--vp-luce-ombra-scura)}
/* --------------------------------------------------------------------------
5. Lettura e tabelle
-------------------------------------------------------------------------- */
.vl-s .vl-w>p:not([class]){max-width:72ch}
.vl-tab,.price-table,.perm-table,.vp-a-tab table{font-variant-numeric:tabular-nums}
@media (max-width:520px){
.vl-tab th,.vl-tab td{padding:10px 9px}
.vl-tab td:first-child,.vl-tab th:first-child{white-space:nowrap}
.price-table th,.perm-table th{padding:10px 10px;letter-spacing:.06em}
.price-table td,.perm-table td{padding:12px 10px}
}
/* ==========================================================================
6. APERTURA CHIARA (06.11.2026) — INIZIO BLOCCO «chiaro»
--------------------------------------------------------------------------
Richiesta del titolare (05-06.11.2026, ripetuta): «schiarire le pagine con
le foto oscurate, PIU' CHIARE POSSIBILE». Standard di marca: nero, oro,
champagne, bianco caldo, grigio perla, vetro, luce. Obiettivo misurato:
primo schermo sotto la barra di navigazione con luminosita' media >= 130/255.
COSA FA (solo colori e sfondi; testi, prezzi, moduli e pulsanti invariati)
- modello locale .vl-hero e .vl-hero--cine, pergole .pgs-hero, vecchio
modello .hero, articoli del blog .vp-a-hero e il loro corpo: fondo bianco
caldo / champagne, titoli in inchiostro, corsivo in oro scuro (66521A,
6,3:1 o piu' sul fondo), ombre calde;
- sulle foto a tutta larghezza il testo sta su un pannello di vetro
(bianco caldo al 96%): la foto resta piena e luminosa dall'altra parte;
- le briciole (.vl-bc) escono dal nero; la barra di navigazione NON si tocca.
NON TOCCA la home, css/vp-acquista.css, .vp-buy/.vp-wa2/.vp-mbar (restano
com'e': arancione e verde); cambia solo il colore del testo che li circonda.
NON COPERTE (restano com'erano): articoli del blog scritti a mano con .art-hero / .hero-img,
.pg-hero (pergotende-puglia), pagine in cui .hero e' il contenitore dell'intera pagina
(role="main", «vetrate a pacchetto»), pagine lavori/ e pagine tecniche senza apertura.
COME TOGLIERLO
Cancellare tutto questo blocco, da «INIZIO BLOCCO chiaro» a «FINE BLOCCO
chiaro» (ultime righe del file): le pagine tornano allo strato di luce
precedente (foto senza filtri, veli ridotti). Per tornare del tutto
com'erano, togliere la riga di vp-luce.css (estetica-luce.py).
========================================================================== */
:root{
--vp-lc-fondo:#F7F3EA; /* bianco caldo */
--vp-lc-champagne:#EFE6CF; /* champagne chiaro */
--vp-lc-carta:#FFFDF8;
--vp-lc-ink:var(--vp-inchiostro,#0A0908);
--vp-lc-ink2:#4D483F; /* testo secondario: 8:1 sul fondo */
--vp-lc-oro:#66521A; /* oro scuro leggibile: 6,9:1 su bianco caldo, 6,3:1 su champagne */
--vp-lc-filo:rgba(111,90,30,.28);
--vp-lc-ombra:0 24px 48px -26px rgba(60,44,10,.38),0 3px 10px -4px rgba(60,44,10,.16);
--vp-lc-fondo-sfumato:radial-gradient(70% 90% at 88% 0,rgba(196,168,74,.2),transparent 62%),
linear-gradient(170deg,var(--vp-lc-fondo) 0%,var(--vp-lc-champagne) 100%);
}
/* ---- 6.1 Aperture del modello locale e delle pergole ---------------------- */
body .vl-hero,body .pgs-hero{background:var(--vp-lc-fondo-sfumato);color:var(--vp-lc-ink);
border-bottom:1px solid var(--vp-lc-filo)}
body .vl-hero .vl-hero-foto{background:var(--vp-lc-champagne)}
@media (min-width:960px){
body .vl-hero:not(.vl-hero--cine) .vl-hero-foto{padding:8px;background:var(--vp-lc-carta);border-radius:20px;
box-shadow:0 0 0 1px var(--vp-lc-filo),var(--vp-lc-ombra)}
body .vl-hero:not(.vl-hero--cine) .vl-hero-foto img{border-radius:13px}
}
/* testi dell'apertura: inchiostro, oro scuro */
body :is(.vl-hero,.pgs-hero) h1{color:var(--vp-lc-ink);text-shadow:none}
body :is(.vl-hero,.pgs-hero) h1 em{color:var(--vp-lc-oro)}
body :is(.vl-hero,.pgs-hero) .vl-occhiello{color:var(--vp-lc-oro)}
body :is(.vl-hero,.pgs-hero) .vp-pilastri{color:var(--vp-lc-ink)!important}
body :is(.vl-hero,.pgs-hero) .vp-pilastri :is(strong,b){color:var(--vp-lc-ink)}
body :is(.vl-hero,.pgs-hero) .vp-pilastri .vp-pil-d{color:var(--vp-lc-oro)}
body :is(.vl-hero,.pgs-hero) .vl-hero-lead{color:var(--vp-lc-ink2)}
body :is(.vl-hero,.pgs-hero) .sintesi{background:rgba(255,253,248,.72);border:1px solid var(--vp-lc-filo);
border-left:3px solid var(--vp-oro,#C4A84A);color:var(--vp-lc-ink2)}
body :is(.vl-hero,.pgs-hero) .sintesi :is(p,h2,h3,li){color:var(--vp-lc-ink2)}
body :is(.vl-hero,.pgs-hero) .vl-hero-lead strong,
body :is(.vl-hero,.pgs-hero) .vl-hero-lead .vp-risposta{color:var(--vp-lc-ink)}
body :is(.vl-hero,.pgs-hero) .vl-prezzo{color:var(--vp-lc-ink);border-color:var(--vp-lc-filo);background:rgba(255,253,248,.7)}
body :is(.vl-hero,.pgs-hero) .vl-prezzo b{color:var(--vp-lc-oro)}
body :is(.vl-hero,.pgs-hero) .vl-rassicura{color:var(--vp-lc-ink2)}
body :is(.vl-hero,.pgs-hero) .vl-btn2{color:var(--vp-lc-ink)!important;border-color:var(--vp-lc-ink)}
/* hero a tutta larghezza (.vl-hero--cine): telefono = foto sopra, testo su bianco caldo */
body .vl-hero--cine{border-bottom-color:var(--vp-lc-filo)}
body .vl-hero--cine .vl-hero-foto{background:var(--vp-lc-champagne)}
body .vl-hero--cine .vl-hero-foto::after{
background:linear-gradient(180deg,rgba(247,243,234,0) 80%,var(--vp-lc-fondo) 100%)!important}
body .vl-hero--cine .vl-occhiello{color:var(--vp-lc-oro)}
/* pannello di vetro dietro il testo sulle foto a tutta larghezza */
@media (min-width:960px){
body .vl-hero--cine .vl-hero-foto::after{background:none!important}
body .vl-hero--cine .vl-hero-in{padding:56px 0}
body .vl-hero--cine .vl-hero-txt{max-width:680px;padding:34px 40px 30px;background:rgba(247,243,234,.96);
border:1px solid var(--vp-lc-filo);border-radius:20px;box-shadow:var(--vp-lc-ombra)}
}
@media (min-width:761px){
body .pgs-hero::after{background:none!important}
body .pgs-hero .pgs-hero-txt{max-width:660px;padding:30px 36px 26px;background:rgba(247,243,234,.96);
border:1px solid var(--vp-lc-filo);border-radius:20px;box-shadow:var(--vp-lc-ombra)}
}
@media (max-width:760px){
body .pgs-hero figcaption{background:var(--vp-lc-champagne);color:var(--vp-lc-ink2)}
}
/* briciole: fuori dal nero (la barra di navigazione resta scura) */
body nav.vl-bc{background:var(--vp-lc-fondo)!important;border-bottom:1px solid var(--vp-lc-filo)!important}
body nav.vl-bc ol{color:var(--vp-lc-ink2)}
body nav.vl-bc li+li::before{color:var(--vp-lc-oro)}
body nav.vl-bc a{color:var(--vp-lc-oro);text-decoration:underline;text-underline-offset:3px}
body nav.vl-bc [aria-current]{color:var(--vp-lc-ink)}
/* ---- 6.2 Firma, telefono e fuoco da tastiera dentro le aperture chiare ---- */
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-sig{color:var(--vp-lc-ink2)}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-sig-s{opacity:1}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-sig-k{color:var(--vp-lc-ink)}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-sig::before{background:var(--vp-lc-oro)}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-tel{color:var(--vp-lc-ink2)}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq .vp-acq-tel a{color:var(--vp-lc-oro)!important}
html body :is(.vl-hero,.pgs-hero,.hero:not([role="main"]),.vp-a-hero) .vp-acq :is(.vp-buy,.vp-wa2):focus-visible,
html body :is(.vl-hero,.pgs-hero,.hero,.vp-a-hero,.vl-bc) :is(a,button,summary):focus-visible{
outline:3px solid var(--vp-lc-ink)!important;outline-offset:3px!important}
/* ---- 6.3 Vecchio modello .hero (preventivi, costo-*, contatti, chi siamo, migliori-*) ----
Non tocca le 17 pagine in cui .hero e' il contenitore dell'intera pagina (role="main"):
restano com'erano (famiglia non coperta, vedi resoconto).
Il fondo con foto + velo nero (che spegneva la foto) diventa un fondo bianco caldo;
le foto dentro l'apertura (.vp-foto) tornano a piena opacita'. */
html body .hero:not([role="main"]):not(.vl-hero):not(.pgs-hero){
background:var(--vp-lc-fondo-sfumato)!important;color:var(--vp-lc-ink2);
border-bottom:1px solid var(--vp-lc-filo);text-shadow:none}
html body .hero:not([role="main"]) :is(h1,h2,h3,h4,p,li,span,div,small,em,i,b,strong,label,dt,dd,blockquote,cite,time):not(:where(.vp-buy,.vp-wa2,.vp-wa2-ico,.btn,.vp-mbar,.vp-dom7-p,[class*="btn"]) *):not(:where(.vp-buy,.vp-wa2,.btn,.stars,.vp-dom7-p,[class*="btn"])):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){
color:var(--vp-lc-ink2)!important;text-shadow:none!important}
html body .hero:not([role="main"]) :is(h1,h2,h3,h4):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){color:var(--vp-lc-ink)!important}
html body .hero:not([role="main"]) :is(strong,b):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){color:var(--vp-lc-ink)!important}
html body .hero:not([role="main"]) :is(.hero-tag,.ey,.eyebrow,.hero-slogan,.gold,.sc-pr,.sc-lbl,.tr-item span,h1 strong,h1 em,h1 .gold,.hero-rating b,.hero-sub strong):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){
color:var(--vp-lc-oro)!important}
html body .hero:not([role="main"]) .stars:not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){color:#8A6A12!important}
html body .hero:not([role="main"]) a:not(.vp-buy):not(.vp-wa2):not(.btn):not(.vp-mbar-p):not(.vp-mbar-w):not(.vp-dom7-p):not([class*="btn"]):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){
color:var(--vp-lc-oro)!important;text-decoration:underline;text-underline-offset:3px}
html body .hero:not([role="main"]) .vp-foto,html body .hero:not([role="main"]) img.vp-foto{opacity:1!important;border-radius:12px!important;
box-shadow:0 0 0 1px var(--vp-lc-filo),var(--vp-lc-ombra)}
/* riquadri scuri dentro l'apertura: carta chiara con filo oro */
html body .hero:not([role="main"]) :is(.vp-pilastri,.hero-badge,.law-badge,.hero-rating,.answer-first,.sintesi,.vp-guida-famiglia,.sc,.strip>*,.hb-item,[class*="card"],[class*="stat"],[class*="-box"],[class*="cell"]):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){
background:rgba(255,253,248,.78)!important;border-color:var(--vp-lc-filo)!important;
box-shadow:none}
html body .hero:not([role="main"]) .vp-pilastri{border-left-color:var(--vp-oro,#C4A84A)!important}
html body .hero:not([role="main"]) .answer-first,html body .hero:not([role="main"]) .sintesi{border-left:3px solid var(--vp-oro,#C4A84A)!important}
html body .hero:not([role="main"]) :is(.vp-pilastri,.hero-badge,.law-badge,.answer-first,.sintesi) :is(strong,b):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){color:var(--vp-lc-ink)!important}
/* pulsanti secondari (contorno): inchiostro su chiaro; il primario oro resta com'e' */
html body .hero:not([role="main"]) :is(.btn-gh,.btn-outline,.btn-ghost,.btn-line,.btn-o,.btn--line):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx) *):not(:where(.hero section,.hero aside,.hero table,.hero form,.hero details,.hero article,.hero [style*="background"],.hero [class*="migliori"],.hero .sec,.hero [class*="sec-"],.hero .vp-misure,.hero .vpd-sezione,.hero .vpx)){
color:var(--vp-lc-ink)!important;border-color:var(--vp-lc-ink)!important;background:transparent!important}
html body .hero:not([role="main"]) .vp-acq .vp-buy-t,html body .hero:not([role="main"]) .vp-acq .vp-buy-s,html body .hero:not([role="main"]) .vp-acq .vp-buy-s strong{color:#0F1111!important}
html body .hero:not([role="main"]) .vp-acq .vp-wa2-t,html body .hero:not([role="main"]) .vp-acq .vp-wa2-s,html body .hero:not([role="main"]) .vp-acq .vp-wa2-go{color:#04270F!important}
/* hero con foto a piena pagina (.hero-bg): pannello di vetro dietro il testo */
html body .hero:not([role="main"]) .hero-bg::after{background:none!important}
html body .hero:not([role="main"]):has(.hero-bg){background:var(--vp-lc-fondo)!important}
html body .hero:not([role="main"]) .hero-content{margin-left:max(16px,5%);margin-top:40px;margin-bottom:40px;padding:30px 34px 26px;
max-width:640px;background:rgba(247,243,234,.93);border:1px solid var(--vp-lc-filo);border-radius:20px;
box-shadow:var(--vp-lc-ombra)}
/* pagine con foto dietro il contenuto (.stage, 5 pagine dehors): la foto resta, il velo diventa chiaro */
html body .stage{background:var(--vp-lc-fondo)}
html body .stage::after{background:linear-gradient(180deg,rgba(247,243,234,.55),rgba(247,243,234,.12) 38%,rgba(247,243,234,.45))!important}
html body .stage>.hero{padding:34px 36px 30px;border:1px solid var(--vp-lc-filo);border-radius:20px;box-shadow:var(--vp-lc-ombra)}
/* riga «guida generale» delle pagine migliori-*: stile in linea traslucido pensato per il nero */
html body .hero:not([role="main"]) .vp-guida-famiglia{background:rgba(255,253,248,.78)!important;color:var(--vp-lc-ink2)!important;
border-color:var(--vp-lc-filo)!important;border-left-color:var(--vp-oro,#C4A84A)!important}
html body .hero:not([role="main"]) .vp-guida-famiglia a{color:var(--vp-lc-oro)!important}
/* riquadro «domanda» degli articoli scritti a mano (.vp-dom7): traslucido pensato per il nero */
html body .hero:not([role="main"]) .vp-dom7{background:rgba(255,253,248,.78)!important;border-color:var(--vp-lc-filo)!important;
border-left-color:var(--vp-oro,#C4A84A)!important}
html body .hero:not([role="main"]) .vp-dom7 :is(strong,b){color:var(--vp-lc-ink)!important}
html body .hero:not([role="main"]) .vp-dom7 :is(p,span){color:var(--vp-lc-ink2)!important}
/* ---- 6.4 Barra «urgency» sopra l'apertura (migliori-*): da verde notte a champagne ---- */
html body :is(.urgency-bar,.ribbon,.alert-bar,.urgency-strip){background:var(--vp-lc-champagne)!important;color:var(--vp-lc-ink2)!important;
border-bottom:1px solid var(--vp-lc-filo)!important;text-shadow:none}
html body :is(.urgency-bar,.ribbon,.alert-bar,.urgency-strip) :is(span,strong,b,a,div,p){color:var(--vp-lc-ink)!important;border-color:var(--vp-lc-filo)!important}
html body .ribbon .flame{color:#7A3B00!important}
/* ---- 6.5 Articoli del blog generati (.vp-a-hero + .vp-a-body) e pagine «argomento» ----
Il corpo dell'articolo passa dal nero al bianco caldo: titoli in inchiostro, testo
in 4D483F (8:1), link in oro scuro sottolineati, tabelle e riquadri su carta chiara. */
html:has(.vp-a-hero),html body:has(.vp-a-hero){background:var(--vp-lc-fondo)!important}
body:has(.vp-a-hero){color:var(--vp-lc-ink2)}
body .vp-a-hero{background:var(--vp-lc-fondo-sfumato);border-bottom:1px solid var(--vp-lc-filo)}
html body :is(.vp-a-hero,.vp-a-body) :is(h1,h2,h3,h4,p,li,span,div,small,em,i,b,strong,dt,dd,blockquote,figcaption,summary,time,td,th,label,cite):not(:where(.vp-buy,.vp-wa2,.vp-wa2-ico,.btn--gold,.vp-a-dom-p,.vp-a-play) *):not(:where(.vp-buy,.vp-wa2,.btn--gold,.vp-a-dom-p,.vp-a-play)){
color:var(--vp-lc-ink2)!important;text-shadow:none!important}
html body :is(.vp-a-hero,.vp-a-body) :is(h1,h2,h3,h4,strong,b,summary,.faq-q){color:var(--vp-lc-ink)!important}
html body .vp-a-hero h1 em{color:var(--vp-lc-oro)!important}
html body :is(.vp-a-ey,.vp-a-ey a,.vp-a-fonti h2,.vp-a-tab th,.vp-a-firma-r,.vp-a-altri-c,.vp-a-body>ul>li::before){
color:var(--vp-lc-oro)!important}
html body .vp-a-body>ul>li::before{color:var(--vp-lc-oro)!important}
html body .vp-a-body>ol>li::marker{color:var(--vp-lc-oro)}
html body :is(.vp-a-hero,.vp-a-body) a:not(.vp-buy):not(.vp-wa2):not(.btn):not(.vp-a-dom-p):not(.vp-a-play){
color:var(--vp-lc-oro)!important;text-decoration:underline;text-underline-offset:3px}
html body .vp-a-hero .vp-acq a{text-decoration:none!important}
html body .vp-a-body>blockquote{background:rgba(196,168,74,.12);color:var(--vp-lc-ink)!important}
html body .vp-a-tab{border-color:var(--vp-lc-filo);background:rgba(255,253,248,.7)}
html body .vp-a-tab th{background:var(--vp-lc-champagne);border-bottom-color:var(--vp-lc-filo)}
html body .vp-a-tab td{border-bottom-color:rgba(60,44,10,.12)}
html body .vp-a-fonti{background:rgba(255,253,248,.7);border-color:var(--vp-lc-filo)}
html body .vp-a-fonti-n{border-top-color:rgba(60,44,10,.14)}
html body .vp-a-cta{background:linear-gradient(140deg,rgba(196,168,74,.22),rgba(239,230,207,.8));border-color:var(--vp-lc-filo)}
html body .vp-a-cta-breve,html body .vp-a-dom{background:rgba(255,253,248,.78);border-color:var(--vp-lc-filo);
border-left-color:var(--vp-oro,#C4A84A)}
html body .vp-a-cta-b .btn--line{border-color:var(--vp-lc-ink);color:var(--vp-lc-ink)!important}
html body .vp-a-cta-b .btn--gold{color:#0b0a08!important}
html body .vp-a-body :is(.faq-item,.vp-a-altri li,.vp-a-firma,.vp-a-cond a){border-color:var(--vp-lc-filo)}
html body .vp-a-cond a{background:rgba(255,253,248,.7)}
html body .vp-a-body :focus-visible{outline:3px solid var(--vp-lc-ink)!important;outline-offset:3px!important}
/* FINE BLOCCO chiaro */