/* ==========================================================================
   8/11/2026 · Principi di godaylight.com tradotti per Horizon (analisi in C:\Bipiemme\godaylight.com.md).
   Si traducono i PERCHÉ di Daylight, non i loro token: niente serif, niente mono, niente crema, niente arancio,
   niente maiuscolo spaziato (preferenza di Nicolò del 30/10). Solo Manrope, bianco/nero/grigi, giallo solo come luce.
   Proposte di 4 agenti, ciascuna verificata da un revisore avversario; scartate: spie gialle al posto delle spunte,
   etichette maiuscole, campo di luce nel piè, leva a 600.
   File additivo, caricato per ultimo: togliendo la riga in index.html si torna esattamente a com'era (l'HTML non cambia).
   Quattro blocchi: [C] il cruscotto sopra la vetrina · [R] ruoli tipografici fissi · [L] la luce è materia · [N] niente rilievo.
   ========================================================================== */

:root{--dl-label-size:.9rem;--dl-label-weight:600;--dl-label-lh:1.4}

/* --------------------------------------------------------------------------
   [C] IL CRUSCOTTO SOPRA LA VETRINA
   Daylight scrive i dati di funzionamento dentro la foto della casa. Qui la riga «Vetrina: spenta → accesa»
   (stesse parole di prima) entra nel riquadro Prima/Dopo come targhetta in alto a sinistra e legge il riquadro.
   -------------------------------------------------------------------------- */

/* [C1] Riquadro e riga di stato nella stessa riga della griglia di .q-panel (leva 1, spunte 2, riquadro 3):
   si sovrappongono. «Non hai la foto adesso?» sale alla riga 4. z-index 5: sopra canvas (3), velo (2), tasti (4).
   Misure tenute basse per non toccare l'insegna (nella foto «prima» parte da ~40 px su telefono, ~45 px su computer). */
.q-panel>.ba{grid-row:3;grid-column:1}
.q-panel>.q-status{grid-row:3;grid-column:1;align-self:start;justify-self:start;position:relative;z-index:5;
  max-width:calc(100% - 12px);margin:6px 0 0 6px;padding:3px 9px 3px 8px;gap:7px;
  border-radius:999px;background:rgba(11,11,12,.88);box-shadow:0 0 0 1px rgba(255,255,255,.14);
  font-size:.82rem;line-height:1.2;white-space:nowrap;pointer-events:none}
.q-panel>.q-status .q-on-w{padding:1px 8px}
.q-panel>.q-status .q-wire{width:22px;margin-right:3px}
.q-panel>.alt{grid-row:4}
@media (max-width:345px){
  .q-panel>.q-status{gap:6px;padding:3px 8px 3px 7px;font-size:.78rem}
  .q-panel>.q-status .q-wire{width:16px}
}
@media (min-width:900px){
  .q-panel>.q-status{margin:8px 0 0 8px;padding:3px 10px 3px 9px;font-size:.86rem}
}

/* [C2] La targhetta legge il riquadro: con «Prima» la vetrina è spenta, con «Dopo» accesa (data-stato lo scrive main.js).
   Leva e alone restano accesi; si spegne solo la riga di stato, nell'ordine inverso dell'accensione.
   !important come le transizioni di quadro.css per «riduci movimento». */
.hero.q-on .ba[data-stato="prima"]~.q-status .q-spia{background:#3A3A3C;box-shadow:inset 0 1px 1px rgba(255,255,255,.18);transition:background-color .25s ease,box-shadow .25s ease!important}
.hero.q-on .ba[data-stato="prima"]~.q-status .q-off{color:#FFFFFF;text-decoration-color:transparent;transition:color .3s ease .2s,text-decoration-color .3s ease .2s!important}
.hero.q-on .ba[data-stato="prima"]~.q-status .q-wire i{transform:scaleX(0);transition:transform .3s var(--ease-out)!important}
.hero.q-on .ba[data-stato="prima"]~.q-status .q-wire::after{border-color:#3A3A3C;transition:border-color .15s ease!important}
.hero.q-on .ba[data-stato="prima"]~.q-status .q-on-w{color:#8E8E94;text-shadow:none;background:transparent;box-shadow:inset 0 0 0 1px #3A3A3C;transition:color .25s ease,text-shadow .25s ease,background-color .25s ease,box-shadow .25s ease!important}

/* --------------------------------------------------------------------------
   [R] RUOLI TIPOGRAFICI FISSI
   Daylight: una famiglia per ruolo. Qui solo Manrope: 800 = promessa, 400 a misura di body = testo,
   un solo stile «dato» (.9rem, 600, minuscolo, spaziatura 0, cifre tabellari) = quello delle etichette di sezione di oggi.
   -------------------------------------------------------------------------- */

/* [R1] Rassicurazioni sotto la leva e sotto l'invio, riga di stato (la misura della targhetta resta quella di [C1]) */
.q-panel .hero-micro,.micro,.q-status{
  font-size:var(--dl-label-size);font-weight:var(--dl-label-weight);line-height:var(--dl-label-lh);
  letter-spacing:0;font-variant-numeric:tabular-nums}

/* [R2] Dati: misure dei prodotti, «Scorri», didascalie dei numeri di «Chi siamo». Cifre LED (.nums b) intatte. */
.pr .pr-f i,.pr .pr-hint,.final .nums div>span{
  font-size:var(--dl-label-size);font-weight:var(--dl-label-weight);letter-spacing:0;font-variant-numeric:tabular-nums}
.pr .pr-f i,.final .nums div>span{line-height:var(--dl-label-lh)}
@media (max-width:359px){.pr .pr-f i{white-space:normal}}

/* [R3] Piè di pagina: le righe sono frasi (400), telefono e link sono dati (600). Il logo non si tocca. */
footer .wrap>span:not(.f-logo),.f-tel,footer nav a{
  font-size:var(--dl-label-size);line-height:1.5;letter-spacing:0;font-variant-numeric:tabular-nums}
footer .wrap>span:not(.f-logo){font-weight:400}
.f-tel,footer nav a{font-weight:var(--dl-label-weight);min-height:44px}   /* area di tocco da 44 px (oggi ~22 e 36) */

/* [R4] Corpo: un'unica misura, quella di body (17 px da telefono, 18 da 900 px), peso 400 (PRODUCT.md: corpo ≥ 17 px) */
.pr-sub,.pr .pr-card figcaption,.hz,.fear summary,.gets li,.fa-t{font-size:inherit}
.fa-t,.drop span:last-child{font-weight:400}

/* --------------------------------------------------------------------------
   [L] LA LUCE È MATERIA, NON UN BOTTONE
   Daylight usa l'arancio come campo di luce e lascia i bottoni neutri. Qui il giallo resta solo dove qualcosa
   è acceso (pomello, spie, filo, scritte LED, alone); i segni d'interfaccia tornano bianchi.
   -------------------------------------------------------------------------- */

/* [L1] Spunte «Gratis · Su WhatsApp entro 24 ore»: bianche (sono un segno, non una luce) */
.q-panel .hero-micro span::before{color:var(--on-band,#FFFFFF)}
/* [L2] Puntini di «Insegne vere»: sono tasti, il puntino attivo è bianco e senza alone */
.pr .pr-dots button.on i{background:#FFFFFF;box-shadow:none}
/* [L3] «accesa»: la scritta resta luce (giallo e alone), il contorno disegnato della targhetta non è più giallo */
.hero.q-on .q-status .q-on-w{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 18px -2px rgba(var(--q-glow),.45)}
/* [L4] Chiusura: la luce si posa sul pannello come matrice LED accesa (puntini da 5 px) attorno alla leva.
   Si accende insieme all'alone (.final.q-lit). */
@supports ((mask-image:none) or (-webkit-mask-image:none)){
  .final-in::after{content:"";position:absolute;z-index:-1;left:-60px;right:-60px;bottom:-70px;height:360px;pointer-events:none;
    background:radial-gradient(rgba(var(--q-glow),.42) 1px,transparent 1.5px) 50% 0/5px 5px;
    -webkit-mask-image:radial-gradient(ellipse 300px 170px at 50% 55%,#000 0,rgba(0,0,0,.5) 45%,transparent 100%);
            mask-image:radial-gradient(ellipse 300px 170px at 50% 55%,#000 0,rgba(0,0,0,.5) 45%,transparent 100%);
    opacity:0;transition:opacity 1.3s cubic-bezier(.16,1,.3,1)}
  .final.q-lit .final-in::after{opacity:1}
}

/* --------------------------------------------------------------------------
   [N] NIENTE RILIEVO, UN SOLO PESO INTERMEDIO, SUPERFICI AL POSTO DEI CONTORNI
   Daylight: una sola ombra in tutta la pagina, pannelli incassati, gerarchia dalla misura e non dal peso.
   -------------------------------------------------------------------------- */

/* [N1] Nulla si solleva al passaggio del mouse; resta la pressione */
@media (hover:hover) and (pointer:fine){
  .btn:hover,.ask .btn:hover,.fears .btn:hover{transform:none;box-shadow:none}
  .btn:active,.ask .btn:active,.fears .btn:active{transform:scale(.97)}
  .drop:hover{transform:none}
  .drop:active{transform:scale(.99)}
  .guide-box:hover .g-cov{transform:none}
}
.drop.over{transform:none}
.guide-box .g-cov{box-shadow:0 0 0 1px rgba(11,11,12,.1)}
@media (min-width:900px){
  .chat{background:var(--q-dots) 0 0/5px 5px,#151517;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 10px #1A1A1C,0 0 0 11px rgba(255,255,255,.14)}
}

/* [N2] Tre pesi: 800 titoli e leve, 600 ciò che si tocca o etichetta, 400 testo. Niente 500 (fuori dal brand kit).
   Restano come sono: h1-h3, leve .btn a 800, «spenta / accesa» a 800, nomi delle installazioni, cifre LED. */
b,strong{font-weight:600}
.ghost,.call,.eyebrow,label,legend,
.step .opt,.js .photo-wait,.drop b,.step-n,.gets b,.check strong,.pill input:checked+span,
.alt b,.alt-a,.alt-a b,.fear summary,
.ba-sw-b,.ba-sw-on>span,
.pr .pr-f i,.pr .pr-hint,.final .alt-call b,.g-peek figcaption b{font-weight:600}
.hero-micro span::before,.micro span::before{font-weight:600}

/* [N3] Foglio del modulo: la superficie separa, il contorno compare solo come stato (mouse, scelta, errore) */
.card{border-color:transparent}
.check{border-color:transparent}
.gets{border-top:0;gap:2px}
.gets li{padding:8px 0;border-bottom:0}

/* [N4] Moduli scuri: una superficie invece di due cornici */
.pr .pr-media{box-shadow:none}
.pr .pr-f i{background:rgba(255,255,255,.08);box-shadow:none}
.alt-call .ac-ico{background:rgba(255,255,255,.14);box-shadow:none}
.chat .hz{box-shadow:none}
.chat-top{border-bottom-color:transparent}
@media (max-width:899px){
  .chat .hz,.chat .typing{background:var(--q-dots) 0 0/5px 5px,#151517}
}