@charset "UTF-8";
.section-padding {
  padding-top: 92px;
  padding-bottom: 92px;
}

.aspect-ratio-16-9 {
  aspect-ratio: 16/9;
}

.aspect-ratio-1-1 {
  aspect-ratio: 1/1;
}

.object-fit-cover {
  object-fit: cover;
}

/* Brand: frecce ai lati solo dove c'e' spazio */
@media (min-width: 1400px) {
  .brands .swiper-button-next {
    right: -70px !important;
  }
  .brands .swiper-button-prev {
    left: -70px !important;
  }
}
/* Caroselli con pallini: frecce centrate sotto la paginazione */
@media (max-width: 767.98px) {
  .swiper-container:has(.swiper-pagination):has(.swiper-navigation) {
    margin-bottom: 6.5rem !important;
  }
  .swiper-container:has(.swiper-pagination):has(.swiper-navigation) .swiper-controls .swiper-navigation {
    position: absolute;
    left: 0;
    bottom: -5.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }
  .swiper-container:has(.swiper-pagination):has(.swiper-navigation) .swiper-controls .swiper-navigation .swiper-button {
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    margin: 0;
    transform: none;
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .swiper-container.brands:has(.swiper-pagination) {
    margin-bottom: 6.5rem !important;
  }
  .swiper-container.brands:has(.swiper-pagination) .swiper-controls .swiper-navigation {
    position: absolute;
    left: 0;
    bottom: -5.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }
  .swiper-container.brands:has(.swiper-pagination) .swiper-controls .swiper-navigation .swiper-button {
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    margin: 0;
    transform: none;
  }
}
/* frecce solo su mobile */
@media (min-width: 768px) {
  .swiper-container.nav-mobile .swiper-navigation {
    display: none;
  }
}
.copyright {
  color: #959595 !important;
}
.copyright a {
  color: #959595 !important;
}
.copyright a:hover {
  color: white !important;
}

.search.form-control::placeholder {
  color: #444;
  opacity: 1;
}

/* Mega menu Prodotti: colonne bilanciate, nessun taglio verticale */
.mega-colonne .mega-gruppo {
  margin-bottom: 1rem;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown-menu.mega-menu {
    max-height: none;
    overflow: visible;
  }
  /* solo i gruppi lunghi continuano nella colonna dopo */
  .mega-colonne {
    column-count: 4;
    column-gap: 2rem;
    column-rule: 1px solid rgba(164, 174, 198, 0.2);
  }
  .mega-colonne li,
  .mega-colonne .mega-gruppo-intero {
    break-inside: avoid;
  }
  .mega-colonne .mega-vai-indice {
    padding-left: var(--bs-dropdown-item-padding-x, 27px);
  }
}
/* Catalogo: toggle "Mostra tutti / Mostra meno" nei filtri brand/tag */
.btn-mostra-tutti {
  cursor: pointer;
}
.btn-mostra-tutti .more-less {
  display: none;
}
.btn-mostra-tutti[aria-expanded=true] .more-show {
  display: none;
}
.btn-mostra-tutti[aria-expanded=true] .more-less {
  display: inline;
}

/* Breadcrumb su sfondo chiaro (il tema li colora #eee, pensati per hero scuro) */
.breadcrumb-dark .breadcrumb-item,
.breadcrumb-dark .breadcrumb-item a {
  color: #626262;
}
.breadcrumb-dark .breadcrumb-item.active {
  color: #9a9a9a;
}
.breadcrumb-dark .breadcrumb-item a:hover {
  color: var(--bs-primary);
}

/* Sidebar catalogo: lista brand scorrevole (evita elenchi lunghissimi) */
.brand-scroll {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Bordo grigio visibile: .border-gray del tema usa --bs-gray (#f6f7f9), quasi invisibile */
.border-darkgray {
  border-color: var(--bs-gray-300) !important;
}

/* Campo telefono con intl-tel-input dentro un .form-floating.
   La libreria avvolge l'input in un <div class="iti"> (inline-block): l'input non e' piu'
   figlio diretto di .form-floating, quindi non eredita altezza e padding del tema, e il
   wrapper inline aggiunge sotto lo spazio della riga di testo -> campo piu' alto degli altri.
   Replichiamo i valori del tema; l'etichetta flottante viene nascosta (custom.js.php ne
   copia il testo nel placeholder, cosi' resta leggibile dentro al campo) ma resta nel DOM
   per gli screen reader. */
.form-floating > .iti {
  display: block;
  width: 100%;
}

.form-floating > .iti > .form-control {
  height: calc(2.5rem + 2px);
  min-height: calc(2.5rem + 2px);
  padding: 0.6rem 1rem;
  line-height: 1.25;
}

/* placeholder visibile: nel .form-floating il tema lo rende trasparente */
.form-floating > .iti > .form-control::placeholder {
  color: inherit;
  opacity: 0.55;
}

.form-floating:has(> .iti) > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Breadcrumb su una riga sola: su schermi stretti scorre in orizzontale invece di
   andare a capo e mangiarsi tre righe di pagina. La barra di scorrimento resta
   nascosta (su touch si trascina, su desktop la catena ci sta quasi sempre). */
nav[aria-label=breadcrumb] {
  max-width: 100%;
}

.breadcrumb {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

.breadcrumb .breadcrumb-item {
  white-space: nowrap;
}

/* Navbar sotto i 1200px: logo e blocco icone hanno w-100 dal tema, quindi si spartiscono
   la riga e schiacciano le voci a sinistra. Li lasciamo alla loro larghezza naturale,
   cosi' il menu resta a destra come sopra i 1200. */
@media (max-width: 1199.98px) {
  .navbar .navbar-brand,
  .navbar .navbar-other {
    width: auto !important;
  }
  .navbar .navbar-collapse {
    margin-left: auto;
  }
}
/* ── Ritmo verticale delle sezioni ─────────────────────────────────────────────
   Il tema usa py-14 (4.5rem = 72px) e py-md-16 (6rem = 96px), .section-padding 92px:
   troppo su schermi piccoli e un po' abbondante anche su desktop. */
.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

section > .container.py-14,
section > .container.py-md-16 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 767.98px) {
  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  section > .container.py-14,
  section > .container.py-md-16 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}
/* Toolbar di modifica dei blocchi (solo admin): e' in position:absolute ma
   .bordo-modifica-orange non e' un contenitore posizionato, quindi si ancora a un
   antenato qualsiasi e su mobile finisce fuori dallo schermo. */
.bordo-modifica-orange {
  position: relative;
}

.div-pulsante-modifica-orange {
  max-width: 100%;
  flex-wrap: wrap;
}

/* Il tema non ha il reset img { max-width: 100% } (solo .img-fluid): le immagini che
   arrivano dai blocchi CMS non hanno classi e tengono la larghezza nativa, sfondando
   colonna e container. Le limitiamo nei contenuti, non ovunque, per non toccare
   loghi e icone con dimensioni fisse volute. */
section img,
.bordo-modifica-orange img,
.opxweb-placeholder img {
  max-width: 100%;
  height: auto;
}

/* ── Sidebar catalogo: comportamento responsive ────────────────────────────────
   Da lg in su: colonna affiancata alla griglia, larghezza contenuta (era inline
   nel markup). Sotto: larghezza piena e widget richiudibili, altrimenti prima di
   arrivare ai prodotti si scorrono decine di voci. */
@media (min-width: 992px) {
  .catalogo-sidebar {
    max-width: 385px;
  }
}
@media (max-width: 991.98px) {
  .catalogo-sidebar {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    /* stacco dalla griglia prodotti che su mobile viene subito sotto */
    margin-bottom: 2rem;
  }
  .catalogo-sidebar .widget-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .catalogo-sidebar .widget-toggle::after {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-bottom: 4px;
  }
  .catalogo-sidebar .widget-toggle:not(.collapsed)::after {
    transform: rotate(-135deg);
    margin-bottom: 0;
  }
}
/* ── Macro-filtri in testata (catalogo) ────────────────────────────────────────
   Da lg in su vanno a capo come prima. Sotto restano su una riga sola che scorre
   in orizzontale: con sei categorie, andando a capo, occupavano mezza schermata. */
.macro-filtri {
  flex-wrap: wrap;
}

@media (max-width: 991.98px) {
  .macro-filtri {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* overflow-x:auto rende scorrevole anche l'asse verticale: senza questo spazio
       il translateY(-.15rem) dei .btn all'hover verrebbe tagliato in alto */
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .macro-filtri::-webkit-scrollbar {
    display: none;
  }
  .macro-filtri .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Sfumature laterali gestite da custom.js.php: compaiono solo dal lato in cui
     c'e' ancora qualcosa da scorrere. */
  .macro-filtri.sfuma-dx {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  }
  .macro-filtri.sfuma-sx {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px);
    mask-image: linear-gradient(to right, transparent 0, #000 40px);
  }
  .macro-filtri.sfuma-sx.sfuma-dx {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
/* Griglia prodotti su mobile: due card per riga */
@media (max-width: 767.98px) {
  .grid-view:not(.blog) .card-body {
    padding: 0.85rem !important;
  }
  .grid-view:not(.blog) .card-body .h5 {
    font-size: 0.85rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .grid-view:not(.blog) .card .btn-sm {
    font-size: 0.65rem;
    margin: 0.4rem 0 0 0.4rem !important;
  }
}
/* tablet: tre card per riga */
@media (min-width: 768px) and (max-width: 991.98px) {
  .grid-view:not(.blog) .card-body {
    padding: 1.1rem !important;
  }
}
/* ── Badge reCAPTCHA ───────────────────────────────────────────────────────────
   Google consente di nascondere il badge solo se l'attribuzione resta visibile nel
   flusso utente. custom.js.php inserisce la nota nel form e solo allora mette la
   classe sul body: senza nota, il badge resta dov'e'. */
.opx-recaptcha-nascondi-badge .grecaptcha-badge {
  visibility: hidden;
}

.opx-recaptcha-note {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--bs-secondary-color, #6c757d);
}

.opx-recaptcha-note a {
  color: inherit;
  text-decoration: underline;
}

/* ── Pulsante WhatsApp sospeso ─────────────────────────────────────────────────
   Sempre a schermo in basso a destra. Su mobile sparisce quando entra in vista la
   barra legale del copyright, per non coprirne i link (classe messa da custom.js.php). */
.whatsapp-fisso a {
  position: fixed;
  right: 15px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.whatsapp-fisso a:hover,
.whatsapp-fisso a:focus {
  color: #fff;
  transform: scale(1.06);
}

@media (max-width: 991.98px) {
  body.footer-legale-visibile .whatsapp-fisso a {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* La freccia "torna su" del tema sta nello stesso angolo: la spostiamo sopra gli
   altri due e la portiamo alla stessa misura (52px invece dei 2.3rem del tema),
   cosi' la colonna dei tre pulsanti risulta allineata. */
.progress-wrap {
  right: 15px !important;
  bottom: 148px !important;
  width: 52px !important;
  height: 52px !important;
}

.progress-wrap:after {
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 1.4rem;
}

/* ── Pulsante condivisione sospeso ─────────────────────────────────────────────
   Stessa colonna del WhatsApp, subito sopra. Aprendo la lista il pulsante WhatsApp
   di contatto sparisce, altrimenti l'icona comparirebbe due volte. */
.opx-share-fixed {
  position: fixed;
  right: 15px;
  bottom: 84px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: bottom 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.opx-share-fixed .opx-share-toggle,
.opx-share-fixed .opx-share-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.opx-share-fixed .opx-share-toggle {
  background: var(--bs-primary, #18a558);
  cursor: pointer;
}

.opx-share-fixed.is-open .opx-share-toggle {
  transform: rotate(90deg);
}

.opx-share-fixed .opx-share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opx-share-fixed .opx-share-item:hover,
.opx-share-fixed .opx-share-item:focus {
  color: #fff;
  transform: scale(1.06);
}

.opx-share-fixed .opx-share-fb {
  background: #1877f2;
}

.opx-share-fixed .opx-share-wa {
  background: #25d366;
}

.opx-share-fixed .opx-share-li {
  background: #0a66c2;
}

/* Con la lista aperta il WhatsApp di contatto sparisce (icona doppia) e il pulsante
   condividi scende a prenderne il posto, invece di restare sospeso piu' in alto. */
body.opx-share-open .whatsapp-fisso a {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.opx-share-open .opx-share-fixed {
  bottom: 20px;
}

@media (max-width: 991.98px) {
  body.footer-legale-visibile .opx-share-fixed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
/* ── Menu offcanvas su mobile ──────────────────────────────────────────────────
   Il pannello del tema e' largo 15rem (240px) e le voci .dropdown-item hanno
   white-space: nowrap da Bootstrap: nomi lunghi tipo "Cioccolato per coperture
   pinguino" uscivano dal pannello. Qui il pannello e' piu' largo e le voci vanno
   a capo invece di sfondare. */
@media (max-width: 991.98px) {
  .offcanvas-nav {
    --bs-offcanvas-width: min(88vw, 340px);
  }
  .offcanvas-nav .dropdown-item,
  .offcanvas-nav .dropdown-header {
    white-space: normal;
    word-break: break-word;
  }
  .offcanvas-nav .mega-menu .row {
    --bs-gutter-x: 0;
  }
}
/* ── Barra contatti in testata: versione mobile ────────────────────────────────
   Sotto i 768px i contatti diventano tre pulsanti icona (chiama, scrivi, mappa). */
.topbar-btn-mobile {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  padding: 4px 16px;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.topbar-btn-mobile:hover,
.topbar-btn-mobile:focus {
  color: #fff;
  opacity: 1;
}

.topbar-separator {
  display: block;
  width: 1px;
  height: 16px;
  align-self: center;
  background-color: rgba(255, 255, 255, 0.35);
}

/* Logo piu' contenuto su mobile: 140px rubano spazio a lente e hamburger */
@media (max-width: 767.98px) {
  .navbar-brand .logo-dark,
  .navbar-brand .logo-light {
    max-width: 120px !important;
  }
}
/* Barra piu' bassa sotto lg: il tema mette 1.2rem sopra e sotto al logo */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-brand {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
/* Fascia numeri pagina azienda: separatori chiari tra le colonne, solo da lg in su
   (sotto le colonne vanno a due a due e la riga verticale spezzerebbe la griglia). */
@media (min-width: 992px) {
  .numeri-azienda > [class*=col-]:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.25);
  }
}
/* .counter-lg del tema resta piccolo dentro una fascia colorata */
.numeri-azienda .counter {
  font-size: 2.2rem;
  line-height: 1.2;
}

.numeri-azienda p {
  opacity: 0.9;
}

/* Icone lineal sulla fascia verde: il tema le disegna con tratto scuro (#343f52) e
   riempimento colorato, illeggibili sul primario. Qui tratto bianco e riempimento
   bianco trasparente. */
.numeri-azienda .icon-svg .lineal-stroke {
  fill: #fff;
}

.numeri-azienda .icon-svg .lineal-fill {
  fill: rgba(255, 255, 255, 0.35);
}

/* Pilastri (pagina azienda): sotto md il titolo apre il testo, con chevron a destra.
   Da md in su il testo e' sempre aperto (d-md-block), quindi niente freccia ne' cursore. */
.pilastro-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.pilastro-toggle::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-bottom: 4px;
}

.pilastro-toggle:not(.collapsed)::after {
  transform: rotate(-135deg);
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .pilastro-toggle {
    display: block;
    cursor: default;
  }
  .pilastro-toggle::after {
    content: none;
  }
}
/* Ricerca senza cookie: l'input resta visibile ma non scrivibile e apre l'avviso */
.ricerca-sito-bloccata {
  cursor: pointer;
}

/* Pulsanti outline: il tema li lascia col blu e col grigio della demo. In hover
   devono diventare verdi con testo bianco, come gli altri pulsanti del sito.
   Bastano le variabili: .btn:hover legge quelle, senza !important. */
.btn-outline-primary {
  --bs-btn-color: #007c42;
  --bs-btn-border-color: #007c42;
  --bs-btn-disabled-color: #007c42;
  --bs-btn-disabled-border-color: #007c42;
  --bs-btn-focus-shadow-rgb: 0, 124, 66;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #007c42;
  --bs-btn-hover-border-color: #007c42;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #007c42;
  --bs-btn-active-border-color: #007c42;
}

/* Nelle meta delle card il tema colora i link con ".post-meta li a", piu' specifico
   di ".btn:hover": il pulsante diventava verde ma il testo restava grigio. */
.post-meta li a.btn {
  color: var(--bs-btn-color);
}

.post-meta li a.btn:hover,
.post-meta li a.btn:focus,
.post-meta li a.btn:active {
  color: var(--bs-btn-hover-color);
}

.numeri-impianto {
  padding: 1.5rem 1rem;
  border: 1px solid rgba(0, 124, 66, 0.18);
  border-radius: 0.5rem;
  background: rgba(0, 124, 66, 0.07);
}

.numeri-impianto .counter {
  color: #007c42;
  font-size: 2.4rem;
  font-weight: 700;
}

@media (min-width: 576px) {
  .numeri-impianto .row > [class*=col-]:not(:last-child) {
    border-right: 1px solid rgba(0, 124, 66, 0.18);
  }
}
/* su telefono i numeri non stanno affiancati */
@media (max-width: 575.98px) {
  .numeri-impianto .row > [class*=col-] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .numeri-impianto .row > [class*=col-]:not(:last-child) {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 124, 66, 0.18);
  }
}
/* Badge di stato sopra le copertine: la figcaption del tema sta a z-index 5 e nel tema
   non esiste l'utility .z-1 di Bootstrap, quindi il badge finiva sotto l'immagine. */
.badge-evento {
  z-index: 6;
}

/* Data di eventi e news alla stessa misura ovunque: nel tema .post-meta vale .7rem
   e altrove la riga era a dimensione testo, quindi le card non si allineavano. */
.data-evento,
.post-meta li.data-evento {
  font-size: 0.85rem;
  font-weight: 700;
  color: #343f52;
}

/* Swiper mette height:100% sulla slide: senza un'altezza definita vale "quanto il
   contenuto" e le card non si pareggiano. Con auto la riga torna a stirarsi. */
.blog .swiper-slide {
  height: auto;
}

.swiper-slide > .item-inner,
.swiper-slide > .item-inner > article,
.swiper-slide > .item-inner > article > .card {
  height: 100%;
}

/* Card in colonna con il footer (data + pulsante) sempre a fondo box */
.swiper-slide .card,
article > .card {
  display: flex;
  flex-direction: column;
}

.swiper-slide .card .card-footer,
article > .card > .card-footer {
  margin-top: auto;
}

/* Terzo livello di categorie in sidebar */
.sotto-categorie {
  margin: 0.35rem 0 0.5rem 0.9rem;
  font-size: 0.9em;
}

/* Freccia che apre il terzo livello nella sidebar */
.sotto-toggle {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
}

.sotto-toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
  transition: transform 0.2s ease;
}

.sotto-toggle.collapsed::after {
  transform: rotate(45deg);
  top: 2px;
}

/* Macro categorie: titolo sopra la foto */
.categoria-box img {
  aspect-ratio: 4/3;
  transition: transform 0.4s ease;
}

.categoria-box:hover img {
  transform: scale(1.05);
}

.categoria-box-testo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 3rem 1.25rem 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(to top, rgba(20, 24, 30, 0.85), rgba(20, 24, 30, 0));
}

.categoria-box-testo h3 {
  line-height: 1.25;
}

@media (min-width: 1200px) {
  .categoria-box-testo {
    padding: 4rem 1.5rem 1.4rem;
  }
  .categoria-box-testo h3 {
    font-size: 1.3rem;
  }
}
.categoria-box-testo i {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.categoria-box:hover .categoria-box-testo i {
  transform: translateX(3px);
}

/* su telefono due per riga, senza freccia */
@media (max-width: 767.98px) {
  .row:has(> .project.item) {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
  .categoria-box img {
    aspect-ratio: 1/1;
  }
  .categoria-box-testo {
    padding: 2.5rem 0.75rem 0.75rem;
  }
  .categoria-box-testo h3 {
    font-size: 0.85rem;
  }
  .categoria-box-testo i {
    display: none;
  }
}
/* Pill macro-categorie su mobile: barra di scorrimento */
.macro-filtri-barra {
  display: none;
}

@media (max-width: 991.98px) {
  .macro-filtri-box {
    margin-top: 1.5rem !important;
  }
  .macro-filtri-box:has(.macro-filtri.sfuma-sx) .macro-filtri-barra,
  .macro-filtri-box:has(.macro-filtri.sfuma-dx) .macro-filtri-barra {
    display: block;
  }
  .macro-filtri-barra {
    height: 3px;
    margin-top: 0.6rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
  }
  .macro-filtri-barra span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #fff;
    transition: margin-left 0.1s linear;
  }
}
/* niente scorrimento laterale su mobile (slider e animazioni escono dallo schermo); non su html/body, che bloccherebbe lo scroll */
.content-wrapper {
  overflow-x: clip;
}

/* eventi con autoheight: da tablet card di una riga alte uguali */
@media (min-width: 768px) {
  .swiper-container.nav-mobile .swiper-autoheight .swiper-wrapper {
    align-items: stretch;
  }
}
/* Blocco sedi nel footer (jolly 62) */
.footer-sedi li > div p {
  margin: 0;
}

.footer-sedi li > div b,
.footer-sedi li > div strong {
  color: #fff;
}

/*# sourceMappingURL=custom.css.map */