@charset "UTF-8";

.bongioHamburger{display:none;}
@media (max-width:767px){
/* Column stacking (was lost in last edit - restoring) */
  #dm .dmInner,
  #dm .dmDesktopBody .dmInner{
    min-width:0!important;width:100%!important;overflow-x:hidden!important;
  }
  #dm .dmDesktopBody .dmRespRow .large-2,
  #dm .dmDesktopBody .dmRespRow .large-4,
  #dm .dmDesktopBody .dmRespRow .large-6,
  #dm .dmDesktopBody .dmRespRow .large-8,
  #dm .dmDesktopBody .dmRespRow .large-10,
  #dm .dmDesktopBody .dmRespRow .large-12,
  #dm .dmRespRow .medium-2,
  #dm .dmRespRow .medium-4,
  #dm .dmRespRow .medium-6,
  #dm .dmRespRow .medium-8,
  #dm .dmRespRow .medium-10,
  #dm .dmRespRow .medium-12{
    width:100%!important;float:none!important;
  }
  #dm .dmRespRow .dmRespColsWrapper{
    display:block!important;max-width:100%!important;
  }
  #dm .dmLargeBody .dmRespRow{
    padding-left:18px!important;padding-right:18px!important;
  }
  img,.imageWidget img{max-width:100%!important;height:auto!important;}
  iframe{max-width:100%!important;}
  #dm div.dmContent h1{font-size:26px!important;}
  #dm div.dmContent h2{font-size:22px!important;}

  .bongioHamburger{
    display:flex!important;flex-direction:column;justify-content:center;gap:5px;
    width:32px;height:32px;cursor:pointer;position:relative;z-index:500;margin:0 12px;
  }
  .bongioHamburger span{display:block;height:2px;width:100%;transition:.2s;}
  .bongioHamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .bongioHamburger.open span:nth-child(2){opacity:0;}
  .bongioHamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  #bongioMobileNav{
    display:none!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    flex-direction:column!important;
    background:rgb(176,141,87)!important;
    padding:0!important;
    margin:0!important;
  }
  #bongioMobileNav.open{display:flex!important;}
  #dm .p_hfcontainer nav.u_1246896548 .unifiednav__container{
    flex-direction:column!important;
    width:100%!important;
  }
  #dm .p_hfcontainer nav.u_1246896548 .unifiednav__container>.unifiednav__item-wrap>.unifiednav__item{
    padding:14px 20px!important;
    width:100%!important;
    border-top:1px solid rgba(255,255,255,.15);
  }

  /* Top bar: logo + social/email row */
  #dm .p_hfcontainer div.u_1677127534{
    width:130px!important;max-width:130px!important;margin:0!important;
  }
  #dm .p_hfcontainer div.u_1041354106{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    width:100%!important;flex-wrap:nowrap!important;
  }
  #dm .p_hfcontainer div.u_1988174055{
    width:auto!important;margin:0!important;max-width:60%!important;
  }
  #dm .p_hfcontainer div.u_1287132025{
    width:100%!important;max-width:100%!important;
  }
  #dm .p_hfcontainer .dmRespColsWrapper{
    flex-wrap:wrap!important;
  }

  /* Big hero title: reduce letter spacing + top margin for mobile */
  #dm .dmBody div.u_1886270695{
    letter-spacing:0px!important;
    margin:24px auto 8px!important;
  }
  .font-size-72,.size-72{font-size:46px!important;line-height:0.98!important;}

  /* Reduce generic section padding (main cause of excess white space) */
  #dm .dmBody .dmRespRow{
    padding-top:26px!important;
    padding-bottom:26px!important;
  }
  #dm .dmBody header{
    padding:60px 18px!important;
  }

  /* Neutralize desktop-only absolute-offset hero intro elements (kicker/button/shape) */
  #dm .dmBody div.u_1860660048{
    width:100%!important;max-width:100%!important;margin:0 0 8px!important;
    text-align:center!important;height:auto!important;
  }
  #dm .dmBody a.u_1611597564{
    width:auto!important;max-width:90%!important;margin:14px auto!important;
    float:none!important;display:inline-block!important;text-align:center!important;
  }
  #dm .dmBody div.u_1936772530{
    width:100%!important;max-width:100%!important;margin:0!important;height:14px!important;
  }
  #dm .dmBody div.u_1387479020{
    display:none!important;
  }
  #dm .dmBody div.u_1981219068{
    display:none!important;
  }

  /* Buttons in general: shrink-to-fit + guaranteed centering on mobile */
  #dm .dmInner a.dmWidget,
  #dm .dmInner div.dmWidget{
    white-space:normal!important;
    max-width:92%!important;
    width:-webkit-fit-content!important;
    width:fit-content!important;
    display:-webkit-flex!important;
    display:flex!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-top:10px!important;
    margin-bottom:10px!important;
    float:none!important;
    text-align:center!important;
  }
  #dm .dmWidget .text{
    white-space:normal!important;
  }

  /* Footer address: center to match rest of column */
  #dm .dmBody div.u_1685107567{
    text-align:center!important;
  }
  /* ===== HEADER FISSO DEFINITIVO: compatto, logo intero, hamburger oro ===== */
  html #dm .hasStickyHeader .dmInner div.dmHeaderContainer{
    min-width:0!important;
    width:100%!important;
  }
  #dm .hasStickyHeader div.u_1507763365{
    display:none!important;
  }
  #dm .hasStickyHeader div.u_1581174641{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:10px 14px!important;
    width:100%!important;
  }
  #dm .hasStickyHeader div.u_1581174641 .dmRespColsWrapper{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    flex-wrap:nowrap!important;
  }
  #dm .hasStickyHeader div.u_1287132025{
    width:auto!important;max-width:130px!important;flex:0 0 auto!important;padding:0!important;
  }
  #dm .hasStickyHeader div.u_1643137343{
    width:auto!important;flex:0 0 auto!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    padding:0!important;
  }
  .bongioHamburger span{
    background:rgb(176,141,87)!important;
  }
  .stickyHeaderSpacer{
    height:76px!important;
  }

  /* ===== TITOLO HERO: fix definitivo font-size con selettore ad alta specificità ===== */
  #dm .dmBody div.u_1886270695 span.font-size-72,
  #dm .dmBody div.u_1886270695 span.size-72{
    font-size:40px!important;
    line-height:1.05!important;
    letter-spacing:0px!important;
    font-weight:700!important;
  }

  /* ===== Sottotitolo hero (es. "Avvocati a Barcellona Pozzo di Gotto") più piccolo del titolo ===== */
  .font-size-40,.size-40{display:none!important;}

  /* ===== Logo header: quadrato fisso, mai tagliato, allineato con hamburger ===== */
  #dm .hasStickyHeader div.u_1677127534{
    width:54px!important;min-width:54px!important;max-width:54px!important;
    height:54px!important;min-height:54px!important;max-height:54px!important;
    margin:0!important;overflow:visible!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
  }
  #dm .hasStickyHeader div.u_1677127534 a{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:54px!important;height:54px!important;
  }
  #dm .hasStickyHeader div.u_1677127534 img{
    display:block!important;
    width:54px!important;height:54px!important;
    max-width:54px!important;max-height:54px!important;
    min-width:54px!important;min-height:54px!important;
    object-fit:contain!important;
  }

  /* ===== Galleria foto (dopo bottone "Lo Studio Legale"): rimuove margine negativo che causa sovrapposizione ===== */
  #dm .dmBody div.u_1061169385{
    margin:20px 0 10px!important;
  }

  /* ===== Centra TUTTO il testo di contatti e orari nel footer ===== */
  #dm .dmBody div.u_1685107567,
  #dm .dmBody div.u_1148709728,
  #dm .dmBody div.u_1286461809{
    text-align:center!important;
  }
  #dm .dmBody .u_1565556054{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }

  /* ===== Disattiva le animazioni di scorrimento in entrata su mobile:
     causano sovrapposizioni imprevedibili quando gli elementi "scivolano"
     nella posizione finale (es. foto che scivola sopra un pulsante) ===== */
  [data-anim-extended],
  [data-anim-desktop]{
    opacity:1!important;
    transform:none!important;
    -webkit-transform:none!important;
    transition:none!important;
    visibility:visible!important;
  }

  /* ===== Logo flottante: nascosto su mobile. Il logo nell'header resta gia'
     invisibile a ogni larghezza (vedi 'bongiovanni-floating-logo'): questa
     regola tocca solo il clone flottante che appare/scompare in dissolvenza
     durante lo scroll, nessun'altra istanza del logo. ===== */
  #bongioFloatingLogo{
    display:none!important;
  }

  /* ===== Pulsante oro "Contattaci" nel footer: riquadro piu' largo su
     mobile (solo il padding orizzontale, il testo resta invariato) ===== */
  #dm a[id="1568077598"]{
    padding-left:34px!important;
    padding-right:34px!important;
  }

  /* ===== Menu hamburger: riquadro con angoli smussati, voci e lineette di
     selezione bianche (la lineetta usa il colore del testo). ===== */
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav{
    border-radius:12px!important;
    overflow:hidden!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav a,
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .nav-item-text{
    color:#ffffff!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .nav-item-text::after{
    border-top-color:#ffffff!important;
  }

}


@media (min-width:768px){

  /* Logo: dimensione ragionevole anche su desktop (evita un header enorme) */
  #dm .p_hfcontainer div.u_1677127534{
    width:150px!important;
  }
  #dm .p_hfcontainer div.u_1677127534 img{
    width:100%!important;height:auto!important;object-fit:contain!important;
  }

  /* ===== Pulsanti "a blocco" (non flex): garantisce spazio sufficiente
     sopra e sotto al testo, evita l'effetto "tagliato" in basso =====
     Il widget builder applica per-ID una regola tipo
     "*#dm *.dmBody a.u_XXXXXXXXXX{height:42px!important;...}" che blocca
     l'altezza del bottone a un valore fisso troppo basso per contenere
     icona + testo con il padding qui sotto: il padding veniva applicato
     (questa regola e' gia' piu' specifica di quella per-ID) ma il testo
     restava tagliato perche' l'altezza non veniva mai liberata. */
  #dm .dmInner a.dmWidget[data-display-type="block"]:not(.flexButton){
    height:auto!important;
    min-height:42px!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
    line-height:1.3!important;
  }
  #dm .dmInner a.dmWidget[data-display-type="block"]:not(.flexButton) .text{
    padding-top:0!important;
    padding-bottom:0!important;
  }

  /* ===== Allinea le 3 colonne della sezione contatti (info / foto / mappa)
     alla stessa altezza, qualunque sia la quantità di testo ===== */
  #dm #1076298999{
    display:flex!important;
    align-items:stretch!important;
  }
  /* ===== Email nella barra oro in alto: correzione + niente a-capo =====
     L'indirizzo corretto era gia' nel testo/href, ma la colonna che lo contiene
     e' troppo stretta per stare su una riga sola alla dimensione di testo
     esistente: allarghiamo solo quella colonna (la colonna vuota accanto,
     "u_1250475006", e' un semplice spaziatore e si restringe di conseguenza
     nel layout flex, senza toccare posizione/allineamento dell'icona+email
     ne' la struttura della barra). */
  #dm div[id="1220705149"]{
    width:300px!important;
    max-width:300px!important;
    flex:0 0 auto!important;
  }
  #dm div[id="1041354106"],
  #dm div[id="1041354106"] p,
  #dm div[id="1041354106"] span,
  #dm div[id="1041354106"] a{
    white-space:nowrap!important;
  }

  /* ===== Menu desktop -> hamburger =====
     Sostituisce visivamente la riga HOME / LO STUDIO / CONTATTI con l'hamburger
     (stesso elemento e stesso script gia' usati per il menu mobile: quadrato
     oro con tre linee bianche) senza toccare timing/posizione di comparsa: sia
     l'hamburger sia il nav vivono nella stessa colonna allineata a destra che
     positionHeader() gia' mostra/nasconde secondo la logica esistente. */
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav{
    display:flex!important;
    flex-direction:column!important;
    /* position:fixed anchored via inline top/right set in JS (bongioToggleMenu) to the
       hamburger's own on-screen position, so the dropdown is always glued directly
       under the button regardless of which ancestor would otherwise establish the
       containing block for position:absolute. */
    position:fixed!important;
    width:170px!important;
    max-width:170px!important;
    background:rgb(176,141,87)!important;
    border-radius:8px!important;
    overflow:hidden!important;
    z-index:600!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateY(-8px)!important;
    transition:opacity .25s ease, transform .25s ease, visibility .25s!important;
    pointer-events:none!important;
    will-change: opacity, transform;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav.open{
    opacity:1!important;
    visibility:visible!important;
    transform:translateY(0)!important;
    pointer-events:auto!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .unifiednav__container{
    flex-direction:column!important;
    width:100%!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .unifiednav__container>.unifiednav__item-wrap>.unifiednav__item{
    padding:10px 18px!important;
    width:100%!important;
    border-top:1px solid rgba(255,255,255,.2)!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .unifiednav__container>.unifiednav__item-wrap:first-child>.unifiednav__item{
    border-top:none!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav .nav-item-text,
  #dm .hasStickyHeader .dmHeaderContainer #bongioMobileNav a{
    color:#ffffff!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer .bongioHamburger{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:40px!important;
    height:40px!important;
    background:rgb(176,141,87)!important;
    cursor:pointer!important;
    position:relative!important;
    top:147px!important;
    z-index:600!important;
    /* Its column is a plain block box spanning the row (the old nav right-aligned
       itself internally); margin-left:auto pushes this fixed-width box to the
       same right edge the nav's text used to end at. */
    margin:0 0 0 auto!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer .bongioHamburger span{
    display:block!important;
    height:2px!important;
    width:18px!important;
    background:#ffffff!important;
    transition:.2s!important;
  }
  #dm .hasStickyHeader .dmHeaderContainer .bongioHamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
  #dm .hasStickyHeader .dmHeaderContainer .bongioHamburger.open span:nth-child(2){opacity:0!important;}
  #dm .hasStickyHeader .dmHeaderContainer .bongioHamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}
}


  /* Il bottone oro "Contattaci" sotto "CONTATTACI PER RICEVERE UNA CONSULENZA
     LEGALE" ha testo bianco in index.html e competenze.html ma nero in questa
     pagina (stesso markup, nessuno stile inline: la differenza viene da una
     regola non individuata nel resto del CSS ereditato). Override mirato solo
     su questo bottone per allinearlo alle altre due pagine. */
  #dm a[id="1568077598"],
  #dm a[id="1568077598"] .text{
    color:#ffffff!important;
  }


  /* Il testo del menu (nav) resta scuro/leggibile (era bianco, pensato per stare sopra
     la foto scura dell'hero, cosa che con la nuova logica non avviene piu'). NIENTE
     sfondo bianco dietro la riga del nav: un rettangolo bianco a tutta larghezza dietro
     al nav/logo, quando l'header diventa fixed, crea l'effetto "tenda/pannello bianco
     che scende dall'alto" che non deve esistere: il nav resta su sfondo trasparente. */
  #dm .hasStickyHeader .dmHeaderContainer nav a,
  #dm .hasStickyHeader .dmHeaderContainer nav .nav-item-text{
    color:#2b2420!important;
  }
  /* Mentre l'header e' "static" (prima/durante l'hero iniziale) la riga del logo/nav
     resta comunque nel flusso e riserva altezza per il proprio contenuto: anche a sfondo
     trasparente, quello spazio riservato lascia intravedere lo sfondo bianco naturale
     della pagina tra la barra oro e l'hero, cioe' esattamente la "striscia bianca
     iniziale" da eliminare. Nascondendo l'intera riga solo in stato static, quello
     spazio non viene piu' riservato e l'hero riprende subito sotto la barra oro. */
  #dm .hasStickyHeader .dmHeaderContainer[style*="position: static"] .dmRespRow:has(nav){
    display:none!important;
  }


  /* Il logo originale nell'header resta nel flusso (per non alterare spaziatura/struttura
     esistente) ma non deve mai essere disegnato: il suo comportamento e' interamente
     sostituito dal logo "flottante" #bongioFloatingLogo qui sotto. */
  #dm div.u_1677127534{
    visibility:hidden!important;
  }
  #bongioFloatingLogo{
    position:fixed;
    top:100px;
    left:20px;
    z-index:999;
    margin:0;
    padding:0;
    background:transparent!important;
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  #bongioFloatingLogo.is-visible{
    opacity:1;
    transform:translateY(0);
    /* Il logo resta "trasparente" ai clic: essendo fisso e largo 230px copriva
       link e pulsanti che si trovano sotto di esso sul lato sinistro della pagina. */
    pointer-events:none;
  }
  #bongioFloatingLogo img{
    display:block!important;
    width:230px!important;
    height:auto!important;
    background:transparent!important;
  }


  /* La barra del menu passa spesso tra "nel testo" e "fissa" durante lo scroll.
     Senza un suggerimento esplicito, il browser puo' ridisegnarla insieme a tutto
     il contenuto sottostante ad ogni fotogramma invece di trattarla come un
     livello separato - causa comune dello sfarfallio/scatto di elementi a
     posizione fissa durante lo scroll, piu' evidente sulle pagine piu' pesanti da
     ridisegnare. Promuoverla a un proprio livello grafico (gestito dalla scheda
     video, non dalla CPU) rende il suo ridisegno indipendente dal resto della
     pagina. */
  /* NOTA: niente transform/will-change:transform qui - #bongioMobileNav (il
     menu a tendina desktop) e' position:fixed DENTRO questo contenitore, e un
     transform sull'antenato lo trasformerebbe nel suo nuovo riferimento di
     posizionamento, rompendo i calcoli in pixel dello script (bongioToggleMenu)
     che presuppongono coordinate relative alla finestra. will-change:top da solo
     non ha questo effetto collaterale. */
  .hasStickyHeader .dmHeaderContainer{
    will-change: top;
  }
  #bongioFloatingLogo{
    will-change: transform, opacity;
  }
  /* Le animazioni "a comparsa" di Duda (data-anim-extended/data-anim-desktop)
     cambiano transform/opacity in base allo scroll; senza un suggerimento, il
     browser le ricalcola via CPU insieme al resto del layout ad ogni fotogramma,
     il che su pagine con piu' contenuto puo' causare i micro-blocchi durante lo
     scroll. Promuoverle a livelli grafici separati (gestiti dalla scheda video)
     lascia le animazioni identiche ma le rende molto piu' leggere da calcolare.
     Sicuro qui: questi elementi sono blocchi di testo/contenuto, non contengono
     menu o elementi a posizione fissa che dipendano dal loro sistema di
     coordinate. */
  [data-anim-extended],
  [data-anim-desktop]:not([data-anim-desktop="none"]){
    will-change: transform, opacity;
  }
  /* Ogni blocco di testo (dmNewParagraph) porta di suo una transizione di
     dissolvenza inline ("transition: opacity ...") indipendente dal sistema di
     animazioni sopra: e' lo stesso tipo di lavoro extra per il browser, quindi
     riceve lo stesso suggerimento. will-change:opacity da solo (senza transform)
     non crea un nuovo riferimento di posizionamento per eventuali elementi a
     posizione fissa al suo interno, quindi resta sicuro anche qui. */
  [style*="transition: opacity"]{
    will-change: opacity;
  }
  /* Sezione con effetto parallasse (sfondo che si muove a velocita' diversa
     dal contenuto durante lo scroll), gestita dal motore esterno della
     piattaforma: non c'e' codice nostro da modificare, ma il suggerimento
     resta valido a prescindere da quale proprieta' venga animata. */
  .dmSectionParallaxNew{
    will-change: transform, background-position;
  }


  /* ===== Sezione Blog: stili dedicati SOLO a blog.html e alle pagine articolo =====
     Prefisso "#dm div.dmContent" per superare in specificita' le regole
     !important del CSS di pagina generato dal builder. */

  /* --- Righe di contenuto (elenco articoli e articolo) --- */
  #dm div.dmContent #bongioBlogTitleRow{
    padding-bottom:8px!important;
  }
  #dm div.dmContent .bongioBlogRow{
    padding:28px 40px 80px!important;
  }
  #dm div.dmContent .bongioBlogRow .dmRespColsWrapper,
  #dm div.dmContent .bongioBlogRow .dmRespCol{
    float:none!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    min-width:0!important;
  }

  /* --- Elenco schede: per un nuovo articolo si copia un <li class="bongioBlogItem"> --- */
  #dm div.dmContent ul.bongioBlogList{
    list-style:none!important;
    margin:0 auto!important;
    padding:0!important;
    max-width:1040px;
    display:flex;
    flex-direction:column;
    gap:36px;
  }
  #dm div.dmContent li.bongioBlogItem{
    list-style:none!important;
    margin:0!important;
    padding:0!important;
  }
  #dm div.dmContent li.bongioBlogItem::before,
  #dm div.dmContent li.bongioBlogItem::marker{
    content:none!important;
  }
  #dm div.dmContent .bongioBlogCard{
    margin:0;
    background:#fff;
    border:1px solid rgba(176,141,87,.28);
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.06);
    transition:box-shadow .25s ease, border-color .25s ease;
  }
  #dm div.dmContent .bongioBlogCard:hover{
    border-color:rgba(176,141,87,.6);
    box-shadow:0 14px 36px rgba(0,0,0,.10);
  }
  /* L'intera scheda (foto, titolo, abstract, invito) e' un unico link */
  #dm div.dmContent a.bongioBlogCardLink{
    display:grid!important;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    text-decoration:none!important;
    color:inherit!important;
    -webkit-tap-highlight-color:rgba(176,141,87,.15);
  }
  #dm div.dmContent a.bongioBlogCardLink:focus-visible{
    outline:3px solid rgb(176,141,87);
    outline-offset:-3px;
  }
  #dm div.dmContent .bongioBlogCardMedia{
    position:relative;
    min-height:300px;
    overflow:hidden;
    background:#eef1f4;
  }
  /* Foto sempre a riempimento, mai deformata */
  #dm div.dmContent .bongioBlogCardMedia img{
    position:absolute!important;
    top:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
    display:block!important;
    transition:transform .5s ease;
  }
  #dm div.dmContent .bongioBlogCard:hover .bongioBlogCardMedia img{
    transform:scale(1.03);
  }
  #dm div.dmContent .bongioBlogCardBody{
    padding:34px 38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    text-align:left!important;
    min-width:0;
  }
  #dm div.dmContent h2.bongioBlogCardTitle{
    font-family:'Red Hat Display','Red Hat Display Fallback',sans-serif!important;
    font-size:22px!important;
    line-height:1.35!important;
    font-weight:700!important;
    letter-spacing:.01em!important;
    color:rgb(33,33,33)!important;
    text-align:left!important;
    margin:0 0 16px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:manual!important;
    hyphens:manual!important;
    transition:color .2s ease;
  }
  #dm div.dmContent .bongioBlogCard:hover h2.bongioBlogCardTitle{
    color:rgb(176,141,87)!important;
  }
  /* Abstract: piu' piccolo del testo normale, come anteprima */
  #dm div.dmContent p.bongioBlogCardAbstract{
    font-family:Poppins,'Poppins Fallback',sans-serif!important;
    font-size:14px!important;
    line-height:1.7!important;
    color:rgb(85,85,85)!important;
    text-align:left!important;
    margin:0 0 22px!important;
    overflow-wrap:anywhere;
  }
  #dm div.dmContent .bongioBlogCardCta{
    display:inline-flex!important;
    align-items:center;
    gap:8px;
    min-height:44px;
    font-family:Poppins,'Poppins Fallback',sans-serif!important;
    font-size:15px!important;
    font-weight:600!important;
    letter-spacing:.02em;
    color:rgb(176,141,87)!important;
  }
  #dm div.dmContent .bongioBlogCardCtaArrow{
    display:inline-block;
    transition:transform .25s ease;
  }
  #dm div.dmContent .bongioBlogCard:hover .bongioBlogCardCtaArrow{
    transform:translateX(4px);
  }

  /* --- Pagina articolo --- */
  #dm div.dmContent .bongioArticolo{
    max-width:820px;
    margin:0 auto;
    text-align:left!important;
  }
  #dm div.dmContent p.bongioArticoloBack{
    margin:0 0 18px!important;
    text-align:left!important;
  }
  #dm div.dmContent p.bongioArticoloBack a{
    display:inline-flex!important;
    align-items:center;
    gap:8px;
    min-height:44px;
    font-family:Poppins,'Poppins Fallback',sans-serif!important;
    font-size:15px!important;
    font-weight:600!important;
    color:rgb(176,141,87)!important;
    text-decoration:none!important;
  }
  #dm div.dmContent p.bongioArticoloBack a:hover,
  #dm div.dmContent p.bongioArticoloBack a:focus-visible{
    text-decoration:underline!important;
    text-underline-offset:4px;
  }
  #dm div.dmContent p.bongioArticoloBack--fondo{
    margin:44px 0 0!important;
    padding-top:22px!important;
    border-top:1px solid rgba(176,141,87,.3);
  }
  #dm div.dmContent h1.bongioArticoloTitolo{
    font-family:'Red Hat Display','Red Hat Display Fallback',sans-serif!important;
    font-size:30px!important;
    line-height:1.3!important;
    font-weight:700!important;
    letter-spacing:.01em!important;
    color:rgb(176,141,87)!important;
    text-align:left!important;
    margin:0 0 18px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:manual!important;
    hyphens:manual!important;
  }
  #dm div.dmContent p.bongioArticoloAutore{
    font-family:Poppins,'Poppins Fallback',sans-serif!important;
    font-size:15px!important;
    line-height:1.6!important;
    color:rgb(68,68,68)!important;
    text-align:left!important;
    margin:0 0 28px!important;
    overflow-wrap:anywhere;
  }
  #dm div.dmContent figure.bongioArticoloFoto{
    margin:0 0 36px!important;
    padding:0!important;
    border-radius:12px;
    overflow:hidden;
    background:#eef1f4;
  }
  /* Foto di apertura: proporzioni originali (width/height nel tag) */
  #dm div.dmContent figure.bongioArticoloFoto img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
  }
  #dm div.dmContent .bongioArticoloTesto{
    overflow-wrap:anywhere;
  }
  #dm div.dmContent .bongioArticoloTesto p{
    font-family:Poppins,'Poppins Fallback',sans-serif!important;
    font-size:17px!important;
    line-height:1.75!important;
    color:rgb(34,34,34)!important;
    text-align:left!important;
    margin:0 0 18px!important;
    overflow-wrap:anywhere;
  }
  #dm div.dmContent .bongioArticoloTesto strong,
  #dm div.dmContent p.bongioArticoloAutore strong{
    font-weight:700!important;
  }
  #dm div.dmContent .bongioArticoloTesto em,
  #dm div.dmContent p.bongioArticoloAutore em{
    font-style:italic!important;
  }
  #dm div.dmContent h2.bongioArticoloSottotitolo{
    font-family:'Red Hat Display','Red Hat Display Fallback',sans-serif!important;
    font-size:21px!important;
    line-height:1.4!important;
    font-weight:700!important;
    color:rgb(33,33,33)!important;
    text-align:left!important;
    margin:42px 0 14px!important;
  }
  /* Il CSS del builder ingrandisce e colora strong/span dentro gli h2:
     qui ereditano dimensione, font e colore del sottotitolo (doppio ID per
     superare in specificita' quelle regole) */
  #dm #dm_content h2.bongioArticoloSottotitolo *,
  #dm #dm_content h2.bongioArticoloAbstractTitolo *{
    font-size:inherit!important;
    font-family:inherit!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    color:inherit!important;
    font-weight:700!important;
  }
  /* Sottotitoli sottolineati come nel documento originale */
  #dm #dm_content h2.bongioArticoloSottotitolo .bongioSottolineato{
    text-decoration:underline!important;
    text-decoration-color:rgb(176,141,87)!important;
    text-decoration-thickness:2px!important;
    text-underline-offset:5px!important;
  }
  #dm div.dmContent .bongioArticoloAbstract{
    background:rgba(176,141,87,.08);
    border-left:3px solid rgb(176,141,87);
    border-radius:0 10px 10px 0;
    padding:22px 26px 8px;
    margin:0 0 8px;
  }
  #dm div.dmContent .bongioArticoloTesto p.bongioArticoloSep{
    font-size:14px!important;
    line-height:1.4!important;
    letter-spacing:.06em;
    color:rgb(176,141,87)!important;
    margin:0 0 12px!important;
  }
  #dm div.dmContent h2.bongioArticoloAbstractTitolo{
    font-family:'Red Hat Display','Red Hat Display Fallback',sans-serif!important;
    font-size:20px!important;
    line-height:1.3!important;
    font-weight:700!important;
    color:rgb(33,33,33)!important;
    text-align:left!important;
    margin:0 0 8px!important;
  }
  #dm div.dmContent .bongioArticoloTesto p.bongioArticoloAbstractTesto{
    font-size:16px!important;
    line-height:1.7!important;
  }
  /* Riquadro con il solo testo (senza titolo "Abstract" e asterischi):
     sotto il testo lo stesso spazio che c'e' sopra (8px di padding + 14px = 22px) */
  #dm div.dmContent .bongioArticoloAbstract p.bongioArticoloAbstractTesto{
    margin-bottom:14px!important;
  }

  /* ===== COMPUTER E TABLET (da 768px in su) =====
     Il logo flottante (#bongioFloatingLogo) e' un riquadro opaco fisso di
     230x230px in alto a sinistra (fino a x=250): il contenuto del blog parte
     a destra, cosi' durante lo scorrimento il logo non copre il testo. */
  @media (min-width:768px){
    /* A destra resta libero lo spazio dell'hamburger fisso (circa 55px) */
    #dm div.dmContent .bongioBlogRow{
      padding-left:270px!important;
      padding-right:64px!important;
    }
    /* L'header fisso copre tutta la larghezza fino a circa 200-280px: la
       scheda parte piu' in basso per restare cliccabile anche in cima */
    #dm div.dmContent #bongioBlogListRow{
      padding-top:56px!important;
    }
    /* Link "Torna al blog" in alto: su computer finirebbe sotto l'header
       fisso (non cliccabile); resta quello in fondo all'articolo */
    #dm div.dmContent p.bongioArticoloBack:not(.bongioArticoloBack--fondo){
      display:none!important;
    }
  }
  /* Schermi larghi: margini simmetrici, contenuto centrato sotto il titolo */
  @media (min-width:1200px){
    #dm div.dmContent .bongioBlogRow{
      padding-right:270px!important;
    }
  }
  /* Fino a 1499px: scheda con foto sopra e testo sotto. Con il margine per il
     logo la scheda e' larga al massimo ~960px: foto e testo affiancati
     renderebbero la colonna del testo troppo stretta e la scheda altissima */
  @media (min-width:768px) and (max-width:1499px){
    #dm div.dmContent a.bongioBlogCardLink{
      grid-template-columns:minmax(0,1fr);
    }
    #dm div.dmContent .bongioBlogCardMedia{
      min-height:0;
      height:auto;
      aspect-ratio:16/7;
    }
    #dm div.dmContent .bongioBlogCardBody{
      padding:26px 28px 22px;
    }
  }

  /* ===== MOBILE (sotto i 768px) ===== */
  @media (max-width:767px){
    /* Titolo "Blog": stessa resa mobile del titolo "Area Clienti" */
    #dm div.dmContent #bongioBlogTitleRow{
      padding-top:32px!important;
      padding-bottom:0!important;
    }
    #dm div.dmContent #bongioBlogTitle{
      font-size:30px!important;
    }
    /* Margini laterali come il resto del sito; spazio in fondo per il
       pulsante WhatsApp fisso */
    #dm div.dmContent .bongioBlogRow{
      padding:18px 18px 96px!important;
    }
    /* L'header fisso su mobile e' alto 74px e sta sopra al contenuto: il link
       "Torna al blog" in alto deve partire sotto, altrimenti il tocco finisce
       sull'header */
    #dm div.dmContent .bongioArticoloRow{
      padding-top:80px!important;
    }
    /* Schede una sotto l'altra, foto in alto */
    #dm div.dmContent ul.bongioBlogList{
      gap:28px;
    }
    #dm div.dmContent a.bongioBlogCardLink{
      grid-template-columns:minmax(0,1fr);
    }
    #dm div.dmContent .bongioBlogCardMedia{
      min-height:0;
      height:210px;
    }
    #dm div.dmContent .bongioBlogCardBody{
      padding:20px 18px 16px;
    }
    #dm div.dmContent h2.bongioBlogCardTitle{
      font-size:20px!important;
      line-height:1.35!important;
      margin:0 0 12px!important;
    }
    #dm div.dmContent p.bongioBlogCardAbstract{
      font-size:15px!important;
      line-height:1.65!important;
      margin:0 0 10px!important;
    }
    #dm div.dmContent .bongioBlogCardCta{
      font-size:16px!important;
      min-height:48px;
    }
    #dm div.dmContent .bongioBlogCard:hover .bongioBlogCardMedia img{
      transform:none;
    }

    /* Articolo */
    #dm div.dmContent p.bongioArticoloBack{
      margin:0 0 10px!important;
    }
    #dm div.dmContent p.bongioArticoloBack a{
      font-size:16px!important;
      min-height:48px;
    }
    #dm div.dmContent p.bongioArticoloBack--fondo{
      margin:36px 0 0!important;
      padding-top:14px!important;
    }
    #dm div.dmContent h1.bongioArticoloTitolo{
      font-size:22px!important;
      line-height:1.32!important;
      margin:0 0 14px!important;
    }
    #dm div.dmContent p.bongioArticoloAutore{
      font-size:14px!important;
      margin:0 0 20px!important;
    }
    #dm div.dmContent figure.bongioArticoloFoto{
      margin:0 0 26px!important;
      border-radius:8px;
    }
    #dm div.dmContent .bongioArticoloTesto p{
      font-size:16px!important;
      line-height:1.7!important;
      margin:0 0 16px!important;
    }
    #dm div.dmContent .bongioArticoloTesto p.bongioArticoloAbstractTesto{
      font-size:15px!important;
      line-height:1.65!important;
    }
    #dm div.dmContent h2.bongioArticoloSottotitolo{
      font-size:18px!important;
      line-height:1.4!important;
      margin:34px 0 12px!important;
    }
    #dm div.dmContent .bongioArticoloAbstract{
      padding:18px 16px 6px;
    }
    /* Sotto il testo lo stesso spazio che c'e' sopra (6px di padding + 12px = 18px) */
    #dm div.dmContent .bongioArticoloAbstract p.bongioArticoloAbstractTesto{
      margin-bottom:12px!important;
    }
    #dm div.dmContent h2.bongioArticoloAbstractTitolo{
      font-size:18px!important;
    }
  }
  /* Telefoni molto stretti: titoli un po' piu' piccoli perche' le parole
     lunghe in maiuscolo (es. SOCIOASSISTENZIALI) non escano dal riquadro */
  @media (max-width:359px){
    #dm div.dmContent .bongioBlogRow{
      padding-left:16px!important;
      padding-right:16px!important;
    }
    #dm div.dmContent .bongioBlogCardBody{
      padding:18px 16px 14px;
    }
    #dm div.dmContent h2.bongioBlogCardTitle{
      font-size:18px!important;
    }
    #dm div.dmContent h1.bongioArticoloTitolo{
      font-size:20px!important;
    }
  }


  /* Pulsante WhatsApp flottante in basso a destra, sempre visibile, lontano da
     logo flottante e hamburger (entrambi in alto). Il contenitore popup di Duda
     (#dmPopup) resta sempre nel DOM trasparente ma cliccabile (z-index
     1000009999, largo il 93%): su mobile copriva il pulsante e i tocchi non
     aprivano WhatsApp, quindi lo z-index deve stare sopra. */
  .bongioWhatsapp{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    bottom:calc(24px + env(safe-area-inset-bottom))!important;
    z-index:1000010000!important;
    width:60px!important;
    height:60px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
    background:#25D366!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
    transition:transform .2s ease, box-shadow .2s ease;
    text-decoration:none!important;
  }
  .bongioWhatsapp:hover,
  .bongioWhatsapp:focus-visible{
    transform:scale(1.07);
    box-shadow:0 6px 18px rgba(0,0,0,.34)!important;
  }
  .bongioWhatsapp svg{
    display:block!important;
    width:34px!important;
    height:34px!important;
    fill:#ffffff!important;
  }
  @media (max-width:767px){
    .bongioWhatsapp{
      right:16px!important;
      bottom:16px!important;
      bottom:calc(16px + env(safe-area-inset-bottom))!important;
      width:54px!important;
      height:54px!important;
    }
    .bongioWhatsapp svg{
      width:30px!important;
      height:30px!important;
    }
  }