/* GentleBeam — correzioni 2026-09-20: accessibilità, navigazione, stati del modulo */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--plum,#3c1f40);color:#fff;font-family:Josefin Sans,sans-serif;font-weight:700;font-size:1rem;padding:.7rem 1.1rem;border-radius:0 0 .5rem 0;text-decoration:none}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid #5a3460;outline-offset:2px}
.sec--plum :focus-visible,.hero :focus-visible,.footer :focus-visible{outline-color:#fbd2bc}

/* logo: file ritagliato, stessa altezza su tutte le pagine */
/* Il file del logo è trasparente al 96%: il marchio vero occupa 295x93 dentro
   420x297 (62px di vuoto a sinistra, 102px sopra e sotto). Invece di generare un
   asset ritagliato — che ricodificato pesava più dell'originale — ritaglio in CSS
   e tengo il webp da 11,5 KB già ottimizzato.
   --lh = altezza del marchio VISIBILE. Il resto discende da lì:
   altezza immagine = 297/93 = 3.1935  ·  rientri = 102/297 e 62/420
   margini negativi = (3.1935-1)/2 verticale, (420-295)/93/2 orizzontale.  */
.site-header__logo{display:flex;align-items:center}
.site-header__logo img{
  --lh:46px;
  height:calc(var(--lh) * 3.1935)!important;
  width:auto!important;
  max-width:none;
  clip-path:inset(34.343% 15% 34.343% 14.762%);
  margin:calc(var(--lh) * -1.09677) calc(var(--lh) * -0.67204);
}
@media (max-width:640px){.site-header__logo img{--lh:38px}}
/* home: marchio più grande, è la pagina di marca. La barra cresce con lui. */
.p-home .site-header__inner{height:88px!important}
.p-home .site-header__logo img{--lh:56px}
@media (max-width:640px){.p-home .site-header__inner{height:68px!important}.p-home .site-header__logo img{--lh:44px}}

/* leggibilità */
.garanzia-box__label{font-size:.62rem!important;letter-spacing:.04em}
.footer__legal{opacity:1!important}
/* giro 8 · sito: 1 fuori dalla landing; la landing tiene il suo .9 (non si tocca) */
.footer__d:is(.ep *){opacity:.9!important}
.footer__d:not(.ep *){opacity:1!important}
.reviews__src{opacity:1!important}

/* navigazione: stessa barra ovunque, visibile anche su mobile */
@media (max-width:900px){.site-header__nav{gap:1rem}.site-header__nav a{font-size:1rem}}
@media (max-width:640px){
  .site-header__nav{display:flex!important;gap:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1 1 auto;justify-content:flex-start;margin-left:.4rem}
  .site-header__nav::-webkit-scrollbar{display:none}
  .site-header__nav a{font-size:1rem}
  .site-header__inner{height:64px!important}
  .site-header__nav li{display:block}
}
.site-header__nav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}

/* titoli di sezione aggiunti */
.sec h2.sec__h{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.2;margin:.2rem 0 .9rem;max-width:22ch}
.sec--center h2.sec__h,.narrow--head h2.sec__h{max-width:none}
/* nei blocchi centrati il max-width lasciava il titolo incollato a sinistra */
.head h2.sec__h,.sec--center h2.sec__h,.narrow--head h2.sec__h{margin-inline:auto}

/* il titolo comanda, l'occhiello lo sostiene: prima erano quasi identici (31px vs 28px, entrambi in nero) */
.sec__h + .lead,.sec__h ~ .lead{font-size:1.12rem;font-weight:400;line-height:1.6;color:var(--plum-soft,#5a3460);max-width:56ch;margin-inline:auto}
.sec--plum .sec__h ~ .lead,.sec--cta .sec__h ~ .lead{color:var(--paper,#fff)}
.sec__h ~ .lead strong{font-weight:600;color:inherit}
.split__text .sec__h + .lead,.split__text .sec__h ~ .lead{margin-inline:0}
.glass h2.sec__h{margin-top:0}

/* la riga di rassicurazioni sta su fondo prugna: serve inchiostro chiaro */
.hero .trust,.sec--cta .trust{color:var(--paper,#fff)}
.hero .trust svg,.sec--cta .trust svg{color:var(--peach,#fbd2bc)}
.hero .trust{margin-top:1.1rem}

/* modulo: stati di errore e di invio */
.form__row input[aria-invalid=true]{border:2px solid var(--plum,#3c1f40)!important;background:var(--peach-light,#fde6dc)}
.form__err{display:none;font-family:Josefin Sans,sans-serif;font-size:1rem;color:var(--plum,#3c1f40);font-weight:700;margin:.3rem 0 0}
.form__row.is-bad .form__err{display:block}
.form__status{font-family:Josefin Sans,sans-serif;font-size:1rem;margin:.8rem 0 0;padding:.7rem .9rem;border-radius:.6rem;background:var(--peach-light,#fde6dc);color:var(--plum,#3c1f40);border:1px solid var(--plum-soft,#5a3460);border-left:4px solid var(--plum,#3c1f40);display:none}
.form__status.is-on{display:block}
.form.is-sending button[type=submit]{opacity:.65;pointer-events:none}

/* il bottone WhatsApp non copre più il tasto di invio */
@media (max-width:640px){
  .wa-float{bottom:14px;right:14px;width:52px;height:52px;transition:opacity .25s,transform .25s}
  .wa-float svg{width:28px;height:28px}
  .wa-float[data-tucked=true]{opacity:0;pointer-events:none;transform:scale(.8)}
  .ctaform,.hero__formwrap{padding-bottom:4.5rem}
}

/* descrizione testuale per chi usa uno screen reader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ============ Tipografia: sans light al posto del serif ============ */
/* Josefin Sans ha un'altezza dell'occhio bassa: a parità di corpo legge più
   piccolo del Baskerville che sostituisce, quindi alzo corpo e interlinea. */
body{font-family:Josefin Sans,ui-sans-serif,system-ui,sans-serif!important;font-weight:400;font-size:1rem;line-height:1.7;letter-spacing:.005em}
p,li,td,th,label,input,textarea,button,select{font-family:inherit}
.lead,.hero__sub,.form__sub,.svc__desc,.cblock__note,.footer__d,.footer__legal{font-weight:400}
strong,b{font-weight:600}
h1,h2,h3,.form__title,.btn,.site-header__cta,.kicker{font-weight:700}
h1,h2,h3{letter-spacing:-.01em}

/* Josefin non ha un corsivo disegnato: l'obliquo sintetico è brutto.
   Dove il serif era in corsivo uso peso e colore. */
.review__text,.garanzia-box__note,em,cite,i{font-style:normal}
.review__text{font-weight:400;font-size:1.08rem;line-height:1.55}
em{font-weight:600}
.garanzia-box__note{display:block;font-weight:400;opacity:1;margin-top:.6rem}
.hero__accent{font-style:normal;font-weight:700}

/* i campi del modulo ereditano il sans ma restano a peso leggibile */
.form input,.form label{font-weight:400}
.ltable,.ltable td,.ltable th{font-weight:400}
.ccb,.ccb__txt,.ccb__btn{font-family:Josefin Sans,ui-sans-serif,system-ui,sans-serif!important;font-weight:400}
/* serif residuo: questi selettori dichiaravano ancora Libre Baskerville nel CSS inline */
.hero__accent,.review__text,.form__row input,.form input,.form textarea{font-family:Josefin Sans,ui-sans-serif,system-ui,sans-serif!important}

/* ===== pavimento a 16px: niente testo sotto questa soglia ===== */
body,p,li,td,th,label,input,textarea,select,button,a,figcaption,small,span,summary{font-size:inherit}
.kicker{font-size:1rem;letter-spacing:.14em}
.ltable th,.ltable td{font-size:1rem;padding:.7rem .8rem}
.footer,.footer__legal,.footer__d,.footer__c,.footer__fine{font-size:1rem;line-height:1.65}
.site-header__nav a,.site-header__cta{font-size:1rem}
.scale__ends,.scale__ends small,.scale__mlabel{font-size:1rem}
.hero__chips li,.form__foot,.form__privacy,.form__err,.trust,.review__who span,.reviews__src,.lnote,.lsub,.svc__desc{font-size:1rem}
.ccb,.ccb__txt,.ccb__btn{font-size:1rem}
/* Medaglione della garanzia: la dicitura non entrava nel disco e sbordava.
   Ora il disco porta un segno grafico, la frase sta nel titolo accanto. */
.garanzia-box__badge{width:96px!important;height:96px!important;gap:.2rem;overflow:visible}
.garanzia-box__ico{display:flex}
.garanzia-box__ico svg{width:30px;height:30px}
.garanzia-box__pct{font-size:1.3rem!important;line-height:1}
.reg__badge-ico{display:flex}
.reg__badge-ico svg{width:40px;height:40px}
.reg__badge-pct{font-size:1.5rem!important}
.reg__badge{gap:.3rem}
/* 404: i link ereditano il colore del marchio */
.nf a{color:var(--plum,#3c1f40)}

/* ============ giro 8 · sito (LORI 2026-09-26) · rosso sui primari, bianco su scuro ============
   Fonte: sistema_visivo.md righe 27-28, ratificate da Davide. La landing (body.ep) ha già tutto:
   qui solo selettori delle altre pagine; dove la classe esiste anche in landing, :not(.ep *). */
:root{--red:#d23c3c;--red-hover:#b83232;--red-active:#a52a2a}

/* primario = prenota: fondo rosso, testo bianco (4,72:1 · hover 5,93 · premuto 7,08). Forma, ombra, font invariati */
.hero:not(.ep *) form .btn,#prenota2:not(.ep *) form .btn,.locate__info .btn,
.p-home .hero .btn--peach,#servizi .btn,#contatti .btn,
.btn-cta,.thanks__btn,.reg__cta{background:var(--red,#d23c3c);color:var(--paper,#fff)}
.hero:not(.ep *) form .btn:hover,#prenota2:not(.ep *) form .btn:hover,.locate__info .btn:hover,
.p-home .hero .btn--peach:hover,#servizi .btn:hover,#contatti .btn:hover,
.btn-cta:hover,.thanks__btn:hover,.reg__cta:hover{background:var(--red-hover,#b83232)}
.hero:not(.ep *) form .btn:active,#prenota2:not(.ep *) form .btn:active,.locate__info .btn:active,
.p-home .hero .btn--peach:active,#servizi .btn:active,#contatti .btn:active,
.btn-cta:active,.thanks__btn:active,.reg__cta:active{background:var(--red-active,#a52a2a)}

/* secondari: fondo invariato, testo bianco */
.site-header__cta,.greview-box__btn,.nf .nf__btn,.btn-ghost{color:var(--paper,#fff)}

/* testo su fondo scuro: bianco; la pesca resta solo accento */
.hero:not(.ep *),.hero-about,.sec--plum:not(.ep *),.sec--cta:not(.ep *),.garanzia-box,.footer:not(.ep *),.footer__about{color:var(--paper,#fff)}
.sec--plum:not(.ep *) h2,.sec--plum:not(.ep *) .sec__h,.sec--plum:not(.ep *) .lead,.sec--plum:not(.ep *) .kicker,
.sec--cta:not(.ep *) .kicker,.sec--cta:not(.ep *) h2,.sec--cta:not(.ep *) .lead,
.hero-about .kicker{color:var(--paper,#fff)}
.hero:not(.ep *) .hero__chips li{background:var(--paper,#fff);color:var(--plum,#3c1f40)}
.reviews__src,.lcard__hd,.ltable th{color:var(--paper,#fff)}
.cabina__who,.cta-note--dark{color:var(--paper,#fff);opacity:1}
.footer__fine{opacity:1}
.garanzia-box__link,.footer:not(.ep *) a{color:var(--paper,#fff);text-decoration:underline}

/* banner cookie: stessi valori della landing */
.ccb{color:var(--paper,#fff)}
.ccb__txt a{color:var(--paper,#fff);text-decoration:underline}
.ccb__btn--ghost{color:var(--paper,#fff)}

/* il «no» del confronto non è più rosso: il rosso vuol dire solo «agisci» */
.ab__card--bad{border-color:var(--line,#ecdfd8)}
.ab__card--bad .ab__label{color:var(--plum-soft,#5a3460)}
.ab__card--bad .ab__ico{background:var(--peach-light,#fde6dc);color:var(--plum-soft,#5a3460)}

/* errori del modulo: prugna + «!», valori copiati dalla landing */
.form__row.is-bad .form__err:not(.ep *),.form__status.is-on:not(.is-ok):not(.ep *){display:flex}
.form__err:not(.ep *),.form__status:not(.is-ok):not(.ep *){gap:.5rem;align-items:flex-start}
.form__err:not(.ep *)::before,.form__status:not(.is-ok):not(.ep *)::before{content:"!";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;border-radius:50%;background:var(--plum,#3c1f40);color:var(--paper,#fff);font-family:"Josefin Sans",sans-serif;font-weight:700;font-size:.85rem;line-height:1}