/*
 Theme Name:   Pegaso Child 2026

 Description:  Pegaso Child Theme
 Author:       Stefano
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  pegaso2026-child


*/


*, html, body {
    
    font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
   
}

p,div,span { color:#2D2D2A;}

.container { max-width: 1536px}

#page-wrapper,
#content,
.site,
.site-content,
main,
#wrapper-static-hero,
#wrapper-hero-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
a { color:inherit; text-decoration: none;}
.piccolo a:hover { color:inherit; text-decoration: underline}

.bold {font-weight:bold;}

/* colori */

.grigio , body {background:#FFFFFF;}
.arancio {background:#cb4a3a;}
.scuro {background:#2D2D2A;}

/* testi */

h2 { font-size: clamp(42px, 4vw, 60px); margin-bottom:60px;}
h3 { font-size:32px; font-size: clamp(24px, 4vw, 32px); margin-bottom:30px;}
p, td, table, tr { font-size: clamp(20px, 1vw, 20px);  margin-bottom:60px;}

p.piccolo { font-size: clamp(14px, 1vw, 14px);  margin-bottom:30px;}
li {font-size: clamp(16px, 1vw, 24px);}
ol { padding-left:24px}
.num_ev { font-size: clamp(46px, 1.5vw, 60px); color:#cb4a3a; font-weight: bold}
b, strong {font-weight: bold}
.sotto_num_ev { font-size: clamp(12px, 2vw, 18px);}

.txt_chiaro {color:#FFFFFF}
.txt_scuro {color:#2D2D2A}
.ev_arancio, .txt_arancio { color:#cb4a3a}

.titolo_pagina { font-weight: bold; font-size: clamp(42px, 4vw, 66px); line-height: clamp(44px, 4vw, 68px)}  .titolo_pagina b , .titolo_pagina strong{ color:#cb4a3a;  font-weight: bold; }

table {
  table-layout: auto; /* Permette alla tabella di adattarsi al contenuto */
  width: auto;      /* La tabella occupa solo lo spazio necessario */
     border-collapse: separate; /* Obbligatorio per far funzionare lo spacing */
  border-spacing: 20px 5px;  /* Il primo valore è lo spazio Orizzontale, il secondo Verticale */
}

td {
  width: auto;      /* Lascia che ogni cella si regoli automaticamente */
  white-space: normal; /* Permette al testo di andare a capo normalmente */
 
}




.testo_sotto_immagine p{
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF; /* bianco */
}

.testo_sotto_immagine .last-line{
  color: #cb4a3a; /* arancio */
}


/* testi slider homepage */

.titolo_slide_home { font-size: clamp(70px, 4vw, 100px); line-height: clamp(70px, 4vw, 100px); font-weight: bold; color:#FFFFFF}
.titolo_slide_home b, .titolo_slide_home strong{font-weight: bold; color:#cb4a3a}
.paragrafo_slide_home {ffont-size: clamp(24px, 4vw, 32px); color:#FFFFFF; margin-top:60px;}

.hero-slider,
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  height: 100vh;
}

/* meglio ancora su mobile moderno */
@supports (height: 100svh) {
  .hero-slider,
  .hero-slider .swiper,
  .hero-slider .swiper-wrapper,
  .hero-slider .swiper-slide {
    height: 100svh;
  }
}

/* bottoni */
a { cursor:pointer}
.btn_sec, .accordion-item.active .btn_sec{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #2D2D2A;
     background-color:transparent;
  border-radius: 30px;
  min-width: 260px;
  padding: 10px 30px;         
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;

      transition:all 0.2s ease;
}

.btn_sec:hover{
 color:#FFFFFF;
    background-color:#2D2D2A;

}
.navbar-nav .nav-link {
  display: flex;
  align-items: center;
}

.btn_sec_menu{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #2D2D2A;
     background-color:transparent;
  border-radius: 30px;
 width: auto;
  padding: 2px 8px;         
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;

      transition:all 0.2s ease;
}

.btn_sec_menu a.dropdown-toggle:hover, .btn_sec_menu:hover a.dropdown-toggle{
 color:#FFFFFF!important;

}
.btn_sec_menu:hover {
background-color:#2D2D2A;}

.home .is-top  .btn_sec_menu {  border: 2px solid #FFFFFF;}



.btn_aderisci_menu{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #cb4a3a;
     background-color:#cb4a3a;
  border-radius: 30px;
 width: auto;
  padding: 2px 8px;         
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF!important;

      transition:all 0.2s ease;
}

.btn_aderisci_menu a { color: #FFFFFF!important;}

.btn_aderisci_menu a:hover, .btn_aderisci_menu:hover{
 color:#FFFFFF!important;

}
.btn_aderisci_menu:hover {
  background-color: rgba(203, 74, 58,  0.8);
  border-color: rgba(203, 74, 58,  0.8);}

.home .is-top  .btn_aderisci_menu {  border: 2px solid #cb4a3a;}



.btn_form{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #FFFFFF;
     background-color:transparent;
  border-radius: 30px;
  min-width: 100%;
  padding: 10px 30px;         
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF!important;

      transition:all 0.2s ease;
}

.btn_form:hover{
 color:#FFFFFF;
    background-color:#2D2D2A;

}

.btn_form::placeholder{
  color: #FFFFFF!important;

}


.active .btn_sec {color:#FFFFFF;
    background-color:#2D2D2A;}



.btn_sec.filter-btn{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #2D2D2A;
        background-color:#FFFFFF;
  border-radius: 30px;
  min-width: 140px;
  padding: 5px 10px;         
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;
      transition:all 0.2s ease;
}

.btn_sec.filter-btn:hover{
 color:#FFFFFF;
    background-color:#2D2D2A;

}


.active.btn_sec.filter-btn {color:#FFFFFF;
    background-color:#2D2D2A;}

.active.btn_sec {color:#FFFFFF;
    background-color:#2D2D2A;}





.btn_sec_chiaro{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  min-width: 260px;
  padding: 10px 30px;         
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
      transition:all 0.2s ease;
}

.btn_sec_chiaro:hover{
 color:#2D2D2A;
    background-color:#FFFFFF;

}


.btn_sec_inv{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #FFFFFF;
  border-radius: 30px;
  min-width: 260px;
  padding: 10px 30px;   
     background-color:#FFFFFF;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;
      transition:all 0.2s ease;
}

.btn_sec_inv:hover{
 color:#FFFFFF;
    background-color:#2D2D2A;

}



.btn_ter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;

 border-width: 2px;
border-style: solid;
border-color:  #FFFFFF;
  background-color: #FFFFFF;  /* <-- qui */
  border-radius: 30px;

  min-width: 260px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #cb4a3a;

  transition: background-color .2s ease, border-color .2s ease, color .2s ease; /* <-- qui */
}

.btn_ter:hover{
  color:#cb4a3a;
  background-color: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.0);
}

.btn_pri{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;

 border-width: 2px;
border-style: solid;
border-color: rgba(203, 74, 58,  1);
  background-color: #cb4a3a;  /* <-- qui */
  border-radius: 30px;

  min-width: 260px;
  padding: 10px 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;

  transition: background-color .2s ease, border-color .2s ease, color .2s ease; /* <-- qui */
}

.btn_pri:hover{
  color:#FFFFFF;
  background-color: rgba(203, 74, 58,  0.8);
  border-color: rgba(203, 74, 58,  0);
}


.briciole a , .briciole span{ text-transform:uppercase; text-decoration: none; font-size:16px; color:#2D2D2A}



body.has-fixed-header{
  padding-top: var(--header-h, 0px);
}



/* MENU */
/* ===== MENU: espansione header + submenu in colonna (desktop) ===== */


#main-menu {
  display: flex;  /* Imposta il layout Flexbox */
  justify-content: space-evenly;  /* Distribuisce le voci equamente */
  width: 100%;  /* Assicura che occupi tutta la larghezza disponibile */
  padding-left: 10%;
  padding-right: 0;
}

#main-menu > .nav-item {
  display: flex;  /* Imposta ogni nav-item come flex */
  justify-content: center;  /* Centra ogni nav-item */
  flex-grow: 1;  /* Ogni item crescerà per occupare spazio disponibile */
   
}

#main-menu > li {
  margin-left: 10px;
}

#main-menu > .nav-item .nav-link {
  padding-left: 5%;  /* Mantieni il padding */
  width: auto;  /* Assicura che il link prenda tutta la larghezza del suo contenitore */
  white-space: nowrap;  /* Impedisce che il testo vada a capo */
  text-align: left;  /* Centra il testo dentro il link */
}

a.nav-link { font-size:14px;}

.home .sticky-top.is-top a.nav-link { color:#FFFFFF;}
.home .sticky-top.is-top  {padding-top:40px; padding-bottom:40px;}



.padding-sezione { padding-top:120px; padding-bottom:120px;}



:root{
  --submenu-gap: 26px;      /* distanza verticale sotto la riga menu */
  --submenu-left: 0px;      /* settato via JS */
  --submenu-extra: 0px;     /* settato via JS */
}

@media (min-width: 768px){

  /* contenitori: niente clipping */
  #wrapper-navbar,
  #main-nav,
  #navbarNavDropdown{
    overflow: visible !important;
  }

  /* reference per dropdown assoluto */
  #navbarNavDropdown{
    position: relative;
  }

  /* dropdown: assoluto, sotto la riga */
  #main-nav .navbar-nav > .menu-item-has-children{
    position: static !important; /* così il ref resta #navbarNavDropdown */
  }

  #main-nav .navbar-nav > .menu-item-has-children > .dropdown-menu{
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(100% + var(--submenu-gap));
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* la colonna parte “sotto la voce” (offset via JS) */
    padding-left: var(--submenu-left) !important;

    z-index: 10010;

    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .18s;
  }

  /* aperto SOLO se JS aggiunge .is-open */
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear 0s;
  }

  /* stile voci submenu */
  #main-nav .dropdown-menu .dropdown-item,
  #main-nav .dropdown-menu a{
    display: block;
    width: max-content;
    padding: 10px 0;
    background: transparent;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .6px;
    color: #000;
  }

  #main-nav .dropdown-menu a:hover,
  #main-nav .dropdown-menu .dropdown-item:hover{
    opacity: .7;
    background: transparent;
  }

  /* stagger ingresso voci submenu */
  #main-nav .dropdown-menu > *{
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }

  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > *{
    opacity: 1;
    transform: translateY(0);
  }

  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(1){ transition-delay: .03s; }
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(2){ transition-delay: .06s; }
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(3){ transition-delay: .09s; }
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(4){ transition-delay: .12s; }
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(5){ transition-delay: .15s; }
  #main-nav .navbar-nav > .menu-item-has-children.is-open > .dropdown-menu > :nth-child(6){ transition-delay: .18s; }

  /* header “sfondo che si allunga” */
  #wrapper-navbar{
    padding-bottom: var(--submenu-extra);
    transition: padding-bottom .02s ease;
  }

  /* quando menu è aperto, forza background anche in is-top */
  body.menu-open #wrapper-navbar{
    background-color: #FFFFFF !important;
  }
    
/* Impostiamo il colore del logo tramite CSS */
.logo-mask svg path {
  fill: currentColor;  /* Usa il colore corrente definito tramite la proprietà 'color' */
  transition: fill 0.3s ease;  /* Aggiungi una transizione fluida al cambiamento del colore */
}
    
    .site-footer .logo-mask { color:#FFFFFF}
    
    .site-footer p { font-size:20px; color:#FFFFFF}
    .menufooter {font-size:20px; color:#FFFFFF; text-decoration:none}
    .menufooter:hover {font-size:20px; color:#FFFFFF; text-decoration:none}

   #wrapper-navbar.is-top .logo-mask { transform: scale(0.9); transition: transform 0.3s ease}
     #wrapper-navbar .logo-mask { transform: scale(0.7); }
/* Quando la navbar è visibile o idle, cambia il colore del logo */
#wrapper-navbar.is-idle .logo-mask,
#wrapper-navbar.is-visible .logo-mask {
  color: #2D2D2A;  /* Colore del logo, puoi sostituirlo con quello che desideri */
}
    
    .home .sticky-top.is-top .logo-mask { color:#FFFFFF;}

/* Quando il menu è aperto, cambia il colore del logo */
body.menu-open #wrapper-navbar.is-idle .logo-mask, body.menu-open #wrapper-navbar .logo-mask , 
body.menu-open #wrapper-navbar.is-visible .logo-mask {
  color: #2D2D2A !important;   /* Cambia il colore a quello desiderato (ad esempio #2D2D2A) */
}

/* Colore dei link del menu quando il menu è aperto */
    .navbar-light .navbar-nav .nav-link {color: #000;}
body.menu-open .navbar-light .navbar-nav .nav-link {
  color: #000;  /* Colore dei link nel menu */
}




/* home con hero: la pagina NON deve scendere */
body.has-fixed-header.has-hero-overlap{
  padding-top: 0 !important;
}



#wrapper-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: background-color .2s ease, transform .25s ease, opacity .25s ease, padding-bottom .25s ease;
}

/* Stato base visibile */
#wrapper-navbar.is-visible,
#wrapper-navbar.is-top,
#wrapper-navbar.is-idle{
  transform: translateY(0);
  opacity: 1;
}

/* Nascosta */
#wrapper-navbar.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
}

/* In alto: magari trasparente */
#wrapper-navbar.is-top{
  background: transparent;
}

/* Visibile dopo idle */
#wrapper-navbar.is-idle{
  background: #FFFFFF;
}

/* Visibile durante scroll up */
#wrapper-navbar.is-visible{
  background: #FFFFFF;
}

/* Variabile altezza header usata per offset globali */
body{
  padding-top: var(--header-h, 0px);
}

.dropdown-toggle::after {display: none}



/* IMMAGINE CON TESTO */

.immagine-con-testo{
  position: relative;
}

.testo_sotto_immagine{
  position: absolute;
  bottom: -28px;     /* distanza dal fondo immagine */
  left: 30px;
    z-index: 3;

  font-weight: bold;
  line-height: 1.2;
}

/* opzionale */
.testo_sotto_immagine p{
  margin: 0;
}




/* Hero che parte a top:0 ma tiene il contenuto sotto la navbar */
.hero-overlap{
  padding-top: 0px;
  margin-top: 0 !important;  /* IMPORTANT: niente margin negativo */
}
/* Lo slider sotto la header */
.hero-overlap,
.hero-overlap *{
  z-index: auto;
}

 .hero-slider .sfondo_slide{
  
 background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  z-index: 0;
}

/* assicura che il contenuto stia sopra e non si sovrapponga alla navbar fissa */
.hero-slider .container{
  z-index: 1;
  padding-top: var(--header-h, 80px);
  box-sizing: border-box;
}


/* menu */


/*  carosello news */
.news-swiper-bleed {
  width: calc(100vw - ((100vw - 100%) / 2));
  margin-right: calc((100% - 100vw) / 2);
  overflow: hidden;
}

.news-swiper{
  overflow: visible;
}



.news-swiper-bleed .container{
  position: relative;
  z-index: 5;
}

.news-swiper-pagination, .video-swiper-pagination{
  position: static !important;
  width: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  text-align: right !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.news-swiper-pagination .swiper-pagination-bullet, .video-swiper-pagination .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  opacity: 1;
  background: rgba(45, 45, 42, 0.55);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.news-swiper-pagination .swiper-pagination-bullet-active, .video-swiper-pagination .swiper-pagination-bullet-active{
  width: 60px;
  background: rgba(45, 45, 42, 1);
}

    
    .home-swiper-pagination{
  position: static !important;
  width: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  text-align: right !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.home-swiper-pagination .swiper-pagination-bullet{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.home-swiper-pagination .swiper-pagination-bullet-active{
  width: 60px;
  background: #cb4a3a;
}
    
    
    
/* card hero */
.news-hero{
  height: 100%;
}

.news-hero__link{
  position: relative;
  display: block;
  border-radius: 0;            /* nello screen è squadrata */
  overflow: hidden;
  min-height: 520px;           /* regola altezza */
  color: #FFFFFF;
  text-decoration: none;
}

/* immagine */
.news-hero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.00); /* micro anti-gap */
    filter: grayscale();
    padding: 0px;
}
    
    .news-hero__bg_standard{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}
.news-hero__bg--fallback{
  background: #2d2d2a;
}

/* overlay arancio */
.news-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(236,77,55,1); /* tinta */
     mix-blend-mode: multiply;
}

/* taglio diagonale top-right */
.news-hero__corner{
  position: absolute;
  top: -1px;
  right: -1px;
  width: 100px;
  height: 100px;
  background: #cb4a3a;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  z-index: 2;
}
    
    .novita .news-hero__corner{
  position: absolute;
  top: -1px;
  right: -1px;
  width: 100px;
  height: 100px;
  background: #FFFFFF;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  z-index: 2;
}


/* contenuto */
.news-hero__content{
  position: relative;
  z-index: 3;
  padding: 52px 52px 44px;
  position: relative;
  z-index: 3;

  height: 100%;
  min-height: 520px; /* stessa altezza della card */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* badge pill */


/* data */
.news-hero__date{
  font-style: italic;
  font-size: 18px;
  margin-bottom: 7px;
    color:#fff;
}

/* titolo grande */
.news-hero__title{
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: bold;
    color:#fff;
  text-transform: uppercase;

}

/* testo */
.news-hero__text{
  margin: 0 0 28px;
  font-size: 18px;
  color:#fff;
  max-width: 60ch;

}

.news-hero__badge { width:200px;}

/* bottone pill */
.news-hero__cta ,.news-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border-radius: 30px;
  background: rgba(203, 74, 58,  1);
  color: #fff;
  font-size:14px;
  text-transform: uppercase;
}
    
    .news-hero__cta_new { display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border-radius: 30px;
  background: #FFFFFF;
  color: #cb4a3a;
  font-size:14px;
  text-transform: uppercase;}
    
  .news-hero__badge_new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  border-radius: 30px;
  background-color:#2D2D2A;
  color: #FFFFFF;
  font-size:12px;
  text-transform: uppercase;
}
.news-swiper { padding-top:10px!important;}
/* hover “apple-like” */
.news-hero{
  transform: translateY(0);
  transition: transform .40s cubic-bezier(.2,.8,.2,1);
}
.news-hero:hover{
  transform: translateY(-10px);
}

/* card documenti */
.document-card {
    height: 100%;
    position: relative;
    display: block;
    border-radius: 0;            /* squadrato come le altre card */
    overflow: hidden;
   min-height: 520px; 
    color: #FFFFFF;
    text-decoration: none;
    background-color: #fff;
}

.document-card__link {
    position: absolute;
    display: block;
     min-height: 520px;           /* stessa altezza delle altre card */
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 0;
    overflow: hidden;
}

.document-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.01); /* micro anti-gap */
}



.document-card__corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 100px;
    height: 100px;
    background: #cb4a3a;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 2;
}

/* contenuto della card */
.document-card__content {
    position: relative;
    z-index: 3;
    padding: 52px 52px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 520px;
}

/* titolo della card */
.document-card__title {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

/* descrizione testo */
.document-card__text {
    margin: 0 0 28px;
    font-size: 18px;
    color: #fff;
    max-width: 60ch;
}

/* bottone pill */
.document-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    border-radius: 30px;
    background: rgba(203, 74, 58,  1);
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
}

/* hover “apple-like” */
.document-card {
    transform: translateY(0);
    transition: transform .40s cubic-bezier(.2,.8,.2,1);
}

.document-card:hover {
    transform: translateY(-10px);
}



/* CARDS COMPARTI HOME */


.soluzioni-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* POSIZIONAMENTO COME SCREENSHOT */
.sol-card-1{
  grid-column: 2 / span 2;
}

.sol-card-2{
  grid-column: 4 / span 2;
}

.sol-card-3{
  grid-column: 1 / span 2;
}

.sol-card-4{
  grid-column: 3 / span 2;
}

.sol-card-5{
  grid-column: 5 / span 2;
}

/* CARD BASE */
.sol-card{
  background-color: #cb4a3a;
  color: #ffffff;
  padding: 28px 24px;
  border-radius: 6px;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
width: 100%;
  height: 220px;
  position: relative;
    text-align:center;
}

/* TAGLIO ANGOLARE IN ALTO A DESTRA */
.sol-card::after{
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ICONA */
.sol-card-icon{
  font-size: 32px;
  margin-bottom: 16px;
    width: 100%; height: 50px;
}

/* TITOLI */
.sol-card-title{
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

a.sol-card:hover { color:#FFFFFF;}
/* TESTI */
.sol-card-text{
  font-size: 14px;
  margin: 0 0 6px 0;
}

.sol-card-risk{
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

/* HOVER */
.sol-card:hover{
  transform: translateY(-4px);
  transition: transform 0.25s ease;
}

/* RESPONSIVE */
@media (max-width: 991px){
  .soluzioni-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-card-1,
  .sol-card-2,
  .sol-card-3,
  .sol-card-4,
  .sol-card-5{
    grid-column: auto;
  }
}

@media (max-width: 575px){
  .soluzioni-grid{
    grid-template-columns: 1fr;
  }
}



/* SLIDERS */
    
    
.news-swiper .swiper-slide{
    max-width: 520px;
}    


    
/* ACCORDION */
    
    
    
    
   .accordion-item {
    border-bottom: 2px solid #cb4a3a;
       border-top: 2px solid #cb4a3a;
         border-left: 0px solid #cb4a3a;
       border-right: 0px solid #cb4a3a;
       background-color:transparent;
}

.accordion-header {
    width: 100%;
    padding:24px 0px 24px 0px;
    
    border: none;
    text-align: left;
    
    cursor: pointer;
    transition: background 0.3s ease;
      position: relative;
    cursor: pointer;
    padding-right: 50px; /* spazio per la freccia */
}

        ol p , .accordion-content p{ margin-bottom:0px!important}
   .accordion-item.active .accordion-content { padding-bottom:30px!important}
/* Freccia */


.accordion-arrow {
    transition: transform 0.3s ease;
}

/* Quando è aperto ruota verso il basso */
.accordion-item.active .accordion-arrow {
    transform: rotate(90deg);
}



.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0px 18px 0px 0px;
}

.accordion-inner {
    padding: 20px 0;
}

.accordion-item.active .accordion-content {
    max-height: 1000px; /* valore grande per contenuti lunghi */
}
    
    
    .valoriquota h2 {display: none}
    
    
    .hs-responsive-embed-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}

.hs-responsive-embed-youtube iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
    

    .flatpickr-calendar {
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.flatpickr-day.selected {
	background: #c00; /* usa il tuo colore brand */
	border-color: #c00;
}
    
    
    /* ===== CONTAINER ===== */
.gform_wrapper {
  width: 100%;
}

/* ===== LABEL ===== */
.gform_wrapper .gfield_label {
  font-size: 14px;
  font-weight: 600;
  color: #2D2D2A;
  margin-bottom: 6px;
}

/* ===== INPUT / TEXTAREA / SELECT ===== */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {

  width: 100%;
  border: 2px solid #2D2D2A;
  background-color: transparent;
  border-radius: 30px;

  padding: 12px 20px;
  font-size: 16px;
  color: #2D2D2A;

  transition: all 0.2s ease;
  outline: none;
}

/* ===== TEXTAREA ===== */
.gform_wrapper textarea {
  border-radius: 20px;
  min-height: 120px;
}

/* ===== PLACEHOLDER ===== */
.gform_wrapper ::placeholder {
  color: rgba(232,232,232,0.6);
  opacity: 1;
}

/* ===== FOCUS ===== */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: #ffffff;
  background-color: rgba(255,255,255,0.05);
}

    
    
/* ===== SELECT ARROW FIX ===== */
.gform_wrapper select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23FFFFFF' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}

/* ===== RADIO / CHECKBOX ===== */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
  accent-color: #2D2D2A;
}

/* ===== BUTTON ===== */
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-transform: uppercase;
  border: 2px solid #2D2D2A;
  background-color: transparent;
  border-radius: 30px;

  padding: 10px 30px;
  font-size: 18px;
  font-weight: bold;

  color: #2D2D2A;
  cursor: pointer;

  transition: all 0.2s ease;
}

/* ===== BUTTON HOVER ===== */
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  background-color: #2D2D2A;
  color: #FFFFFF;
}

/* ===== ERROR ===== */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
  border-color: #ff4d4d;
}

/* ===== ERROR MESSAGE ===== */
.gform_wrapper .validation_message {
  color: #ff4d4d;
  font-size: 13px;
}

/* ===== SPACING ===== */
.gform_wrapper .gfield {
  margin-bottom: 20px;
}

/* ===== SUCCESS MESSAGE ===== */
.gform_wrapper .gform_confirmation_message {
  color: #2D2D2A;
  font-size: 18px;
  padding: 20px;
  border: 2px solid #2D2D2A;
  border-radius: 20px;
}
    .gform_wrapper input { padding-left:10px;}
    .gform_wrapper input::placeholder, .gform_wrapper textarea::placeholder, .gform_wrapper select, .gform_wrapper option { color:#2D2D2A; font-size:16px!important; margin-left:10px; padding-left:10px}
    
    .gform-field-label { font-size:14px!important}
    .gfield-choice-input { margin-top:0px!important}
    
.grigio , body {background:#FFFFFF;}
.arancio {background:#cb4a3a;}
.scuro {background:#2D2D2A;}
    
    
    .txt_chiaro p, .txt_chiaro p span { color:#FFFFFF}    
    
    
.hero-immagine--quadrata .hero-immagine-file {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.hero-immagine--orizzontale .hero-immagine-file {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
}    
    
    ol li::marker {
  color: #cb4a3a;
  font-weight: bold;
}
    
    .card-identita {
  min-height: 450px;
  background-size: cover;
  background-position: center;
  height: 100%;
}

.card-identita__titolo {
  font-size: 24px;
}
    
   .accordion-item.active .btn_sec{
  display: inline-flex;        
  align-items: center;
  justify-content: center;
text-transform: uppercase;
  border: 2px solid #2D2D2A;
     background-color:transparent;
  border-radius: 30px;
  min-width: 260px;
  padding: 10px 30px;         
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;

      transition:all 0.2s ease;
}

.accordion-item.active .btn_sec:hover{
 color:#FFFFFF;
    background-color:#2D2D2A;

}
    
   .trig.active .btn_sec {color:#FFFFFF;
    background-color:#2D2D2A;}


    
    #wrapper-navbar .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .18s ease .08s,
    transform .18s ease .08s,
    visibility 0s linear 0s;
}

    
    #wrapper-navbar .dropdown-menu li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li {
  opacity: 1;
  transform: translateY(0);
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li:nth-child(1) {
  transition-delay: .04s;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li:nth-child(2) {
  transition-delay: .08s;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li:nth-child(3) {
  transition-delay: .12s;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li:nth-child(4) {
  transition-delay: .16s;
}

#wrapper-navbar .menu-item-has-children.is-open > .dropdown-menu li:nth-child(5) {
  transition-delay: .20s;
}


/* ===== TESTI: schermi sotto i 15 pollici (laptop ≤ 1366px) ===== */
/* Riduzione proporzionale ~18% su tutti gli elementi tipografici         */
/* min-width: 992px evita sovrapposizione con i breakpoint mobile/tablet  */
@media  (max-width: 1566px) {

  h2 {
    font-size: clamp(34px, 3.2vw, 49px);
    margin-bottom: 49px;
  }

  h3 {
    font-size: clamp(20px, 3.2vw, 26px);
    margin-bottom: 24px;
  }

  p, td, table, tr  {
    font-size: clamp(18px, 0.85vw, 18px);
    margin-bottom: 49px;
  }
    
    .paragrafo_slide_home { margin-top:30px; margin-bottom: 30px;}

  p.piccolo {
    font-size: clamp(15px, 0.85vw, 15px);
    margin-bottom: 24px;
  }

  li {
    font-size: clamp(14px, 0.85vw, 20px);
  }

  .titolo_pagina {
    font-size: clamp(34px, 3.2vw, 54px);
    line-height: clamp(36px, 3.2vw, 56px);
  }

  .titolo_slide_home {
    font-size: clamp(57px, 3.2vw, 82px);
    line-height: clamp(57px, 3.2vw, 82px);
  }

  .num_ev {
    font-size: clamp(40px, 1.5vw, 60px);
  }

  .sotto_num_ev {
    font-size: clamp(14px, 1.6vw, 20px);
  }
    
      .btn_sec,
  .accordion-item.active .btn_sec,
  .btn_sec_chiaro,
  .btn_sec_inv,
  .btn_pri,
  .btn_ter,
  .btn_form {
    font-size: 15px;
    min-width: 213px;
    padding: 8px 24px;
  }

  .btn_sec.filter-btn {
    font-size: 12px;
    min-width: 115px;
    padding: 4px 8px;
  }
    
      .padding-sezione { padding-top:80px; padding-bottom: 80px}
    
}
    
    .navbar-nav a { font-weight:bold!important}
    .current-menu-parent a.nav-link ,.current-menu-parent  .current-menu-item a, .current-menu-item a.nav-link{ color:#cb4a3a!important}
    
    
.testo_sotto_immagine{
  position: absolute;
  bottom: -28px;     /* distanza dal fondo immagine */
  bottom: 0;
  left: 30px;
    z-index: 3;

  z-index: 3;
  font-weight: bold;
  line-height: 1.2;
  line-height: 1.25;
  /* Sposta il blocco in basso di (altezza totale - 1 riga):
     la prima riga resta sopra il bordo inferiore dell'immagine,
     le righe successive vanno sotto. Funziona a qualsiasi dimensione. */
  transform: translateY(calc(100% - 1.6em));
}
/* assicura che il contenuto stia sopra */
/* assicura che il contenuto stia sopra e non si sovrapponga alla navbar fissa */
.hero-slider .container{
  z-index: 1;
  padding-top: var(--header-h, 80px);
  box-sizing: border-box;
}
    
    ol { padding-left:34px!important}
    
    
    .shorts-card {
  width: 100%;
}

.shorts-card__iframe-wrap {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
}

.shorts-card__iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.shorts-card__title {
  margin-top: 16px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  color: #2D2D2A;
}
    
    
    .subfooter a ,     .subfooter a:hover, .subfooter { color:#fff; font-size:12px}
    
    #archive-posts {
	min-height: 220px;
}

.news-loader {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 245, 245, 0.75);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

#archive-posts.is-loading .news-loader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.news-loader-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(0, 0, 0, 0.15);
	border-top-color: #000;
	border-radius: 50%;
	animation: newsSpin 0.8s linear infinite;
}

@keyframes newsSpin {
	to {
		transform: rotate(360deg);
	}
}

#archive-posts.is-loading .novita,
#archive-posts.is-loading > .col-12 {
	opacity: 0.35;
}
    
    .document-icon-card {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	text-decoration: none;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.document-icon-card:hover {
	transform: translateY(-4px) scale(1);
	opacity: 0.94;
}

.document-icon-card__img {
	width: 110px !important;
	max-width: 55% !important;
	height: auto !important;
	display: block !important;
	object-fit: contain;
	position: relative;
	z-index: 2;
}

.document-icon-card__corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	height: 20%;
	background: #ffffff;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
	z-index: 1;
	pointer-events: none;
}
    
    .accordion-content a { color:#cb4a3a;}
    
    /* Sottovoci di "Area riservata" come pulsantini. Prima erano legate a
       .menu-item-2583 (la vecchia voce genitore): cambiata la voce, l'ID e'
       diventato 16922 e lo stile si era perso. Ora dipendono dalla classe CSS
       della voce genitore (btn_sec_menu), che resta se la voce viene rifatta. */
    .btn_sec_menu .dropdown-menu li.btn_sec_menu_sotto a{   border: 2px solid #2D2D2A;
     background-color:transparent;
  border-radius: 30px;
 width: auto;
  padding: 4px 16px!important;     
        margin-top:10px;
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #2D2D2A;}
    
    
       .btn_sec_menu .dropdown-menu li.btn_sec_menu_sotto:hover a{   border: 2px solid #2D2D2A;
     background-color:#2D2D2A!important;
  border-radius: 30px;
 width: auto;
           opacity: 1!important;
  padding: 4px 16px!important;     
        margin-top:10px;
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  color: #fff!important;}
    
    button.btn_sec { border:2px solid #2D2D2A!important; border-radius:30px!important; margin-top:10px;}


} /* <-- CHIUSURA @media (min-width:768px) rimasto aperto nell'originale
       (graffa mancante): senza questa, tutto il CSS sottostante — incluso
       il blocco mobile qui sotto — restava annidato dentro min-width:768px. */

/* ============================================================
   FIX RESPONSIVE — HEADER + MENU MOBILE (<= 767.98px)
   Aggiunto 2026-07: header compatto, menu a colonna leggibile,
   sottomenu a fisarmonica. Vedi anche js/header-anim.js
   (toggle menu) e navbar-collapse-bootstrap5.php (d-md-none).
   ============================================================ */
@media (max-width: 767.98px){

  /* ---------- BARRA HEADER: solo logo (sx) + hamburger (dx) ---------- */
  #wrapper-navbar .logo-mask{ display:none !important; }   /* via il logo gigante desktop */

  /* header FISSO: si nasconde scrollando giu', riappare scrollando su
     (gli stati is-hidden/is-visible sono messi da js/header-anim.js) */
  #wrapper-navbar{
    position:fixed !important; top:0; left:0; right:0; z-index:9999;
    background:#fff !important;
    box-shadow:0 2px 14px rgba(0,0,0,.07);
    transition:transform .3s ease;
    padding:0 !important;
  }
  #wrapper-navbar.is-hidden{ transform:translateY(-110%); }
  #wrapper-navbar.is-top,
  #wrapper-navbar.is-visible,
  #wrapper-navbar.is-idle{ transform:translateY(0); }
  /* menu aperto: header sempre visibile */
  body.mobile-menu-open #wrapper-navbar{ transform:translateY(0) !important; }

  /* il contenuto parte sotto la barra fissa */
  body{ padding-top:var(--header-h, 76px) !important; }

  /* riga barra */
  #main-nav{ padding:8px 0 !important; }
  #main-nav > .container.px-0{ padding-left:16px !important; padding-right:16px !important; }
  #main-nav .row.d-md-none{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center; justify-content:space-between;
    margin:0 !important; width:100%;
  }
  #main-nav .row.d-md-none > div{ width:auto !important; flex:0 0 auto !important; padding:0 !important; margin:0 !important; }
  #main-nav .row.d-md-none .lente{ display:none !important; }   /* niente ricerca (come da mockup) */
  #main-nav .row.d-md-none .col-6{ display:none !important; }   /* niente testo descrittivo */
  #main-nav .row.d-md-none img{ height:52px !important; width:auto !important; max-width:none !important; }

  /* hamburger: 3 barre nere spesse, senza bordo; diventa X quando il menu e' aperto */
  .navbar-toggler{ border:0 !important; box-shadow:none !important; padding:6px 2px !important; outline:none !important; background:transparent !important; }
  .navbar-toggler:focus{ box-shadow:none !important; }
  .navbar-toggler-icon{
    background:linear-gradient(#141414,#141414) center/100% 3px no-repeat !important; /* barra centrale */
    width:40px; height:22px; position:relative; display:block;
    transition:background-size .2s ease;
  }
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after{
    content:""; position:absolute; left:0; right:0; height:3px; border-radius:2px; background:#141414;
    transition:transform .3s ease, top .3s ease, bottom .3s ease;
  }
  .navbar-toggler-icon::before{ top:0; }
  .navbar-toggler-icon::after{ bottom:0; }
  /* stato aperto -> X: barra centrale nascosta, le due esterne ruotano e si centrano */
  body.mobile-menu-open .navbar-toggler-icon{ background-size:0 3px !important; }
  body.mobile-menu-open .navbar-toggler-icon::before{ top:50%; transform:translateY(-50%) rotate(45deg); }
  body.mobile-menu-open .navbar-toggler-icon::after{ top:50%; bottom:auto; transform:translateY(-50%) rotate(-45deg); }

  /* ---------- DRAWER MENU (pannello scorrevole sotto la barra) ----------
     NB: #wrapper-navbar ha un transform (per l'auto-hide) quindi diventa il
     "containing block" dei figli position:fixed. Percio' il drawer si
     posiziona rispetto alla barra: top:100% = subito sotto la barra, con
     altezza esplicita per riempire il resto dello schermo. */
  #navbarNavDropdown{
    position:fixed !important;
    top:100%; left:0; right:0;
    height:calc(100vh - var(--header-h, 76px));
    background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:8px 20px 40px; margin:0;
    display:block !important;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
  }
  #navbarNavDropdown.show{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .26s ease, transform .26s ease;
  }
  /* blocca lo scroll della pagina quando il menu e' aperto */
  body.mobile-menu-open{ overflow:hidden; }

  /* menu in colonna, voci leggibili */
  #main-menu{ flex-direction:column !important; padding:0 !important; width:100%; }
  #main-menu > .nav-item{ display:block !important; flex-grow:0 !important; margin:0 !important; }
  #navbarNavDropdown .nav-link,
  .home .sticky-top.is-top #navbarNavDropdown a.nav-link{
    color:#2D2D2A !important; font-size:18px; font-weight:600;
    padding:16px 4px !important; border-bottom:1px solid #ececec;
    text-align:left !important; width:100%;
  }
  #navbarNavDropdown .nav-link:focus-visible{ outline:2px solid rgba(203,74,58,.5); outline-offset:-2px; }

  /* sottomenu a fisarmonica */
  #navbarNavDropdown .dropdown-menu{
    position:static !important; float:none !important; width:100% !important;
    border:0; box-shadow:none; margin:0; padding:0 0 6px 14px;
    display:none; background:transparent;
  }
  #navbarNavDropdown .dropdown-menu.show{ display:block !important; }
  #navbarNavDropdown .dropdown-menu a{
    color:#555 !important; font-weight:500; font-size:15px;
    padding:12px 6px !important; border-bottom:1px solid #f0f0f0; text-align:left;
  }

  /* --- Niente "flash" blu al tap: Bootstrap .dropdown-item:active usa il blu
     #0d6efd. Lo azzeriamo; come feedback lasciamo un leggero arancio (tap-highlight). --- */
  #navbarNavDropdown a,
  #navbarNavDropdown .nav-link,
  #navbarNavDropdown .dropdown-item{ -webkit-tap-highlight-color:rgba(203,74,58,.14) !important; }
  #navbarNavDropdown .dropdown-item:active,
  #navbarNavDropdown .dropdown-item:focus,
  #navbarNavDropdown .dropdown-item:hover,
  #navbarNavDropdown .nav-link:active,
  #navbarNavDropdown .nav-link:focus{
    background-color:transparent !important;
    color:#555 !important;
  }

  /* --- Evidenzia la voce (e la sottovoce) della pagina corrente in arancio --- */
  #navbarNavDropdown li.current-menu-ancestor > a.nav-link,
  #navbarNavDropdown li.current-menu-parent > a.nav-link,
  #navbarNavDropdown li.current-menu-item > a.nav-link{
    color:#cb4a3a !important;
  }
  #navbarNavDropdown .dropdown-menu li.current-menu-item > a.dropdown-item,
  #navbarNavDropdown .dropdown-menu li.current_page_item > a.dropdown-item{
    color:#cb4a3a !important; font-weight:700 !important;
  }

  /* --- I due CTA del menu (AREA RISERVATA + ADERISCI) come pulsanti, stile desktop ---
     Su desktop sono due pill (li.btn_sec_menu = outline, li.btn_aderisci_menu = rosso pieno);
     nel drawer bianco ricadevano su link/riga. Qui li ripristiniamo come pill, con
     l'outline in scuro (il bordo bianco desktop sarebbe invisibile su fondo bianco). */
  #navbarNavDropdown li.btn_sec_menu,
  #navbarNavDropdown li.btn_aderisci_menu{
    border:0 !important; margin:0 !important; padding:0 !important; display:block !important;
  }
  #navbarNavDropdown li.btn_sec_menu{ margin-top:24px !important; }
  #navbarNavDropdown li.btn_aderisci_menu{ margin-top:12px !important; }
  #navbarNavDropdown li.btn_sec_menu > a.nav-link,
  #navbarNavDropdown li.btn_aderisci_menu > a.nav-link{
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; text-align:center !important;
    border:2px solid transparent !important; border-radius:30px !important;
    padding:14px 18px !important; font-size:15px !important; font-weight:700 !important;
    text-transform:uppercase;
  }
  /* AREA RISERVATA: pill outline scuro (resta un dropdown: apre le 3 aree sotto) */
  #navbarNavDropdown li.btn_sec_menu > a.nav-link{
    background:transparent !important; border-color:#2D2D2A !important; color:#2D2D2A !important;
  }
  #navbarNavDropdown li.btn_sec_menu > a.nav-link::after{ margin-left:8px; }   /* freccina staccata */
  /* ADERISCI: pill pieno rosso come desktop.
     NB: colore con selettore ad alta specificita' per battere la regola home
     '.home .sticky-top.is-top #navbarNavDropdown a.nav-link{color:#2D2D2A}'. */
  #navbarNavDropdown li.btn_aderisci_menu > a.nav-link{
    background:#cb4a3a !important; border-color:#cb4a3a !important;
  }
  #navbarNavDropdown li.btn_aderisci_menu.nav-item.menu-item > a.nav-link{ color:#fff !important; }
  /* sottomenu aree (AZIENDE/SOCI/ORGANI) centrato sotto il pulsante */
  #navbarNavDropdown li.btn_sec_menu .dropdown-menu{ padding:8px 0 0 0 !important; }
  #navbarNavDropdown li.btn_sec_menu .dropdown-menu a{ text-align:center !important; border-bottom:0 !important; }
  /* niente stato hover 'appiccicato' al tap su mobile: le regole desktop
     '.btn_sec_menu:hover{background:#2D2D2A}' e ':hover a.dropdown-toggle{color:#fff}'
     riempivano di scuro TUTTO il li (submenu compreso) nascondendo le voci. */
  #navbarNavDropdown li.btn_sec_menu:hover,
  #navbarNavDropdown li.btn_sec_menu:focus-within{ background:transparent !important; }
  #navbarNavDropdown li.btn_sec_menu:hover > a.nav-link,
  #navbarNavDropdown li.btn_sec_menu > a.nav-link:hover{ background:transparent !important; color:#2D2D2A !important; }
  #navbarNavDropdown li.btn_sec_menu .dropdown-menu a:hover{ background:transparent !important; color:#cb4a3a !important; }

  /* ---------- Titoli piu' piccoli e proporzionati su mobile ----------
     Su mobile erano piu' grandi che su desktop (hero 70px vs 57px).
     Riportati in scala mantenendo la gerarchia desktop (h1>h2>h3). */
  h1.titolo_slide_home{ font-size:38px !important; line-height:1.06 !important; }
  h2.bold{ font-size:28px !important; line-height:1.12 !important; margin-bottom:30px !important; }

  /* --- Breadcrumb + titoli generici piu' piccoli su mobile (in proporzione) ---
     Le regole specifiche (hero, sezioni home, card) restano perche' piu' specifiche. */
  .briciole{ margin-bottom:18px !important; }
  .briciole a, .briciole span{ font-size:13px !important; }
  h1{ font-size:22px !important; line-height:1.15 !important; }
  h2{ font-size:30px !important; line-height:1.12 !important; }
  h3{ font-size:19px !important; line-height:1.2 !important; }
  h4{ font-size:17px !important; line-height:1.25 !important; }
  h5{ font-size:15px !important; line-height:1.3 !important; }
  h6{ font-size:14px !important; line-height:1.3 !important; }
  /* ---------- Card news (swiper NOVITÀ) su mobile ----------
     Lo stile .news-hero completo e' nel blocco min-width:768 (solo desktop):
     qui lo replichiamo per mobile cosi' le card mostrano immagine+overlay+testo. */
  .news-hero{ height:100%; }
  .news-hero__link{ position:relative; display:block; overflow:hidden; min-height:390px; color:#fff; text-decoration:none; border-radius:0; }
  .news-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; filter:grayscale(); }
  .news-hero__overlay{ position:absolute; inset:0; background:rgba(236,77,55,1); mix-blend-mode:multiply; }
  .news-hero__corner{ position:absolute; top:-1px; right:-1px; width:64px; height:64px; background:#cb4a3a; clip-path:polygon(100% 0,0 0,100% 100%); z-index:2; }
  .novita .news-hero__corner{ background:#fff; }
  .news-hero__content{ position:relative; z-index:3; padding:26px 24px 24px; height:100%; min-height:390px; display:flex; flex-direction:column; justify-content:space-between; }
  .news-hero__date{ font-style:italic; font-size:14px; margin-bottom:6px; color:#fff; }
  .news-hero__title{ margin:0 0 12px; font-size:18px !important; font-weight:bold; color:#fff; text-transform:uppercase; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .news-hero__text{ margin:0 0 18px; font-size:14px; color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .news-hero__cta, .news-hero__badge{ display:inline-flex; align-items:center; justify-content:center; padding:9px 22px; border-radius:30px; background:rgba(203,74,58,1); color:#fff; font-size:13px; text-transform:uppercase; align-self:flex-start; width:auto; }

  /* --- Sezione NOVITÀ: pulsante sopra, bullet sotto (no overlap) + bullet stile desktop --- */
  .container.position-relative:has(.news-swiper){ display:flex; flex-direction:column; }
  .container.position-relative:has(.news-swiper) > .row:has(.news-swiper-pagination){ order:5; margin-top:6px; }
  .news-swiper-pagination{ position:relative !important; width:100% !important; text-align:center !important; }
  .col-12.d-flex.justify-content-end:has(.news-swiper-pagination){ justify-content:center !important; }
  /* dynamic bullets: pallini tondi grigio scuro (Swiper scala automaticamente l'attivo) */
  .news-swiper-pagination .swiper-pagination-bullet{ width:9px; height:9px; border-radius:50%; opacity:1; background:rgba(45,45,42,0.5); }
  .news-swiper-pagination .swiper-pagination-bullet-active{ background:rgba(45,45,42,1); }

  /* sezione NOVITÀ: dimezza gli spazi paragrafo->slides e slides->pulsante */
  .container.position-relative:has(.news-swiper) p.txt_chiaro{ margin-bottom:30px !important; }
  .container.position-relative:has(.news-swiper) > .row.align-items-center.mt-4{ margin-top:12px !important; }
  .container.position-relative:has(.news-swiper) > .row:has(.btn_ter){ margin-top:40px !important; }
  .container.position-relative:has(.news-swiper) .col-6.mt-4:has(.btn_ter){ margin-top:12px !important; }

  /* ---------- Card profili (soluzioni-grid) su mobile ----------
     Lo stile completo e' nel blocco min-width:768 (solo desktop) e la griglia
     resta 'block' su mobile: qui la ripristiniamo a 1 colonna con le card stilizzate. */
  .soluzioni-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin-top:28px; margin-bottom:30px; }
  .sol-card-1,.sol-card-2,.sol-card-3,.sol-card-4,.sol-card-5{ grid-column:auto !important; }
  .sol-card{
    background-color:#cb4a3a; color:#fff; padding:20px 12px; border-radius:6px;
    text-decoration:none; display:flex; flex-direction:column; justify-content:center;
    width:100%; min-height:150px; position:relative; text-align:center;
  }
  .sol-card::after{ content:""; position:absolute; top:-1px; right:-1px; width:40px; height:40px; background:#fff; clip-path:polygon(100% 0,0 0,100% 100%); }
  .sol-card-icon{ font-size:26px; margin-bottom:8px; width:100%; height:auto; color:#fff; }
  .sol-card-title{ font-size:16px; font-weight:800; margin:0 0 6px; text-transform:uppercase; color:#fff; }
  .sol-card-text{ font-size:12px; margin:0 0 5px; color:#fff; }
  .sol-card-risk{ font-size:12px; font-weight:700; margin:0; color:#fff; }

  /* ---------- Card documenti (swiper CONSULTA I DOCUMENTI) su mobile ----------
     Stile completo solo-desktop: su mobile il box bianco non compariva. */
  .document-card{ position:relative; display:block; overflow:hidden; min-height:360px; background:#fff; border-radius:6px; color:#2D2D2A; }
  .document-card__corner{ position:absolute; top:-1px; right:-1px; width:56px !important; height:56px !important; background:#cb4a3a; clip-path:polygon(100% 0,0 0,100% 100%); z-index:2; }
  .document-card__content{ position:relative; z-index:3; padding:22px 20px 22px !important; min-height:360px !important; display:flex; flex-direction:column; justify-content:space-between; }
  .document-card img.mx-auto{ width:64px !important; height:auto !important; }
  .document-card__title{ font-size:17px !important; color:#2D2D2A !important; margin:14px 0 !important; text-transform:uppercase; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .document-card__cta{ padding:10px 26px !important; font-size:13px !important; align-self:flex-start; min-width:0 !important; width:auto !important; }

  /* ---------- Accordion su mobile (tutte le pagine) ----------
     Lo stile collassabile e' nel blocco min-width:768 (solo desktop): su mobile
     il contenuto restava sempre aperto. Qui ripristiniamo il collasso + testi ridotti. */
  /* bordo SINGOLO tra un item e l'altro: con border-top+border-bottom su ogni
     item i due bordi adiacenti si sommavano (4px) e si vedeva una doppia riga.
     La linea di chiusura la mette solo l'ultimo item. */
  .accordion-item{ border:0 !important; border-top:2px solid #cb4a3a !important; border-bottom:0 !important; background:transparent; }
  .accordion > .accordion-item:last-child{ border-bottom:2px solid #cb4a3a !important; }
  .accordion-header{ width:100%; padding:16px 40px 16px 0; border:none; text-align:left; cursor:pointer; position:relative; font-size:18px !important; line-height:1.25; }
  .accordion-arrow{ transition:transform .3s ease; }
  .accordion-item.active .accordion-arrow{ transform:rotate(90deg); }
  .accordion-content{ max-height:0; overflow:hidden; transition:max-height .4s ease; padding:0 4px 0 0; }
  .accordion-inner{ padding:14px 0; }
  .accordion-content, .accordion-content p, .accordion-content li, .accordion-content span{ font-size:15px !important; line-height:1.5; }
  .accordion-content p{ margin-bottom:10px !important; }   /* accapi meno spaziosi */
  .accordion-item.active .accordion-content{ padding-bottom:24px !important; }

  /* ---------- Hero slider: contenuto bilanciato + pulsanti impilati + bullet come desktop ---------- */
  /* centra verticalmente il contenuto (il container e' flex in colonna): il
     titolo non resta incollato in alto e lo spazio si distribuisce meglio */
  .hero-slider .container.h-100,
  .hero-overlap .container.h-100{ justify-content:center !important; padding-bottom:40px; }
  /* contenitore pulsanti: uno sopra l'altro, meno stacco dal testo sopra */
  .hero-overlap .d-flex:has(.btn_pri),
  .hero-slider .d-flex:has(.btn_pri){
    flex-direction:column !important; align-items:stretch !important;
    gap:10px; margin-top:22px !important; padding-top:0 !important;
  }
  /* i due pulsanti a tutta larghezza e un filo piu' piccoli */
  .hero-overlap .btn_sec_chiaro, .hero-overlap .btn_pri,
  .hero-slider .btn_sec_chiaro, .hero-slider .btn_pri{
    width:100% !important; text-align:center; margin:0 !important;
    font-size:16px !important; padding:12px 18px !important;
  }
  /* bullet come su desktop: pillole bianche, quello attivo pillola rossa */
  .home-swiper-pagination .swiper-pagination-bullet{
    width:12px; height:12px; border-radius:999px; opacity:1;
    background:rgba(255,255,255,0.95);
    transition:width .25s ease, background-color .25s ease;
  }
  .home-swiper-pagination .swiper-pagination-bullet-active{
    width:44px; background:#cb4a3a;
  }
  /* hero a tutta altezza schermo (meno l'header) cosi' il fondo dello slide
     e' visibile e i bullet ci stanno ancorati a 10px dal bottom.
     La paginazione viene spostata dentro .hero-overlap dal JS (solo mobile). */
  .hero-overlap.min-vh-100{
    height:calc(100vh - var(--header-h,68px)) !important;
    height:calc(100dvh - var(--header-h,68px)) !important;
    min-height:0 !important;
  }
  .hero-overlap > .home-swiper-pagination{
    position:absolute !important; top:auto !important; bottom:10px !important;
    left:0 !important; right:0 !important; width:100% !important;
    display:flex !important; justify-content:center !important; gap:8px !important;
    margin:0 !important; z-index:6;
  }

  /* ---------- 3 box valori (convenienza/velocita'/trasparenza/competenza) ----------
     Su mobile i col-12 si impilano senza gap: i box (450px, con immagine di sfondo)
     risultavano attaccati. Aggiungiamo spazio verticale tra loro. */
  .row.d-flex.align-items-center.mb-4:has(> .col-12.col-md-4 > .arancio){ row-gap:16px; }

  /* ---------- Blocchi "immagine con testo" (Ogni eta' / Ti rispondiamo noi) ----------
     Su desktop il titolo e' assoluto sull'immagine con translateY: la 1a riga resta
     SOPRA l'immagine (bianca), le altre scendono SOTTO. Quelle regole sono min-width:768
     e su mobile non si applicavano (il testo finiva tutto sotto). Le replichiamo qui.
     margin-bottom riserva lo spazio della parte che sporge sotto (testo assoluto). */
  .immagine-con-testo{ position:relative; margin-top:20px; margin-bottom:30px; }   /* stacco dal contenuto sopra (es. pulsante ADERISCI) */
  .testo_sotto_immagine{
    position:absolute; bottom:0; left:26px; right:auto; z-index:3;   /* margine a sx (bordo immagine ~12px) */
    font-weight:bold; line-height:1.25;
    transform:translateY(calc(100% - 1.2em));   /* 1a riga sopra l'immagine; abbassato un filo cosi' la riga sotto si stacca dall'immagine */
  }
  .testo_sotto_immagine p{ color:#fff !important; font-size:16px !important; line-height:1.25 !important; }   /* 1a riga bianca, piu' piccola per non sforare */

  /* ---------- Sezioni arancioni: testo bianco su mobile (es. pagina "Chi siamo") ----------
     Su fondo arancione i <p> (resi scuri da una regola generica) e gli span .txt_scuro
     (es. "HAI UNA DOMANDA?") restavano scuri/poco leggibili: su mobile -> bianchi.
     Le card bianche interne (document-card) mantengono il testo scuro. */
  section.arancio p,
  section.arancio li,
  section.arancio .txt_scuro{ color:#fff !important; }
  section.arancio .document-card__title,
  section.arancio .document-card__text,
  section.arancio .document-card__date,
  section.arancio .document-card p{ color:#2D2D2A !important; }

  /* logo "cavallo pegaso" a fianco di "I NOSTRI VALORI": nascosto su mobile */
  .immagine-con-testo:has(> img[src*="cavallo_pegaso"]){ display:none !important; }

  /* ---------- Card "identita'" (DIAMO SOLUZIONI CONCRETE, MIGLIORIAMO..., SIAMO SEMPRE...) ----------
     Su mobile erano larghe e bassissime (119px): le rendiamo quadrate.
     Il titolo e' gia' ancorato in basso (mt-auto), quindi basta la forma. */
  .card-identita{ aspect-ratio:1/1 !important; height:auto !important; min-height:0 !important; }

  /* ---------- Card TEAM (news-hero con .news-hero__bottom) su mobile ----------
     NB :not(:has(.news-hero__link)) -- anche le card dell'archivio /notizie/
     hanno un .news-hero__bottom, ma sono linkate: senza questa esclusione
     ereditavano aspect-ratio 3/4 e justify-content:flex-end.
     Riusano lo stile .news-hero delle novita' ma senza link: risultavano troppo
     alte (min-height 390/520) e col nome non ancorato in basso. Le rendiamo con
     proporzione 3/4 (come desktop), foto piena, nome + ruolo in basso. */
  .news-hero:has(.news-hero__bottom):not(:has(.news-hero__link)){ position:relative; overflow:hidden; border-radius:6px; height:auto; }
  .news-hero:has(.news-hero__bottom):not(:has(.news-hero__link)) .news-hero__content{
    position:relative; z-index:3; min-height:0 !important; aspect-ratio:3/4;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:20px !important;
  }
  .news-hero:has(.news-hero__bottom):not(:has(.news-hero__link)) .news-hero__title{
    font-size:19px !important; margin:0 0 4px !important;
    -webkit-line-clamp:unset !important; overflow:visible !important;
  }
  .news-hero:has(.news-hero__bottom):not(:has(.news-hero__link)) .news-hero__bottom p{ font-size:14px !important; }

  /* ---------- Swiper VIDEO (shorts) in 9:16 su mobile ----------
     Lo stile shorts-card (aspect-ratio 9/16) e' solo nel blocco min-width:768:
     su mobile l'iframe restava orizzontale (300x150). Qui lo replichiamo. */
  .shorts-card{ width:100%; }
  .shorts-card__iframe-wrap{ width:100%; aspect-ratio:9/16; background:#000; overflow:hidden; border-radius:6px; }
  .shorts-card__iframe-wrap iframe{ width:100%; height:100%; border:0; display:block; }
  .shorts-card__title{ margin-top:12px !important; font-size:16px !important; font-weight:bold; text-transform:uppercase; color:#2D2D2A; line-height:1.25; }

  /* --- Paginazione swiper VIDEO: vicina allo slider, centrata, grafica mobile ---
     La paginazione esterna ereditava position:absolute (bottom:8px) di Swiper e si
     ancorava in fondo al container (lontana), con bullet blu default. */
  .video-swiper-pagination{ position:relative !important; width:100% !important; text-align:center !important; margin:0 !important; }
  .container.position-relative:has(.video-swiper) > .row:has(.video-swiper-pagination){ margin-top:10px !important; }
  .container.position-relative:has(.video-swiper) .col-12:has(.video-swiper-pagination){ justify-content:center !important; margin-top:0 !important; }
  .video-swiper-pagination .swiper-pagination-bullet{ width:9px; height:9px; border-radius:50%; opacity:1; background:rgba(45,45,42,0.5); }
  .video-swiper-pagination .swiper-pagination-bullet-active{ background:rgba(45,45,42,1); }

  /* pulsante "Scopri chi siamo": stacco ridotto (era margin-top:80px inline), centrato */
  .container.position-relative:has(.video-swiper) > .row:has(.btn_pri){ margin-top:20px !important; }
  .container.position-relative:has(.video-swiper) > .row:has(.btn_pri) > .col-6{ flex:0 0 100% !important; max-width:100% !important; margin-top:0 !important; text-align:center; }

  /* overlay trasparente sopra gli iframe per catturare lo swipe (vedi news-swiper.js):
     il drag scorre lo swiper, il tap avvia il video. */
  .shorts-card__iframe-wrap{ position:relative; }
  .shorts-card__touch{ position:absolute; inset:0; z-index:2; background:transparent; border:0; padding:0; margin:0; cursor:grab; -webkit-tap-highlight-color:transparent; }

  /* ---------- Card documenti (pagina "Documenti"): .row.p-2.g-4 > .col-6.col-md-4 ----------
     Su mobile erano 2 per riga (176px) e il contenuto sforava: il pulsante .btn_ter
     ha min-width:260px (piu' largo della card) -> testo e pulsante venivano tagliati.
     Le mettiamo a tutta larghezza (1 per riga), altezza a contenuto, con pulsante
     e testi adeguati. */
  .row.p-2.g-4 > .col-6.col-md-4:has(> .arancio){ flex:0 0 100% !important; max-width:100% !important; min-height:0 !important; }
  .row.p-2.g-4 > .col-6.col-md-4 > .arancio{ min-height:210px !important; padding:26px 22px !important; }
  .row.p-2.g-4 .arancio h3{ font-size:22px !important; line-height:1.15 !important; margin-bottom:10px !important; }
  .row.p-2.g-4 .arancio p{ font-size:15px !important; }
  .row.p-2.g-4 .arancio .btn_ter{ min-width:0 !important; width:auto !important; }
  /* il pulsante ha mb-4 (24px) e il wrapper mt-3: su mobile lasciavano un
     vuoto inutile in fondo a ogni card */
  .row.p-2.g-4 .arancio .mt-3{ margin-top:14px !important; }
  .row.p-2.g-4 .arancio a.btn_ter{ margin-bottom:0 !important; }

  /* ---------- Card profili (icona comparto) su mobile ----------
     .document-card__bg.arancio: erano 375x500 con icona enorme (240px).
     Le rendiamo quadrate, con icona piccola e cliccabili (link via header-anim.js). */
  .document-card__bg.arancio{ min-height:0 !important; aspect-ratio:1/1; cursor:pointer; }
  .document-card__bg.arancio .document-card__content{
    position:absolute !important; inset:0 !important; min-height:0 !important; height:auto !important; padding:16px !important;
  }
  .document-card__bg.arancio .document-card__content img{ width:100px !important; height:auto !important; max-width:100px !important; }
  a.profilo-card-link{ display:block; text-decoration:none; color:inherit; }
  /* titolo comparto (CRESCITA, DINAMICO...): la regola generica h3 lo schiacciava
     a 19px (piu' piccolo del body 20px). Lo ingrandiamo e lo stacchiamo dalla card. */
  .row:has(.document-card__bg.arancio) h3{ font-size:44px !important; line-height:1.05 !important; margin-top:22px !important; }

  /* ---------- Padding sezioni dimezzato su mobile ---------- */
  .padding-sezione{ padding-top:40px !important; padding-bottom:40px !important; }

  /* ---------- Griglia numeri/statistiche: da 3 a 2 colonne su mobile ---------- */
  .col-4.text-center.pb-md-4,
  .col-4.text-center.pt-md-4{
    flex:0 0 50% !important; max-width:50% !important;
    margin-bottom:24px;
    text-align:left !important;   /* numeri e testi allineati a sinistra su mobile */
  }
  /* numeri leggermente piu' piccoli su mobile, cosi' la griglia resta centrata
     e i numeri a destra non toccano il bordo */
  .col-4 .num_ev{ font-size:36px !important; }
  /* +2 MLD € / 1 MLD €: un filo piu' piccoli per stare comodi nella colonna */
  .col-4 .num_ev.num-mld{ font-size:36px !important; white-space:nowrap; }

  /* ---------- Pulsanti CTA sezione "Conviene": sotto i numeri, piu' piccoli e separati ---------- */
  .home-cta{
    display:flex !important; flex-direction:column; gap:14px;
    margin-top:26px; width:100%; flex:0 0 100%;
  }
  .home-cta .btn_sec, .home-cta .btn_pri{
    font-size:15px !important; padding:11px 16px !important;
    margin:0 !important; width:100%; text-align:center;
  }

  /* ---- Overflow orizzontale su mobile ----
     La .row del footer (#wrapper-footer .scuro > .row) e' una row Bootstrap con
     margini negativi -12px ma NON e' dentro un .container che li compensa: sfora
     di 12px a destra e crea lo scroll orizzontale (tutto il sito trascinabile a
     sx). Azzeriamo i margini negativi e mettiamo una protezione anti-overflow. */
  #wrapper-footer .scuro > .row{ margin-left:0 !important; margin-right:0 !important; }
  #wrapper-footer .scuro > .row > .col-md-12{ padding-left:0 !important; padding-right:0 !important; }
  html, body{ overflow-x:hidden !important; }

  /* ================= FOOTER MOBILE =================
     Logo, link 'menufooter' e subfooter erano resi bianchi solo dentro il
     blocco desktop (min-width:768): su mobile ricadevano su #2D2D2A, cioe'
     invisibili sul fondo scuro. Qui li riportiamo bianchi come su desktop
     e riduciamo la dimensione di testi e link. */
  #colophon .logo-mask{ color:#fff !important; width:120px !important; height:auto !important; }
  #colophon .menufooter{ color:#fff !important; font-size:13px !important; line-height:1.9 !important; }
  /* intestazioni di colonna (Piu' ricercati / Documenti) attaccate ai loro link */
  #colophon .txt_chiaro:has(+ .menufooter){ margin-bottom:4px !important; }
  #colophon .subfooter, #colophon .subfooter a{ color:#fff !important; font-size:12px !important; }

  /* testi footer piu' piccoli e compatti */
  #colophon .txt_chiaro{ font-size:14px !important; line-height:1.5 !important; margin-bottom:20px; }
  #colophon .txt_chiaro b{ font-size:16px !important; }        /* etichette/heading */
  /* il margine di default 60px (pensato per le colonne desktop) crea buchi enormi
     su mobile tra intestazioni e link: lasciamo intatti gli mb-2/mb-4 (utility) */

  /* meno spazio vuoto: niente centratura verticale della prima riga,
     padding ridotti e logo piu' vicino al testo */
  #colophon .fondofooter{ padding-top:26px !important; padding-bottom:26px !important; }
  #colophon .fondofooter .row.align-items-center{ align-items:flex-start !important; }
  #colophon .fondofooter .logo-mask{ margin-bottom:4px; }
  #colophon .fondofooter .txt_chiaro.mt-4.pt-4{ margin-top:10px !important; padding-top:0 !important; }
  #colophon .info-footer .col-12{ padding-top:16px !important; padding-bottom:16px !important; }
  #colophon .info-footer .flex img{ height:38px !important; }  /* icone social piu' piccole */

  /* ============================================================
     RENDIMENTI (/investimento/rendimenti/) — mobile v6.6
     ------------------------------------------------------------
     Le fisarmoniche "RENDIMENTI PROFILO ..." con tab + grafici sono
     gestite dal blocco condiviso ".tabs" piu' sotto (v6.7), perche'
     lo stesso markup ricorre sulle pagine profilo e su lifecycle.
     Qui resta solo cio' che e' specifico di questa pagina.
     ============================================================ */
  /* griglie di .card-identita: quadrati a piena larghezza = tantissimo scroll
     morto (rendimenti 5 card = 1875px, "Pegaso in numeri" 6 card = 2354px,
     reportistica 6 card = 2354px). Quando la griglia ha 4+ elementi passiamo
     a 2 per riga; l'ultima resta centrata grazie a justify-content-center.
     Restano escluse le card che contengono un pulsante (reportistica): a
     164px il .btn_ter non ci starebbe -- quelle le compattiamo in altezza.
     Le 3 card di "Chi siamo" (griglia da 3) non vengono toccate. */
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) > [class*="col-"]:has(> .card-identita){
    flex:0 0 50% !important; max-width:50% !important; margin-bottom:12px !important; }
  /* ...tranne quando la card contiene un pulsante: a 164px il .btn_ter non
     ci starebbe, quelle restano a piena larghezza (e si compattano sotto).
     NB niente :not(:has()) dentro un :has(): il selettore sarebbe invalido
     e il browser scarterebbe l'intera regola. */
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) > [class*="col-"]:has(> .card-identita):has(.btn_ter){
    flex:0 0 100% !important; max-width:100% !important; }
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita{ padding:14px !important; }
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita img{
    max-width:100% !important; max-height:78px !important; width:auto !important; height:auto; }
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita__titolo{
    font-size:18px !important; margin-top:12px !important; margin-bottom:0 !important; }
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita .txt_chiaro{
    font-size:13px !important; line-height:1.25 !important; }
  /* il contenuto e' ancorato in basso con .mt-auto: nelle tessere compatte
     lasciava un vuoto sopra, meglio centrarlo */
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita{ justify-content:center !important; }
  .row.justify-content-center:has(> [class*="col-"]:nth-child(4)) .card-identita > .mt-auto{ margin-top:0 !important; }

  /* card-identita CON pulsante (es. /sostenibilita-3/reportistica/): niente
     quadrato 351x351 con 250px di vuoto, altezza al contenuto. */
  .card-identita:has(a){ aspect-ratio:auto !important; min-height:210px !important; }
  .card-identita:has(a) .card-identita__titolo{ margin-bottom:10px !important; }

  /* ============================================================
     PAGINE PROFILO (/investimento/profili-di-investimento/profilo-*)
     + blocco TAB/GRAFICI condiviso — mobile v6.7
     ------------------------------------------------------------
     Le 5 pagine profilo (crescita, dinamico, bilanciato, prudente,
     garantito) hanno markup identico, quindi si usano selettori
     strutturali invece di page-id.
     ============================================================ */

  /* titolo fisarmonica: lo style inline (32px sullo <span>, 24px sul <div>)
     batteva la regola .accordion-header{font-size:16px}. La freccia SVG
     veniva schiacciata dal flex quando il titolo andava a capo. */
  /* stessa misura per tutti i titoli, qualunque wrapper usi l'editor
     (span 32px / div 24px inline, h3, strong o testo nudo) */
  .accordion-header > :not(svg){ font-size:18px !important; line-height:1.2 !important; }
  .accordion-header > svg.accordion-arrow{ flex:0 0 auto !important; width:30px !important; height:30px !important; }

  /* --- blocco "tabs" (VALORI QUOTA / RENDIMENTO ANNUO / ...) + carosello Owl.
     Presente su: /investimento/rendimenti/ (dentro le fisarmoniche),
     le 5 pagine profilo, /investimento/lifecycle/.
     I .container/.row annidati (row p-0 con margini -12px + container con
     padding 12px) mangiavano ~28px per lato: il grafico restava a 295px
     su 375 di viewport. Qui si riallinea tutto ai 12px del container pagina. */
  /* i wrapper attorno a .tabs (.row.p-0 con margini -12px, .container annidati
     con padding 12/24px) spostavano il blocco fuori asse: qui si annullano
     tutti, cosi' tab e grafici si allineano ai 12px del container di pagina. */
  .row.p-0:has(> [class*="col-"] > .tabs){ margin-left:0 !important; margin-right:0 !important; }
  .accordion-content .container{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; }
  .accordion-content .row{ --bs-gutter-x:0 !important; margin-left:0 !important; margin-right:0 !important; }
  .accordion-content .row > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
  .tabs > .container{ padding-left:0 !important; padding-right:0 !important;
                      max-width:100% !important; margin-top:0 !important; }
  .tabs .item .container{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; }
  /* su /investimento/lifecycle/ il carosello sta FUORI da .tabs (li' .tabs
     chiude subito dopo la riga dei tab), quindi il contenuto delle slide
     restava rientrato di 36px invece dei 12 del container di pagina */
  .owl-carousel .item .container{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; }
  .owl-carousel .item .row{ --bs-gutter-x:0 !important; margin-left:0 !important; margin-right:0 !important; }
  .owl-carousel .item .row > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
  /* il .container che avvolge il carosello (fuori da .tabs su lifecycle) */
  .container:has(> .row.owl-carousel){ padding-left:0 !important; padding-right:0 !important;
                                       max-width:100% !important; margin-top:0 !important; }
  .tabs .row{ --bs-gutter-x:0 !important; margin-left:0 !important; margin-right:0 !important; }
  .tabs .row > [class*="col-"]{ padding-left:0 !important; padding-right:0 !important; }
  .tabs .row.px-3{ padding-left:0 !important; padding-right:0 !important; }
  .tabs .row.pt-5{ padding-top:6px !important; }

  /* tab impilate a piena larghezza e uguali (erano pill da min-width:260px
     disallineate, con la terza che andava a capo) */
  .tabs .row.test{ flex-direction:column !important; gap:8px !important;
                   padding-top:8px !important; padding-bottom:8px !important; }
  .tabs .row.test > div{ width:100% !important; padding:0 !important; }
  .tabs .tabbet{ width:100% !important; }
  .tabs .tabbet a.btn_sec{ display:flex !important; width:100% !important; min-width:0 !important;
                           font-size:13px !important; line-height:1.2 !important;
                           padding:9px 10px !important; margin-right:0 !important; }

  /* tab attiva evidenziata: la regola originale .trig.active .btn_sec sta nel
     blocco min-width:768, quindi su mobile nessun tab risultava selezionato. */
  .trig.active a.btn_sec{ color:#fff !important; background-color:#2D2D2A !important; }

  /* --- hero: la freccia/icona decorativa accanto al titolo era width="90%"
     (~340px di altezza su mobile). Solo le 5 pagine profilo hanno questo
     markup (.d-flex con dentro h2.titolo_pagina + div>img). */
  .d-flex:has(> h2.titolo_pagina){ align-items:flex-start !important; gap:10px; }
  .d-flex:has(> h2.titolo_pagina) > div img{ width:104px !important; height:auto !important; margin-top:6px; }

  /* --- i 3 riquadri arancioni (orizzonte temporale / composizione / grado di
     rischio) hanno min-height:500px inline: impilati facevano 1500px di scroll
     con 340px di vuoto ciascuno. NB: sulla pagina indice profili i riquadri
     .document-card__bg.arancio usano lo stesso min-height ma classi diverse,
     quindi non vengono toccati (li gestisce gia' il blocco 6.2). */
  .row > [class*="col-"] > .d-flex.align-items-end.arancio[style*="min-height: 500px"]{
    min-height:260px !important; padding:20px 16px !important; }
  .row > [class*="col-"] > .d-flex.align-items-end.arancio[style*="min-height: 500px"] h3{
    font-size:20px !important; line-height:1.15 !important; margin-bottom:8px !important; }
  .row > [class*="col-"] > .d-flex.align-items-end.arancio[style*="min-height: 500px"] p{
    font-size:15px !important; line-height:1.4 !important; margin-bottom:0 !important; }
  .row:has(> [class*="col-"] > .d-flex.align-items-end.arancio[style*="min-height: 500px"]){ row-gap:14px !important; }

  /* ============================================================
     ARCHIVIO NOTIZIE (/notizie/) — mobile v7.1
     ============================================================ */

  /* filtri categoria: erano 9 pill da min-width:140px che andavano a capo su
     5 righe (267px). Ora riga unica scorrevole in orizzontale, a tutta
     larghezza schermo (i margini negativi + padding riallineano la prima
     pill ai 12px del container e lasciano intravedere le successive). */
  .d-flex.flex-wrap.gap-2:has(> .filter-btn){
    flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
    scroll-padding-left:12px; scroll-padding-right:12px;
    scrollbar-width:none;
    margin-left:-12px !important; margin-right:-12px !important;
    padding:2px 12px 8px !important;
  }
  .d-flex.flex-wrap.gap-2:has(> .filter-btn)::-webkit-scrollbar{ display:none; }
  .btn_sec.filter-btn{
    flex:0 0 auto !important; scroll-snap-align:start;
    min-width:0 !important; width:auto !important;
    padding:7px 18px !important; font-size:13px !important; white-space:nowrap;
  }

  /* card articolo: .news-hero__badge_new e .news-hero__cta_new sono definite
     solo nel blocco min-width:768, quindi su mobile erano testo #2D2D2A senza
     pillola -> praticamente invisibili sopra l'immagine. */
  .news-hero:has(.news-hero__link) .news-hero__content{
    justify-content:space-between !important; aspect-ratio:auto !important;
    min-height:390px !important; padding:22px 20px !important; }
  .news-hero:has(.news-hero__link) .news-hero__title{
    font-size:17px !important; margin:0 0 12px !important;
    -webkit-line-clamp:3 !important; overflow:hidden !important; }
  .news-hero:has(.news-hero__link) .news-hero__badges_new{ display:flex; justify-content:center; }
  .news-hero:has(.news-hero__link) .news-hero__badge_new{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 22px; border-radius:30px; background-color:#2D2D2A;
    color:#fff; font-size:12px; text-transform:uppercase; width:auto; }
  .news-hero:has(.news-hero__link) .news-hero__cta_new{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 24px; border-radius:30px; background:#fff;
    color:#cb4a3a; font-size:13px; text-transform:uppercase; width:auto; }

  /* modulo di ricerca in fondo: i due .btn_ter (Cerca/Reset) hanno
     min-width:260px -> 528px in un contenitore da 351: "Reset" finiva fuori
     schermo (invisibile perche' body ha overflow-x:hidden). */
  #news-search-form .col-12.d-flex.gap-2{ flex-wrap:nowrap; }
  #news-search-form .btn_ter{ min-width:0 !important; flex:1 1 0;
                              padding:12px 8px !important; font-size:14px !important; }


  /* ============================================================
     ARTICOLO SINGOLO (single-post) — mobile v7.2
     ------------------------------------------------------------
     Il corpo dell'articolo usa i blocchi Gutenberg. Su mobile i
     paragrafi restavano a 20px (misura pensata per i testi brevi
     delle landing) mentre le regole generiche h4{17px}/h5{15px}
     rimpicciolivano i titoli di sezione: risultato, i titoli
     erano PIU' PICCOLI del testo che introducevano.
     ============================================================ */
  .single-post h2.titolo_pagina{ font-size:26px !important; line-height:1.12 !important; }

  /* corpo testo piu' leggibile e meno chilometrico.
     NB si aggancia alla colonna dell'articolo (:has di un blocco Gutenberg)
     e non alle classi .wp-block-paragraph: diversi post hanno il testo dentro
     un blockquote, quindi i <p> figli non hanno nessuna classe di blocco.
     La colonna della sezione "Articoli recenti" non contiene blocchi -> resta fuori. */
  .single-post .col-12:has(> [class*="wp-block-"]) p,
  .single-post .col-12:has(> [class*="wp-block-"]) li{ font-size:17px !important; line-height:1.55 !important; }

  /* gerarchia dei titoli di sezione ripristinata (sopra il corpo testo) */
  .single-post h2.wp-block-heading{ font-size:24px !important; line-height:1.15 !important; }
  .single-post h3.wp-block-heading{ font-size:22px !important; line-height:1.2 !important; }
  .single-post h4.wp-block-heading{ font-size:20px !important; line-height:1.25 !important; }
  .single-post h5.wp-block-heading{ font-size:18px !important; line-height:1.3 !important; }
  .single-post .wp-block-heading{ margin-top:26px !important; margin-bottom:10px !important; }

  /* tabelle: celle a 20px sprecavano meta' schermo (la tabella dei valori
     limite era alta 1007px). overflow-x per le tabelle con piu' colonne. */
  .single-post figure.wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .single-post .wp-block-table table{ font-size:15px !important; }
  .single-post .col-12:has(> [class*="wp-block-"]) .wp-block-table td,
  .single-post .col-12:has(> [class*="wp-block-"]) .wp-block-table th,
  .single-post .col-12:has(> [class*="wp-block-"]) .wp-block-table td p,
  .single-post .col-12:has(> [class*="wp-block-"]) .wp-block-table th p{
    font-size:15px !important; line-height:1.35 !important; padding:8px 6px !important; }


  /* ============================================================
     "COME FARE A..." e "MODULI" — mobile v7.4
     ============================================================ */

  /* --- indice /come-fare-a/ (page-id-1786) e /moduli/ (page-id-2580):
     10 e 9 card a tutta larghezza da 210px = 2375px di scroll per un menu
     di link. Restano a tutta larghezza (il pulsante e le foto di sfondo
     hanno bisogno di spazio) ma piu' compatte: 210 -> 150px.
     Scoping su page-id perche' .row.p-2.g-4 e' condiviso con la pagina
     "Documenti", dove le card hanno anche un paragrafo (blocco 5.9). */
  .page-id-1786 .row.p-2.g-4 > .col-6.col-md-4 > .arancio,
  .page-id-2580 .row.p-2.g-4 > .col-6.col-md-4 > .arancio{
    min-height:150px !important; padding:18px 16px !important; }
  .page-id-1786 .row.p-2.g-4 .arancio h3,
  .page-id-2580 .row.p-2.g-4 .arancio h3{
    font-size:20px !important; line-height:1.15 !important; margin-bottom:0 !important; }
  .page-id-1786 .row.p-2.g-4 .arancio .mt-3,
  .page-id-2580 .row.p-2.g-4 .arancio .mt-3{ margin-top:14px !important; }
  .page-id-1786 .row.p-2.g-4 .arancio a.btn_ter,
  .page-id-2580 .row.p-2.g-4 .arancio a.btn_ter{
    margin-bottom:0 !important; padding:8px 20px !important; font-size:14px !important; }

  /* --- archivi dei moduli (/categoria_modulo/*): la card-icona del PDF
     (.document-icon-card) e' definita SOLO nel blocco min-width:768, quindi
     su mobile l'<a> restava display:inline -> riquadro arancione alto 19px
     con dentro l'icona da 98px che sbordava (sembrava un glitch grafico). */
  .document-icon-card{
    width:100%; max-width:200px; aspect-ratio:1/1;
    display:flex !important; align-items:center !important; justify-content:center !important;
    margin-left:auto; margin-right:auto; position:relative; overflow:hidden; text-decoration:none; }
  .document-icon-card__img{
    width:110px !important; max-width:55% !important; height:auto !important;
    display:block !important; object-fit:contain; position:relative; z-index:2; }
  .document-icon-card__corner{
    position:absolute; top:0; right:0; width:20%; height:20%; background:#fff;
    clip-path:polygon(100% 0, 0 0, 100% 100%); z-index:1; pointer-events:none; }

  /* stesso problema di gerarchia visto sull'articolo singolo: gli h3 con
     font-size:60px inline finivano a 19px (regola generica) sotto un corpo
     testo da 20px; inoltre p aveva margin-bottom:60px di default. */
  .tax-categoria_modulo main.site-main h3{
    font-size:22px !important; line-height:1.2 !important;
    margin-top:16px !important; margin-bottom:8px !important; }
  .tax-categoria_modulo main.site-main p{ font-size:17px !important; line-height:1.5 !important;
                                          margin-bottom:16px !important; }
  .tax-categoria_modulo main.site-main p.mb-0{ margin-top:4px !important; }
  .tax-categoria_modulo main.site-main .row.padding-sezione{
    padding-top:22px !important; padding-bottom:22px !important; }


  /* ============================================================
     CONTATTACI e GOVERNANCE — mobile v7.5
     ============================================================ */

  /* --- /contattaci/: i 4 pulsanti (2 link esterni + 2 tab con i form)
     avevano larghezze diverse (351px quello che andava a capo, 260px gli
     altri per via di min-width) e risultavano disallineati. */
  .d-flex.flex-wrap.gap-3:has(> .btn_sec){ gap:10px !important;
                                           padding-top:8px !important; padding-bottom:8px !important; }
  .d-flex.flex-wrap.gap-3:has(> .btn_sec) > .btn_sec{
    width:100% !important; min-width:0 !important;
    font-size:14px !important; padding:10px 14px !important; }

  /* --- Gravity Forms (moduli reclami/privacy): TUTTO lo stile dei form sta
     nel blocco min-width:768, quindi su mobile campi e pulsante tornavano
     ai controlli nativi del browser (squadrati, bordo grigio inset).
     Qui replichiamo lo stile del tema. */
  .gform_wrapper{ width:100%; }
  .gform_wrapper .gfield_label,
  .gform_wrapper .gform-field-label{ font-size:14px !important; font-weight:600; color:#2D2D2A; margin-bottom:6px; }
  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="number"],
  .gform_wrapper input[type="password"],
  .gform_wrapper textarea,
  .gform_wrapper select{
    width:100%; border:2px solid #2D2D2A; background-color:transparent; border-radius:30px;
    padding:12px 18px; font-size:16px; color:#2D2D2A; outline:none; }
  .gform_wrapper textarea{ border-radius:20px; min-height:120px; }
  .gform_wrapper ::placeholder{ color:#2D2D2A; opacity:.65; }
  .gform_wrapper .gform_button,
  .gform_wrapper input[type="submit"]{
    display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase;
    border:2px solid #2D2D2A; background-color:transparent; border-radius:30px;
    padding:10px 28px; font-size:16px; font-weight:bold; color:#2D2D2A; cursor:pointer; }

  /* --- /il-fondo/governance/: le due tabelle dei delegati (24 righe x 2 col)
     dentro le fisarmoniche avevano le celle a 20px -> ogni nome andava a capo
     e la tabella era alta 1655px. */
  .accordion-content table{ font-size:15px !important; }
  .accordion-content table td,
  .accordion-content table th{ font-size:15px !important; line-height:1.35 !important; padding:8px 6px !important; }


  /* ============================================================
     RIFINITURE TRASVERSALI — mobile v7.6
     ============================================================ */

  /* --- gerarchia tipografica: il corpo testo del tema e' 20px, ma le regole
     generiche mobile mettevano h3 a 19px, h4 a 17, h5 a 15, h6 a 14: i titoli
     di sezione risultavano PIU' PICCOLI del testo che introducevano
     (home, i vantaggi, profili di investimento, sostenibilita', privacy...).
     Riportiamo la scala sopra il corpo testo. Dove serviva una misura
     specifica esistono gia' override piu' specifici (card, fisarmoniche,
     titoli comparto, card news), che restano validi. */
  h3{ font-size:22px !important; line-height:1.2 !important; }
  h4{ font-size:20px !important; line-height:1.25 !important; }
  h5{ font-size:18px !important; line-height:1.3 !important; }
  h6{ font-size:17px !important; line-height:1.3 !important; }

  /* --- parole lunghe non spezzabili (email del DPO, URL) che sforavano il
     viewport e venivano tagliate da overflow-x:hidden */
  #page p, #page li, #page td, #page th, #page dd, #page a,
  #page h1, #page h2, #page h3, #page h4, #page h5, #page h6{ overflow-wrap:break-word; }

  /* --- fisarmoniche con titoli molto lunghi (es. "Chi puo' aderire", dove il
     titolo e' una frase intera su 11 righe): la freccia era centrata
     verticalmente e finiva a meta' del blocco. */
  .accordion-header{ align-items:flex-start !important; }
  .accordion-header > svg.accordion-arrow{ margin-top:2px; }

}
    .nav-pills .nav-link.active { background-color:#2D2D2A!important}

.txt_chiaro .txt_arancio { color:#cb4a3a}
.txt_chiaro .txt_scuro { color:#2D2D2A}


/* ============================================================
   Immagine in evidenza dell'articolo singolo (single.php)
   ------------------------------------------------------------
   Stesso trattamento delle slide news in home: foto in bianco e
   nero con velatura arancio in multiply. Le slide lo ottengono con
   .news-hero__bg (filter:grayscale) + .news-hero__overlay; qui
   l'immagine e' un <img> dentro la colonna, quindi serve un
   contenitore che la avvolga -- altrimenti una velatura ancorata
   alla colonna sborderebbe sui 12px di gutter.
   isolation:isolate confina il multiply all'immagine: senza, si
   fonderebbe anche con lo sfondo della sezione.
   ============================================================ */
.post-hero-media{ position:relative; isolation:isolate; line-height:0; }
.post-hero-media > img{ display:block; width:100%; height:auto; filter:grayscale(); }
.post-hero-media__overlay{ position:absolute; inset:0; background:rgba(236,77,55,1);
                           mix-blend-mode:multiply; pointer-events:none; }


.titolo_news { font-weight: bold; font-size: clamp(32px, 4vw, 46px); line-height: clamp(34px, 4vw, 58px)}  .titolo_pagina b , .titolo_pagina strong{ color:#cb4a3a;  font-weight: bold; }


.has-text-color, .wp-elements-6 a:where(:not(.wp-element-button)), .has-text-color a , .wp-block-paragraph mark, li a mark , .single-post mark { color:#cb4a3a!important}


/* v8.4 — Carosello news desktop: larghezza delle card.
   3,1 card per vista (formula di Swiper: (larghezza - 2,1 spazi) / 3,1), mai oltre
   520px. news-swiper.js usa slidesPerView:'auto', quindi Swiper misura questa
   larghezza invece di calcolarne una sua: pallini e scorrimento restano allineati
   a qualunque larghezza di schermo. */
@media (min-width: 768px){
  .news-swiper .swiper-slide{ width:calc((100% - 42px) / 3.1); max-width:520px; }
}
@media (min-width: 992px){
  .news-swiper .swiper-slide{ width:calc((100% - 50.4px) / 3.1); }
}


/* v8.6 — Foto-ritratto negli articoli: stesso trattamento delle slide news
   (bianco e nero + velatura arancio in multiply).
   Automatico sulle immagini RIDIMENSIONATE nel testo degli articoli
   (.is-resized): oggi sono solo i ritratti in firma alle circolari (Direttore,
   Presidente). Tabelle, grafici e schermate negli articoli non sono
   ridimensionati e restano a colori. Per applicarlo altrove a mano: classe
   CSS aggiuntiva "foto-pegaso" sul blocco Immagine. */
.single-post figure.wp-block-image.is-resized,
figure.wp-block-image.foto-pegaso{
  position:relative; isolation:isolate;
  width:fit-content; max-width:100%;
  line-height:0;
}
.single-post figure.wp-block-image.is-resized > img,
figure.wp-block-image.foto-pegaso > img{
  display:block;
  margin:0 !important;   /* il tema aggiunge 8px sotto: l'arancio sborderebbe */
  filter:grayscale();
}
.single-post figure.wp-block-image.is-resized::after,
figure.wp-block-image.foto-pegaso::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(236,77,55,1);
  mix-blend-mode:multiply;
  pointer-events:none;
}


/* v8.7 — Slider hero in home: sempre a tutta larghezza.
   La sezione .hero-slider e' un flex (d-flex) e lo swiper non aveva una
   larghezza sua: prendeva quella del contenuto. Con piu' slide il contenuto e'
   larghissimo e lo swiper arrivava al 100%; con UNA slide sola si stringeva
   (897px su 1425 a 1440) e restava centrato con bande bianche ai lati. */
.hero-slider > .home-swiper{ width:100%; min-width:0; flex:1 1 100%; }