/* ==============================
   WhistleBlowing.dev - tema scuro sul template Rhythm
   Stessa base di metaSito2027, colori presi dal logo WhistleBlowing:
   blu navy #2A4A7A, arancio #F04B23, grigio #B0B0B0.
   Caricare DOPO style.css / style-responsive.css

   INDICE (l'ordine conta: a parita' di specificita' vince la regola che viene dopo)
    1. Base: variabili, selezione, grassetti, sfondi
    2. Navigazione
    3. Elementi comuni: link, testi, occhiello, focus, slider, form scuri, fisarmonica del tema
    4. Pulsanti
    5. Sezioni colorate (sistema dei fondi) e adattamenti ai fondi chiari
    6. Loghi delle sezioni
    7. Testate: hero della home, testata delle pagine interne
    8. Home, nell'ordine della pagina:
       Introduzione, Chi e' obbligato, Come funziona, Due accessi separati, Funzionalita',
       Linee Guida ANAC, Sicurezza, Certificazioni
    9. Prezzi: tabella e calcolatore, Incluso in ogni fascia, Domande sui prezzi
   10. Contatti
   11. Footer
   12. Regole finali (devono stare in fondo per vincere sulle regole dei blocchi)

   Regola per le modifiche: ogni regola va nel suo blocco, niente aggiunte in coda al file.
   ============================== */


/* ==============================
   1. Base
   ============================== */
:root{
    /* Colori del logo (blu navy #2A4A7A e grigio #B0B0B0 sono usati direttamente dove servono) */
    --wb-orange: #F04B23;

    /* Fondi scuri derivati dal navy del logo */
    --wb-bg: #0E1B33;
    --wb-bg-2: #142645;

    /* Colori dei contenuti: default = fondo scuro. Ogni sezione colorata li ridefinisce (blocco 5) */
    --t-head: #FFFFFF;
    --t-muted: #C2CCDD;
    --t-accent: #FF7A52;
    --t-line: rgba(176, 196, 226, .22);
    --t-card: rgba(42, 74, 122, .22);
    --t-card-2: rgba(14, 27, 51, .5);
}

::selection{ color: #fff; background: var(--wb-orange); }

/* Punti chiave in grassetto (regola valida per tutti i siti) */
:where(p, li, dd) strong { font-weight: 600; color: var(--t-head); }

/* Sfondi */
.page-loader.dark,
.bg-dark{ background-color: var(--wb-bg) !important; }
.bg-dark.light-content{ background-color: var(--wb-bg) !important; }

.page-loader.dark .loader{ border-left-color: var(--wb-orange); }

/* Velo sulle foto: blu notte */
.bg-dark-alfa-70:before{
    background: linear-gradient(135deg, rgba(14, 27, 51, .86) 0%, rgba(42, 74, 122, .62) 100%);
}


/* ==============================
   2. Navigazione
   ============================== */
.main-nav.dark{ background-color: rgba(14, 27, 51, .96); }   /* menu fisso: blu notte */
.main-nav.dark.transparent{ background: transparent; }
.main-nav.dark .inner-nav ul > li > a:hover,
.main-nav.dark .inner-nav ul > li > a.active{ color: #fff; }
/* voce attiva e rollover: linea arancio che si apre da sinistra */
.main-nav.dark .inner-nav > ul > li > a[href]{ position: relative; }
.main-nav.dark .inner-nav > ul > li > a[href]:not(.wb-nav-btn):after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + .85em);
    height: 2px;
    border-radius: 2px;
    background: var(--wb-orange);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .3s cubic-bezier(.3, .1, .3, 1);
}
.main-nav.dark .inner-nav > ul > li > a[href]:not(.wb-nav-btn):hover:after,
.main-nav.dark .inner-nav > ul > li > a[href]:not(.wb-nav-btn):focus-visible:after,
.main-nav.dark .inner-nav > ul > li > a.active:not(.wb-nav-btn):after{
    transform: scaleX(1);
    transform-origin: left center;
}
@media (prefers-reduced-motion: reduce){
    .main-nav.dark .inner-nav > ul > li > a[href]:after{ transition: none; }
}

/* "Accedi": la voce resta alta come le altre (altezza del tema), la pillola e' lo span interno.
   Capsula con lucchetto (scelta di Fabio: eccezione alla regola "niente capsule", vale solo per Accedi).
   inline-flex + align-items: icona e testo centrati anche in verticale */
.inner-nav ul li a.wb-nav-btn .wb-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -1.5px;                   /* "Accedi" sulla stessa linea delle altre voci (misurato: era 1,6px piu' in basso) */
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 100px;
    transition: border-color .25s ease, background .25s ease;
}
.inner-nav ul li a.wb-nav-btn .wb-pill > span{ display: block; line-height: 1; position: relative; top: -1px; } /* correzione ottica: il font lascia spazio per le discendenti */
.inner-nav ul li a.wb-nav-btn .wb-pill .fa{ display: block; font-size: 11px; line-height: 1; margin: 0; }
.inner-nav ul li a.wb-nav-btn:hover .wb-pill,
.inner-nav ul li a.wb-nav-btn:focus-visible .wb-pill{ border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Logo orizzontale nel menu (SVG) */
.nav-logo-wrap .logo{ max-width: none; }
.nav-logo-wrap .logo img.wb-logo{ display: block; width: auto; height: 30px; max-height: none; }
@media (max-width: 1199px){ .nav-logo-wrap .logo img.wb-logo{ height: 26px; } }

/* Menu mobile (classe mobile-on aggiunta dal JS del tema): fondo pieno blu notte */
.mobile-on .desktop-nav ul{ background: var(--wb-bg); }
.mobile-on .desktop-nav ul li a{ border-bottom-color: rgba(176, 196, 226, .12); }
.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active{ background: rgba(240, 75, 35, .12); }
.mobile-on .desktop-nav ul li ul{ background: var(--wb-bg-2); }
.main-nav.mobile-on.dark .inner-nav{ border-top-color: var(--t-line); }


/* ==============================
   3. Elementi comuni
   ============================== */
/* Link e testi sui fondi scuri */
.light-content a:not(.btn):not(.logo):hover{ color: #fff; }
.light-content .section-title-descr,
.light-content .gray{ color: var(--t-muted) !important; }
.wb-eyebrow{
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t-accent);
}
.wb-prose p{ color: var(--t-muted); }
.wb-prose p + p{ margin-top: 1.1em; }
.wb-prose a:not(.btn){ color: var(--t-head); text-decoration: underline; text-underline-offset: 3px; }
.wb-note{ margin-top: 16px; font-size: 15px; color: var(--t-muted); }
.wb-note a{ color: var(--t-head); text-decoration: underline; text-underline-offset: 3px; }
.wb-col-title{ font-size: 22px; font-weight: 600; margin: 0 0 18px; }
/* indirizzi da non spezzare (es. nomeazienda.whistleblowing.dev) */
.wb-nobr{ white-space: nowrap; }

/* Focus da tastiera */
a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible{
    outline: 2px dotted var(--t-accent) !important;
}
/* le ancore nella stessa pagina non finiscono sotto il menu fisso */
section[id]{ scroll-margin-top: 65px; }
/* il focus dato dallo scorrimento alle ancore non disegna un riquadro attorno alla sezione */
section[tabindex="-1"]:focus{ outline: none !important; }

/* Pallini dello slider */
.light-content .owl-page span{ border-color: rgba(255, 255, 255, .8); }
.light-content .owl-page.active span{
    background: var(--wb-orange);
    border-color: var(--wb-orange);
    box-shadow: 0 0 0 3px rgba(240, 75, 35, .25);
}

/* Form su fondo scuro */
.light-content input[type="text"]:focus,
.light-content input[type="email"]:focus,
.light-content input[type="tel"]:focus,
.light-content input[type="number"]:focus,
.light-content textarea:focus,
.light-content select:focus{ border-color: var(--wb-orange); }

/* Fisarmonica del tema (FAQ della home) */
.light-content .accordion > dt > a{ color: var(--t-head); }
.light-content .accordion > dt > a:after{ color: var(--t-accent); }
.light-content .accordion > dd{ color: var(--t-muted); }
.light-content .accordion > dd a{ color: var(--t-head); text-decoration: underline; text-underline-offset: 3px; }


/* ==============================
   4. Pulsanti
   Angoli morbidi (10px), mai a capsula (il tema usa 3px).
   Rollover senza ombra, cambio di fondo sempre animato.
   Colori pieni (non gradienti): il browser anima background-color, non il passaggio tra gradienti.
   I rollover propri di una sezione stanno nel blocco della sezione.
   ============================== */
.btn-mod,
.btn-mod.btn-round{ border-radius: 10px; }
.btn-mod,
a.btn-mod,
a.link-to-top,
.mh-footer-socials a{
    -webkit-transition: background-color .35s ease, color .35s ease, border-color .35s ease;
            transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn-mod:hover, .btn-mod:focus,
a.btn-mod:hover, a.btn-mod:focus,
.btn-mod.btn-w:hover, .btn-mod.btn-w:focus,
.btn-mod.btn-border-w:hover, .btn-mod.btn-border-w:focus,
.wb-sec--orange .btn-mod.btn-w:hover, .wb-sec--orange .btn-mod.btn-w:focus{
    box-shadow: none;
    filter: none;
}
/* pulsante pieno arancio */
.btn-mod.btn-w{ color: #fff; background: #D13A15; border: none; }
.btn-mod.btn-w:hover,
.btn-mod.btn-w:focus{ color: #fff; background: #9E2B0C; }
/* sulla fascia arancio: blu notte -> blu logo */
.wb-sec--orange .btn-mod.btn-w{ background: #0E1B33; }
.wb-sec--orange .btn-mod.btn-w:hover,
.wb-sec--orange .btn-mod.btn-w:focus{ background: #2A4A7A; }
/* pulsante con bordo sui fondi scuri: trasparente -> bianco */
.btn-mod.btn-border-w{ border-width: 1px; }
.btn-mod.btn-border-w:hover,
.btn-mod.btn-border-w:focus{ color: #0E1B33; background: #FFFFFF; border-color: #FFFFFF; }
/* pulsante con bordo sui fondi chiari: trasparente -> blu notte */
:is(.wb-sec--light, .wb-sec--white) .btn-mod.btn-border-w { color: #0E1B33; border-color: #0E1B33; background: transparent; }
:is(.wb-sec--light, .wb-sec--white) .btn-mod.btn-border-w:hover,
:is(.wb-sec--light, .wb-sec--white) .btn-mod.btn-border-w:focus { color: #FFFFFF; background: #0E1B33; border-color: #0E1B33; }

/* gruppo di pulsanti */
.wb-actions{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.text-center .wb-actions,
.wb-actions.wb-actions--center{ justify-content: center; }


/* ==============================
   5. Sezioni colorate con i colori del logo
   Ogni sezione ridefinisce le variabili --t-*: i componenti dentro si adeguano da soli.
   wb-sec--ink    blu notte (testo bianco)
   wb-sec--navy   navy del logo #2A4A7A (testo bianco)
   wb-sec--light  grigio chiaro (testo blu notte, accento arancio)
   wb-sec--white  bianco (testo blu notte, accento arancio)
   wb-sec--orange arancio del logo, scurito per il testo bianco (contrasto > 4.5:1)
   Deve stare dopo il blocco 3: alcune regole hanno la stessa specificita' di quelle del tema.
   ============================== */
.wb-sec--ink{
    background-color: #0E1B33 !important;
}
.wb-sec--navy{
    --t-muted: #D5DDEB;
    --t-accent: #FFB199;
    --t-line: rgba(255, 255, 255, .2);
    --t-card: rgba(14, 27, 51, .32);
    --t-card-2: rgba(14, 27, 51, .4);
    background-color: #2A4A7A !important;
}
.wb-sec--light,
.wb-sec--white{
    --t-head: #0E1B33;
    --t-line: rgba(14, 27, 51, .14);
    --t-card: #FFFFFF;
    --t-card-2: rgba(14, 27, 51, .05);
    color: #0E1B33;
}
.wb-sec--light{
    --t-muted: #3A4A66;
    --t-accent: #C2370F;
    background-color: #EEF0F3 !important;
}
.wb-sec--white{
    --t-muted: #3A4A66;
    --t-accent: #C2370F;
    --t-card: #F5F7FA;
    background-color: #FFFFFF !important;
}
.wb-sec--orange{
    --t-muted: #FFFFFF;
    --t-accent: #FFFFFF;
    --t-line: rgba(255, 255, 255, .3);
    background: linear-gradient(135deg, #D13A15 0%, #F04B23 140%) !important;
}
.wb-sec--ink,
.wb-sec--navy,
.wb-sec--orange{ color: #FFFFFF; }
.wb-sec--orange .call-action-1-decription{ opacity: 1; }

/* testi del tema che hanno un colore proprio */
:is(.wb-sec--ink, .wb-sec--navy, .wb-sec--light, .wb-sec--white, .wb-sec--orange) :is(.banner-decription, .accordion > dd) { color: var(--t-muted); }
:is(.wb-sec--light, .wb-sec--white) .accordion,
:is(.wb-sec--light, .wb-sec--white) .accordion > dt > a { border-color: var(--t-line); color: var(--t-head); }
:is(.wb-sec--light, .wb-sec--white) .accordion > dt > a:after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="9px"><path fill-rule="evenodd" fill="rgb(14, 27, 51)" d="M13.006,0.961 L14.273,2.228 L7.500,9.001 L0.742,2.243 L2.009,0.976 L7.500,6.467 L13.006,0.961 Z"/></svg>');
}
/* rollover dei link sui fondi chiari (anche la scheda chiara del modulo Contatti):
   deve battere ".light-content a:not(.btn):not(.logo):hover{ color:#fff }" */
.light-content :is(.wb-sec--light, .wb-sec--white, .wb-ct-card) a:not(.btn):not(.logo):hover,
.light-content :is(.wb-sec--light, .wb-sec--white, .wb-ct-card) a:not(.btn):not(.logo):focus-visible { color: var(--t-accent); }
/* Titoli delle sezioni chiare in blu logo (sulle sezioni scure restano bianchi) */
:is(.wb-sec--light, .wb-sec--white) :is(h2.section-title, h2.banner-heading, h2.call-action-1-heading) { color: #2A4A7A; }


/* ==============================
   6. Loghi delle sezioni
   selettori con img. per battere img:not([draggable]){height:auto} del tema.
   Misura comune 170px (120px sotto i 768px: regola nel blocco 12)
   ============================== */
/* Logo (mascotte + scritta) sopra il titolo di "Che cos'e' il whistleblowing" */
.page-section img.wb-section-logo{ display: block; width: 220px; height: auto; margin: 0 0 28px; }
@media (max-width: 767px){ .page-section img.wb-section-logo{ width: 180px; } }
/* Logo centrato sopra un titolo di sezione (FAQ, "Trova il prezzo giusto") */
.page-section img.wb-center-logo{ display: block; width: auto; height: 170px; margin: 0 auto 28px; }


/* ==============================
   7. Testate
   ============================== */
/* Hero della home (slider a tutta larghezza) */
.fullwidth-slider .fixed-height-medium{ min-height: 840px; padding-bottom: 100px; }
.fullwidth-slider .home-content{ padding-top: 120px; max-width: 980px; margin: 0 auto; }
.fullwidth-slider img.hero-logo{
    display: block;
    width: auto;
    height: 150px;
    margin: 0 auto 26px;
}
.fullwidth-slider img.hero-logo.wb-hero-mascot{ height: 230px; }   /* logo con mascotte */
.fullwidth-slider .home-content .hs-line-4{ margin-bottom: 14px !important; font-size: 20px; color: var(--t-accent); }
.fullwidth-slider .home-content .wb-hero-title{
    font-size: 64px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    text-transform: none;
}
.wb-hero-lead{
    max-width: 720px;
    margin: 0 auto 36px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--t-muted);
}
@media (max-width: 1199px){
    .fullwidth-slider .home-content .wb-hero-title{ font-size: 54px; }
}
@media (max-width: 767px){
    .fullwidth-slider .fixed-height-medium{ height: auto; min-height: 600px; padding-bottom: 90px; }
    .fullwidth-slider .home-content{ padding-top: 80px; }
    .fullwidth-slider img.hero-logo{ height: 80px; margin-bottom: 16px; }
    .fullwidth-slider img.hero-logo.wb-hero-mascot{ height: 130px; }
    .fullwidth-slider .home-content .hs-line-4{ font-size: 15px; }
    .fullwidth-slider .home-content .wb-hero-title{ font-size: 32px; }
    .wb-hero-lead{ font-size: 17px; margin-bottom: 26px; }
}
@media (max-height: 760px) and (min-width: 768px){
    .fullwidth-slider img.hero-logo{ height: 100px; margin-bottom: 18px; }
    .fullwidth-slider img.hero-logo.wb-hero-mascot{ height: 160px; }
}
/* Slide tutte alte come la piu' alta: Owl (autoHeight) altrimenti cambiava l'altezza a ogni slide
   e la prima, con titolo lungo e due pulsanti, era piu' alta delle altre */
.fullwidth-slider .owl-wrapper-outer{ height: auto !important; }
.fullwidth-slider .owl-wrapper{ display: flex !important; }
.fullwidth-slider .owl-item{ float: none; flex: 0 0 auto; display: flex; }
.fullwidth-slider .owl-item > section{ flex: 1 1 auto; display: flex; flex-direction: column; }
.fullwidth-slider .owl-item > section > .container{ flex: 1 1 auto; }

/* Testata delle pagine interne (Prezzi, Contatti) */
.wb-page-head{ padding-top: 190px; }
.page-section img.wb-page-logo{
    display: block;
    width: auto;
    height: 120px;
    margin: 0 auto 26px;
}
.wb-page-head img.wb-head-logo{ display: block; width: auto; height: 150px; margin: 0 auto 26px; }
.wb-page-head .hs-line-7{ font-size: 54px; line-height: 1.1; text-transform: none; letter-spacing: -.02em; }
.wb-page-head .wb-hero-lead{ margin-top: 22px; margin-bottom: 0; }
.mod-breadcrumbs a{ color: var(--t-muted); }
@media (max-width: 767px){
    .wb-page-head{ padding-top: 130px; }
    .page-section img.wb-page-logo{ height: 84px; margin-bottom: 18px; }
    .wb-page-head img.wb-head-logo{ height: 104px; margin-bottom: 20px; }
    .wb-page-head .hs-line-7{ font-size: 34px; }
}


/* ==============================
   8. Home
   ============================== */

/* ---------- Introduzione (#intro): titolo principale, punti chiave, ricevuta di esempio ---------- */
.wb-intro-title{ font-size: 56px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 24px; }
.wb-intro-title .wb-accent{ color: #FF6A3D; }
.wb-intro-lead{ max-width: 600px; margin: 0 0 32px; font-size: 20px; line-height: 1.6; color: var(--t-muted); }
.wb-facts{ display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--t-muted); }
.wb-facts li{ display: flex; align-items: center; gap: 8px; }
.wb-facts li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F04B23; }
@media (max-width: 1199px){ .wb-intro-title{ font-size: 48px; } }
@media (max-width: 767px){ .wb-intro-title{ font-size: 34px; } .wb-intro-lead{ font-size: 17px; } }
/* la CTA arancio al rollover diventa bianca con testo blu */
#intro .btn-mod.btn-w:hover,
#intro .btn-mod.btn-w:focus{ background: #FFFFFF; color: #2A4A7A; }

/* ricevuta di esempio, in stile protocollo (monospazio di sistema: nessun font esterno) */
.wb-receipt{
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    padding: 24px 26px 20px;
    font-family: var(--mono);
    font-size: 13.5px;
    color: var(--t-muted);
    background: var(--t-card);
    border: 1px solid var(--t-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
}
.wb-receipt-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--t-line); }
.wb-receipt-top b{ font-family: inherit; font-size: 15px; font-weight: 600; color: #fff; }
.wb-pill-ok,
.wb-pill-accent{ display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; white-space: nowrap; border-radius: 100px; }
.wb-pill-ok{ color: #DDE4F0; background: rgba(255, 255, 255, .1); }
.wb-pill-accent{ color: #FF6A3D; background: rgba(240, 75, 35, .14); }
.wb-receipt dl{ display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.wb-receipt dt{ font-weight: 400; color: var(--t-muted); opacity: .8; }
.wb-receipt dd{ margin: 0; text-align: right; color: #fff; overflow-wrap: anywhere; }
.wb-timeline{ display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--t-line); }
.wb-timeline li{ display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; color: #fff; }
.wb-timeline .dot{ width: 10px; height: 10px; border: 2px solid #F04B23; border-radius: 50%; }
.wb-timeline .done .dot{ background: #F04B23; }
.wb-timeline time{ font-size: 12.5px; color: var(--t-muted); }
.wb-hash{ margin: 16px 0 0; font-size: 12px; color: var(--t-muted); opacity: .8; overflow-wrap: anywhere; }

/* ---------- Chi e' obbligato (#obbligo): elenco con spunte + riquadro sanzioni ---------- */
.wb-checklist{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--t-line);
    border-radius: 14px;
    background: var(--t-card);
    overflow: hidden;
}
.wb-checklist li{
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--t-line);
    color: var(--t-muted);
}
.wb-checklist li:last-child{ border-bottom: 0; }
.wb-checklist li > .fa{ margin-top: 5px; color: var(--t-accent); }
.wb-alert{
    margin-top: 20px;
    padding: 20px 24px;
    border: 1px solid rgba(240, 75, 35, .55);   /* bordo uniforme su tutti i lati */
    border-radius: 14px;
    background: rgba(240, 75, 35, .08);
}
:is(.wb-sec--light, .wb-sec--white) .wb-alert { background: #FFFFFF; }
.wb-alert .wb-eyebrow{ margin-bottom: 6px; }
/* cifra della sanzione in arancio logo (testo grande: leggibile sul bianco) */
.wb-alert-figure{ display: block; font-size: 34px; font-weight: 600; line-height: 1.15; color: #F04B23; margin-bottom: 6px; }
.wb-alert p{ margin: 0; color: var(--t-muted); font-size: 15px; }

/* ---------- Come funziona (#come-funziona, versione A del 28/10/2026): quattro passi numerati + scadenze ---------- */
.wb-cf{ --cf-accent: #FF6A3D; }
/* spazio sopra il logo = spazio visibile sotto le schede
   (la foto della sezione dopo sporge di 30px nel blu, quindi 30px in meno del padding del tema) */
#come-funziona.page-section{ padding-top: 110px; }
@media only screen and (max-width: 1024px){ #come-funziona.page-section{ padding-top: 90px; } }
@media only screen and (max-width: 768px){ #come-funziona.page-section{ padding-top: 50px; } }
@media only screen and (max-width: 480px){ #come-funziona.page-section{ padding-top: 40px; } }
/* occhiello bianco (come Sicurezza), titolo in arancio #FF6000 (scelta di Fabio) */
#come-funziona.wb-cf .wb-eyebrow{ color: #FFFFFF; }
#come-funziona .section-title{ color: #FF6000; }
.wb-cf-head{ align-items: center; margin-bottom: 72px; }
.wb-cf-lead{ margin: 24px 0 0; font-size: 19px; line-height: 1.6; color: var(--t-muted); }
.wb-cf-photo{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }

.wb-cf-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
/* sotto 1200 i quattro passi vanno su due righe */
@media (max-width: 1199px){ .wb-cf-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
.wb-cf-step{ display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 2px solid rgba(255, 255, 255, .35); }
.wb-cf-step.is-first{ border-top-color: var(--cf-accent); }
.wb-cf-num{ font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #FFFFFF; }
.wb-cf-step.is-first .wb-cf-num{ color: var(--cf-accent); }
.wb-cf-title{ margin: 0; font-size: 23px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: #FFFFFF; }
.wb-cf-text{ margin: 0; font-size: 16px; line-height: 1.65; color: var(--t-muted); }
.wb-cf-text strong{ font-weight: 600; color: #FFFFFF; }
/* l'indirizzo dell'organizzazione su una riga sua, mai spezzato */
.wb-cf-url{ display: table; margin: 8px 0; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 15px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }

.wb-cf-time{ margin-top: 72px; padding: 40px 48px; border-radius: 22px; background: #203860; }
.wb-cf-time-title{ margin: 0 0 28px; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.wb-cf-line{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wb-cf-line::before{ content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: rgba(255, 255, 255, .22); }
.wb-cf-line > li{ position: relative; display: flex; flex-direction: column; gap: 14px; }
.wb-cf-dot{ width: 16px; height: 16px; border-radius: 50%; background: var(--cf-accent); }
.wb-cf-line .is-start .wb-cf-dot{ background: #FFFFFF; }
.wb-cf-line .is-end .wb-cf-dot{ background: #B0B0B0; }
.wb-cf-when{ font-size: 30px; line-height: 1; font-weight: 600; color: #FFFFFF; }
.wb-cf-what{ font-size: 15px; line-height: 1.5; color: var(--t-muted); }

@media (max-width: 991px){
    .wb-cf-head{ margin-bottom: 56px; }
    .wb-cf-head .col-lg-6 + .col-lg-6{ margin-top: 40px; }
    .wb-cf-steps{ gap: 32px; }
    .wb-cf-num{ font-size: 52px; }
    .wb-cf-title{ font-size: 20px; }
    .wb-cf-time{ margin-top: 56px; padding: 32px; }
    .wb-cf-when{ font-size: 26px; }
}
/* telefono: passi uno sotto l'altro, la linea del tempo diventa verticale */
@media (max-width: 767px){
    .wb-cf-head{ margin-bottom: 44px; }
    .wb-cf-lead{ margin-top: 20px; font-size: 17px; }
    .wb-cf-head .col-lg-6 + .col-lg-6{ margin-top: 32px; }
    .wb-cf-photo{ border-radius: 18px; }
    .wb-cf-steps{ grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .wb-cf-num{ font-size: 46px; }
    .wb-cf-time{ margin-top: 48px; padding: 28px 24px; }
    .wb-cf-time-title{ margin-bottom: 24px; line-height: 1.5; }
    .wb-cf-line{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .wb-cf-line::before{ left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
    .wb-cf-line > li{ display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; }
    .wb-cf-dot{ grid-row: 1 / span 2; margin-top: 4px; }
    .wb-cf-when{ font-size: 24px; }
}

/* ---------- Due accessi separati: banner con due foto sovrapposte (come in metaSito2027) ---------- */
.banner-image-1,
.banner-image-2,
.banner-image-1 img,
.banner-image-2 img{ border-radius: 25px; }
/* la foto in primo piano ha un fondo chiaro come la sezione, l'ombra la stacca */
.wb-sec--light .banner-image-2{ box-shadow: 0 24px 50px rgba(14, 27, 51, .2); }
.banner-decription p + p{ margin-top: 14px; }
.light-content .banner-decription{ color: var(--t-muted); }
/* "Guarda la demo": rollover blu, testo bianco */
.banner-section .btn-mod.btn-w:hover,
.banner-section .btn-mod.btn-w:focus{ background: #2A4A7A; color: #FFFFFF; }
@media (min-width: 992px){
    .banner-section{ z-index: 2; }
    .banner-image-2{
        width: calc((100% - 24px) * 0.563);
        right: 12px;
        bottom: -30px;
    }
}
/* tablet/telefono: le due foto stanno affiancate, stessa misura e niente ombra */
@media (max-width: 991px){
    .banner-section .col-lg-6{ display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
    .banner-image-1,
    .banner-image-2{
        position: static;
        width: calc(50% - 8px);
        max-width: 300px;
        margin: -30px 0 0 0;
    }
    .banner-image-1 img,
    .banner-image-2 img{ display: block; aspect-ratio: 606 / 900; height: auto; object-fit: cover; object-position: center; }
    .wb-sec--light .banner-image-2{ box-shadow: none; }
}

/* ---------- Funzionalita' (#funzionalita, versione A: mascotte a lato + griglia 3x2) ---------- */
.wb-fz{ --fz-accent: #FF6000; }
.wb-fz-grid{ display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 28px; }
.wb-fz-head{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 44px 40px; border-radius: 22px; background: #2A4A7A; text-align: center; }
.page-section img.wb-fz-logo{ display: block; width: auto; height: 170px; margin: 0 0 8px; }
#funzionalita.wb-fz .wb-eyebrow{ color: #FFFFFF; margin: 0; }
#funzionalita.wb-fz .section-title{ margin: 0; font-size: 42px; line-height: 1.1; color: var(--fz-accent); }
.wb-fz-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.wb-fz-item{ display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 34px 32px; border-radius: 22px; background: rgba(42, 74, 122, .28); border: 1px solid rgba(176, 196, 226, .18); }
.wb-fz-icon{ color: var(--fz-accent); line-height: 0; }
.wb-fz-icon svg{ display: block; width: 40px; height: 40px; }
.wb-fz-title{ margin: 8px 0 0; font-size: 21px; line-height: 1.3; font-weight: 600; color: #FFFFFF; }
.wb-fz-text{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--t-muted); }
/* sotto i 1200px il riquadro del titolo va sopra, logo a sinistra del testo */
@media (max-width: 1199px){
    .wb-fz-grid{ grid-template-columns: minmax(0, 1fr); }
    .wb-fz-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; row-gap: 14px; align-items: end; justify-items: start; padding: 36px 40px; text-align: left; }
    .page-section img.wb-fz-logo{ grid-row: 1 / span 2; margin: 0; }
    #funzionalita.wb-fz .wb-eyebrow{ align-self: end; }
    #funzionalita.wb-fz .section-title{ align-self: start; }
}
@media (max-width: 991px){
    .wb-fz-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    #funzionalita.wb-fz .section-title{ font-size: 36px; }
}
@media (max-width: 575px){
    .wb-fz-list{ grid-template-columns: minmax(0, 1fr); }
    .wb-fz-head{ column-gap: 20px; padding: 28px 24px; }
    #funzionalita.wb-fz .section-title{ font-size: 28px; }
    .wb-fz-item{ padding: 28px 24px; }
}

/* ---------- Linee Guida ANAC (#linee-guida-anac): fisarmonica dei requisiti ----------
   schede bianche, una aperta alla volta; animazione in js/fisarmonica.js */
/* etichette dei paragrafi (§ 2.2 ...) */
.wb-ref{
    display: inline-block;
    margin-right: 10px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--t-accent);
    background: rgba(240, 75, 35, .12);
    border-radius: 5px;
    vertical-align: 1px;
}
.wb-sec--white .wb-ref,
.wb-sec--light .wb-ref{ color: #fff; background: #F04B23; }   /* arancio logo sui fondi chiari */

.wb-acc{ display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.wb-acc-item{
    background: #FFFFFF;
    border: 1px solid rgba(14, 27, 51, .14);
    border-radius: 18px;
    transition: border-color .3s ease;
}
.wb-acc-item[open]:not(.is-closing){ border-color: rgba(240, 75, 35, .45); }
.wb-acc-item summary{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px;
    list-style: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.01em;
    color: #0E1B33;
    transition: color .2s ease;
}
.wb-acc-item summary::-webkit-details-marker{ display: none; }
.wb-acc-item summary .wb-ref{ flex: none; margin: 0; }
.wb-acc-item summary::after{
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    margin: -4px 4px 0 auto;
    border-right: 2.5px solid #F04B23;
    border-bottom: 2.5px solid #F04B23;
    transform: rotate(45deg);
    transition: transform .3s ease;
}
.wb-acc-item[open]:not(.is-closing) summary::after{ transform: translateY(4px) rotate(-135deg); }
.wb-acc-item summary:hover,
.wb-acc-item[open]:not(.is-closing) summary{ color: #2A4A7A; }
.wb-acc-item summary:focus-visible{ outline: 2px solid #F04B23; outline-offset: 3px; border-radius: 18px; }
/* risposte leggibili: testo grande e scuro, righe non troppo lunghe */
.wb-acc-a{ overflow: hidden; padding: 0 28px 24px; font-size: 18px; line-height: 1.65; color: #1F2C47; }
.wb-acc-a p{ max-width: 760px; margin: 0 0 12px; }
.wb-acc-a p:last-child{ margin: 0; }
.wb-acc-a strong{ color: #0E1B33; }
.wb-acc-k{
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C2370F;
}
.wb-acc-k--noi{ color: #2A4A7A; }
@media (max-width: 560px){
    .wb-acc-item summary{ padding: 18px 20px; font-size: 16px; gap: 12px; }
    .wb-acc-a{ padding: 0 20px 20px; font-size: 16.5px; }
}

/* ---------- Sicurezza (#sicurezza) + servizio chiavi in mano ---------- */
/* occhielli bianchi, titoli in arancio #FF6000 (scelta di Fabio) */
#sicurezza .wb-eyebrow{ color: #FFFFFF; }
#sicurezza .section-title,
#sicurezza .wb-col-title{ color: #FF6000; }
/* "Richiedi una consulenza": rollover blu notte, per staccarsi dal fondo navy */
#sicurezza .btn-mod.btn-w:hover,
#sicurezza .btn-mod.btn-w:focus{ background: #0E1B33; color: #FFFFFF; }

/* ---------- Certificazioni (#certificazioni) ---------- */
.wb-cert-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wb-cert{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 30px 26px;
    border: 1px solid var(--t-line);
    border-radius: 18px;
    background: var(--t-card);
}
.wb-sec--light .wb-cert{ box-shadow: 0 14px 34px rgba(14, 27, 51, .08); }
/* marchi TUV (img. per battere img:not([draggable]){height:auto}); align-self: la scheda e' flex in colonna e la stirava */
.wb-cert img.wb-cert-logo{ display: block; align-self: flex-start; width: auto; height: 80px; }
/* la sigla (ISO, ISO/IEC, Rating) in alto a destra */
.wb-cert-tag{
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C2370F;
    background: rgba(240, 75, 35, .1);
    border-radius: 100px;
}
.wb-cert-title{ margin: 6px 0 0; font-size: 20px; font-weight: 600; }
.wb-cert p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--t-muted); }
.wb-cert-meta{ margin-top: auto !important; padding-top: 10px; font-size: 13px !important; border-top: 1px dashed var(--t-line); }
.wb-cert-meta a{ color: var(--t-head); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px){ .wb-cert-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px){ .wb-cert-grid{ grid-template-columns: 1fr; } }
.wb-maker{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--t-line);
}
.wb-maker p{ margin: 0; max-width: 720px; color: var(--t-muted); }


/* ==============================
   9. Prezzi
   ============================== */

/* ---------- Tabella per fasce + calcolatore ---------- */
.wb-price-card{
    padding: 10px;
    border: 2px solid var(--wb-orange);
    border-radius: 22px;
    background: var(--t-card);
}
.wb-table-scroll{ overflow-x: auto; }
table.wb-prices{
    width: 100%;
    min-width: 300px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
table.wb-prices th,
table.wb-prices td{ padding: 18px 22px; text-align: left; border: 0; }
table.wb-prices thead th{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(42, 74, 122, .55);
}
table.wb-prices thead th:first-child{ border-top-left-radius: 14px; }
table.wb-prices thead th:last-child{ border-top-right-radius: 14px; }
table.wb-prices tbody td{ color: var(--t-muted); border-top: 1px solid var(--t-line); transition: background .25s ease; }
table.wb-prices tbody tr:last-child td:first-child{ border-bottom-left-radius: 14px; }
table.wb-prices tbody tr:last-child td:last-child{ border-bottom-right-radius: 14px; }
table.wb-prices td.wb-price{ font-size: 26px; font-weight: 600; color: var(--t-head); }
table.wb-prices td a{ color: var(--t-head); text-decoration: underline; text-underline-offset: 3px; }
table.wb-prices tr.is-match td{ background: rgba(240, 75, 35, .14); color: var(--t-head); }
table.wb-prices tr.is-match td:first-child{ box-shadow: inset 4px 0 0 var(--wb-orange); }
.wb-footnote{ margin-top: 16px; font-size: 14px; color: var(--t-muted); }

.wb-calc{
    display: grid;
    gap: 16px;
    padding: 30px 28px;
    border: 1px solid var(--t-line);
    border-radius: 22px;
    background: var(--t-card);
}
.wb-calc-title{ margin: 0; font-size: 24px; font-weight: 600; }
.wb-calc label{ margin: 0; font-weight: 600; color: var(--t-head); }
.light-content .wb-calc input[type="number"]{
    width: 100%;
    height: auto;
    padding: 12px 16px;
    font-size: 26px;
    font-weight: 600;
    color: var(--t-head);
    background: var(--t-card-2);
    border: 1px solid var(--t-line);
    border-radius: 10px;
}
.wb-calc input[type="range"]{ width: 100%; accent-color: var(--wb-orange); }
.wb-calc-out{ display: grid; gap: 4px; padding-top: 16px; border-top: 1px dashed var(--t-line); }
.wb-calc-band{ font-size: 15px; color: var(--t-muted); }
.wb-calc-price{ font-size: 46px; font-weight: 600; line-height: 1.05; color: var(--t-head); }
.wb-calc-price small{ font-size: 17px; font-weight: 600; color: var(--t-muted); }
.wb-calc-year{ font-size: 15px; color: var(--t-muted); }
/* altezze fisse per i testi che cambiano col numero (niente scatti): sempre almeno 2 righe */
.wb-calc-hint{ min-height: calc(24px + 2 * 1.55em); margin: 0; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--t-muted); background: var(--t-card-2); border-radius: 10px; }
@media (max-width: 767px){
    .wb-calc-hint{ min-height: calc(24px + 3 * 1.55em); }    /* telefono: la frase "sotto i 50" va su 3 righe */
    .wb-calc-year{ min-height: calc(2 * 1.6em); }             /* "Contatta l'ufficio vendite..." su 2 righe */
}
/* "Trova la tua fascia" alta come la tabella (da 992px, quando sono affiancate); pulsante in fondo alla scheda */
@media (min-width: 992px){
    .wb-eqcol{ display: flex; flex-direction: column; }
    .wb-eqcol > .wb-price-card,
    .wb-eqcol > .wb-calc{ flex: 1 1 auto; }
    .wb-calc > .btn{ margin-top: auto; }
}

/* ---------- Incluso in ogni fascia (.wb-inc, versione B: banda navy + scheda bianca) ---------- */
.wb-inc-grid{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.wb-inc-head{ display: flex; flex-direction: column; align-items: flex-start; }
.page-section img.wb-inc-logo{ display: block; width: auto; height: 170px; margin: 0 0 28px; }
.wb-inc .wb-eyebrow{ color: #FFFFFF; }
.wb-inc .section-title{ margin: 0; font-size: 44px; line-height: 1.1; color: #FF7A52; }
.wb-inc-lead{ margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--t-muted); }
/* scheda bianca: dentro valgono i colori dei fondi chiari */
.wb-inc-card{
    --t-head: #0E1B33;
    --t-muted: #3A4A66;
    --t-line: rgba(14, 27, 51, .12);
    padding: 28px 40px;
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--t-muted);
}
.wb-inc-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.wb-inc-list li{ display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--t-line); font-size: 16px; line-height: 1.55; }
.wb-inc-list li:nth-last-child(-n+2){ border-bottom: 0; }
.wb-inc-check{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #FF6000; color: #FFFFFF; }
.wb-inc-check svg{ display: block; }
.light-content .wb-inc-card a:not(.btn){ color: #0E1B33; text-decoration: underline; text-underline-offset: 3px; }
.light-content .wb-inc-card a:not(.btn):not(.logo):hover,
.light-content .wb-inc-card a:not(.btn):not(.logo):focus-visible{ color: #C2370F; }
/* sotto i 992px il testo va sopra la scheda, logo a sinistra del titolo */
@media (max-width: 991px){
    .wb-inc-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .wb-inc-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; }
    .page-section img.wb-inc-logo{ margin: 0; }
    .wb-inc-lead{ grid-column: 1 / -1; }
    .wb-inc .section-title{ font-size: 36px; }
}
@media (max-width: 767px){
    .wb-inc-list{ grid-template-columns: minmax(0, 1fr); }
    .wb-inc-list li:nth-last-child(2){ border-bottom: 1px solid var(--t-line); }
}
@media (max-width: 575px){
    .wb-inc-head{ column-gap: 20px; }
    .wb-inc .section-title{ font-size: 28px; }
    .wb-inc-lead{ font-size: 17px; }
    .wb-inc-card{ padding: 12px 22px; border-radius: 18px; }
}

/* ---------- Domande sui prezzi (.wb-pq, versione B: tre risposte sempre visibili + servizio aggiuntivo) ---------- */
.wb-pq-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; margin-bottom: 52px; }
.page-section img.wb-pq-logo{ display: block; grid-row: 1 / span 2; width: auto; height: 170px; margin: 0; }
.wb-pq-head .section-title{ margin: 0; }
.wb-pq-lead{ grid-column: 2; align-self: start; max-width: 620px; margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--t-muted); }
.wb-pq-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wb-pq-card{ display: flex; flex-direction: column; gap: 16px; padding: 32px 30px; border-radius: 20px; background: #FFFFFF; }
.wb-pq-num{ display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #2A4A7A; color: #FFFFFF; font-size: 16px; font-weight: 600; line-height: 1; }
.wb-pq-q{ margin: 0; font-size: 21px; line-height: 1.35; font-weight: 600; color: #0E1B33; }
.wb-pq-a{ margin: 0; font-size: 16px; line-height: 1.65; color: var(--t-muted); }

.wb-pq-addon{ display: flex; align-items: center; gap: 28px; margin-top: 20px; padding: 34px 40px; border-radius: 20px; background: #2A4A7A; color: #D5DDEB; }
.wb-pq-addon-icon{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px; background: #FF6000; color: #FFFFFF; }
.wb-pq-addon-icon svg{ display: block; }
.wb-pq-addon-text{ flex: 1 1 auto; min-width: 0; }
.wb-pq-addon .wb-eyebrow{ margin-bottom: 10px; color: #FFFFFF; }
.wb-pq-addon h2{ margin: 0 0 10px; font-size: 26px; line-height: 1.25; color: #FFFFFF; }
.wb-pq-addon p{ margin: 0; font-size: 16px; line-height: 1.6; color: #D5DDEB; }
.wb-pq-addon p strong{ color: #FFFFFF; }
.wb-pq-addon .btn{ flex-shrink: 0; }

@media (max-width: 991px){
    .wb-pq-grid{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .wb-pq-card{ display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; row-gap: 10px; align-items: center; }
    .wb-pq-a{ grid-column: 2; }
    .wb-pq-addon{ flex-wrap: wrap; }
    .wb-pq-addon-text{ flex-basis: calc(100% - 92px); }
}
@media (max-width: 767px){
    /* come la testata di "Incluso in ogni fascia": logo + (occhiello e titolo) in basso, descrizione sotto */
    .page-section img.wb-pq-logo{ grid-row: auto; }
    .wb-pq-head .section-title{ font-size: 36px; line-height: 1.1; }
    .wb-pq-lead{ grid-column: 1 / -1; margin-top: 20px; }
}
@media (max-width: 575px){
    .wb-pq-head{ column-gap: 20px; margin-bottom: 36px; }
    .wb-pq-head .section-title{ font-size: 28px; }
    .wb-pq-lead{ font-size: 17px; }
    .wb-pq-card{ grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
    .wb-pq-a{ grid-column: 1; }
    .wb-pq-num{ width: 40px; height: 40px; font-size: 15px; }
    .wb-pq-q{ font-size: 19px; }
    .wb-pq-addon{ padding: 28px 22px; gap: 20px; }
    .wb-pq-addon-icon{ width: 52px; height: 52px; border-radius: 14px; }
    .wb-pq-addon-text{ flex-basis: 100%; }
    .wb-pq-addon h2{ font-size: 22px; }
}


/* ==============================
   10. Contatti (versione C): schermo diviso, blu notte a sinistra (testo, recapiti, avviso),
       grigio chiaro a destra (modulo). La B e' in ../backup/contatti-versione-B-applicata-2026-10-29/
   ============================== */

/* ---------- Modulo: regole di base (privacy, antispam, errori) ---------- */
.mh-form-note{ font-size: 15px; color: var(--t-muted); }
.form textarea.error,
.form select.error{ border-color: #f1273c; }
.mh-form-privacy{ display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.mh-form-privacy input[type="checkbox"]{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--wb-orange);
    cursor: pointer;
}
.mh-form-privacy input[type="checkbox"].error{ outline: 2px solid #f1273c; outline-offset: 2px; }
.form .mh-form-privacy label{
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--t-muted);
    cursor: pointer;
}
.mh-form-privacy label a{ color: var(--t-head); text-decoration: underline; }
.light-content .form select option{ color: #111; }
.mh-hp{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .submit_btn:disabled{ opacity: .6; cursor: wait; }

/* ---------- Schermo diviso ---------- */
.wb-ct2{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* il contenuto si allinea al .container del sito (max 1318px, 30px di margine) */
.wb-ct2-side{ padding: 120px 64px 120px max(30px, calc((100vw - 1318px) / 2 + 30px)); background: #0E1B33; color: #C2CCDD; }
.wb-ct2-main{ padding: 120px max(30px, calc((100vw - 1318px) / 2 + 30px)) 120px 72px; }
.wb-ct2-side .wb-ct2-inner{ display: flex; flex-direction: column; height: 100%; }

/* ---------- Lato blu notte: logo di fianco a occhiello e titolo, recapiti, avviso ---------- */
.wb-ct2-head{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; }
img.wb-ct2-logo{ display: block; width: auto; height: 170px; margin: 0; }
.wb-ct2-side .wb-eyebrow{ color: #FFFFFF; }
.wb-ct2-side .section-title{ margin: 0; font-size: 36px; line-height: 1.12; color: #FF6000; }
.wb-ct2-lead{ margin: 24px 0 0; font-size: 17px; line-height: 1.65; color: #C2CCDD; }

.wb-ct2-list{ display: flex; flex-direction: column; gap: 22px; margin: 36px 0 40px; padding: 0; list-style: none; }
.wb-ct2-list li{ margin: 0; }
.wb-ct2-list a{ display: flex; align-items: center; gap: 16px; text-decoration: none; }
.wb-ct2-list .wb-ct-ico{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; width: 44px; height: 44px; border: 1.5px solid rgba(255, 122, 82, .6); border-radius: 12px; color: #FF7A52; transition: background-color .2s, color .2s; }
.wb-ct2-list .wb-ct-ico svg{ display: block; }
.wb-ct2-list a:hover .wb-ct-ico,
.wb-ct2-list a:focus-visible .wb-ct-ico{ background: #FF6000; border-color: #FF6000; color: #FFFFFF; }
.wb-ct-txt{ display: flex; flex-direction: column; min-width: 0; }
.wb-ct-lab{ font-size: 13px; line-height: 1.4; color: #C2CCDD; }
.wb-ct-val{ font-size: 18px; line-height: 1.4; font-weight: 600; color: #FFFFFF; overflow-wrap: anywhere; }
.wb-ct-val--sm{ font-size: 16px; }

.wb-ct2-warn{ margin-top: auto; overflow: hidden; border-radius: 18px; background: #2A4A7A; font-size: 15px; line-height: 1.6; }
.wb-ct2-warn-bar{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; background: #D13A15; color: #FFFFFF; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.wb-ct2-warn-text{ padding: 20px 24px 22px; }
.wb-ct-warn-ico{ line-height: 0; color: #FFFFFF; }
.wb-ct-warn-ico svg{ width: 22px; height: 22px; }
.wb-ct2-warn p{ margin: 0; color: #D5DDEB; }
.wb-ct2-warn p + p{ margin-top: 8px; }
.wb-ct2-warn strong{ color: #FFFFFF; }

/* ---------- Lato modulo: fondo chiaro, colori dei fondi chiari ---------- */
.wb-ct-card{
    --t-head: #0E1B33;
    --t-muted: #3A4A66;
    --t-accent: #C2370F;
    --t-line: rgba(14, 27, 51, .12);
    background: #EEF0F3;
    color: #3A4A66;
}
.wb-ct-intro{ margin-bottom: 28px; }
.wb-ct-title{ margin: 0; font-size: 42px; line-height: 1.1; font-weight: 600; color: #2A4A7A; }
.wb-ct-intro p{ max-width: 700px; margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #3A4A66; }
/* link: blu notte sottolineato, al passaggio arancio (regola dei fondi chiari, blocco 5) */
.wb-ct-card a:not(.btn){ color: #0E1B33; text-decoration: underline; text-underline-offset: 3px; }

/* campi del modulo su fondo chiaro (il tema li disegna per il fondo scuro) */
.wb-ct-card .form label{ margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #0E1B33; }
.wb-ct-card .form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea){
    height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(14, 27, 51, .16);
    border-radius: 10px;
    background-color: #FFFFFF;
    font-size: 16px;
    color: #0E1B33;
}
/* specificita' alta: deve battere la regola comune dei campi (padding verticale 0) */
.wb-ct-card .form textarea.input-lg.form-control{ padding: 14px 16px; line-height: 1.5; }
.wb-ct-card .form :is(input, textarea)::placeholder{ color: #5E6B82; opacity: 1; }
.wb-ct-card .form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):hover{ border-color: rgba(14, 27, 51, .38); }
.wb-ct-card .form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus{ border-color: #D13A15; box-shadow: 0 0 0 3px rgba(209, 58, 21, .18); color: #0E1B33; }
.wb-ct-card .form :is(input, select, textarea).error{ border-color: #C4142B; }
.wb-ct-card .form .form-group{ margin-bottom: 20px; }
.wb-ct-card .mh-form-privacy input[type="checkbox"]{ accent-color: #2A4A7A; }
.wb-ct-card .form .mh-form-privacy label{ font-size: 14px; font-weight: 400; color: #3A4A66; }
.wb-ct-card .form-tip{ font-size: 14px; color: #3A4A66; }
.wb-ct-card #result{ color: #0E1B33; }
/* Invia richiesta: stesso arancio della barra "Attenzione!", al passaggio il navy della scheda dell'avviso */
.wb-ct-card .form .btn-mod.btn-w.submit_btn{ background: #D13A15; color: #FFFFFF; filter: none; box-shadow: none; }
.wb-ct-card .form .btn-mod.btn-w.submit_btn:hover,
.wb-ct-card .form .btn-mod.btn-w.submit_btn:focus{ background: #2A4A7A; color: #FFFFFF; filter: none; box-shadow: none; }
/* nota finale (brochure, prezzi): deve venire dopo .mh-form-note */
.wb-ct2-note{ margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(14, 27, 51, .12); font-size: 15px; color: #3A4A66; }

@media (max-width: 1199px){
    .wb-ct2-side{ padding-right: 44px; }
    .wb-ct2-main{ padding-left: 48px; }
}
@media (max-width: 991px){
    .wb-ct2{ grid-template-columns: minmax(0, 1fr); }
    .wb-ct2-side,
    .wb-ct2-main{ padding: 90px 30px; }
    .wb-ct2-warn{ margin-top: 0; }
}
@media (max-width: 767px){
    .wb-ct2-side,
    .wb-ct2-main{ padding: 70px 20px; }
    .wb-ct2-head{ column-gap: 20px; }
    img.wb-ct2-logo{ height: 120px; }
    .wb-ct2-side .section-title{ font-size: 28px; }
    .wb-ct-title{ font-size: 32px; }
    .wb-ct2-lead,
    .wb-ct-intro p{ font-size: 16px; }
}


/* ==============================
   11. Footer (chiaro: logo con mascotte e scritta navy)
   Deve stare dopo il blocco 3: i link del footer battono ".light-content a:hover" per ordine.
   ============================== */
.footer.light-content{ border-top: 1px solid var(--t-line); }
.footer .mh-footer{ text-align: left; font-size: 15px; line-height: 1.7; }
.mh-footer-tagline{ color: var(--t-muted); margin-bottom: 22px; max-width: 340px; }
.mh-footer-title{
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--t-head);
    margin-bottom: 18px;
}
.mh-footer-title:after{
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 10px;
    background: var(--wb-orange);
}
.mh-footer-list{ list-style: none; padding: 0; margin: 0; }
.mh-footer-list li{ margin-bottom: 6px; }
.footer .mh-footer a{ color: var(--t-muted); text-decoration: none; }
.footer .mh-footer a:hover,
.footer .mh-footer a:focus{ color: var(--t-head); text-decoration: none; }
.mh-footer-contacts{ font-style: normal; color: var(--t-muted); margin: 0; }
.mh-footer-socials{ display: flex; gap: 10px; }
.mh-footer-socials a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--t-line);
    font-size: 15px;
}
.footer .mh-footer .mh-footer-socials a:hover,
.footer .mh-footer .mh-footer-socials a:focus{ color: #fff; background: #D13A15; border-color: #D13A15; box-shadow: none; }
.mh-footer-copyright{
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid var(--t-line);
    font-size: 13px;
    color: var(--t-muted);
    text-align: center;
}
.mh-footer-copyright a{ color: var(--t-muted); text-decoration: underline; }
@media (max-width: 767px){ .mh-footer-copyright{ margin-top: 40px; } }

/* "torna su" */
a.link-to-top{ background: #D13A15; }
a.link-to-top:hover, a.link-to-top:focus{ background: #9E2B0C; box-shadow: none; }
.link-to-top-icon{ filter: invert(1); }

/* footer chiaro */
.footer.wb-footer-light{
    --t-head: #0E1B33;
    --t-muted: #3A4A66;
    --t-line: rgba(14, 27, 51, .14);
    color: #0E1B33;
    background-color: #F7F8FA !important;
    border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, #B0B0B0 0 33.3%, #F04B23 33.3% 66.6%, #2A4A7A 66.6%) 1;
}
.footer.wb-footer-light .mh-footer a{ color: #3A4A66; }
.footer.wb-footer-light .mh-footer a:hover,
.footer.wb-footer-light .mh-footer a:focus{ color: #C2370F; }
.footer.wb-footer-light .mh-footer-socials a{ color: #2A4A7A; }
.footer.wb-footer-light .mh-footer .mh-footer-socials a:hover,
.footer.wb-footer-light .mh-footer .mh-footer-socials a:focus{ color: #fff; }
.footer.wb-footer-light .mh-footer-copyright a{ color: #3A4A66; }
.footer img.wb-footer-logo{ display: block; width: 240px; height: auto; margin-bottom: 18px; }


/* ==============================
   12. Regole finali: devono stare in fondo per vincere sulle regole dei blocchi
   ============================== */
/* Loghi delle sezioni: tutti alti come quello di "Trova il prezzo giusto", 120px sotto i 768px */
@media (max-width: 767px){ .page-section :is(img.wb-center-logo, img.wb-fz-logo, img.wb-inc-logo, img.wb-pq-logo){ height: 120px; } }