@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;
  }


  /* 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;
    }
  }