/* =========================================================
   Consulenza Fiscale Milano — Foglio di stile principale
   =========================================================
   INDICE
     1.  TOKENS, RESET, TYPOGRAPHY
     2.  LAYOUT (container, skip-link)
     3.  HEADER (brand, navigation, dropdown)
     4.  BUTTONS
     5.  HERO
     6.  PAGE STRUCTURE (page-head, breadcrumb, sections)
     7.  COMPONENTS (grid, card, plus-list)
     8.  TEAM
     9.  SERVICES
     10. CTA STRIP
     11. INTRO GRID & INTRO SERVICES
     12. LEGAL DOC
     13. PARALLAX SECTION (generica)
     14. CONTACT FORM
     15. MAP PLACEHOLDER
     16. PRESS RELEASE (ticker)
     17. PUBLISHERS MARQUEE
     18. ARTICLES (blog index)
     19. ARTICLE (blog detail)
     20. FOOTER
     21. WHATSAPP BUTTON
     22. ACCESSIBILITY
     23. RESPONSIVE
   ========================================================= */

/* =========================================================
   1. TOKENS, RESET, TYPOGRAPHY
   ========================================================= */
@font-face{
  font-family:"tabler-icons";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url("../assets/fonts/tabler-icons/tabler-icons.woff2") format("woff2");
}

@font-face{
  font-family:"Raleway";
  src:url("../assets/fonts/raleway/Raleway-Regular.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face{
  font-family:"Raleway";
  src:url("../assets/fonts/raleway/Raleway-Medium.woff2") format("woff2");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

@font-face{
  font-family:"Raleway";
  src:url("../assets/fonts/raleway/Raleway-SemiBold.woff2") format("woff2");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}

@font-face{
  font-family:"Raleway";
  src:url("../assets/fonts/raleway/Raleway-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

@font-face{
  font-family:"Raleway";
  src:url("../assets/fonts/raleway/Raleway-ExtraBold.woff2") format("woff2");
  font-style:normal;
  font-weight:800;
  font-display:swap;
}

@font-face{
  font-family:"Raleway Fallback";
  src:local("Helvetica Neue"),local("Arial");
  ascent-override:96.5%;
  descent-override:22.5%;
  line-gap-override:0%;
  size-adjust:105%;
}

:root{
  --c-bg:#f6f7f9;
  --c-surface:#ffffff;
  --c-border:#e3e6ec;
  --c-text:#1f2933;
  --c-text-soft:#4a5562;
  --c-muted:#7a8595;
  --c-accent:#1452b1;
  --c-accent-dark:#3399ff;
  --c-btn-hover:#3399ff;
  --c-accent-soft:#e7eef9;
  --c-img-placeholder:#e8e8e8;
  --c-focus:#3399ff;
  --radius:6px;
  --radius-lg:4px;
  --shadow-sm:0 1px 2px rgba(20,30,45,.04);
  --shadow-md:0 6px 24px rgba(20,30,45,.06);
  --maxw:1180px;
  --gap:1.5rem;
  --font:"Raleway","Raleway Fallback","Helvetica Neue",Arial,sans-serif;
  --transition:.2s ease;
}

*,
*::before,
*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{flex:1 0 auto;}

img{max-width:100%;height:auto;display:block;}

a{
  color:var(--c-accent);
  text-decoration:none;
  transition:color var(--transition);
}
a:hover{color:var(--c-accent-dark);text-decoration:underline;}

:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
  border-radius:3px;
}

h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--c-text);
  line-height:1.25;
  margin:0 0 .8em;
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;}
h2{font-size:clamp(1.4rem,2.3vw,1.85rem);}
h3{font-size:1.18rem;font-weight:600;}
h4{font-size:1.02rem;font-weight:600;}

p{margin:0 0 1em;color:var(--c-text-soft);}

ul{margin:0 0 1em;padding-left:1.2rem;}
ul li{color:var(--c-text-soft);}

/* =========================================================
   2. LAYOUT (container, skip-link)
   ========================================================= */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--c-accent-dark);
  color:#fff;
  padding:.7rem 1rem;
  z-index:1000;
  border-radius:0 0 var(--radius) 0;
  font-weight:600;
}
.skip-link:focus{left:0;}

.container{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0 5%;
}
.site-header > .container,
.site-footer > .container{
  max-width:94%;
  padding:0;
}
.site-footer > .container p{
  padding-right:5rem;
  padding-top:1.7rem;
}

/* Sezioni base */
section{padding:4rem 0;}
.section-alt{
  background:var(--c-surface);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.section-head{
  max-width:72ch;
  margin-bottom:2.4rem;
}
.section-head .eyebrow{
  display:inline-block;
  font-size:1.3rem;
  font-weight:300;
  color:var(--c-accent-dark);
  margin-bottom:.6rem;
}

/* =========================================================
   3. HEADER (brand, navigation, dropdown)
   ========================================================= */

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-weight:700;
  color:var(--c-text);
  font-size:1.05rem;
  letter-spacing:.01em;
}
.brand:hover{text-decoration:none;color:var(--c-accent-dark);}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:6px;
  background:var(--c-accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.02em;
}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text small{
  font-size:.7rem;
  color:var(--c-muted);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand-logo{
  display:block;
  height:28px;
  width:auto;
  max-width:100%;
}

/* Hamburger */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  border-radius:0;
  padding:.4rem;
  cursor:pointer;
  color:var(--c-text);
  line-height:0;
}
.nav-toggle:hover{color:var(--c-accent);}
.nav-toggle-icon{
  display:inline-block;
  width:22px;
  height:16px;
  position:relative;
}
.nav-toggle-icon span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform var(--transition),opacity var(--transition),top var(--transition);
}
.nav-toggle-icon span:nth-child(1){top:0;}
.nav-toggle-icon span:nth-child(2){top:7px;}
.nav-toggle-icon span:nth-child(3){top:14px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1){top:7px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(3){top:7px;transform:rotate(-45deg);}

/* Navigation */
.main-nav{margin-left:auto;}
.main-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:.4rem;
  align-items:center;
}
.main-nav a{
  color:var(--c-text);
  font-weight:500;
  font-size:.96rem;
  padding:.55rem .9rem;
  border-radius:var(--radius);
  display:inline-block;
  transition:color var(--transition),background var(--transition);
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--c-accent);
  background:transparent;
  text-decoration:none;
}
.main-nav a.is-active,
.main-nav a[aria-current="page"]{
  color:var(--c-accent);
  font-weight:600;
}
.main-nav .nav-cta{
  background:var(--c-accent);
  color:#fff;
  margin-left:.4rem;
}
.main-nav .nav-cta:hover{background:var(--c-accent-dark);color:#fff;}

/* Dropdown */
.main-nav .has-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}
.main-nav .has-dropdown.is-open > .dropdown-toggle{
  color:var(--c-accent);
}
.main-nav .dropdown-toggle{
  display:inline-flex;
  align-items:center;
}
/* "Ponte" invisibile che collega il pulsante al pannello: hover/focus
   non si interrompono nel gap verticale fino al bordo header (78px). */
.main-nav .has-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:calc((78px - 100%) / 2);
  display:none;
}
.main-nav .has-dropdown:hover::after,
.main-nav .has-dropdown:focus-within::after,
.main-nav .has-dropdown.is-open::after{display:block;}

.main-nav .dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + (78px - 100%) / 2);
  left:0;
  min-width:240px;
  margin:0;
  padding:.4rem;
  flex-direction:column;
  align-items:stretch;
  gap:.1rem;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  z-index:200;
}
.main-nav .has-dropdown:hover > .dropdown-menu,
.main-nav .has-dropdown:focus-within > .dropdown-menu,
.main-nav .has-dropdown.is-open > .dropdown-menu{
  display:flex;
}
.main-nav .dropdown-menu li{width:100%;}
.main-nav .dropdown-menu a{
  display:block;
  width:100%;
  white-space:nowrap;
  font-size:.92rem;
  padding:.4rem 1rem;
  transition:padding var(--transition),background var(--transition),color var(--transition);
}
.main-nav .dropdown-menu a:hover{
  padding-left:calc(1rem + 10px);
  padding-right:calc(1rem - 10px);
}

/* Freccetta accanto al link che apre il sottomenu (visibile solo su mobile/tablet) */
.dropdown-caret{
  display:none;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:.4rem .35rem;
  margin-left:-.45rem;
  cursor:pointer;
  color:var(--c-text);
  border-radius:var(--radius);
  transition:color var(--transition),transform .3s ease;
  line-height:0;
}
.dropdown-caret:hover{color:var(--c-accent);}
.dropdown-caret svg{transition:transform .3s ease;}
.main-nav .has-dropdown.is-open > .dropdown-caret{color:var(--c-accent);}
.main-nav .has-dropdown.is-open > .dropdown-caret svg{transform:rotate(180deg);}

/* =========================================================
   4. BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.85rem 1.5rem;
  font-weight:600;
  font-size:.95rem;
  font-family:var(--font);
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  -webkit-appearance:none;
  appearance:none;
}

.btn .ti{
  font-size:1em;
  flex-shrink:0;
  line-height:1;
}

.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--c-accent-soft);
}

/* btn-primary → alias di btn-dark */
.btn-primary,
.btn-dark{
  background:var(--c-text);
  color:#fff;
  border-color:var(--c-text);
}
.btn-primary:hover,
.btn-dark:hover{
  background:var(--c-btn-hover);
  border-color:var(--c-btn-hover);
  color:#fff;
  text-decoration:none;
}

.btn-outline{
  background:transparent;
  color:#fff;
  border-color:var(--c-accent);
}
.btn-outline:hover{
  background:var(--c-accent);
  color:#fff;
  text-decoration:none;
}

.btn-light{
  background:#fff;
  color:var(--c-accent-dark);
  border-color:#fff;
}
.btn-light:hover{
  background:#e8e8e8;
  color:var(--c-accent-dark);
  border-color:#e8e8e8;
  text-decoration:none;
}

.btn-outline-white{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.6)!important;
}
.btn-outline-white:hover{
  background:#fff;
  color:var(--c-accent-dark);
  border-color:#fff;
  text-decoration:none;
}

.btn-sm{
  padding:.6rem 1.1rem;
  font-size:.85rem;
}
.btn-lg{
  padding:1.05rem 1.9rem;
  font-size:1.05rem;
}

/* -- Disabled -- */
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
}

.btn-change{
  --btn-h: 3rem;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:auto;
  height:var(--btn-h);
  min-height:var(--btn-h);
  max-height:var(--btn-h);
  flex-shrink:0;
  flex-grow:0;
  align-self:flex-start;
  padding-top:0;
  padding-bottom:0;
  padding-left:1.5rem;
  padding-right:1.5rem;
  overflow:hidden;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
}

.btn-change.btn-sm{
  --btn-h: 2.25rem;
  padding-left:1.1rem;
  padding-right:1.1rem;
}

.btn-change.btn-lg{
  --btn-h: 3.5rem;
  padding-left:1.9rem;
  padding-right:1.9rem;
}

/* PRIMO span: in flusso normale (relative), dà larghezza al bottone */
.btn-change > span:nth-child(1){
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-h);
  white-space:nowrap;
  transform:translateY(0);
  transition:transform .35s ease;
  will-change:transform;
}

/* SECONDO span: absolute, copre tutto il bottone, parte SOTTO */
.btn-change > span:nth-child(2){
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transform:translateY(100%);
  transition:transform .35s ease;
  will-change:transform;
}

/* Hover: primo esce sopra, secondo entra dal basso */
.btn-change:hover > span:nth-child(1),
.btn-change:focus-visible > span:nth-child(1){
  transform:translateY(-100%);
}
.btn-change:hover > span:nth-child(2),
.btn-change:focus-visible > span:nth-child(2){
  transform:translateY(0);
}

.btn.btn-change{
  display:inline-flex !important;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn-change > span{transition:none;}
  .btn-change > span:nth-child(1){transform:none;}
  .btn-change > span:nth-child(2){display:none;}
}

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#f1f4f7 100%);
  background-image:var(--hero-image,none),linear-gradient(180deg,#ffffff 0%,#f1f4f7 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--c-border);
  padding:5rem 0 4.5rem;
  isolation:isolate;
}
.hero .hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:-2;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(241,244,247,.88) 100%);
  z-index:-1;
}
.hero > .container{position:relative;z-index:1;}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:3rem;
  align-items:center;
}
.hero h1{margin-bottom:.6em;}
.hero .lead{
  font-size:1.12rem;
  color:var(--c-text-soft);
  margin-bottom:1.6rem;
  max-width:36em;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.2rem;
}
.hero-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-md);
}
.hero-card h2{font-size:1.05rem;margin-bottom:1rem;color:var(--c-text);}
.hero-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.95rem;}
.hero-card dt{font-weight:600;color:var(--c-muted);}
.hero-card dd{margin:0;color:var(--c-text);}

/* Hero light (testo bianco su immagine) */
.hero-light .hero-overlay{
  background:linear-gradient(180deg,rgba(1,31,67,.55) 0%,rgba(1,31,67,.65) 100%);
}
.hero.hero-light h1{color:#fff;}
.hero.hero-light .lead{color:rgba(255,255,255,.92);}
.hero.hero-light .btn-outline{
  color:#fff;
  border-color:rgba(255,255,255,.6);
  background:transparent;
}
.hero.hero-light .btn-outline:hover{
  background:#fff;
  color:var(--c-accent-dark);
  border-color:#fff;
}
.hero.hero-light .breadcrumb,
.hero.hero-light .breadcrumb a,
.hero.hero-light .breadcrumb li::after{color:rgba(255,255,255,.75);}
.hero.hero-light .breadcrumb a:hover{color:#fff;}
.hero.hero-light .breadcrumb [aria-current="page"]{color:#fff;font-weight:500;}

/* =========================================================
   6. PAGE STRUCTURE (page-head, breadcrumb)
   ========================================================= */
.page-head{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  padding:3rem 0 2.4rem;
}
.page-head h1{margin-bottom:.4em;}
.page-head p{max-width:60ch;font-size:1.05rem;}

.breadcrumb{
  font-size:.85rem;
  color:var(--c-muted);
  margin-bottom:1rem;
}
.breadcrumb ol{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.breadcrumb li::after{
  content:"›";
  margin-left:.45rem;
  color:var(--c-muted);
}
.breadcrumb li:last-child::after{content:"";}
.breadcrumb a{color:var(--c-muted);}
.breadcrumb a:hover{color:var(--c-accent-dark);}
.breadcrumb [aria-current="page"]{color:var(--c-text);font-weight:500;}

/* =========================================================
   7. COMPONENTS (grid, card, plus-list)
   ========================================================= */
.grid{
  display:grid;
  gap:var(--gap);
}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:var(--c-surface);
  border:none;
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.card h3{color:var(--c-text);margin-bottom:.5em;}
.card p{margin-bottom:0;}
.card .card-icon{
  width:42px;
  height:42px;
  border-radius:6px;
  background:var(--c-accent-soft);
  color:var(--c-accent-dark);
  display:grid;
  place-items:center;
  font-weight:700;
  margin-bottom:1rem;
  font-size:1rem;
}

.service-card.is-hidden { display: none !important; }

.plus-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem 2rem;
}
.plus-list li{
  position:relative;
  padding-left:1.8rem;
  color:var(--c-text-soft);
}
.plus-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border:2px solid var(--c-accent);
  border-top:0;
  border-right:0;
  transform:rotate(-45deg);
}
.plus-list strong{color:var(--c-text);display:block;margin-bottom:.15em;}

/* =========================================================
   8. TEAM
   ========================================================= */
.team-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
}
.team-card{
  background:var(--c-surface);
  border:none;
  border-radius:var(--radius-lg);
  padding:1.7rem 1.8rem;
  box-shadow:var(--shadow-sm);
}
.team-card h3{
  margin-bottom:.15em;
  color:var(--c-text);
  font-size:1.15rem;
}
.team-role{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--c-accent-dark);
  font-weight:600;
  margin-bottom:.9rem;
}
.team-card p{margin-bottom:0;}

/* =========================================================
   9. SERVICES (service-block, service-meta)
   ========================================================= */
.service-block{
  background:var(--c-surface);
  border:none;
  border-radius:var(--radius-lg);
  padding:2rem 2.2rem;
  margin-bottom:1.6rem;
  box-shadow:var(--shadow-sm);
}
.service-block h2{color:var(--c-text);margin-bottom:.4em;}
.service-block .service-tag{
  display:inline-block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-accent-dark);
  background:var(--c-accent-soft);
  padding:.25rem .6rem;
  border-radius:4px;
  margin-bottom:.9rem;
}
.service-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem 2rem;
  margin-top:1.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--c-border);
}
.service-meta h4{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:.5em;
  font-weight:600;
}
.service-meta p,
.service-meta ul{
  font-size:.95rem;
  margin-bottom:0;
}

/* =========================================================
   10. CTA STRIP
   ========================================================= */
.cta-strip{
  background:var(--c-accent-dark);
  color:#fff;
  padding:3.5rem 0;
}
.cta-strip h2{color:#fff;margin-bottom:.4em;}
.cta-strip p{color:rgba(255,255,255,.85);max-width:60ch;margin-bottom:1.4rem;}
.cta-strip .btn-primary{background:#fff;color:var(--c-accent-dark);}
.cta-strip .btn-primary:hover{background:var(--c-accent-soft);color:var(--c-accent-dark);}
.cta-strip .btn-outline{color:#fff;border-color:rgba(255,255,255,.5);}
.cta-strip .btn-outline:hover{background:#fff;color:var(--c-accent-dark);}
.cta-strip .cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;}

/* =========================================================
   11. INTRO GRID & INTRO SERVICES
   ========================================================= */
.intro-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:3.5rem;
  align-items:start;
}
.intro-grid .section-head{margin-bottom:0;}
.intro-grid .section-head > p:last-child{
  margin-top:1.6rem;
  margin-bottom:0;
}

.intro-services{
  border:none;
  border-radius:var(--radius-lg);
  padding:1.8rem;
  box-shadow:var(--shadow-sm);
}
.intro-services h3{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-accent-dark);
  margin-bottom:1.2rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--c-border);
  font-weight:600;
}
.intro-services ul{
  list-style:none;
  padding:0;
  margin:0;
}
.intro-services li{
  margin:0;
  border-bottom:1px solid var(--c-border);
}
.intro-services li:last-child{border-bottom:0;}
.intro-services a{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:.95rem .2rem;
  color:var(--c-text);
  text-decoration:none;
  transition:padding-left .2s ease,color .2s ease;
}
.intro-services a:hover{
  padding-left:.4rem;
  color:var(--c-accent-dark);
  text-decoration:none;
}
.intro-services .srv-num{
  font-size:.75rem;
  font-weight:700;
  color:var(--c-accent);
  background:var(--c-accent-soft);
  padding:.3rem .5rem;
  border-radius:4px;
  letter-spacing:.05em;
  min-width:34px;
  text-align:center;
  flex-shrink:0;
  margin-top:.15rem;
}
.intro-services .srv-text{
  display:flex;
  flex-direction:column;
  line-height:1.35;
}
.intro-services .srv-text strong{
  font-weight:600;
  font-size:.97rem;
  color:var(--c-text);
}
.intro-services .srv-text em{
  font-style:normal;
  font-size:.83rem;
  color:var(--c-muted);
  margin-top:.15rem;
}

/* =========================================================
   12. LEGAL DOC (privacy, cookie, ecc.)
   ========================================================= */
.legal-doc{
  max-width:78ch;
  margin:0 auto;
}
.legal-doc .legal-meta{
  color:var(--c-muted);
  font-size:.92rem;
  margin-bottom:2rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--c-border);
}
.legal-doc h2{
  font-size:1.35rem;
  color:var(--c-text);
  margin-top:2.4rem;
  margin-bottom:.7em;
  padding-top:.4rem;
}
.legal-doc h3{
  font-size:1.08rem;
  color:var(--c-text);
  margin-top:1.6rem;
  margin-bottom:.6em;
}
.legal-doc p,
.legal-doc ul li{
  font-size:.97rem;
  line-height:1.7;
}
.legal-doc ul{
  padding-left:1.4rem;
  margin-bottom:1.2em;
}
.legal-doc ul li{margin-bottom:.5em;}
.legal-doc strong{color:var(--c-text);}
.legal-doc a{
  color:var(--c-accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-doc a:hover{color:var(--c-accent);}

/* =========================================================
   13. PARALLAX SECTION (generica con background-image)
   ========================================================= */
.parallax-section{
  position:relative;
  background-image:var(--parallax-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  padding:7rem 0;
  isolation:isolate;
  color:#fff;
}
.parallax-section .eyebrow{color:#a8d4d9;}
.parallax-section h2{color:#fff;}
.parallax-section p{color:rgba(255,255,255,.92);font-size:1.05rem;}
.parallax-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(1,31,67,.85) 0%,rgba(20,30,45,.78) 100%);
  z-index:-1;
}
.parallax-section > .container{position:relative;z-index:1;}

/* =========================================================
   14. CONTACT FORM (replica vecchio sito: niente card, layout largo)
   ========================================================= */
.contact-section{
  padding:5rem 0;
  background:var(--c-surface);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:start;
}
/* Niente bordi, niente background: gli elementi fluiscono in pagina */
.contact-info,
.contact-form{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.contact-title{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:2rem;
  font-weight:500;
  color:var(--c-text);
  margin:0 0 2rem;
  line-height:1.2;
}
.contact-title .icon{flex-shrink:0;color:var(--c-text);}

/* Form rows */
.form-response{
  min-height:1.5em;
  margin-bottom:1rem;
  font-size:1rem;
  font-weight:600;
}
.form-row{
  display:grid;
  gap:1.4rem;
  margin-bottom:1.4rem;
}
.form-row.two{grid-template-columns:1fr 1fr;}
.form-row.three{grid-template-columns:1fr 1fr 1fr;}

.form-field{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  position:relative;
}
.form-field label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:500;
  font-size:.95rem;
  color:var(--c-text);
}
.form-field label .icon-sm{
  color:var(--c-text);
  flex-shrink:0;
}
.form-field .req{color:#b6403e;margin-left:.1rem;font-weight:600;}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
  width:100%;
  font-family:var(--font);
  font-size:.97rem;
  color:var(--c-text);
  background:#fff;
  border:1px solid #ced4da;
  border-radius:.35rem;
  padding:.7rem .9rem;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color:#a0a8b4;
  opacity:1;
}
.form-field input:hover,
.form-field textarea:hover{border-color:#9aa3b0;}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:#7a8595;
  box-shadow:0 0 0 3px rgba(20,30,45,.08);
}
.form-field textarea{
  min-height:220px;
  resize:vertical;
  line-height:1.5;
}

/* Honeypot: completamente fuori vista */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  opacity:0;
}

/* Checkbox privacy */
.form-check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:1.6rem 0;
}
.form-check input[type="checkbox"]{
  flex-shrink:0;
  width:1.1rem;
  height:1.1rem;
  margin-top:.2rem;
  accent-color:var(--c-text);
  cursor:pointer;
}
.form-check label{
  font-size:1rem;
  color:var(--c-text);
  font-weight:400;
  line-height:1.5;
  cursor:pointer;
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.3rem;
}
.form-check label .icon-sm{
  position:relative;
  top:2px;
  color:var(--c-text);
}
.form-check label a{
  color:var(--c-accent);
  text-decoration:none;
  font-weight:500;
}
.form-check label a:hover{text-decoration:underline;}

/* Submit row: reCAPTCHA + pulsante nero */
.form-row-submit{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.5rem;
  align-items:center;
  margin-bottom:0;
}
.g-recaptcha{
  width:304px;
  height:78px;
}
.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  width:100%;
  height:76px;
  background:#000;
  color:#fff;
  border:0;
  border-radius:.35rem;
  font-family:var(--font);
  font-size:2rem;
  font-weight:500;
  cursor:pointer;
  transition:background var(--transition),opacity var(--transition);
}
.btn-submit:hover{background:#222;}
.btn-submit:active{opacity:.85;}
.btn-submit:disabled{opacity:.55;cursor:not-allowed;}

#submitBtn.btn-change{
  --btn-h: 76px;
  width:100%;
  padding-left:1.5rem;
  padding-right:1.5rem;
}

/* Variante: riga submit alternativa (compat. con form-submit-row) */
.form-submit-row{
  display:grid;
  grid-template-columns:304px 1fr;
  gap:1.2rem;
  align-items:start;
  margin-bottom:1rem;
}
.form-recaptcha{
  margin:0;
  width:304px;
}
.form-submit-row #submitBtn{
  height:76px;
  width:100%;
  font-size:1rem;
  padding:.85rem 1.5rem;
}

/* Hints e feedback */
.form-hint{
  display:block;
  margin-top:.4rem;
  font-size:.82rem;
  color:var(--c-muted);
}
.form-feedback.info{
  background:#eef3fa;
  color:#1b4a8a;
  border:1px solid #c4d5ec;
}

/* Colonna info "Dove siamo" */
.contact-info p,
.contact-info .info-line{
  font-size:1rem;
  color:var(--c-text);
  margin:0 0 .5rem;
}
.contact-info .info-address{
  font-weight:600;
  font-size:1.05rem;
  margin-bottom:.4rem;
}
.contact-info .info-address a{
  color:var(--c-text);
  text-decoration:none;
}
.contact-info .info-address a:hover{color:var(--c-accent);}
.contact-info .info-metro{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  vertical-align:middle;
}
.contact-info .info-metro img{
  width:18px;
  height:18px;
  vertical-align:middle;
}
.contact-info .info-hours{
  color:var(--c-text);
  margin-bottom:1.5rem;
}

/* Mappa */
.gmap{
  width:100%;
  min-height:453px;
  border:0;
  border-radius:0;
  overflow:hidden;
  margin-top:-13px;
}

/* =========================================================
   15. MAP PLACEHOLDER (mappa decorativa per pagine senza JS)
   ========================================================= */
.map-block{
  margin-top:2.5rem;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:2rem;
  text-align:center;
}
.map-block h2{font-size:1.1rem;color:var(--c-text);margin-bottom:.4em;}
.map-frame{
  margin-top:1.2rem;
  background:linear-gradient(135deg,#eef2f6 0%,#dde4ec 100%);
  border-radius:var(--radius);
  height:280px;
  position:relative;
  display:grid;
  place-items:center;
  color:var(--c-muted);
  font-size:.9rem;
  border:1px dashed #c4cdd8;
}
.map-frame::before{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  background:var(--c-accent);
  border-radius:50% 50% 50% 0;
  transform:translateY(-22px) rotate(-45deg);
  box-shadow:0 4px 10px rgba(13,74,83,.3);
}
.map-frame span{margin-top:1.6rem;}

/* =========================================================
   16. PRESS RELEASE (Rassegna Stampa — parallax + ticker)
   ========================================================= */
.press-section{
  position:relative;
  isolation:isolate;
  padding:6rem 0;
  color:#fff;
  background-image:url('../assets/images/pressrelease.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.press-section .press-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
background: linear-gradient(135deg, rgba(1, 31, 67, .85) 0%, rgba(20, 30, 45, .78) 100%);
}
.press-section .press-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

/* Intro a sinistra */
.press-section .press-intro{color:#fff;}
.press-section .press-title{
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
  margin:0 0 1rem;
}
.press-section .press-lead{
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(255,255,255,.92);
  max-width:46ch;
  margin:0;
}

/* Card scura semi-trasparente */
.press-section .press-ticker{
  position:relative;
  background:rgba(1,18,40,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:2.6rem 2.6rem 2.4rem;
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
  min-height:420px;
  overflow:hidden;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.press-section .press-ticker-track{
  position:relative;
  min-height:340px;
}

/* Slide: entrata da destra con fade */
.press-section .press-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:translateX(40px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .55s;
  pointer-events:none;
}
.press-section .press-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear 0s;
  pointer-events:auto;
}

/* Stati speciali (loading/empty/error) */
.press-section .press-slide--loading,
.press-section .press-slide--empty,
.press-section .press-slide--error{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:rgba(255,255,255,.7);
}

/* Testi della slide */
.press-section .press-slide-title{
  font-size:clamp(1.45rem,2vw,1.85rem);
  font-weight:300;
  line-height:1.25;
  color:#fff;
  margin:0 0 1rem;
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.press-section .press-slide-excerpt{
  font-size:1.08rem;
  line-height:1.55;
  color:rgba(255,255,255,.85);
  margin:0 0 1.3rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.press-section .press-slide-date{
  font-size:.88rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#fff;
  margin:0 0 .3rem;
}
.press-section .press-slide-byline{
  font-size:.95rem;
  color:rgba(255,255,255,.65);
  margin:0 0 1.3rem;
}
.press-section .press-slide-actions{margin-top:auto;}

/* Barra di avanzamento */
.press-section .press-progress{
  position:relative;
  margin-top:1.5rem;
  height:3px;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden;
}
.press-section .press-progress-bar{
  display:block;
  height:100%;
  width:0;
  background:rgba(255,255,255,.85);
  border-radius:2px;
  transform-origin:left center;
}
/* Quando la barra ha la classe is-running, anima da 0 a 100% in 6s */
.press-section .press-progress-bar.is-running{
  animation:press-progress 6s linear forwards;
}
/* Pausa l'animazione quando l'utente è sopra la card */
.press-section .press-ticker:hover .press-progress-bar.is-running,
.press-section .press-ticker:focus-within .press-progress-bar.is-running{
  animation-play-state:paused;
}

@keyframes press-progress{
  from{width:0;}
  to{width:100%;}
}

/* Reduced motion: niente animazioni */
@media (prefers-reduced-motion:reduce){
  .press-section .press-slide{
    transition:opacity .2s ease, visibility 0s linear .2s;
    transform:none;
  }
  .press-section .press-slide.is-active{
    transform:none;
    transition:opacity .2s ease, visibility 0s linear 0s;
  }
  .press-section .press-progress-bar.is-running{
    animation:none;
    width:0;
  }
}
/* =========================================================
   17. PUBLISHERS MARQUEE (carosello loghi a scorrimento continuo)
   ========================================================= */
.publishers-section{
  background:var(--c-surface);
  padding:3.5rem 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  overflow:hidden;
}
.publishers-marquee{
  width:100%;
  overflow:hidden;
  position:relative;
}
.publishers-marquee::before,
.publishers-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.publishers-marquee::before{
  left:0;
  background:linear-gradient(90deg,var(--c-surface) 0%,rgba(255,255,255,0) 100%);
}
.publishers-marquee::after{
  right:0;
  background:linear-gradient(-90deg,var(--c-surface) 0%,rgba(255,255,255,0) 100%);
}
.publishers-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:publishers-scroll 32s linear infinite;
  /* niente gap! lo spazio lo dà il padding di .publisher-item */
}
.publishers-marquee:hover .publishers-track{
  animation-play-state:paused;
}
.publisher-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  height:48px;
  padding:0 4rem;
  transition:opacity .2s ease;
}
.publisher-item img{
  height:48px;
  width:auto;
  max-width:none;
  display:block;
  object-fit:contain;
}
.publisher-item:hover{opacity:.7;}

@keyframes publishers-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* =========================================================
   18. ARTICLES (blog index)
   ========================================================= */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  margin-bottom:3rem;
}
.article-card{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition),box-shadow var(--transition);
  display:flex;
  flex-direction:column;
}
.article-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.article-image{
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--c-img-placeholder);
}
.article-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-image-placeholder{
  background:linear-gradient(135deg, rgba(1, 31, 67, .85) 0%, rgba(20, 30, 45, .78) 100%);
  position:relative;
}
.article-image-placeholder::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  background:var(--c-accent);
  opacity:.18;
  border-radius:50%;
}
.article-card-body{
  padding:1.5rem 1.6rem 1.7rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.article-date{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
  font-weight:600;
  margin-bottom:.6rem;
}
.article-title{
  font-size:1.18rem;
  font-weight:700;
  margin:0 0 .6em;
  line-height:1.3;
  letter-spacing:-.005em;
}
.article-title a{
  color:var(--c-text);
  text-decoration:none;
}
.article-title a:hover{color:var(--c-accent-dark);text-decoration:none;}
.article-excerpt{
  font-size:.95rem;
  line-height:1.6;
  color:var(--c-text-soft);
  margin-bottom:1.2rem;
  flex:1;
}
.article-readmore{
  display:inline-block;
  font-size:.9rem;
  font-weight:600;
  color:var(--c-accent);
  text-decoration:none;
  margin-top:auto;
  align-self:flex-start;
}
.article-readmore:hover{color:var(--c-accent-dark);text-decoration:underline;}

.articles-loading,
.articles-empty,
.articles-error{
  text-align:center;
  padding:3rem 1rem;
  color:var(--c-muted);
  font-size:1rem;
  grid-column:1/-1;
}
.articles-error{color:#922a2a;}

.articles-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin-top:4rem;
  flex-wrap:wrap;
}
.articles-page-info{
  font-size:.92rem;
  color:var(--c-muted);
  font-weight:500;
}
.articles-pagination .btn:disabled{opacity:.4;cursor:not-allowed;}

/* =========================================================
   19. ARTICLE (blog detail — articolo singolo)
   ========================================================= */
.article-meta-info{
  font-size:.92rem;
  color:var(--c-muted);
  letter-spacing:.04em;
}
.article-meta-info time{
  font-weight:600;
  color:var(--c-text-soft);
}
.article-meta-info .article-author{font-style:normal;}

.article-detail{
  max-width:80%;
  margin:0 auto;
}
.article-hero-image{
  margin:0 0 2.4rem;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--c-img-placeholder);
}
.article-hero-image img{
  width:100%;
  height:auto;
  display:block;
}

.article-content{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--c-text);
}
.article-content > :first-child{margin-top:0;}
.article-content p{
  margin:0 0 1.2em;
  color:var(--c-text-soft);
}
.article-content h2,
.article-content h3,
.article-content h4{
  margin-top:1.8em;
  margin-bottom:.6em;
  color:var(--c-text);
}
.article-content h2{font-size:1.5rem;}
.article-content h3{font-size:1.22rem;}
.article-content h4{font-size:1.05rem;}
.article-content a{
  color:var(--c-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.article-content a:hover{color:var(--c-accent-dark);}
.article-content img{
  border-radius:var(--radius);
  margin:1.6em 0;
  max-width:100%;
  height:auto;
}
.article-content blockquote{
  border-left:4px solid var(--c-accent);
  background:var(--c-accent-soft);
  padding:1.2rem 1.6rem;
  margin:1.8em 0;
  color:var(--c-text);
  border-radius:0 var(--radius) var(--radius) 0;
}
.article-content blockquote p:last-child{margin-bottom:0;}
.article-content ul,
.article-content ol{
  margin:1em 0 1.4em;
  padding-left:1.5rem;
}
.article-content ul li,
.article-content ol li{
  margin-bottom:.5em;
  color:var(--c-text-soft);
}
.article-content code{
  background:#f0f3f7;
  color:var(--c-accent-dark);
  padding:.15rem .4rem;
  border-radius:3px;
  font-size:.92em;
}
.article-content pre{
  background:#f0f3f7;
  padding:1.2rem;
  border-radius:var(--radius);
  overflow-x:auto;
  margin:1.4em 0;
}
.article-content pre code{
  background:transparent;
  padding:0;
}
.article-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.6em 0;
  font-size:.95rem;
}
.article-content th,
.article-content td{
  padding:.8rem 1rem;
  border-bottom:1px solid var(--c-border);
  text-align:left;
}
.article-content th{
  background:var(--c-accent-soft);
  color:var(--c-accent-dark);
  font-weight:600;
}
.article-content figure{margin:1.6em 0;}
.article-content figure figcaption{
  font-size:.88rem;
  color:var(--c-muted);
  text-align:center;
  margin-top:.5em;
}

.article-loading,
.article-error{
  text-align:center;
  padding:3rem 1rem;
  color:var(--c-muted);
  font-size:1rem;
}
.article-error{color:#922a2a;}
.article-error a{
  color:var(--c-accent);
  text-decoration:underline;
}

.article-nav{
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--c-border);
  text-align:center;
}

.article-head{margin:0 0 2rem}
.article-cats{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;padding:0}
.article-cat{
  font-family:var(--font); font-size:.75rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-accent-dark);
  background:rgba(20,82,177,.08);
  border-radius:4px; padding:.32rem .8rem; line-height:1;
}
.article-head .article-title{margin:0 0 .55rem}
.article-head .article-meta-info{
  margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  color:var(--c-text-soft,#6b7280); font-size:.95rem;
}
.article-head .article-author{font-weight:600;color:var(--c-text)}
.article-meta-sep{opacity:.5}

/* =========================================================
   20. FOOTER
   ========================================================= */
.site-footer{
  flex-shrink:0;
  background:#101a23;
  color:#c8d1dc;
  padding:3.5rem 0 1.5rem;
  font-size:.92rem;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  gap:2rem;
}
.site-footer h3{
  color:#fff;
  font-size:1.3rem;
  margin-bottom:1rem;
  margin-top:0;
  font-weight:400;
}
.site-footer a{color:#c8d1dc;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer ul li{margin-bottom:.45rem;color:#c8d1dc;}
.site-footer p{color:#9aa6b3;margin-bottom:.4em;}

.footer-brand{
  font-weight:700;
  color:#fff;
  font-size:1.05rem;
  margin-bottom:.6em;
  display:block;
}
.footer-logo{
  display:block;
  height:32px;
  width:auto;
  max-width:100%;
  margin-bottom:1rem;
}

/* Footer: intro + QR + descrizione */
.footer-intro-flex{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
}
.footer-intro-flex > p{
  flex:1;
  margin:0;
  color:#9aa6b3;
}
.footer-qr{
  display:block;
  flex-shrink:0;
  border-radius:10px;
  line-height:0;
}
.footer-qr img{
  display:block;
  width:132px;
  height:132px;
  border-radius:10px;
  margin-left:-12px;
}

/* Footer: lista contatti */
.footer-contact-list{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-contact-list li{margin-bottom:.7rem;}
.footer-contact-link{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
  color:#c8d1dc;
  text-decoration:none;
  line-height:1.4;
}
.footer-contact-link:hover,
.footer-contact-link:focus-visible{
  color:#fff;
  text-decoration:none;
}
.footer-contact-link svg{
  flex-shrink:0;
  color:var(--c-accent);
}
.footer-contact-link img{
  width:18px;
  height:18px;
  flex-shrink:0;
  vertical-align:middle;
}
.footer-contact-link span{display:inline;}

/* Social */
.site-footer .social-title{margin-top:1.6rem;}
.social-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.social-list li{margin:0;}
.social-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  color:#fff;
  transition:color var(--transition),transform var(--transition);
}
.social-list a:hover{
  color:var(--c-accent);
  text-decoration:none;
  transform:translateY(-2px);
}
.social-list svg{display:block;}

/* Footer bottom (copyright + link minori) */
.footer-bottom{
  margin-top:2.5rem;
  padding-top:1.4rem;
  border-top:1px solid #25313d;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  font-size:.82rem;
  color:#7e8a98;
}
.footer-bottom a{color:#9aa6b3;}
.footer-bottom > span:last-child > a{margin:0 .6rem;}
.footer-bottom > span:last-child > span{color:#5a6776;}
.footer-bottom .admin-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:.7rem;
  padding:.25rem;
  color:#5a6776;
  opacity:.55;
  border-radius:4px;
  transition:opacity var(--transition),color var(--transition);
  vertical-align:middle;
  text-decoration:none;
}
.footer-bottom .admin-link:hover,
.footer-bottom .admin-link:focus-visible{
  opacity:1;
  color:#c8d1dc;
  text-decoration:none;
}
.footer-bottom .admin-link svg{display:block;}




/* =========================================================
   21. WHATSAPP BUTTON (floating)
   ========================================================= */
.whatsapp-btn{
  position:fixed;
  bottom:100px;
  right:24px;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.2rem .85rem 1rem;
  background:#25d366;
  color:#fff;
  font-family:var(--font);
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border-radius:50px;
  box-shadow:0 6px 20px rgba(37,211,102,.35),0 2px 6px rgba(0,0,0,.12);
  z-index:200;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition);
}
.whatsapp-btn:hover{
  background:#1ebe5a;
  color:#fff;
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,211,102,.45),0 3px 10px rgba(0,0,0,.15);
}
.whatsapp-btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
.whatsapp-btn svg{
  display:block;
  flex-shrink:0;
}
.whatsapp-label{
  line-height:1;
  white-space:nowrap;
}

.metro-info{
  margin-top:1.4rem;
  padding-top:1.4rem;
  border-top:1px solid var(--c-border);
}
.metro-info-title{
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--c-text);
  margin:0 0 1rem;
}
.metro-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem 1.4rem;
}
.metro-list li{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0;
  padding:0;
  color:var(--c-text);
}
.metro-lines{
  display:inline-flex;
  gap:.25rem;
  flex-shrink:0;
}
.metro-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:10%;
  background:#888;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  font-family:Arial,sans-serif;
  letter-spacing:0;
  line-height:1;
}
.metro-m1{background:#d4202d;}
.metro-m2{background:#016936;}
.metro-m3{background:#ffd400;color:#1f2933;}
.metro-m4{background:#0078b4;}
.metro-m5{background:#9b6db7;}

.metro-stop{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.metro-stop strong{
  font-weight:600;
  font-size:.97rem;
  color:var(--c-text);
}
.metro-distance{
  font-size:.82rem;
  color:#222222;
}

/* =========================================================
   22. ACCESSIBILITY (prefers-reduced-motion)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .parallax-section{background-attachment:scroll;}
  .press-section{background-attachment:scroll;}
  .whatsapp-btn{transition:none;}
  .whatsapp-btn:hover{transform:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  html{scroll-behavior:auto;}
}



/* =========================================================
   23. RESPONSIVE
   ========================================================= */

/* ---------- Tablet/Mobile: <= 960px ---------- */
/* =========================================================
   23. RESPONSIVE
   ========================================================= */

/* ----------------------------
   Desktop largo > 1180px
   ---------------------------- */
@media (min-width:1181px){
  .container{
    max-width:var(--maxw);
    padding:0 1.5rem;
  }

  .site-header > .container,
  .site-footer > .container{
    max-width:var(--maxw);
  }
}

/* ----------------------------
   Fino a 960px (tablet / mobile)
   ---------------------------- */
@media (max-width:960px){
  /* Layout generali */
  body{font-size:16px;}
  section{padding:3.2rem 0;}
  .cta-strip{padding:3rem 0;}
  .parallax-section{padding:5rem 0;}
  .contact-section{padding:4rem 0;}
  .press-section{padding:4.5rem 0;}
  .publishers-section{padding:3rem 0;}
  .container{
    padding:0 1.2rem;
  }
  .site-header > .container,
  .site-footer > .container{
    max-width:100%;
    padding:0 1.2rem;
  }
  .site-footer > .container p{
    padding-right:0;
  }
  /* Header / Nav */
  .site-header{
    position:sticky;
    top:0;
    z-index:100;
  }
  .site-header-inner{
    padding:.75rem 0;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
  }
  .main-nav{
    margin-left:0;
    position:absolute;
    inset:100% 0 auto 0;
    background:#fff;
    border-top:1px solid var(--c-border);
    box-shadow:0 10px 30px rgba(15,23,42,.10);
    transform-origin:top center;
    transform:scaleY(0.96);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
  }
  .main-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:scaleY(1);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s;
  }
  .main-nav ul{
    flex-direction:column;
    align-items:flex-start;
    padding:.35rem 0 .8rem;
  }
  .main-nav li{
    width:100%;
  }
  .main-nav a{
    display:block;
    width:100%;
    padding:.65rem 1.1rem;
    border-radius:0;
  }
  .main-nav .nav-cta{
    margin:0.75rem 1.1rem 0.2rem;
    width:calc(100% - 2.2rem);
    text-align:center;
  }
  /* Dropdown in mobile: caret a destra, sottomenu sotto */
  .main-nav .has-dropdown{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .main-nav .has-dropdown > a{
    flex:1 1 auto;
    order:1;
    width:auto;
  }
  .main-nav .dropdown-caret{
    display:inline-flex;
    order:2;
    flex-shrink:0;
    margin-left:auto;
    padding:.8rem 1rem;
  }
  .main-nav .has-dropdown > .dropdown-menu{
    order:3;
    flex-basis:100%;
    position:static;
    box-shadow:none;
    border-radius:0;
    border:0;
    padding:.1rem 0 .5rem;
    margin:0 0 .4rem;
    min-width:0;
  }
  .main-nav .dropdown-menu a{
    padding:.4rem 1.1rem;
  }
  .main-nav .has-dropdown::after{
    display:none;
  }
  /* Hero */
  .hero{
    padding:3.8rem 0 3.4rem;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:2.3rem;
  }
  .hero-card{
    padding:1.6rem 1.4rem;
  }
  /* Intro grid */
  .intro-grid{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  /* Team / services / articles / contact */
  .team-grid{
    grid-template-columns:1fr;
  }
  .service-meta{
    grid-template-columns:1fr;
  }
  .articles-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .contact-grid{
    grid-template-columns:1fr;
    gap:2.4rem;
  }
  /* Footer */
  .footer-grid{
    grid-template-columns:1.1fr 1fr;
    row-gap:2.4rem;
  }
  /* Press section */
  .press-section .press-grid{
    grid-template-columns:1fr;
    gap:2.8rem;
  }
  .press-section .press-intro{
    max-width:44ch;
  }
  /* Publishers */
  .publisher-item{
    padding:0 2.5rem;
  }
  /* EDITIONS / PUBBLICAZIONI */
  .editions-section{
    padding:4.5rem 0;
    background-attachment:scroll;
  }
  .editions-section .editions-ticker{
    min-height:0 !important;
  }
  .editions-section .editions-ticker-track{
    position:static !important;
    min-height:0 !important;
    overflow:visible;
  }
  .editions-section .edition-slide{
    position:static !important;
    inset:auto !important;
    display:none !important;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1.2rem;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    transition:none !important;
    pointer-events:none;
    width:100%;
  }
  .editions-section .edition-slide.is-active{
    display:flex !important;
    pointer-events:auto;
  }
  .editions-section .edition-cover{
    width:160px;
    margin:0 auto;
  }
  .editions-section .edition-body{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.6rem;
    text-align:center;
  }
  .editions-section .editions-progress{
    margin-top:1rem;
  }
}

/* ----------------------------
   Fino a 720px (mobile)
   ---------------------------- */
@media (max-width:720px){

  body{font-size:15.5px;}
  section{padding:2.8rem 0;}
  .cta-strip{padding:2.6rem 0;}
  .parallax-section{padding:4.2rem 0;}
  .press-section{padding:3.8rem 0;}
  .publishers-section{padding:2.6rem 0;}
  .contact-section{padding:3.4rem 0;}

  .container{
    padding:0 1rem;
  }
  .site-header > .container,
  .site-footer > .container{
    padding:0 1rem;
  }

  .hero-grid{
    gap:2rem;
  }
  .hero-card{
    padding:1.4rem 1.3rem;
  }

  .grid-3{
    grid-template-columns:1fr;
  }
  .articles-grid{
    grid-template-columns:1fr;
  }
  .plus-list{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .page-head{
    padding:2.6rem 0 2rem;
  }

  .contact-title{
    font-size:1.65rem;
  }

  .form-row.two,
  .form-row.three{
    grid-template-columns:1fr;
  }
  .form-row-submit{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .form-submit-row{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .g-recaptcha,
  .form-recaptcha{
    width:100%;
  }

  .map-block{
    padding:1.6rem;
  }

  .press-section .press-title{
    font-size:clamp(1.7rem,4vw,2.1rem);
  }

  /* EDITIONS / PUBBLICAZIONI */
  .editions-section{
    padding:3.5rem 0;
  }
  .editions-section .edition-cover{
    width:130px;
  }
  .editions-section .edition-meta-label{
    display:block;
    min-width:0;
    margin-bottom:.15rem;
  }
}

/* ----------------------------
   Fino a 640px (mobile piccolo)
   ---------------------------- */
@media (max-width:640px){

  h1{
    font-size:clamp(1.7rem,5vw,2.2rem);
  }
  h2{
    font-size:clamp(1.28rem,3.8vw,1.6rem);
  }

  .hero{
    padding:3.2rem 0 3.1rem;
  }
  .hero .lead{
    font-size:1.02rem;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{
    width:100%;
    text-align:center;
  }

  .cta-strip .cta-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .cta-strip .btn{
    width:100%;
    text-align:center;
  }

  .team-card,
  .service-block,
  .intro-services,
  .card{
    padding:1.6rem 1.4rem;
  }

  .articles-grid{
    gap:1.6rem;
  }

.article-card-body{padding:1.3rem 1.3rem 1.5rem;}

  .site-footer{
    padding:3rem 0 1.4rem;
  }
}

/* ----------------------------
   Fino a 380px (very small)
   ---------------------------- */
@media (max-width:380px){

  body{font-size:15px;}

  .hero{
    padding:2.8rem 0 2.7rem;
  }
  .hero-card{
    padding:1.2rem 1.1rem;
  }

  .contact-title{
    font-size:1.5rem;
  }

  .btn,
  .form-submit-row #submitBtn,
  .btn-submit{
    font-size:.9rem;
    padding:.8rem 1.1rem;
  }

  .publisher-item{
    padding:0 1.6rem;
  }
}



/* =========================================================
   XX. EDITIONS / PUBBLICAZIONI
   ---------------------------------------------------------
   Sezione parallax con due colonne:
     - Sinistra: titolo + descrizione introduttiva
     - Destra: slide rotanti (copertina libro + dettagli)
       senza card-box, integrate sullo sfondo

   Markup:  modules/editions.php
   Logica:  js/utils/editionsSlider.js
   Dati:    data/editions.json
   ========================================================= */

.editions-section{
  position:relative;
  isolation:isolate;
  padding:6rem 0;
  color:#fff;
  background-image:url('../assets/images/books.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.editions-section .editions-overlay{
  position:absolute;
  inset:0;
  z-index:-1;
background: linear-gradient(135deg, rgba(1, 31, 67, .85) 0%, rgba(20, 30, 45, .78) 100%);
}
.editions-section .container{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

@media(min-width:961px){
  .editions-section .container{
    flex-direction:row;
    align-items:center;
    gap:3.5rem;
  }
  .editions-section .editions-intro{
    flex:1;
  }
  .editions-section .editions-ticker{
    flex:1.15;
  }
}

/* Intro sopra */
.editions-section .editions-intro{color:#fff;}
.editions-section .editions-title{
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
  margin:0 0 1rem;
}
.editions-section .editions-lead{
  font-size:1.05rem;
  line-height:1.65;
  color:rgba(255,255,255,.92);
  max-width:46ch;
  margin:0;
}

/* Ticker container — niente card, solo area che contiene le slide */
.editions-section .editions-ticker{
  position:relative;
  min-height:380px;
}
.editions-section .editions-ticker-track{
  position:relative;
  min-height:340px;
}

/* Slide: layout 2 colonne (copertina + body), con effetto slide-in da destra */
.editions-section .edition-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  align-items:center;
  min-width:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(40px);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .55s;
  pointer-events:none;
}
.editions-section .edition-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear 0s;
  pointer-events:auto;
}

/* Stati speciali */
.editions-section .edition-slide--loading,
.editions-section .edition-slide--empty,
.editions-section .edition-slide--error{
  position:static;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:rgba(255,255,255,.75);
}

/* Copertina libro */
.editions-section .edition-cover{
  flex-shrink:0;
  width:180px;
  border-radius:6px;
  overflow:hidden;
  box-shadow:
    0 18px 38px rgba(0,0,0,.4),
    0 4px 10px rgba(0,0,0,.25);
}
.editions-section .edition-cover img{
  width:100%;
  height:auto;
  display:block;
}

/* Body slide (dettagli a destra della copertina) */
.editions-section .edition-body{
  min-width:0; /* permette il text-wrap dentro la grid */
  overflow-wrap:anywhere;
}
.editions-section .edition-year{
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.75);
  margin:0 0 .4rem;
}
.editions-section .edition-title{
  font-size:clamp(2rem,4vw,2rem);
  font-weight:300;
  line-height:1.25;
  color:#fff;
  margin:0 0 .7rem;
  letter-spacing:-.01em;
}
.editions-section .edition-subtitle{
  font-size:1rem;
  line-height:1.55;
  color:rgba(255,255,255,.85);
  margin:0 0 1.2rem;
}
.editions-section .edition-authors,
.editions-section .edition-publisher{
  font-size:.92rem;
  color:rgba(255,255,255,.85);
  margin:0 0 .3rem;
  line-height:1.5;
}
.editions-section .edition-meta-label{
  display:inline-block;
  min-width:5.5em;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:rgba(255,255,255,.55);
}
.editions-section .edition-actions{
  margin-top:1.4rem;
}

/* Barra di avanzamento */
.editions-section .editions-progress{
  position:relative;
  margin-top:1.5rem;
  height:3px;
  background:rgba(255,255,255,.12);
  border-radius:2px;
  overflow:hidden;
}
.editions-section .editions-progress-bar{
  display:block;
  height:100%;
  width:0;
  background:rgba(255,255,255,.85);
  border-radius:2px;
  transform-origin:left center;
}
.editions-section .editions-progress-bar.is-running{
  animation:editions-progress 8s linear forwards;
}
/* Pausa quando si è in hover sul ticker */
.editions-section .editions-ticker:hover .editions-progress-bar.is-running,
.editions-section .editions-ticker:focus-within .editions-progress-bar.is-running{
  animation-play-state:paused;
}

@keyframes editions-progress{
  from{width:0;}
  to{width:100%;}
}
/* =========================================================
   X. CLS PREVENTION — riserve di spazio per sezioni dinamiche
   ---------------------------------------------------------
   Valori calibrati su 3 breakpoint (desktop / tablet / mobile)
   per coprire le altezze reali delle sezioni che caricano
   contenuto via JS.
   ========================================================= */

/* DESKTOP (default, > 960px) */
.partners-list{
  min-height:2500px;
  contain:layout;
}
.team-members-grid{
  min-height:780px;
  contain:layout;
}
.services-grid{
  min-height:1120px;
  contain:layout;
}
.press-section .press-ticker{
  min-height:420px;
}
.editions-section .editions-ticker{
  min-height:420px;
}

/* Reset quando il JS popola la sezione */
.partners-list.is-loaded,
.team-members-grid.is-loaded,
.services-grid.is-loaded,
.press-section .press-ticker.is-loaded,
.editions-section .editions-ticker.is-loaded{
  min-height:0;
}

@media (max-width:960px){
  .partners-list{
    min-height:4100px;
  }
  .team-members-grid{
    min-height:1250px;
  }
  .services-grid{
    min-height:3900px;
  }
  .editions-section .editions-ticker{
    min-height:0 !important;
  }
}

@media (max-width:640px){
  .whatsapp-btn{
    bottom:80px;
    right:12px;
    padding:.7rem .9rem .7rem .8rem;
    font-size:.85rem;
  }
  .whatsapp-label{
    display:none;   /* su mobile mostra solo l'icona */
  }
  .whatsapp-btn svg{
    width:24px;
    height:24px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .partners-list,
  .team-members-grid,
  .services-grid{
    contain:none;
  }
}

/* ============================================================
   FILE INTEGRATI: team.css, services.css, partners.css
   Concatenati nello style.css principale per ridurre HTTP
   requests e migliorare LCP. Modifiche dirette su queste sezioni
   vanno fatte qui (i file separati possono essere eliminati).
   ============================================================ */


/* =========================================================
   8. TEAM / PROFESSIONISTI
   ---------------------------------------------------------
   Sezione griglia professionisti con filtri categoria.
   Markup:  modules/team.php
   Logica:  js/utils/teamGrid.js
   Dati:    data/team.json

   Naming:  .team-members-*  (per non confliggere con eventuali
            .team-grid/.team-card usati altrove)

   Layout:
   - usa il .container globale (padding 0 15%, vedi sez. 2)
   - aspect-ratio card 2:1 (immagini originali 1024×512)
   - 3 colonne ≥960px · 2 colonne ≥720px · 1 colonna <720px
   ========================================================= */

.team-members{
  background:var(--c-bg);
}

/* -- Heading -- */
.team-members-heading{
  text-align:center;
  margin-bottom:3rem;
}

/* Eyebrow "Professionisti" nascosto: allineiamo graficamente
   il titolo alla sezione Servizi, che non ne ha uno. */
.team-members-heading .eyebrow{
  display:none;
}

.team-members-title{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  color:var(--c-text);
  margin:0 0 .75rem;
  letter-spacing:.5px;
}

.team-members-subtitle{
  font-family:var(--font);
  font-weight:400;
  font-size:1rem;
  color:var(--c-text-soft);
  max-width:64ch;
  margin:0 auto 1.4rem;
  line-height:1.6;
}

/* -- Barra filtri -- */
.team-members-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:2.5rem;
}

/* Filtro team allineato ai filtri blog: i bottoni usano il sistema
   btn/btn-dark/btn-change/btn-sm (idle pieno scuro, hover #3399ff con
   animazione a due span, radius/sizing identici). Qui resta solo lo stato
   attivo (blu brand --c-accent, come .blog-filter.is-active). */
.team-members-filter-btn{
  cursor:pointer;
}

.team-members-filter-btn.is-active{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:#fff;
}
.team-members-filter-btn.is-active:hover{
  background:var(--c-accent);
  border-color:var(--c-accent);
}

/* -- Griglia -- */
.team-members-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}

/* -- Skeleton (mostrato prima del fetch) -- */
.team-members-skeleton{
  aspect-ratio:2/1;
  border-radius:var(--radius-lg);
  background:linear-gradient(
    90deg,
    var(--c-border) 0%,
    var(--c-surface) 50%,
    var(--c-border) 100%
  );
  background-size:200% 100%;
  animation:team-members-shimmer 1.4s infinite linear;
}

@keyframes team-members-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* -- Card -- */
.team-members-card{
  opacity:0;
  transform:translateY(12px);
  animation:team-members-card-in .5s ease forwards;
  animation-delay:calc(var(--card-index, 0) * 60ms);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.team-members-card.is-hidden{
  opacity:0;
  transform:scale(.92);
  pointer-events:none;
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  margin:0;
  padding:0;
}

@keyframes team-members-card-in{
  to{opacity:1; transform:translateY(0);}
}

.team-members-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:var(--radius-lg);
  overflow:hidden;
  outline-offset:4px;
}

.team-members-card-link:focus-visible{
  outline:2px solid var(--c-accent);
}

/* -- Immagine + overlay --
   Le regole di foto/overlay/badge/logo persistente sono ora nel componente
   condiviso ".cp-media-*" (vedi sezione dedicata dopo il blocco Team),
   usato identico anche da .partner-image nella sezione Partners. */
.team-members-card-image{
  position:relative;
  aspect-ratio:2/1;
  overflow:hidden;
  background:#cbcbcb;
  border-radius:var(--radius-lg);
}

/* -- Empty state -- */
.team-members-empty{
  text-align:center;
  color:var(--c-muted);
  padding:2.5rem 0;
  grid-column:1/-1;
}

/* -- Responsive -- */

/* ≤960px: 2 colonne */
@media (max-width:960px){
  .team-members-grid{grid-template-columns:repeat(2, 1fr); gap:1.2rem;}
  .team-members-heading{margin-bottom:2.2rem;}
}

/* ≤720px: 1 colonna */
@media (max-width:720px){
  .team-members-filter{gap:.4rem; margin-bottom:2rem;}
  .team-members-grid{grid-template-columns:1fr; gap:1rem;}
}

/* Touch/reduced-motion: vedi regole condivise ".cp-media-*" più sotto —
   coprono sia .team-members-card-link che .partner-image in un unico posto. */
@media (prefers-reduced-motion:reduce){
  .team-members-card{animation:none; opacity:1; transform:none;}
  .team-members-skeleton{animation:none;}
}
/* =========================================================
   8.1 COMPONENTE CONDIVISO — media con badge hover + logo persistente
   ---------------------------------------------------------
   Usato da:
   - .team-members-card-link > .team-members-card-image (Team)
   - .partner-image > a                                  (Partners)
   Struttura DOM (uguale in entrambi, generata da teamGrid.js / partnersGrid.js):
     <contenitore posizionato: .team-members-card-image | .partner-image a>
       <img class="cp-media-photo">                     Layer 1 — foto, zoom in hover
       <span class="cp-media-overlay">                  Layer 2 — gradiente + badge, in hover
         <span class="cp-media-badge">
           <span class="cp-media-badge-row">
             <img class="cp-media-badge-icon">              badge.svg, prima del nome
             <span class="cp-media-badge-name">Nome</span>
           </span>
           <span class="cp-media-badge-role">Ruolo</span>
         </span>
       </span>
       <span class="cp-media-brand">                    Layer 3 — logo persistente, MAI in zoom
         <span class="cp-media-brand-logo-box">
           <img class="cp-media-brand-logo">                logo-footer.svg
         </span>
       </span>
   ========================================================= */

/* Layer 1 — foto */
.cp-media-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

.team-members-card-link:hover .cp-media-photo,
.team-members-card-link:focus-visible .cp-media-photo,
.partner-image a:hover .cp-media-photo,
.partner-image a:focus-visible .cp-media-photo{
  transform:scale(1.06);
}

/* Layer 2 — overlay scuro in hover, con badge (icona + nome + ruolo) */
.cp-media-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(
    180deg,
    rgba(1,31,67,0) 0%,
    rgba(1,31,67,.55) 60%,
    rgba(1,31,67,.92) 100%
  );
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  padding:1.2rem;
}

.team-members-card-link:hover .cp-media-overlay,
.team-members-card-link:focus-visible .cp-media-overlay,
.partner-image a:hover .cp-media-overlay,
.partner-image a:focus-visible .cp-media-overlay{
  opacity:1;
}

.cp-media-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transform:translateY(8px);
  transition:transform .35s ease;
}

.team-members-card-link:hover .cp-media-badge,
.team-members-card-link:focus-visible .cp-media-badge,
.partner-image a:hover .cp-media-badge,
.partner-image a:focus-visible .cp-media-badge{
  transform:translateY(0);
}

.cp-media-badge-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:0 0 .35rem;
}

.cp-media-badge-icon{
  height:1.2rem;
  width:auto;
  display:block;
  /* badge.svg sorgente è grigio (#58595B): forziamo il bianco via filtro */
  filter:brightness(0) invert(1);
}

.cp-media-badge-name{
  font-family:var(--font);
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.3px;
  color:#fff;
}

.cp-media-badge-role{
  font-family:var(--font);
  font-weight:500;
  font-size:.9rem;
  opacity:.9;
  color:#fff;
}

/* CTA "Vai al profilo" nel badge (solo Team — i partner hanno il bottone
   Profilo separato sotto la foto, non nell'overlay).
   pointer-events:auto perché l'overlay (decorativo) ha pointer-events:none:
   senza riattivarlo qui il bottone non riceve mai il proprio :hover e
   l'animazione a slide di .btn-change non parte mai. */
.cp-media-badge > .btn{
  align-self:center;
  margin:.7rem auto 0;
  pointer-events:auto;
}

/* Layer 3 — logo persistente (logo-footer.svg), triangolo in basso a sx, MAI scalato.
   ::before = solo sfondo scuro, clippato a triangolo.
   .cp-media-brand-logo-box = box a dimensione fissa nell'angolo "pieno" del
   triangolo; il logo dentro usa object-fit:contain, quindi si adatta sempre
   dentro il box (qualunque sia il suo formato reale) e non sconfina mai. */
.cp-media-brand{
  position:absolute;
  bottom:0;
  left:0;
  width:58%;
  height:52%;
  z-index:3;
  pointer-events:none;
}

.cp-media-brand::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(1,20,41,.82);
  clip-path:polygon(0 100%, 100% 100%, 0 38%);
  -webkit-clip-path:polygon(0 100%, 100% 100%, 0 38%);
}

.cp-media-brand-logo-box{
  position:absolute;
  left:8%;
  bottom:14%;
  width:40%;
  height:46%;
}

.cp-media-brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left bottom;
  display:block;
  transform:none;
  transition:none;
}

/* Touch device: overlay/badge sempre parzialmente visibile (no hover affidabile) */
@media (hover:none){
  .cp-media-overlay{
    opacity:1;
    background:linear-gradient(
      180deg,
      rgba(1,31,67,0) 40%,
      rgba(1,31,67,.85) 100%
    );
  }
  .cp-media-badge{transform:translateY(0);}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .team-members-card-link:hover .cp-media-photo,
  .team-members-card-link:focus-visible .cp-media-photo,
  .partner-image a:hover .cp-media-photo,
  .partner-image a:focus-visible .cp-media-photo{transform:none;}
}

/* Responsive: badge in rem, non segue da solo il ridimensionamento della card */
@media (max-width:960px){
  .cp-media-badge-name{font-size:1rem;}
  .cp-media-badge-role{font-size:.8rem;}
  .cp-media-badge-icon{height:1.05rem;}
}

@media (max-width:720px){
  .cp-media-badge-name{font-size:.92rem;}
  .cp-media-badge-role{font-size:.74rem;}
  .cp-media-badge-icon{height:.95rem;}
  .cp-media-badge-row{gap:.4rem;}
  .cp-media-overlay{padding:.9rem;}
}
/* =========================================================
   9. SERVICES / SERVIZI
   ---------------------------------------------------------
   Griglia servizi: immagine 16:9 + titolo + descrizione + CTA.
   Layout verticale, 4 colonne ≥1200px, 3 ≥960px, 2 ≥640px, 1 <640px.
   Effetto zoom su immagine in hover (coerente con team).

   Overlay sulla foto: gradiente + badge (icona badge.svg + nome
   servizio) SEMPRE visibile, non in hover — a differenza del
   componente condiviso Team/Partners (.cp-media-overlay), qui non
   c'è un layer logo persistente e il nome è già ridondante col
   titolo sotto la foto, quindi l'overlay è aria-hidden.
   Markup generato da servicesGrid.js: .service-card-overlay >
   .service-card-badge > .service-card-badge-icon + -badge-name.

   Markup:  modules/services.php
   Logica:  js/utils/servicesGrid.js
   Dati:    data/services.json

   NOTA: questo blocco SOSTITUISCE la vecchia sezione 9
   (.service-block, .service-tag, .service-meta) che usava
   un layout a card singole orizzontali.
   ========================================================= */

.services-section{
  background:var(--c-bg);
}

/* -- Heading -- */
.services-heading{
  text-align:center;
  margin-bottom:3rem;
}
.services-title{
  font-family:var(--font);
  font-weight:400;
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  color:var(--c-text);
  margin:0 0 .75rem;
  letter-spacing:.5px;
}
.services-subtitle{
  font-family:var(--font);
  font-weight:400;
  font-size:1rem;
  color:var(--c-text-soft);
  max-width:64ch;
  margin:0 auto 1.4rem;
  line-height:1.6;
}
.services-cta{
  display:flex;
  justify-content:center;
}

/* -- Griglia -- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
}

/* -- Skeleton (mostrato prima del fetch) -- */
.services-skeleton{
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  background:linear-gradient(
    90deg,
    var(--c-border) 0%,
    var(--c-surface) 50%,
    var(--c-border) 100%
  );
  background-size:200% 100%;
  animation:services-skeleton-shimmer 1.4s infinite linear;
}
@keyframes services-skeleton-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* -- Card -- */
.service-card{
  background:var(--c-surface);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(12px);
  animation:service-card-in .5s ease forwards;
  animation-delay:calc(var(--card-index, 0) * 60ms);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
@keyframes service-card-in{
  to{opacity:1; transform:translateY(0);}
}

/* -- Immagine -- */
.service-card-image{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--c-img-placeholder);
  text-decoration:none;
}
.service-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-card-image img,
.service-card:focus-within .service-card-image img,
.service-card-image:hover img{
  transform:scale(1.06);
}

/* -- Overlay + badge (icona + nome), sempre visibile -- */
.service-card-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(
    180deg,
    rgba(1,31,67,0) 0%,
    rgba(1,31,67,.55) 60%,
    rgba(1,31,67,.92) 100%
  );
  pointer-events:none;
  padding:1.2rem;
}

.service-card-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  max-width:100%;
  text-align:center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}

.service-card:hover .service-card-badge,
.service-card:focus-within .service-card-badge,
.service-card-image:hover .service-card-badge{
  transform:scale(1.06);
}

.service-card-overlay .service-card-badge-icon{
  width:1.1rem;
  height:1.1rem;
  flex-shrink:0;
  display:block;
  object-fit:contain;
  /* badge.svg sorgente è grigio (#58595B): forziamo il bianco, come in .cp-media-badge-icon */
  filter:brightness(0) invert(1);
}

.service-card-badge-name{
  font-family:var(--font);
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:.3px;
  color:#fff;
}

@media (max-width:960px){
  .service-card-badge-name{font-size:.95rem;}
  .service-card-overlay .service-card-badge-icon{width:1rem;height:1rem;}
}

@media (max-width:720px){
  .service-card-badge-name{font-size:.88rem;}
  .service-card-overlay .service-card-badge-icon{width:.9rem;height:.9rem;}
  .service-card-badge{gap:.4rem;}
  .service-card-overlay{padding:.9rem;}
}

/* -- Body -- */
.service-card-body{
  padding:1.4rem 1.4rem 1.6rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.service-card-title{
  font-family:var(--font);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.3;
  color:#000;
  margin:.8rem 0 .7rem;
  letter-spacing:-.005em;
}
.service-card-title a{
  color:#000;
  text-decoration:none;
  transition:color var(--transition);
}
.service-card-title a:hover{
  color:var(--c-accent-dark);
  text-decoration:none;
}
.service-card-text{
  font-size:.95rem;
  line-height:1.55;
  color:var(--c-text-soft);
  margin:0 0 1.2rem;
  flex:1;
  /* limita a 4 righe per uniformare l'altezza delle card */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.service-card-actions{
  margin-top:auto;
  align-self:flex-start;
}

/* -- Empty state -- */
.services-empty{
  text-align:center;
  color:var(--c-muted);
  padding:2.5rem 0;
  grid-column:1/-1;
}

/* ============================================================
   24. HERO SLIDER
   ============================================================ */
section.hero-slider{
  position:relative;
  display:block;
  width:100%;
  height:75vh;
  min-height:75vh;
  margin:0;
  padding:0;
  overflow:hidden;
  line-height:0;
  font-size:0;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
}
section.hero-slider,
section.hero-slider *{
  cursor:default;
}
section.hero-slider a,
section.hero-slider button,
section.hero-slider .hero-arrow{
  cursor:pointer;
}
section.hero-slider img{
  -webkit-user-drag:none;
}
.hero-track{
  display:flex;
  width:100%;
  height:100%;
  will-change:transform;
  transform:translate3d(0,0,0);
  font-size:1rem;
}
.hero-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}
.hero-slide-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  display:block;
  margin:0;
  pointer-events:none;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.45) 100%);
  z-index:1;
  pointer-events:none;
}
.hero-caption{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:0 5%;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  line-height:1.4;
}
.hero-logo{
  display:block;
  margin:0 auto 1.25rem;
  width:auto;
  height:60px;
  max-width:300px;
  pointer-events:none;
}
/* Fonte di verità per il font-size del testo in sovraimpressione dello slider
   (usato sia da slider.php/multislide che da single-slide.php).
   Se un critical CSS di pagina (es. home-critical.css) definisce una propria
   regola .hero-slider .hero-title/.hero-subtitle per il render iniziale,
   il valore DEVE combaciare con quello qui sotto — altrimenti multislide e
   single-slide mostrano testi di dimensione diversa. */
.hero-slider .hero-title{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1.75rem, 4.5vw, 3rem);
  line-height:1.15;
  margin:0 0 .75rem;
  color:#fff;
  text-transform:none;
  letter-spacing:normal;
}
.hero-slider .hero-subtitle{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1rem, 1.6vw, 1.125rem);
  line-height:1.4;
  margin:0 0 1.5rem;
  color:#fff;
}
.hero-slider .hero-cta{
  color:#fff;
}

/* Frecce — z-index alto per stare sopra al track */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  color:#fff;
  border:0;
  border-radius:50%;
  cursor:pointer;
  padding:0;
  transition:background-color .2s ease;
}
.hero-arrow:hover{ background:rgba(0,0,0,.6); }
.hero-arrow-prev{ left:24px; }
.hero-arrow-next{ right:24px; }
.hero-arrow svg{ display:block; pointer-events:none; }

/* ===== PROGRESS PIE (conic-gradient) ===== */
.hero-progress{
  position:absolute;
  right:24px;
  bottom:24px;
  width:36px;
  height:36px;
  z-index:10;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  border-radius:50%;
  background:rgba(0,0,0,.35);  /* anello scuro di sfondo per leggibilità */
  padding:4px;
  box-sizing:border-box;
}
.hero-slider.is-ready .hero-progress{ opacity:1; }
.hero-progress-pie{
  width:100%;
  height:100%;
  border-radius:50%;
  /* la torta si riempie da 0 a 360deg via custom property animata */
  --p:0deg;
  background:conic-gradient(#fff var(--p), rgba(255,255,255,.25) var(--p));
  animation:heroProgressPie 5000ms linear forwards;
}
.hero-progress.is-paused .hero-progress-pie{
  animation-play-state:paused;
}
@property --p{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
@keyframes heroProgressPie{
  from{ --p:0deg; }
  to{ --p:360deg; }
}
/* Fallback per browser che non supportano @property (Firefox <128): animazione step alternativa */
@supports not (background: conic-gradient(red 0deg, blue 0deg)){
  .hero-progress-pie{ background:#fff; opacity:.7; }
}

/* ===== MOBILE hero-slider ===== */
@media (max-width:960px){
  section.hero-slider{
    height:calc(100svh - 79px);
    min-height:320px;
    aspect-ratio:unset;
  }
  .hero-track{
    display:block;
    transform:none !important;
  }
  .hero-slide{ display:flex; }
  .hero-slide ~ .hero-slide{ display:none; }
  .hero-arrow{ display:none; }
  .hero-progress{ display:none; }
  .hero-logo{ height:48px; }
  .hero-slider .hero-subtitle{ display:none; }
}
@media (max-width:480px){
  section.hero-slider{
    height:calc(100svh - 79px);
    min-height:280px;
  }
}

/* ============================================================
   25. HEADER FIXED + SHRINK
   ============================================================ */

/* Override del position:sticky che non funziona per via dell'overflow-x:hidden sul body */
header.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:100;
  background:#fff;
  transition:height .3s ease, box-shadow .3s ease;
  will-change:height;
}

/* Stato compatto: shrink ~12% di altezza */
header.site-header.is-shrunk{
  height:70px;
  box-shadow:0 2px 12px rgba(20,30,45,.08);
}

/* Logo: selettori esatti per <img class="brand-logo"> dentro <a class="brand"> */
header.site-header .brand-logo,
header.site-header .brand img{
  transition:transform .3s ease, height .3s ease, width .3s ease;
  transform-origin:left center;
  will-change:transform;
}
header.site-header.is-shrunk .brand-logo,
header.site-header.is-shrunk .brand img{
  transform:scale(0.88);
}

/* Container interno dell'header: shrinkare i padding verticali per allineare il contenuto */
header.site-header > .container{
  height:100%;
  display:flex;
  align-items:center;
  transition:padding .3s ease;
}

/* MOBILE */
@media (max-width:960px){
  header.site-header.is-shrunk{
    height:auto;
  }
  header.site-header.is-shrunk .brand-logo,
  header.site-header.is-shrunk .brand img{
    transform:scale(0.92);  /* shrink più leggero su mobile */
  }
}

/* ≤1200px: 3 colonne */
@media (max-width:1200px){
  .services-grid{grid-template-columns:repeat(3, 1fr);}
}

/* ≤960px: 2 colonne */
@media (max-width:960px){
  .services-grid{grid-template-columns:repeat(2, 1fr); gap:1.2rem;}
  .services-heading{margin-bottom:2.2rem;}
}

/* ≤640px: 1 colonna */
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr; gap:1rem;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .service-card{animation:none; opacity:1; transform:none;}
  .service-card:hover{transform:none;}
  .service-card:hover .service-card-image img{transform:none;}
  .services-skeleton{animation:none;}
}

/* ============================================================
   26. FLAG (bande colorate sotto lo slider)
   ============================================================ */
.flag{
  display:flex;
  flex-direction:row;
  width:100%;
  height:8px;
  margin:0;
  padding:0;
  border-bottom:3px solid #e0e0e0;
  overflow:hidden;
  line-height:0;
  font-size:0;
}
.flag-band{ flex:1 1 0; display:block; height:100%; min-width:0; }

@media(max-width:960px){
  .flag{
    flex-direction:column;
    height:24px;
  }
  .flag-band{ flex:1 1 0; width:100%; height:auto; min-width:0; }
}

/* ============================================================
   27. LANG SWITCHER (frecce, no dropdown)
   ============================================================ */
/* ── Language selector ── */
.lang-selector{
  position:relative;
  display:inline-flex;
  align-items:center;
  align-self:center;
  flex-shrink:0;
  margin-left:0;
}
.lang-selector-toggle{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:.45rem;
  padding:.55rem .9rem;
  background:transparent;
  border:0;
  border-radius:var(--radius);
  cursor:pointer;
  color:var(--c-text);
  font-family:var(--font);
  font-size:.96rem;
  font-weight:500;
  white-space:nowrap;
  transition:color var(--transition),background var(--transition);
  line-height:1.2;
  vertical-align:middle;
}
.lang-selector-toggle:hover{
  color:var(--c-accent);
  background:transparent;
}
.lang-flag{
  width:20px;
  height:20px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lang-flag img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lang-flag svg{
  width:100%;
  height:100%;
  display:block;
}
.lang-name{ color:var(--c-text); }
.lang-sep{
  color:var(--c-muted);
  margin:0 .1rem;
}
.lang-locale{
  color:var(--c-muted);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
}
.lang-caret{
  margin-left:.1rem;
  color:var(--c-muted);
  transition:transform .25s ease;
  line-height:0;
}
.lang-selector.is-open .lang-caret{transform:rotate(180deg);}

.lang-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:180px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:.3rem;
  z-index:200;
  flex-direction:column;
  gap:.1rem;
}
.lang-selector.is-open .lang-dropdown{display:flex;}
.lang-option{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .75rem;
  border-radius:4px;
  text-decoration:none;
  color:var(--c-text);
  font-size:.88rem;
  font-weight:500;
  transition:background var(--transition),padding-left var(--transition);
  white-space:nowrap;
}
.lang-option:hover{
  background:var(--c-accent-soft);
  color:var(--c-accent);
  padding-left:1rem;
  text-decoration:none;
}
.lang-option .lang-locale{
  margin-left:auto;
  font-size:.78rem;
}

/* Mobile */
@media(max-width:960px){
  .lang-selector{margin-left:.25rem;}
  .lang-name{display:none;}
  .lang-sep{display:none;}
  .lang-selector-toggle{
    padding:.45rem .5rem;
    gap:.3rem;
    font-size:.88rem;
  }
  .lang-dropdown{right:0;min-width:160px;}
}
/* =========================================================
   X. INTRO HOME (titolo + descrizione studio + share)
   ---------------------------------------------------------
   Markup: modules/intro-home.php
   ========================================================= */

.intro-home{
  background:var(--c-surface);
  padding:2.5rem 0 3.5rem;
}

.intro-home .breadcrumb{
  font-size:.85rem;
  color:var(--c-muted);
  margin-bottom:1.8rem;
}
.intro-home .breadcrumb ol{
  list-style:none;
  padding:0;
  margin:0;
}
.intro-home .breadcrumb li{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--c-text);
  font-weight:500;
}
.intro-home .breadcrumb li svg{
  flex-shrink:0;
}

.intro-home-heading{
  margin-bottom:1.8rem;
}
.intro-home-title{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  line-height:1.2;
  color:var(--c-text);
  margin:0 0 .35em;
  letter-spacing:-.01em;
}
.intro-home-eyebrow{
  font-family:var(--font);
  font-weight:400;
  font-size:1.2rem;
  color:#666;
  margin:0 0 .15em;
  line-height:1.3;
}
.intro-home-sub{
  font-family:var(--font);
  font-weight:400;
  font-size:1.05rem;
  color:#333;
  margin:0;
  line-height:1.3;
}

.intro-home-body{
  max-width:100%;
  margin:0 0 2rem;
}
.intro-home-body p{
  font-size:1rem;
  line-height:1.75;
  color:var(--c-text-soft);
  text-align:justify;
  margin:0 0 1em;
}
.intro-home-body p:last-child{margin-bottom:0;}
.intro-home-body strong{color:var(--c-text);}

.intro-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:flex-start;
}

/* Bottoni share: lievemente più compatti, icona + testo */
.share-btn{
  --btn-h:2.6rem;
}
.share-btn span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.share-icon{
  flex-shrink:0;
}

/* Responsive */
@media (max-width:720px){
  .intro-home{padding:2rem 0 3rem;}
  .intro-home-eyebrow{font-size:1.1rem;}
  .intro-home-sub{font-size:1rem;}
  .intro-home-body p{text-align:left;}
  .intro-home-actions{gap:.5rem;}
}


/* =========================================================
   X. PARTNERS (4 schede biografiche alternate SX/DX)
   ---------------------------------------------------------
   Markup:  modules/partners.php
   Logica:  js/utils/partnersGrid.js
   Dati:    data/partners.json

   Layout: ogni riga = immagine + bio in due colonne 1:1.
   La 2°, 4°, ... riga ha .is-reversed → ordine invertito.
   ========================================================= */

/* =========================================================
   PARTNERS — versione aggiornata
   ---------------------------------------------------------
   CAMBIAMENTI rispetto alla versione precedente:
   1. Layout fisso: immagine sempre a SX, testo sempre a DX
      (rimosse le regole .is-reversed)
   2. align-items:center → testo centrato verticalmente
   3. Aggiunto blocco .partner-awards (loghi premi)
   4. Tutti i bottoni della partner-actions condividono
      la classe .share-btn (stessa altezza --btn-h: 2.6rem)

   SOSTITUISCE l'intera sezione PARTNERS del tuo style.css
   ========================================================= */

.partners-section{
  background:var(--c-bg);
  padding:5rem 0;
}

.partners-heading{
  text-align:center;
  margin-bottom:3rem;
}
.partners-title{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  color:var(--c-text);
  margin:0 0 .75rem;
  letter-spacing:.5px;
}
.partners-subtitle{
  font-family:var(--font);
  font-weight:400;
  font-size:1rem;
  color:var(--c-text-soft);
  max-width:64ch;
  margin:0 auto;
  line-height:1.6;
}

.partners-list{
  display:flex;
  flex-direction:column;
  gap:4rem;
}

.partner-skeleton{
  height:380px;
  border-radius:var(--radius-lg);
  background:linear-gradient(
    90deg,
    var(--c-border) 0%,
    var(--c-surface) 50%,
    var(--c-border) 100%
  );
  background-size:200% 100%;
  animation:partner-shimmer 1.4s infinite linear;
}
@keyframes partner-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* Riga partner: layout FISSO immagine SX, testo DX, allineati al centro verticale */
.partner-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}

/* Immagine partner: aspect 2:1 (formato originale 1024×512) */
.partner-image{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--c-img-placeholder);
  aspect-ratio:2/1;
}
.partner-image a{
  display:block;
  position:relative;
  width:100%;
  height:100%;
}
/* Foto/overlay/badge/logo: vedi componente condiviso ".cp-media-*"
   nella sezione Team (8.1) — identico qui, nessuna regola da ripetere. */

/* Body partner */
.partner-body{
  display:flex;
  flex-direction:column;
}
.partner-name{
  font-family:var(--font);
  font-weight:300;
  font-size:clamp(1.5rem,2.3vw,1.95rem);
  color:var(--c-text);
  margin:0 0 .25em;
  letter-spacing:-.01em;
  line-height:1.2;
}
.partner-role{
  font-family:var(--font);
  font-weight:500;
  font-size:1.02rem;
  color:var(--c-text);
  margin:0 0 1.2rem;
  line-height:1.3;
}
.partner-bio{
  font-size:.97rem;
  line-height:1.7;
  color:var(--c-text-soft);
  text-align:justify;
  margin:0 0 1.2rem;
}
.partner-highlight,
.partner-extra-link{
  margin:0 0 1rem;
  font-size:.95rem;
  line-height:1.55;
}
.partner-highlight a{
  color:var(--c-accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.partner-highlight a:hover{
  color:var(--c-accent);
}
.partner-highlight b{font-weight:600;}
.partner-extra-link a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--c-accent);
  text-decoration:none;
  font-weight:500;
}
.partner-extra-link a:hover{
  color:var(--c-accent-dark);
  text-decoration:underline;
}

/* Premi/Awards: loghi piccoli sotto la bio */
.partner-awards{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  margin:0 0 1.2rem;
}
.partner-award{
  height:64px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  display:block;
  opacity:.95;
  transition:opacity var(--transition);
}
.partner-award:hover{opacity:1;}

/* Azioni: bottoni tutti della stessa altezza */
.partner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  margin-top:.4rem;
}

/* Empty state */
.partners-empty{
  text-align:center;
  color:var(--c-muted);
  padding:2.5rem 0;
}

/* Responsive */
@media (max-width:960px){
  .partners-section{padding:4rem 0;}
  .partners-list{gap:3rem;}
  .partner-row{
    grid-template-columns:1fr;
    gap:1.8rem;
    align-items:start;
  }
  .partner-image{
    max-width:600px;
  }
  .partner-award{height:54px;}
}

@media (max-width:720px){
  .partners-section{padding:3rem 0;}
  .partners-heading{margin-bottom:2.2rem;}
  .partner-bio{text-align:left;}
  .partner-award{height:46px;}
}

/* Reduced motion: lo scale-in hover della foto è già gestito dalla regola
   condivisa ".cp-media-photo" (sezione 8.1, Team). Qui resta solo lo skeleton. */
@media (prefers-reduced-motion:reduce){
  .partner-skeleton{animation:none;}
}
/* ── Scroll-to-top visibility fix ──────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: #101a23;
  color: #c8d1dc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  padding: 0;
  transition: background .2s ease, color .2s ease, transform .3s ease, opacity .3s ease;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  background: var(--c-accent-dark);
  color: #fff;
  border-color: var(--c-accent-dark);
}
.scroll-top-btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}
.scroll-top-btn svg { display: block; }
@media (max-width: 720px) {
  .scroll-top-btn { bottom: 1.25rem; right: 1.25rem; width: 40px; height: 40px; }
}

/* ── Barra progresso scroll ───────────────────────────────── */
.scroll-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.08);
  z-index: 1000;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--c-accent-dark);
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-bar { transition: none; }
}

/* ── Mouse scroll indicator (hero slider) ─────────────────── */
.hero-scroll-mouse {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
  transition: opacity .3s ease;
  text-decoration: none;
}
.hero-scroll-mouse:hover { opacity: 1; }
.hero-scroll-mouse:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 4px;
  border-radius: 4px;
}
.hero-scroll-mouse img {
  width: 32px;
  height: auto;
  display: block;
  animation: hero-mouse-bounce 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-mouse-bounce {
  0%, 100% { transform: translateY(0);    opacity: .85; }
  50%       { transform: translateY(8px); opacity: 1;   }
}
@media (max-width: 960px) { .hero-scroll-mouse { bottom: 1.25rem; } }
@media (max-width: 720px) { .hero-scroll-mouse { bottom: .75rem; } .hero-scroll-mouse img { width: 26px; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-mouse img { animation: none; } }

/* ── Font size control A+ / A− ────────────────────────────── */
.font-ctrl {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.font-ctrl-btn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text-soft);
  padding: .22rem .55rem;
  cursor: pointer;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  user-select: none;
}
.font-ctrl-btn sup { font-size: .6em; vertical-align: super; }
.font-ctrl-btn:hover {
  border-color: var(--c-accent-dark);
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
}
.font-ctrl-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.font-ctrl-btn:disabled { opacity: .3; cursor: default; }




/* ── Intro-home topbar: logo a sx, font-ctrl a dx ─────────── */
.intro-home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.intro-home-topbar img { display: block; }

/* =========================================================
   FONT SIZE CONTROL
   Scala html (root dei rem) — nav/slider resettati in px
   ========================================================= */
[data-fontsize="-2"] { font-size: 12.5px !important; } /* rem base ~14px */
[data-fontsize="-1"] { font-size: 13.5px !important; } /* rem base ~15px */
[data-fontsize="1"]  { font-size: 18px   !important; } /* rem base ~19px */
[data-fontsize="2"]  { font-size: 20px   !important; } /* rem base ~21px */
/* ── Contatore caratteri messaggio ───────────────────────────────── */
.message-counter{
  font-size:.82rem;
  color:var(--c-muted);
  margin-top:.3rem;
  transition:color .2s ease;
}
.message-counter.is-valid{ color:var(--c-muted); }
.message-counter.is-warning{ color:#b07d00; }
.message-counter.is-danger{ color:#b6403e; font-weight:600; }

/* ── Errori per singolo campo ────────────────────────────────────── */
.field-error{
  display:none;
  font-size:.82rem;
  color:#b6403e;
  margin-top:.25rem;
  line-height:1.3;
}
.form-field.has-error .field-error,
.form-check.has-error .field-error,
.form-recaptcha.has-error .field-error{
  display:block;
}
.form-field.has-error input,
.form-field.has-error textarea{
  border-color:#b6403e;
  box-shadow:0 0 0 3px rgba(182,64,62,.12);
}
.form-field.has-error label,
.form-check.has-error label{
  color:#b6403e;
}

/* ── Feedback globale (success / error / info) ───────────────────── */
.form-response.is-visible{ display:block; }
.form-response.success{
  background:#edf7ed;
  color:#2e6b2e;
  border:1px solid #b2d8b2;
  border-radius:.35rem;
  padding:.75rem 1rem;
}
.form-response.error{
  background:#fdf0f0;
  color:#8b1a1a;
  border:1px solid #e8b4b4;
  border-radius:.35rem;
  padding:.75rem 1rem;
}
.form-response.info{
  background:#eef3fa;
  color:#1b4a8a;
  border:1px solid #c4d5ec;
  border-radius:.35rem;
  padding:.75rem 1rem;
}


/* ===== Blog articolo: badge autore + sommario laterale (TOC) ===== */
.article-author-badge{width:18px;height:18px;flex:none;vertical-align:middle;margin-right:.15rem}

.article-body.has-toc{display:grid;grid-template-columns:240px 1fr;gap:2.5rem;align-items:start}
.article-toc{position:sticky;top:110px;align-self:start}
.article-toc-title{font-family:var(--font);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-text-soft,#6b7280);margin:0 0 .8rem}
.article-toc nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem;border-left:2px solid var(--c-border)}
.article-toc-item a{display:block;font-family:var(--font);font-size:.9rem;line-height:1.35;color:var(--c-text);text-decoration:none;padding:.4rem .8rem;border-left:2px solid transparent;margin-left:-2px;transition:color var(--transition),border-color var(--transition)}
.article-toc-item a:hover{color:var(--c-accent-dark);border-left-color:var(--c-accent-dark)}
.article-toc-item.is-h3 a{padding-left:1.7rem;font-size:.84rem;color:var(--c-text-soft,#6b7280)}
.article-content :is(h2,h3){scroll-margin-top:110px}
@media (max-width:900px){
  .article-body.has-toc{display:block}
  .article-toc{display:none}
}