/* ============================================================
   VFM Technik — Manutenzione veicoli commerciali e industriali
   Palette: navy #0B2545 / oro #C2A14D / bianco caldo #FAF8F3 / grigio
   Type: DM Serif Text (titoli) + Hanken Grotesk (testo)
   ============================================================ */

:root{
  /* componenti separate: servono per costruire i veli semitrasparenti
     sopra le foto degli hero, dove serve rgb(... / opacità) */
  --navy-rgb:11 37 69;
  --navy-deep-rgb:7 26 53;
  --navy:rgb(var(--navy-rgb));
  --navy-deep:rgb(var(--navy-deep-rgb));
  --navy-2:#102E54;
  --gold:#C2A14D;
  --gold-light:#D8BE7E;
  --gold-dark:#A07E2E;
  --cream:#FAF8F3;
  --ink:#0B2545;
  --slate:#5B6675;
  --line:rgba(11,37,69,0.12);
  --serif:'Barlow Condensed',sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  /* lo stacco verticale di una sezione: dichiarato qui perché lo usano anche
     le fasce a tutta larghezza, che devono respirare come le altre */
  --sez-y:clamp(54px,7vw,96px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:stable;overflow-x:clip;max-width:100%}
html::-webkit-scrollbar{display:none}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
  position:relative;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--navy)}

/* ---------- shared ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:var(--sez-y) var(--pad)}
.gold{color:var(--gold)}

.eyebrow{display:flex;align-items:center;margin-bottom:18px;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);font-weight:600}
.eyebrow-light{color:var(--gold-light)}

.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(34px,4vw,56px)}
.section-head-main{max-width:680px}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);
  line-height:1.08;letter-spacing:-0.01em;color:var(--ink)}
.section-title-light{color:#fff}
/* varianti su fondo scuro: senza, testo introduttivo e testo di apertura
   restavano dei colori da fondo chiaro e sparivano */
.section-intro-light{color:rgba(255,255,255,0.72)}
.page-lead-light{color:rgba(255,255,255,0.82)}
.section-intro{font-size:16px;line-height:1.6;color:var(--slate);max-width:360px;font-family:var(--serif);font-style:italic}

.section-band{background:#fff;border-top:1px solid rgba(11,37,69,0.08);border-bottom:1px solid rgba(11,37,69,0.08)}

/* placeholders */
.ph-label{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#9A9486;background:rgba(255,255,255,0.7);padding:6px 10px;border-radius:3px}
.ph-label-dark{color:rgba(255,255,255,0.6);background:rgba(7,26,53,0.55)}
/* ph-label come fallback: nascosto di default, mostrato SOLO se l'img fallisce */
.photo-card-media .ph-label,
.insight-media .ph-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;white-space:nowrap;text-align:center;
  display:none;
}
.photo-card-media.img-failed .ph-label,
.insight-media.img-failed .ph-label{
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn-gold{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;
  font-size:15px;padding:13px 22px;border-radius:3px;letter-spacing:.01em;cursor:pointer;
  border:none;font-family:inherit;transition:background .2s,box-shadow .2s}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 8px 22px rgba(194,161,77,0.32)}
.btn-lg{font-size:16px;padding:17px 32px}
.btn-block{display:block;width:100%;text-align:center;font-size:16px;padding:15px}

.btn-outline-light{display:inline-block;border:1px solid rgba(255,255,255,0.35);color:#fff;
  font-weight:600;font-size:16px;padding:17px 30px;border-radius:3px;transition:border-color .2s,color .2s}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold-light)}

.btn-outline-dark{display:inline-block;border:1px solid var(--navy);color:var(--navy);
  font-weight:600;font-size:15px;padding:14px 24px;border-radius:3px;white-space:nowrap;transition:background .2s,color .2s}
.btn-outline-dark:hover{background:var(--navy);color:#fff}

.link-underline{display:inline-block;color:var(--navy);font-weight:700;font-size:15px;
  border-bottom:2px solid var(--gold);padding-bottom:3px}

/* ---------- utility bar ---------- */
.utility-bar{background:var(--navy-deep);color:rgba(255,255,255,0.72);font-size:13px;letter-spacing:.01em}
.utility-inner{max-width:var(--maxw);margin:0 auto;padding:9px var(--pad);
  display:flex;gap:10px 26px;align-items:center;justify-content:flex-end}
.utility-phone{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:600;letter-spacing:.02em}
.utility-num{color:#fff}
.call-ico{width:14px;height:14px;flex:0 0 auto}
.utility-link{color:var(--gold);transition:color .2s}
.utility-link:hover{color:var(--gold-light)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:70;background:rgba(250,248,243,0.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,37,69,0.10)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:13px}
.logo-img{height:38px;width:auto;display:block}

.header-actions{display:flex;align-items:center;gap:18px}
.nav-desktop{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:500}
.nav-desktop a{padding:9px 14px;color:#28384E;transition:color .2s;position:relative}
.nav-desktop a:hover{color:var(--navy)}
/* linea che compare dal centro e si allarga all'hover */
.nav-desktop a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover::after{transform:scaleX(1)}

/* dropdown "Chi Siamo" */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 14px;color:#28384E;font-family:inherit;font-size:15px;font-weight:500;
  background:none;border:none;cursor:pointer;transition:color .2s;
}
.nav-dropdown-toggle:hover{color:var(--navy)}
.nav-caret{width:14px;height:14px;transition:transform .25s}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:100%;right:0;min-width:200px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 14px 40px rgba(11,37,69,0.14);
  padding:8px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(4px)}
.nav-dropdown-menu a{
  padding:10px 14px;color:#28384E;font-size:14.5px;border-radius:4px;transition:background .18s,color .18s;
}
.nav-dropdown-menu a::after{display:none}
.nav-dropdown-menu a:hover{background:var(--cream);color:var(--navy)}

/* hamburger */
.hamburger{display:none;position:relative;width:46px;height:46px;
  border:none;border-radius:0;background:transparent;cursor:pointer;flex:0 0 auto;align-items:center;justify-content:center}
.hb-line{position:absolute;left:50%;top:50%;width:22px;height:2px;margin:-1px 0 0 -11px;
  background:var(--navy);border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.hb-line-1{transform:translateY(-6px)}
.hb-line-3{transform:translateY(6px)}
.hamburger.open .hb-line-1{transform:rotate(45deg)}
.hamburger.open .hb-line-2{opacity:0;transform:scaleX(.2)}
.hamburger.open .hb-line-3{transform:rotate(-45deg)}

/* ---------- mobile menu overlay ---------- */
.mobile-menu{position:fixed;inset:0;z-index:60;background:linear-gradient(165deg,var(--navy),var(--navy-deep));
  display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;
  transition:opacity .26s ease,visibility .26s ease}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.mobile-menu-inner{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:104px clamp(28px,8vw,64px) 48px}
.mobile-nav{display:flex;flex-direction:column}
.mobile-nav a,.mobile-cta,.mobile-phone{opacity:0;transform:translateY(18px)}
.mobile-menu.open .mobile-nav a,
.mobile-menu.open .mobile-nav .mobile-subhead,
.mobile-menu.open .mobile-cta,
.mobile-menu.open .mobile-phone{
  animation:navItemIn .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(110ms + var(--i) * 55ms)}
.mobile-nav a{font-family:var(--serif);font-weight:400;font-size:clamp(28px,7vw,42px);
  line-height:1.15;color:#fff;padding:13px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
/* sub-sezione "Chi Siamo" nel menu mobile */
.mobile-subhead{font-family:var(--serif);font-weight:400;font-size:clamp(22px,5vw,30px);
  color:var(--gold-light);padding:16px 0 6px;opacity:0;transform:translateY(18px)}
.mobile-nav a.mobile-subitem{font-size:clamp(20px,5vw,28px);color:rgba(255,255,255,0.82);
  padding:10px 0 10px 18px}
.mobile-cta{margin-top:26px;font-size:17px;padding:17px 26px;text-align:center}
.mobile-phone{margin-top:30px;display:flex;flex-direction:column;gap:9px}
.mobile-phone-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:600}
.mobile-phone-num{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--gold-light)}
.mobile-phone-link{font-size:15px;color:rgba(255,255,255,0.78)}

@keyframes navItemIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ---------- hero ---------- */
.hero{
  background:
    linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat;
  color:#fff;position:relative;overflow:hidden;
}
.hero-topline{position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:2;overflow:hidden}
/* barra di avanzamento dentro la topline (usata su mobile) */
.hero-topline-progress{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:var(--gold);
  box-shadow:0 0 8px rgba(194,161,77,0.6);
  opacity:0; /* visibile solo su mobile via media query */
}

/* SVG background scenografico */
/* SVG animato: layer sopra l'immagine di sfondo (su .hero) */
.hero-scene-bg{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  transition:opacity .8s ease;
}
.scene-svg{width:100%;height:100%}

/* animazioni SVG — tutte asincrone */
.sc-circle{transform-origin:900px 120px}
.sc-c1{animation:pulseRing 7s ease-in-out infinite}
.sc-c2{animation:pulseRing 7s ease-in-out 1.4s infinite}
.sc-c3{animation:pulseRing 7s ease-in-out 2.8s infinite}
@keyframes pulseRing{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.06);opacity:.6}
}
.sc-l1{animation:lineDrift 12s ease-in-out infinite alternate}
.sc-l2{animation:lineDrift 12s ease-in-out 3s infinite alternate-reverse}
@keyframes lineDrift{
  from{transform:translateX(0)}
  to{transform:translateX(40px)}
}
/* particelle floating — ognuna con timing diverso */
.sc-dot:nth-child(1){animation:floatDot 5.2s ease-in-out infinite}
.sc-dot:nth-child(2){animation:floatDot 6.8s ease-in-out 1.1s infinite}
.sc-dot:nth-child(3){animation:floatDot 4.5s ease-in-out 2.3s infinite}
.sc-dot:nth-child(4){animation:floatDot 7.1s ease-in-out 0.7s infinite}
.sc-dot:nth-child(5){animation:floatDot 5.9s ease-in-out 3.4s infinite}
@keyframes floatDot{
  0%,100%{transform:translate(0,0);opacity:1}
  33%{transform:translate(12px,-18px);opacity:.5}
  66%{transform:translate(-8px,10px);opacity:.8}
}
.sc-grid{animation:gridFade 6s ease-in-out infinite alternate}
@keyframes gridFade{from{opacity:.4}to{opacity:1}}

/* layout hero */
.hero-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(48px,7vw,104px) var(--pad);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(40px,5vw,72px);
  align-items:center;
  position:relative;z-index:3;
}

/* su mobile: immagine prima, testo dopo */
.hero-media{order:-1}
@media(min-width:700px){.hero-media{order:0}}

/* ---------- vehicle slider hero ---------- */
.hero-media{position:relative}

.slider-frames{
  position:relative;width:100%;
  aspect-ratio:4/3.4;overflow:hidden;border-radius:4px;
}

.slider-frame{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transform:scale(.96) translateX(24px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);
}
.slider-frame.active{
  opacity:1;pointer-events:auto;
  transform:scale(1) translateX(0);
}
.slider-frame.exit{
  opacity:0;
  transform:scale(.94) translateX(-24px);
  transition:opacity .6s ease,transform .6s ease;
}

.slider-frame-img{
  width:100%;height:100%;object-fit:contain;
  will-change:transform;
}
.slider-frame.active .slider-frame-img{
  animation:vehicleZoomOut 6.5s cubic-bezier(.25,.1,.25,1) forwards;
}
@keyframes vehicleZoomOut{
  from{transform:scale(1)}
  to{transform:scale(.90)}
}

/* progress bar — nascosta, la logica è nei dot */
.slider-progress{ display:none }
.slider-progress-bar{ display:none }

/* dots con progress integrata nell'active */
.slider-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:5;
}
.slider-dot{
  width:28px;height:3px;border-radius:2px;
  background:rgba(255,255,255,0.25);
  border:none;cursor:pointer;padding:0;
  position:relative;overflow:hidden;
  transition:background .3s,width .3s;
}
.slider-dot:hover{ background:rgba(255,255,255,0.45) }
.slider-dot.active{
  background:rgba(255,255,255,0.2);
  width:40px;
}
/* barra di fill che avanza sul dot attivo */
.slider-dot.active::after{
  content:'';
  position:absolute;inset:0;
  background:var(--gold);
  transform-origin:left;
  transform:scaleX(0);
  border-radius:2px;
}
.slider-dot.active.running::after{
  animation:dotFill var(--dot-duration, 4500ms) linear forwards;
}
@keyframes dotFill{
  from{ transform:scaleX(0) }
  to{   transform:scaleX(1) }
}

/* frecce di navigazione — nascoste su desktop, visibili su mobile */
.slider-arrow{
  display:inline-flex;
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;border-radius:50%;
  background:rgba(11,37,69,0.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.28);
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .25s,border-color .25s,transform .25s;
}
.slider-arrow:hover{background:var(--gold);border-color:var(--gold)}
.slider-arrow:active{transform:translateY(-50%) scale(.92)}
.slider-arrow svg{width:20px;height:20px}
.slider-arrow-prev{left:6px}
.slider-arrow-next{right:6px}

/* hero copy: colonna con stack testi + CTA sotto */
.hero-copy{
  display:flex;
  flex-direction:column;
}

/* STACK: tutte le slide nella STESSA cella grid → si sovrappongono,
   il contenitore prende l'altezza della più alta, automaticamente, senza JS */
.hero-copy-stack{
  display:grid;
  position:relative;
}
.hero-copy-slide{
  grid-area:1 / 1;           /* tutte nella stessa cella */
  z-index:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(16px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),
             transform .45s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear .45s;  /* nascondi solo a fine fade-out */
}
.hero-copy-slide.active{
  z-index:2;                 /* sempre sopra le inattive */
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),
             transform .45s cubic-bezier(.2,.7,.2,1),
             visibility 0s;
}

/* animazioni interne sfasate sulla slide attiva */
.hero-copy-slide.active .eyebrow{
  animation:slideUpFade .6s cubic-bezier(.2,.7,.2,1) .05s both;
}
.hero-copy-slide.active .hero-title{
  animation:slideUpFade .6s cubic-bezier(.2,.7,.2,1) .15s both;
}
.hero-copy-slide.active .hero-lead{
  animation:slideUpFade .6s cubic-bezier(.2,.7,.2,1) .27s both;
}
.hero-copy-slide.active .hero-pt:nth-child(1){animation:slideUpFade .5s .38s both, ptFloat 5s 1.2s ease-in-out infinite}
.hero-copy-slide.active .hero-pt:nth-child(2){animation:slideUpFade .5s .48s both, ptFloat 5s 2.5s ease-in-out infinite}
.hero-copy-slide.active .hero-pt:nth-child(3){animation:slideUpFade .5s .58s both, ptFloat 5s 3.8s ease-in-out infinite}

/* h1/h2 stessa resa visiva */
.hero-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.4vw,62px);line-height:1.04;letter-spacing:-0.01em;
  margin-top:14px;
}
.hero-copy-slide h2.hero-title{
  font-size:clamp(38px,5.4vw,62px);
}

/* hero-lead */
.hero-lead{
  margin-top:24px;
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;
  color:rgba(255,255,255,0.74);max-width:540px;
  font-family:var(--serif);font-style:italic;
}

/* hero-points */
.hero-points{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.12);
}
.hero-points span{font-size:14px;color:rgba(255,255,255,0.66);display:inline-flex;gap:9px;align-items:center}

/* CTA — sotto lo stack, nel flusso normale */
.hero-ctas{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:38px;
  animation:slideUpFade .7s cubic-bezier(.2,.7,.2,1) .48s both;
}

/* pulsanti flottanti asincroni */
.hero-btn-1{animation:btnFloat 4s ease-in-out infinite; will-change:transform}
.hero-btn-2{animation:btnFloat 4s ease-in-out 1.6s infinite; will-change:transform}
@keyframes btnFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes ptFloat{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
@keyframes slideUpFade{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.service-card{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.90), rgba(255,255,255,0.94)),
    #fff;
  background-size:cover,cover,auto;
  background-position:center,center,center;
  background-repeat:no-repeat;
  background-clip:padding-box;
  border:1px solid var(--line);
  border-radius:5px;
  padding:32px;
  display:flex;
  flex-direction:column;
  min-height:300px;
  transition:border-color .2s,box-shadow .2s;
  height: 100%;
  }
.service-card:hover{border-color:var(--gold);box-shadow:0 18px 40px rgba(11,37,69,0.10)}
/* le ultime due card: immagini di sfondo dedicate (stesso velo bianco) */
.service-card-dark{
  background:linear-gradient(160deg, rgba(11,37,69,0.19), rgb(9,28,54)), var(--navy);
  background-size:cover,cover,auto;
  background-position:center,center,center;
  background-repeat:no-repeat;
  background-clip:padding-box;
  color:#fff;border:none;position:relative;overflow:hidden}
/* card 2 e 3: identiche alla dark, cambia solo l'immagine di sfondo */
.service-card-vendita{
  background:linear-gradient(160deg, rgba(11,37,69,0.19), rgb(9,28,54)), var(--navy);
  background-size:cover,cover,auto;
  background-position:right top;
  background-repeat:no-repeat;
  background-clip:padding-box}
.service-card-assistenza{
  background:linear-gradient(160deg, rgba(11,37,69,0.19), rgb(9,28,54)), var(--navy);
  background-size:cover,cover,auto;
  background-position:center,center,center;
  background-repeat:no-repeat;
  background-clip:padding-box}
.service-card-dark:hover{box-shadow:0 22px 50px rgba(7,26,53,0.28)}
.service-topbar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}
.service-flag{font-family:var(--serif);font-size:15px;color:var(--gold-light);letter-spacing:.04em}
.service-num{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--gold)}
.service-title{font-family:var(--serif);font-size:24px;font-weight:400;margin-top:auto;line-height:1.12}
.service-title-lg{font-family:var(--serif);font-size:27px;font-weight:400;margin-top:auto;line-height:1.1}
.service-text{font-size:15px;line-height:1.55;color:var(--slate);margin-top:12px}
.service-text-light{font-size:15px;line-height:1.55;color:rgba(255,255,255,0.72);margin-top:12px}
.service-link{margin-top:18px;font-weight:700;font-size:14.5px;color:var(--gold-dark);letter-spacing:.02em}
.service-link-gold{color:var(--gold-light)}

/* ---------- business lines ---------- */
/* ---- LINES SLIDER full-bleed ---- */
/* offset sinistro = allinea la prima card al contenuto della sezione
   anche quando la sezione è centrata con max-width */
.lines-slider{
  --edge: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  /* full-bleed: lo slider esce dal contenitore centrato fino ai bordi schermo.
     Sicuro perché html ha overflow-x:hidden. */
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:8px;
}
.photo-cards::-webkit-scrollbar{display:none}
.photo-cards{
  display:flex;
  gap:18px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  touch-action:pan-x pan-y;
  /* padding verticale ampio: contiene immagine che sborda in alto + ombra in basso (non vengono clippate).
     il margin negativo compensa così il layout non si sposta. */
  padding-top:60px;
  padding-bottom:60px;
  margin-bottom:-40px;
  padding-inline:var(--edge);
}
.photo-cards.dragging{cursor:grabbing}
.photo-cards.dragging .photo-card{pointer-events:none}
.photo-cards .photo-card{user-select:none}
.photo-cards::-webkit-scrollbar{display:none}

/* ---- frecce delle strisce orizzontali ----
   Sotto la striscia e allineate a destra con il testo che la precede.
   Sopra alle schede coprivano il contenuto e, essendo le card posizionate,
   si facevano rubare il clic. Qui stanno nel flusso e restano discrete. */
.lines-slider{position:relative}
.strip-nav{display:flex;justify-content:flex-start;gap:8px;margin-top:14px;
  /* Posizionata e alzata: la striscia di card ha 60px di riempimento in basso
     e un margine negativo di 40 (servono a non tagliare foto e ombre), quindi
     risale sopra a quello che segue. Non essendo posizionata, la fila di
     frecce ci finiva sotto e i clic li prendeva lo scorrevole — è il motivo
     per cui le frecce sembravano sparire al passaggio del mouse. */
  position:relative;z-index:2}
/* dove la striscia sporge, le frecce si scostano oltre la parte che risale */
.lines-slider:has(.photo-cards) + .strip-nav{margin-top:52px}
.strip-arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s,background .2s,border-color .2s,color .2s;
}
.strip-arrow svg{width:22px;height:22px}
.strip-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
/* a inizio e fine corsa la freccia si spegne invece di sparire: se saltasse
   via, l'altra si sposterebbe sotto il puntatore mentre ci clicchi sopra */
.strip-arrow[hidden]{display:flex;opacity:.25;pointer-events:none}
/* col dito si trascina: le frecce servono a chi ha il mouse */
@media(hover:none){.strip-nav{display:none}}

/* larghezza card: ne mostra N + 1/3 → mobile default 1 + 1/3 */
.photo-card{
  flex:0 0 auto;
  width:calc((100vw - var(--edge) - 18px) / 1.333);
  scroll-snap-align:start;
  position:relative;
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:5px;
  background:var(--cream);transition:border-color .2s,box-shadow .2s}

/* breakpoint progressivi: 2+1/3 → 3+1/3 → 4+1/3 */
@media(min-width:600px){
  .photo-card{width:calc((100vw - var(--edge) - 2 * 18px) / 2.333)}
}
@media(min-width:900px){
  .photo-card{width:calc((100vw - var(--edge) - 3 * 18px) / 3.333)}
}
@media(min-width:1200px){
  .photo-card{width:calc((100vw - var(--edge) - 4 * 18px) / 4.333)}
}

.photo-card:hover{border-color:var(--gold);box-shadow:0 18px 44px rgba(11,37,69,0.12);z-index:10}
.photo-card-media{aspect-ratio:20/9;position:relative;display:flex;align-items:center;justify-content:center;
  border-radius:5px 5px 0 0;
  background:transparent}
/* immagine scontornata: sborda solo in alto e in basso */
.photo-card-img{
  position:absolute;
  top:-22%; left:10%;
  width:80%; height:146%;
  object-fit:contain;
  object-position:center;
  z-index:3;
  display:block;
  filter:drop-shadow(0 18px 26px rgba(7,26,53,0.28));
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  transform-origin:center bottom;
}
/* zoom al hover della card */
.photo-card:hover .photo-card-img{
  transform:scale(1.12) translateY(-6px);
}
.photo-card-body{padding:26px;flex:1;display:flex;flex-direction:column}
.photo-card-flag{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);font-weight:600}
.photo-card-title{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.15;margin-top:0}
.photo-card-text{font-size:14.5px;line-height:1.55;color:var(--slate);margin-top:10px;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{font-size:12px;color:var(--slate);border:1px solid rgba(11,37,69,0.16);padding:4px 10px;border-radius:20px}
.photo-card-cta{justify-content:center;border:1px dashed rgba(194,161,77,0.5);
  padding:30px;background:var(--cream)}
.line-cta-title{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.18}
.line-cta-text{font-size:14.5px;line-height:1.55;color:var(--slate);margin-top:10px}
.line-cta-btn{margin-top:18px;text-align:center;font-size:14.5px}


/* ---------- full service split ---------- */
.section-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(40px,5vw,72px);align-items:center;position:relative;overflow:hidden}
/* video di background */
.bg-video-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.bg-video{width:100%;height:100%;object-fit:cover;display:block;
  background:#e8e6e0 center/cover no-repeat}
/* Velo sopra il video: ai lati copre del tutto, al centro resta al 65% e il
   video si vede. È così che il video sembra più stretto di quanto sia.
   Il colore non è più fisso sul crema: prende --velina dalla sezione, quindi
   su fondo bianco il velo è bianco e su fondo crema è crema. */
.bg-video-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(var(--velina,250,248,243),1) 0%,
    rgba(var(--velina,250,248,243),0.65) 42%,
    rgba(var(--velina,250,248,243),0.65) 68%,
    rgba(var(--velina,250,248,243),1) 100%)}
/* il contenuto sta sopra il video */
.section-split > .split-text,
.section-split > .icon-tiles{position:relative;z-index:1}
/* padding interno per staccare il contenuto dai bordi ora che c'è il video */
#fullservice{padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,7vw,96px)}
.split-intro{font-size:16px;line-height:1.65;color:var(--slate);margin-top:20px;max-width:480px}
.split-text .section-title{margin-top:0}
.split-text .link-underline{margin-top:28px}
.icon-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.icon-tile{background:#fff;border:1px solid var(--line);border-radius:5px;padding:24px}
.icon-tile-ico{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}
.icon-tile-ico svg{width:28px;height:28px;display:block}
.icon-tile-title{font-family:var(--serif);font-size:18px;font-weight:400;margin-top:12px}
.icon-tile-text{font-size:14px;color:var(--slate);line-height:1.5;margin-top:6px}

/* ---------- tiles-band ---------- */
/* Lo sfondo non è più imposto qui: lo dà la sezione, che ora ha tre scelte.
   Questa fascia nasce scura (è il suo valore di partenza), ma se qualcuno la
   mette su crema deve diventare crema davvero — prima il colore scritto qui
   copriva la scelta e il pulsante sembrava rotto.
   I testi chiari valgono quando il fondo è scuro O quando c'è una foto sotto:
   sopra una foto il testo scuro sarebbe illeggibile comunque. */
.tiles-band{
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.tiles-band .section{padding-block:clamp(64px,8vw,104px)}
/* Le colonne le decide la sezione, che le calcola contando le caselle
   (--tile-col). La disposizione è a flex e non a griglia di proposito: con
   flex le caselle dell'ultima riga, se sono meno delle altre, si allargano a
   riempire tutta la larghezza invece di lasciare un buco a destra. */
.tiles-grid{display:flex;flex-wrap:wrap;gap:1px;margin-top:46px;
  background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.tile{background:#fff;padding:28px;
  flex:1 1 calc((100% - (var(--tile-col,3) - 1) * 1px) / var(--tile-col,3));min-width:0}
@media(max-width:860px){.tiles-grid{--tile-col:2 !important}}
@media(max-width:460px){.tiles-grid{--tile-col:1 !important}}
.tile-name{font-family:var(--serif);font-size:20px;font-weight:400}
.tile-sub{font-size:13.5px;color:var(--slate);margin-top:8px;line-height:1.5}
/* Il titolo chiaro non lo decide più il tipo di sezione ma il fondo: prima
   era scritto nel PHP, e cambiando lo sfondo in crema restava bianco su
   crema, cioè invisibile. */
.sez-navy .section-title,.tiles-band.ha-foto .section-title,
.contact-band.ha-foto .section-title{color:#fff}
.sez-navy .section-intro,.tiles-band.ha-foto .section-intro,
.contact-band.ha-foto .section-intro{color:rgba(255,255,255,.72)}
.sez-navy .page-lead,.tiles-band.ha-foto .page-lead,
.contact-band.ha-foto .page-lead{color:rgba(255,255,255,.82)}
.tiles-band.ha-foto .eyebrow,.contact-band.ha-foto .eyebrow{color:var(--gold-light)}
/* fondo scuro o foto: testi e riquadri si schiariscono */
.sez-navy .tiles-band,.tiles-band.ha-foto{color:#fff}
/* sul fondo scuro le caselle tornano piene di blu notte, come prima: la
   trasparenza le faceva sparire dentro la fascia */
.sez-navy .tile,.tiles-band.ha-foto .tile{background:var(--navy)}
.sez-navy .tiles-grid,.tiles-band.ha-foto .tiles-grid{
  background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.12)}
.sez-navy .tile-sub,.tiles-band.ha-foto .tile-sub{color:rgba(255,255,255,0.6)}
.sez-navy .tile-link:hover,.tiles-band.ha-foto .tile-link:hover{background:rgba(255,255,255,.1)}
.tile-link{display:block;color:inherit;text-decoration:none;transition:background .25s}
.tile-link:hover{background:var(--navy-deep)}
.tile-vlink{display:inline-block;margin-top:12px;font-size:13px;color:var(--gold-light)}

/* ---------- PA band ---------- */
/* fascia con foto di sfondo a tutta larghezza, contenuto allineato come .section */
.photo-band{
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:auto 110%;
}
.photo-band-inner{position:relative;z-index:1}
.band-split{
  /* padding:clamp(32px,5vw,56px) 0; */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,56px);
  align-items:center
  }
.band-split .section-title{font-size:clamp(26px,3.2vw,40px);line-height:1.12;max-width:520px}
.band-split-lead{font-size:16px;line-height:1.65;color:var(--slate);margin-top:18px;max-width:520px}
.bullet-panel{display:flex;flex-direction:column;gap:14px;
  background:rgba(255,255,255,0.80);
  padding:clamp(24px,3vw,36px);border-radius:8px;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.bullet-item{display:flex;gap:14px;align-items:flex-start}
.bullet-mark{font-size:18px;line-height:1.4}
.bullet-title{font-weight:700;font-size:15.5px}
.bullet-text{font-size:14px;color:var(--slate);line-height:1.5}
.band-split-btn{margin-top:8px;align-self:flex-start}

/* ---------- insight ---------- */
/* ora è un .page-block: lo sfondo bianco lo decide la sezione dalle
   impostazioni, e la riga sopra è una delle due righe di separazione.
   Imporli qui scavalcherebbe quelle scelte. */
.insight{border-top:0}
.insight .section{padding-block:clamp(64px,8vw,104px)}
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.insight-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;transition:border-color .2s,box-shadow .2s}
.insight-card:hover{border-color:var(--gold);box-shadow:0 16px 38px rgba(11,37,69,0.1)}
.insight-media{aspect-ratio:16/10;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:repeating-linear-gradient(135deg,#EDEAE1 0 14px,#F4F1EA 14px 28px)}
.insight-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.insight-body{padding:24px}
.insight-tag{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);font-weight:600}
.insight-title{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.25;margin-top:10px}
.insight-text{font-size:14px;color:var(--slate);line-height:1.55;margin-top:10px}

/* ---------- preventivo ---------- */
/* come sopra: il colore lo decide la sezione, non questa regola */
.contact-band{
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.sez-navy .contact-band,.contact-band.ha-foto{color:#fff}
.contact-band-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(36px,5vw,64px);align-items:center;padding-block:clamp(56px,7vw,100px)}
.contact-band .section-title{font-size:clamp(30px,4vw,52px);line-height:1.05}
.contact-band-lead{font-size:17px;line-height:1.6;color:var(--slate);margin-top:20px;max-width:460px}
.sez-navy .contact-band-lead,.contact-band.ha-foto .contact-band-lead{color:rgba(255,255,255,0.74)}
.contact-band-phone{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.14);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.contact-band-phone-label{font-size:14px;color:var(--slate)}
.sez-navy .contact-band-phone-label,.contact-band.ha-foto .contact-band-phone-label{color:rgba(255,255,255,0.62)}
.contact-band-phone-num{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;color:var(--navy);font-weight:400}
.sez-navy .contact-band-phone-num,.contact-band.ha-foto .contact-band-phone-num{color:#fff}
.contact-band-phone-num .call-ico{width:20px;height:20px;color:var(--gold-light)}

.form-card{background:#fff;color:var(--navy);border-radius:6px;padding:clamp(26px,3vw,38px);
  box-shadow:0 30px 70px rgba(7,26,53,0.4);display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column}
.field label{font-size:12.5px;font-weight:600;color:var(--slate);letter-spacing:.02em}
.field input,.field select,.field textarea{margin-top:6px;width:100%;border:1px solid rgba(11,37,69,0.2);border-radius:4px;
  padding:12px 13px;font-size:14.5px;font-family:inherit;color:var(--navy);background:var(--cream)}
.field textarea{resize:vertical;min-height:70px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.checkbox-row{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:2px}
.checkbox-row input{margin-top:2px}
.form-note{font-size:12px;color:#8A93A0;text-align:center}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);color:rgba(255,255,255,0.66)}
.footer .section{padding:clamp(48px,6vw,80px) var(--pad)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px 24px}
.footer-brand{min-width:200px}
.footer-logo{margin-bottom:18px}
.footer-about{font-size:14px;line-height:1.6;max-width:260px}
.footer-col{display:flex;flex-direction:column;gap:9px;font-size:14px}
.footer-col a{transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-head{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:5px}
.footer-head-sub{margin-top:18px}
.footer-phone{color:#fff;font-weight:600}
.footer-cta{margin-top:6px;color:var(--gold);font-weight:700}

/* numero verde con icona */
.footer-greennum{display:inline-flex;align-items:center;gap:8px;font-size:17px}
.footer-call-ico{width:18px;height:18px;flex:0 0 auto;color:var(--gold)}

/* social */
.footer-contatti-link{display:inline-block;margin-top:6px;color:var(--gold-light);font-weight:600}
.footer-contatti-link:hover{color:var(--gold)}
.footer-social{display:flex;gap:12px;margin-top:14px}
.footer-social a{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.7);
  transition:background .2s,color .2s,border-color .2s;
}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.footer-social svg{width:18px;height:18px}

.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,0.45)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{transition:color .2s}
.footer-legal a:hover{color:#fff}

/* ============================================================
   RESPONSIVE — hamburger sotto 1180px
   ============================================================ */
@media (max-width:1180px){
  .nav-desktop,.nav-cta{display:none}
  .hamburger{display:flex;align-items:center;justify-content:center}
}

@media (max-width:860px){
  .form-row{grid-template-columns:1fr}
}



@media (max-width:520px){
  .utility-link{display:none}
  .utility-inner{justify-content:center}
}

/* ============================================================
   MODAL PREVENTIVO
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(7,26,53,0.55);
  backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.modal-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .35s ease,visibility 0s;
}
.modal-box{
  position:relative;
  width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
  background:#fff;
  border-radius:6px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 40px 100px rgba(7,26,53,0.45);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.open .modal-box{
  transform:translateY(0) scale(1);
}
.modal-close{
  position:absolute;top:14px;right:16px;
  width:40px;height:40px;
  border:none;background:transparent;
  font-size:30px;line-height:1;color:var(--slate);
  cursor:pointer;border-radius:50%;
  transition:background .2s,color .2s;
}
.modal-close:hover{background:rgba(11,37,69,0.07);color:var(--ink)}
.modal-head{margin-bottom:24px}
.modal-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,36px);line-height:1.1;
  color:var(--ink);margin-top:12px;
}
.modal-lead{margin-top:12px;color:var(--slate);font-size:15px;line-height:1.55}
/* modal-form identico a .form-card */
.modal-form{display:flex;flex-direction:column;gap:14px}
.modal-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){
  .modal-form .form-row{grid-template-columns:1fr}
}
/* blocca lo scroll del body quando il modal è aperto */
body.modal-open{overflow:hidden}

/* ============================================================
   PAGINE INTERNE
   ============================================================ */
.page-hero{
  /* gradient orizzontale: blu forte a sinistra (dove c'è il testo), leggero a destra.
     l'immagine di sfondo è definita per-pagina dalle classi .page-hero-{nome}. */
  background:
    linear-gradient(90deg, rgba(9,28,54,0.94) 0%, rgba(11,37,69,0.80) 42%, rgba(11,37,69,0.30) 100%),
    linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
  color:#fff;position:relative;overflow:hidden;
}
/* immagine di sfondo per pagina (desktop): sta TRA il gradient orizzontale e il fallback */
.page-hero[class*="page-hero-"]{background-size:cover,cover,cover;background-position:bottom;background-repeat:no-repeat}
/* override per pagina: assistenza centrata */
.breadcrumb{font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:22px;display:flex;gap:9px;align-items:center}
.breadcrumb a{color:rgba(255,255,255,0.8);text-decoration:none}
.breadcrumb a:hover{color:var(--gold-light)}
.breadcrumb span[aria-hidden]{color:rgba(255,255,255,0.35)}
.page-h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-0.01em;
  margin-top:14px;max-width:760px;
}
.page-intro{
  margin-top:22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.5vw,20px);line-height:1.6;
  color:rgba(255,255,255,0.74);max-width:620px;margin-bottom:34px;
}

/* page-body: contenitore full-width, le fasce gestiscono il proprio sfondo */
.page-body{display:block}
/* fascia full-width con contenuto centrato */
.page-section{
  padding-top:clamp(54px,7vw,96px);
  padding-bottom:clamp(54px,7vw,96px);
  padding-left:var(--pad);
  padding-right:var(--pad);
}
/* il contenuto interno si allinea ESATTAMENTE come .section.
   In .section il contenuto utile è largo (maxw - 2*pad) perché il padding
   è DENTRO il box da maxw; qui il box è full-width, quindi sottraggo il
   padding dal max-width del contenuto per ottenere lo stesso bordo sinistro. */
.page-section > *{
  max-width:calc(var(--maxw) - 2 * var(--pad));
  margin-left:auto;
  margin-right:auto;
}
/* contenitore per pulsanti dentro le fasce: allineato a sinistra come il testo */
.page-section-action{margin-top:24px}
/* la prima gallery-section dopo l'intro non ha bisogno del separatore */
/* il primo .gallery-section non ha separatore: il bordo è solo TRA sezioni
   consecutive (vedi regola .gallery-section + .gallery-section più sotto) */
/* Sfondo e righe di separazione: non più alternati in automatico ma scelti
   sezione per sezione. --velina è lo stesso colore in forma di componenti
   rgb, così il velo sopra i video può essere trasparente a metà pur restando
   dello stesso colore del fondo. */
.sez-crema{background:var(--cream);--velina:250,248,243}
.sez-bianco{background:#fff;--velina:255,255,255}
/* Terzo fondo: blu notte. I testi che la sezione genera da sé passano al
   chiaro, altrimenti resterebbero blu su blu. Vale per tutte le sezioni, non
   solo per quelle nate scure: è il fondo a decidere, non il tipo. */
.sez-navy{background:var(--navy);color:rgba(255,255,255,.82);--velina:11,37,69}
.sez-navy .section-title,.sez-navy .page-h1,.sez-navy .page-h2,
.sez-navy .page-cta-title,.sez-navy h3,.sez-navy .timeline-titolo,
.sez-navy .article-h2,.sez-navy .article-h3{color:#fff}
.sez-navy .eyebrow{color:var(--gold-light)}
.sez-navy .page-lead,.sez-navy .page-text,.sez-navy .section-intro,
.sez-navy .page-cta-text,.sez-navy .timeline-desc{color:rgba(255,255,255,.75)}
.sez-navy .link-underline{color:var(--gold-light)}
.sez-navy .btn-outline-dark{border-color:rgba(255,255,255,.5);color:#fff}
.sez-navy .btn-outline-dark:hover{background:#fff;color:var(--navy)}
/* riquadri e righe: sul chiaro sono scuri, qui vanno schiariti */
.sez-navy .tag,.sez-navy .tag-list span{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.8)}
.sez-navy .timeline-tappa::before{background:rgba(255,255,255,.2)}
.sez-navy .timeline-nodo{background:var(--navy-deep)}
.sez-navy .timeline-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sez-navy .service-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sez-navy .photo-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sez-navy .photo-card-title,.sez-navy .post-title{color:#fff}
.sez-navy .photo-card-text,.sez-navy .post-excerpt{color:rgba(255,255,255,.72)}
.sez-bordo-sopra{border-top:1px solid var(--line)}
.sez-bordo-sotto{border-bottom:1px solid var(--line)}
/* i nomi vecchi restano validi: una pagina .html non ancora rigenerata
   continua a vedersi come prima */
.page-section-a{background:var(--cream);--velina:250,248,243}
.page-section-b{background:#fff;--velina:255,255,255;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-section-cta{background:var(--cream)}
/* lead a width piena */
.page-lead{font-size:18px;line-height:1.6;color:var(--ink);margin-top:6px;margin-bottom:14px}
.page-block{width:100%}
.page-h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--ink);margin-bottom:14px;
}
.page-text{font-size:16px;line-height:1.65;color:var(--slate);margin-bottom:12px}

.page-cta{
  position:relative;
  margin-top:clamp(20px,3vw,40px);
  /* overlay blu (alto = ~88% sopra, basso = ~78% sotto) sopra l'immagine di sfondo */
  background:
    linear-gradient(160deg, rgba(11,37,69,0.88), rgba(16,46,84,0.80));
  background-size:cover;
  background-position:center;
  color:#fff;border-radius:6px;border-top:4px solid var(--gold);
  padding:clamp(32px,5vw,56px);text-align:center;overflow:hidden;
}
.page-cta-title{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.12}
.page-cta-text{position:relative;margin:14px auto 26px;color:rgba(255,255,255,0.82);font-size:16px;line-height:1.55;max-width:480px}
.page-cta .btn-gold{position:relative}

/* ---- griglia sedi (pagina contatti) ---- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
/* variante 2 box affiancati */
.contact-grid-2{grid-template-columns:1fr 1fr}
@media(max-width:760px){.contact-grid-2{grid-template-columns:1fr}}
/* variante 3 box affiancati */
.contact-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.contact-grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.contact-grid-3{grid-template-columns:1fr}}
/* reparto nel box Contatti */
.contact-dept{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-dept:first-of-type{padding-top:0}
.contact-dept:last-of-type{border-bottom:none;padding-bottom:0}
.contact-name{
  font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:10px;
}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  border-top:3px solid var(--gold);
  padding:24px;display:flex;flex-direction:column;
}
.contact-label{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700;margin-bottom:14px;line-height:1.3;
}
/* Una riga sola per tutti i recapiti: indirizzo, telefono, email, orari.
   Prima l'indirizzo aveva il suo impianto (.contact-addr, .contact-addr-link)
   e i recapiti un altro, e ogni ritocco andava fatto due volte per tenerli
   allineati. Le vecchie classi non le usa più nessuno: tolte. */
.contact-righe{display:flex;flex-direction:column;gap:9px;font-size:14px;margin-top:12px}
.contact-riga{display:flex;gap:9px;align-items:center;color:var(--slate);position:relative}
.contact-riga .ci{color:var(--gold-dark);flex:0 0 auto;display:inline-flex;align-items:center}
.contact-riga .ci svg{width:17px;height:17px}
.contact-riga .ci .segno-img{width:18px;height:18px;object-fit:contain;border-radius:4px}
.contact-riga .ci .segno-numero{font-size:14px;font-weight:700}
/* l'indirizzo occupa più righe: l'icona si allinea alla prima, non al centro */
.contact-riga-lunga{align-items:flex-start;color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.45}
.contact-riga-lunga .ci{margin-top:3px}
.contact-link{display:flex;gap:9px;align-items:center;color:inherit;transition:color .2s;min-width:0}
a.contact-link:hover{color:var(--gold-dark)}
.ci{width:17px;height:17px}
.contact-note{color:var(--slate);font-size:13px;padding-left:26px}

/* numero verde evidenziato (pagina contatti) */
.green-number{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:20px;margin-bottom:clamp(28px,4vw,44px);padding:16px 26px;
  background:linear-gradient(160deg,var(--navy),var(--navy-2));
  border-radius:6px;border-left:4px solid var(--gold);
  color:#fff;transition:transform .2s,box-shadow .2s;
}
.green-number:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(7,26,53,0.25)}
.green-number svg{width:30px;height:30px;color:var(--gold);flex:0 0 auto}
.green-number-text{display:flex;flex-direction:column;line-height:1.15}
.green-number-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.green-number-num{font-family:var(--serif);font-size:28px;font-weight:400}

/* ============================================================
   HERO MOBILE — override finali (in fondo per priorità cascata)
   ============================================================ */
@media(max-width:799px){
  /* velo video full-service su mobile: stessa sfumatura ma verticale (alto-basso) */
  .bg-video-veil{
    background:linear-gradient(180deg,
      rgba(var(--velina,250,248,243),1) 0%,
      rgba(var(--velina,250,248,243),0.65) 42%,
      rgba(var(--velina,250,248,243),0.65) 68%,
      rgba(var(--velina,250,248,243),1) 100%)}
  /* fascia con foto: sfondo ridotto su mobile */
  .photo-band{background-size:400px auto;}
  /* page-hero mobile: velo uniforme forte, immagine dedicata -m */
  .page-hero[class*="page-hero-"]{
    background-size:cover,cover,cover;
    background-position:bottom;
    background-repeat:no-repeat;
  }
  /* su mobile: immagine dedicata, ancorata in alto */
  .hero{
    background:
      linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
    background-size:cover, cover;
    background-position:top center, top center;
    background-repeat:no-repeat;
  }
  .hero-inner{padding-top:18px;gap:18px}
  /* tiles-band: immagine dedicata mobile */
  .tiles-band{
    background:
      linear-gradient(165deg, rgba(11,37,69,0.58), rgba(9,28,54,0.92)),
      var(--navy);
    background-size:cover,cover,auto;
    background-position:center,center,center;
    background-repeat:no-repeat;
  }
  .slider-frames{max-width:78%;margin:0 auto;aspect-ratio:4/3}
  /* niente dots: navigazione con frecce + progress nella topline */
  .slider-dots{display:none !important}
  .slider-arrow{display:inline-flex}
  /* frecce ai bordi: ora dentro hero-media (largo 100%), le porto vicino ai lati */
  .slider-arrow-prev{left:2px}
  .slider-arrow-next{right:2px}
  /* topline: sfondo trasparente, si vede solo la barra che avanza */
  .hero-topline{background:transparent}
  .hero-topline-progress{opacity:1}
  /* titoli più piccoli — sia h1 che h2 (specificità allineata) */
  .hero-title,
  .hero-copy-slide h2.hero-title{font-size:clamp(28px,7.5vw,38px)}
}

/* ---- ancore: il punto in cui la pagina si ferma quando ci si salta ----
   L'intestazione è fissa in alto: senza questo scostamento il titolo della
   sezione finirebbe nascosto sotto di essa. */
.page-section[id], .ancora-sezione{scroll-margin-top:90px}
.ancora-sezione{display:block;height:0;overflow:hidden}

/* ---- sezioni veicoli (pagina noleggio) — layout 2 colonne + gallery ---- */
/* Il riempimento sopra e il margine servivano quando più gallerie stavano una
   sotto l'altra dentro la stessa pagina, senza contenitore. Ora ogni galleria
   è una sezione a sé e .page-section le dà già i suoi 90px: questi si
   sommavano, per un totale di 218px sopra. */
.gallery-section{
  position:relative;
  scroll-margin-top:90px; /* l'ancora non finisce sotto l'header fisso */
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
/* fra due gallerie il separatore è la riga di sezione, che si sceglie dal
   pulsante dell'aspetto: imporla qui la renderebbe non togliibile */
/* Da che parte stanno le foto: lo dice la sezione, non la sua posizione.
   Prima era :nth-child(even), che contava i fratelli — e nell'editor c'è
   anche la barra dei comandi, quindi il conteggio slittava di uno e le foto
   comparivano dal lato sbagliato rispetto al sito pubblicato. */
.gallery-invertita .gallery-copy{order:2}
.gallery-copy{min-width:0}
.gallery-section-num{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:24px;font-weight:400;line-height:1;
  color:#fff;background:var(--gold-dark);
  padding:16px 16px;border-radius:4px;border-left:3px solid var(--gold);
  flex:0 0 auto;
}
/* numero di lato all'h2, h2 centrato sull'altezza del numero */
.gallery-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.gallery-head .page-h2{margin:0}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag-list .tag{font-size:13px;color:var(--slate);border:1px solid rgba(11,37,69,0.16);padding:5px 12px;border-radius:20px}

/* ---- mosaico PhotoSwipe: 4 anteprime sfalsate (1,4 corte / 2,3 alte) ---- */
.pswp-gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:90px;
  gap:10px;
}
.pswp-thumb{
  position:relative;display:block;overflow:hidden;border-radius:6px;
  cursor:zoom-in;background:#d2d5d9;
}
.pswp-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.pswp-thumb:hover img{transform:scale(1.06)}
/* col 1: thumb1 corta (2 righe) sopra, thumb3 alta (3 righe) sotto
   col 2: thumb2 alta (3 righe) sopra, thumb4 corta (2 righe) sotto
   → i due blocchi alti si fronteggiano creando il quadrato sfalsato */
.pswp-thumb-1{grid-column:1;grid-row:1 / span 2}
.pswp-thumb-2{grid-column:2;grid-row:1 / span 3}
.pswp-thumb-3{grid-column:1;grid-row:3 / span 3}
.pswp-thumb-4{grid-column:2;grid-row:4 / span 2}
/* nasconde le immagini oltre la quarta (restano cliccabili da PhotoSwipe) */
.pswp-hidden{display:none}
/* overlay "+N altre" sulla quarta */
.pswp-more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,37,69,0.62);color:#fff;
  font-family:var(--serif);font-size:26px;font-weight:400;
  transition:background .25s;
}
.pswp-thumb-4:hover .pswp-more{background:rgba(11,37,69,0.74)}
/* ph-label fallback: visibile solo se l'immagine manca */
.pswp-thumb .ph-label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;display:none;white-space:nowrap;font-size:10px;
}
.pswp-thumb.img-failed .ph-label{display:inline-block}

/* responsive: una colonna sotto i 760px, gallery sotto il testo */
@media(max-width:760px){
  .gallery-section{grid-template-columns:1fr;gap:24px}
  /* su telefono il testo torna sempre sopra alle foto */
  .gallery-invertita .gallery-copy{order:0}
}

/* ---- CTA assistenza: immagine di sfondo dedicata ---- */
.page-cta-assistenza{
  background:
    linear-gradient(160deg, rgba(11,37,69,0.88), rgba(16,46,84,0.80));
  background-size:cover;
  background-position:center;
}

/* ---- sezione documenti PDF (pagina assistenza) ---- */
.docs-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,4vw,48px);
  margin-top:30px;
}
.docs-group{display:flex;flex-direction:column;gap:10px}
.docs-title{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700;margin-bottom:6px;
}
.doc-link{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--line);border-radius:6px;
  background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.doc-link:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(11,37,69,0.08);transform:translateY(-1px)}
.doc-ico{display:inline-flex;color:var(--slate);flex:0 0 auto}
.doc-ico svg{width:24px;height:24px}
.doc-ico-pdf{color:var(--gold-dark)} /* icona PDF in oro */
.doc-name{font-size:15px;line-height:1.35;color:var(--ink);font-weight:500}
.doc-action{display:inline-flex;color:var(--gold-dark);flex:0 0 auto}
.doc-action svg{width:19px;height:19px}
.doc-link:hover .doc-action{color:var(--gold)}
.doc-link-internal .doc-ico{color:var(--gold-dark)}

/* ---- link della pagina corrente: evidenziato e non cliccabile ---- */
.nav-desktop a.is-current{
  color:var(--gold-dark);
  font-weight:600;
  cursor:default;
  position:relative;
}
.nav-desktop a.is-current::after{
  transform:scaleX(1); /* linea sempre visibile sulla pagina corrente */
}
.nav-desktop a.is-current:hover{color:var(--gold-dark)}

/* footer: voce corrente più chiara e disabilitata */
.footer-col a.is-current{
  color:var(--gold);
  font-weight:600;
  cursor:default;
  pointer-events:none;
}

/* mobile menu: voce corrente evidenziata */
.mobile-nav a.is-current{
  color:var(--gold-dark);
  font-weight:600;
  cursor:default;
}

/* ============================================================
   CATALOGO VENDITA USATO (e-commerce)
   ============================================================ */
.shop{padding:clamp(40px,6vw,72px) 0}
.shop .section{display:block}

/* toolbar */
.shop-toolbar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px;
}
.shop-count{font-size:15px;color:var(--slate)}
.shop-count strong{color:var(--ink);font-size:18px}
.shop-controls{display:flex;flex-wrap:wrap;gap:14px}
.shop-select{display:flex;flex-direction:column;gap:5px;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.shop-select select{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  padding:9px 34px 9px 13px;border:1px solid var(--line);border-radius:6px;background:#fff;
  text-transform:none;letter-spacing:0;cursor:pointer;min-width:170px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a7a2e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.shop-select select:focus{outline:none;border-color:var(--gold)}

/* chip categorie */
.shop-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.shop-chip{
  font-family:var(--sans);font-size:13.5px;color:var(--slate);
  padding:8px 16px;border:1px solid var(--line);border-radius:30px;background:#fff;
  cursor:pointer;transition:all .2s;
}
.shop-chip:hover{border-color:var(--gold);color:var(--ink)}
.shop-chip.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* griglia */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(16px,2vw,24px);
}

/* card veicolo */
.vcard{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  transition:border-color .2s,box-shadow .25s,transform .2s;
}
.vcard:hover{border-color:var(--gold);box-shadow:0 14px 34px rgba(11,37,69,0.10);transform:translateY(-3px)}

/* media */
.vcard-media{
  position:relative;display:block;aspect-ratio:35/25;background:#d2d5d9;overflow:hidden;
}
.vcard-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vcard:hover .vcard-media img{transform:scale(1.05)}
.vcard-ph{
  position:absolute;inset:0;display:none;flex-direction:column;gap:8px;
  align-items:center;justify-content:center;padding:16px;text-align:center;
  color:var(--slate);font-size:12px;
}
.vcard-ph svg{width:30px;height:30px;opacity:.5}
.vcard-media.img-failed .vcard-ph{display:flex}
.vcard-count{
  position:absolute;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(11,37,69,0.78);color:#fff;font-size:12.5px;font-weight:600;
  padding:4px 9px;border-radius:5px;
}
.vcard-count svg{width:14px;height:14px}

/* corpo */
.vcard-body{display:flex;flex-direction:column;gap:9px;padding:16px 16px 18px;flex:1}
.vcard-cat{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:700}
.vcard-title{font-family:var(--sans);font-size:15.5px;line-height:1.32;font-weight:600;margin:0}
.vcard-title a{color:var(--ink);transition:color .2s}
.vcard-title a:hover{color:var(--gold-dark)}
.vcard-specs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
.vcard-spec{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--slate)}
.vcard-spec svg{width:15px;height:15px;color:var(--gold-dark)}
.vcard-loc{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate);margin:0}
.vcard-loc svg{width:14px;height:14px;color:var(--gold-dark);flex:0 0 auto}

/* footer card: prezzo + preferiti */
.vcard-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
}
.vcard-price{font-family:var(--serif);font-size:21px;color:var(--ink);display:flex;align-items:baseline;gap:6px}
.vcard-vat{font-family:var(--sans);font-size:11px;color:var(--slate);font-weight:500}
.vcard-fav{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--slate);cursor:pointer;transition:all .2s;flex:0 0 auto;
}
.vcard-fav svg{width:18px;height:18px}
.vcard-fav:hover{border-color:var(--gold);color:var(--gold-dark)}
.vcard-fav.is-fav{background:var(--gold);border-color:var(--gold);color:#fff}

.shop-empty{text-align:center;color:var(--slate);padding:40px 0;font-size:15px}

/* mobile */
@media(max-width:560px){
  .shop-toolbar{flex-direction:column;align-items:stretch;gap:14px}
  .shop-controls{gap:10px}
  .shop-select{flex:1}
  .shop-select select{min-width:0;width:100%}
  .shop-grid{grid-template-columns:1fr;gap:16px}
  .vcard-media{aspect-ratio:16/10}
}

/* ============================================================
   INSIGHTS / BLOG — lista articoli
   ============================================================ */
/* .blog non viene più generato: le sezioni articoli usano .page-block come
   tutte le altre. Le regole restano per le pagine .html pubblicate prima di
   questa modifica, che finché non vengono rigenerate hanno ancora il vecchio
   markup. Si possono togliere dopo un "Rigenera sito". */
.blog{padding:clamp(40px,6vw,72px) 0}
.blog .section{display:block}

/* articolo in evidenza */
.post-featured-wrap{margin-bottom:clamp(28px,4vw,44px)}
.post-card.post-card-featured{
  display:grid;grid-template-columns:1.15fr 1fr;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .2s,box-shadow .25s,transform .2s;
}
.post-card.post-card-featured:hover{border-color:var(--gold);box-shadow:0 16px 40px rgba(11,37,69,0.12);transform:translateY(-3px)}
.post-card-featured .post-media{aspect-ratio:auto;height:100%;min-height:300px}
.post-card-featured .post-body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.post-card-featured .post-title{font-size:clamp(24px,2.6vw,32px)}
.post-card-featured .post-excerpt{font-size:16px;-webkit-line-clamp:4}

/* griglia articoli */
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(18px,2.5vw,28px);
}

/* card articolo */
.post-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .2s,box-shadow .25s,transform .2s;
}
.post-card:hover{border-color:var(--gold);box-shadow:0 14px 34px rgba(11,37,69,0.10);transform:translateY(-3px)}

.post-media{position:relative;aspect-ratio:16/10;background:#d2d5d9;overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .post-media img,.post-card-featured:hover .post-media img{transform:scale(1.05)}
.post-media .ph-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:none}
.post-media.img-failed .ph-label{display:inline-block}
.post-tag{
  position:absolute;top:12px;left:12px;
  background:var(--navy);color:#fff;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:5px;
}

.post-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.post-title{
  font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.25;
  color:var(--ink);margin:0;
}
.post-excerpt{
  font-size:14.5px;line-height:1.6;color:var(--slate);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-meta{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
  font-size:12.5px;color:var(--slate);
}
.post-dot{opacity:.5}

/* mobile */
@media(max-width:760px){
  .post-card.post-card-featured{grid-template-columns:1fr}
  .post-card-featured .post-media{min-height:0;aspect-ratio:16/10}
}
@media(max-width:560px){
  .post-grid{grid-template-columns:1fr;gap:16px}
}

/* ============================================================
   ARTICOLO SINGOLO + SKELETON LOADING
   ============================================================ */
/* La pagina dell'articolo azzerava il riempimento laterale che .section dà a
   tutte le altre: su schermi stretti il testo arrivava a filo del bordo.
   Sopra e sotto resta il suo, che è più contenuto di quello delle sezioni. */
.article{padding:clamp(30px,5vw,56px) var(--pad) clamp(50px,7vw,90px)}
.article .section{display:block}
.article-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:clamp(24px,3vw,36px)}
.article-tag{
  display:inline-block;background:var(--navy);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:5px;margin-bottom:18px;
}
.article-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,46px);
  line-height:1.15;color:var(--ink);margin:0 0 16px;
}
.article-meta{display:flex;gap:14px;justify-content:center;font-size:14px;color:var(--slate)}
.article-hero{
  aspect-ratio:21/9;border-radius:12px;overflow:hidden;background:#d2d5d9;
  max-width:var(--maxw);margin:0 auto clamp(28px,4vw,44px);
}
.article-content{max-width:720px;margin-left:auto;margin-right:auto}
.article-content p{font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 22px}
.article-note{
  max-width:720px;margin:clamp(28px,4vw,44px) auto 0;padding:18px 22px;
  background:var(--cream);border-left:3px solid var(--gold);border-radius:6px;
}
.article-note p{font-size:14.5px;color:var(--slate);margin:0;font-style:italic}

/* ---- skeleton shimmer ---- */
.sk{
  position:relative;overflow:hidden;background:#e8e6e0;border-radius:4px;
  display:inline-block;
}
.sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);
  animation:skShimmer 1.4s infinite;
}
@keyframes skShimmer{100%{transform:translateX(100%)}}
.sk-line{display:block;height:1em;width:100%;margin:6px 0;border-radius:4px}
.sk-text{height:1em;border-radius:4px;vertical-align:middle}
.sk-pill{width:90px;height:26px;border-radius:5px}
.sk-block{display:block;width:100%;height:100%;border-radius:12px}
.article-title .sk-line{height:.95em;margin:8px auto}
.article-head .sk-line{margin-left:auto;margin-right:auto}

.article-note-top{margin:0 auto clamp(24px,3vw,36px);margin-top:0}

/* ============================================================
   VENDITA — Vrent Approved (hero badge + sezione garanzia)
   ============================================================ */
/* hero con badge a lato */
/* ---- sezione garanzia ---- */
.page-section-approved{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.approved-grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,6vw,80px);align-items:center;
}
/* logo 120px fisso dentro cornice ad anelli concentrici dorati */
.approved-visual{
  position:relative;flex:0 0 auto;
  width:200px;height:200px;
  display:flex;align-items:center;justify-content:center;
}
.approved-visual::before,
.approved-visual::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
/* anello esterno: tratteggio dorato che ruota lentamente */
.approved-visual::before{
  inset:0;
  border:1px dashed rgba(201,168,76,0.45);
  animation:approvedSpin 22s linear infinite;
}
/* anello interno: ruota in senso opposto, più lento */
.approved-visual::after{
  inset:22px;
  border:1px solid rgba(201,168,76,0.22);
  animation:approvedSpinRev 30s linear infinite, approvedPulse 4.5s ease-in-out infinite;
}
@keyframes approvedSpin{to{transform:rotate(360deg)}}
@keyframes approvedSpinRev{to{transform:rotate(-360deg)}}
@keyframes approvedPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes approvedFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@media(prefers-reduced-motion:reduce){
  .approved-visual::before,
  .approved-visual::after,
  .approved-visual img{animation:none}
}
.approved-visual img{
  position:relative;z-index:1;
  width:120px;height:120px;object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,0.4));
  animation:approvedFloat 6s ease-in-out infinite;
}
.approved-ph{
  position:relative;z-index:1;display:none;
  width:120px;height:120px;border-radius:50%;
  align-items:center;justify-content:center;text-align:center;padding:16px;
  border:2px dashed rgba(255,255,255,0.4);color:rgba(255,255,255,0.7);
  font-family:var(--serif);font-size:14px;line-height:1.3;
}
.approved-visual.img-failed .approved-ph{display:flex}
.approved-visual.img-failed img{display:none}

/* il contenuto eredita testo chiaro */
.page-section-approved .eyebrow span{color:var(--gold-light)}
.page-section-approved .section-title{color:#fff}
.page-section-approved .page-lead{color:rgba(255,255,255,0.82)}
.approved-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.approved-list li{
  position:relative;padding-left:30px;font-size:15px;line-height:1.55;
  color:rgba(255,255,255,0.82);
}
.approved-list li strong{color:#fff;font-weight:600}
.approved-list li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
}

/* mobile */
@media(max-width:760px){
  .approved-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .approved-visual{width:180px;height:180px}
  .approved-list{text-align:left}
  .page-section-approved .eyebrow,
  .approved-copy .eyebrow{justify-content:center;display:flex}
}

/* ============================================================
   VFM Technik — aggiunte (page-hero dedicati + questionario NPS)
   ============================================================ */
/* hero delle nuove pagine: immagine dedicata {slug}.webp (desktop) */
/* mobile: velo uniforme + immagine dedicata -m */
@media(max-width:799px){
}

/* scala NPS del questionario feedback: radio nascoste, bottoni numerati */
.nps-scale{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nps-btn{cursor:pointer}
.nps-btn input{position:absolute;opacity:0;pointer-events:none}
.nps-btn span{
  display:flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 6px;
  border:1px solid rgba(11,37,69,0.2);border-radius:4px;
  background:var(--cream);color:var(--navy);
  font-size:14.5px;font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
}
.nps-btn:hover span{border-color:var(--gold)}
.nps-btn input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.nps-btn input:focus-visible + span{outline:2px solid var(--gold);outline-offset:1px}
.nps-btn-wide span{min-width:64px}

/* ============================================================
   HOME2 — landing "Specialisti nel ridare vita ai mezzi
   dell'ecologia" (contenuti da brief PDF cliente)
   ============================================================ */

/* ---- hero ---- */
.home2-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden}
.home2-hero-inner{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,120px) var(--pad) clamp(48px,7vw,88px)}
.home2-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1.04;letter-spacing:-0.01em;max-width:780px}
.home2-lead{margin-top:22px;font-size:17px;line-height:1.6;color:rgba(255,255,255,0.78);max-width:520px}
.home2-quicklinks{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:30px}
.home2-quicklink{font-size:14px;color:rgba(255,255,255,0.85);display:inline-flex;align-items:center;gap:8px}
.home2-quicklink svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}
a.home2-quicklink:hover{color:var(--gold-light)}
.home2-quicklink-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,0.45);
  border:1px solid rgba(255,255,255,0.22);border-radius:20px;padding:2px 9px}

/* ---- statistiche ---- */
/* Le colonne erano cinque fisse: con tre numeri restavano due caselle vuote,
   e il fondo chiaro della fascia le rendeva bene visibili. Ora la fascia si
   divide in parti uguali su quanti numeri ci sono davvero. */
.home2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,0.1);
  margin-top:clamp(40px,6vw,64px);border-radius:6px;overflow:hidden}
.home2-stat{background:var(--navy-2);padding:24px 14px;text-align:center}
.home2-stat-num{font-family:var(--serif);font-size:clamp(26px,3vw,38px);color:var(--gold-light);line-height:1}
.home2-stat-label{font-size:12px;color:rgba(255,255,255,0.65);margin-top:6px;line-height:1.35}
@media(max-width:760px){
  .home2-stats{grid-template-columns:repeat(2,1fr)}
  /* se i numeri sono dispari l'ultimo occupa tutta la riga, invece di
     lasciare mezza fascia vuota accanto a sé */
  .home2-stat:nth-child(odd):last-child{grid-column:1/-1}
}

/* ---- hero con i numeri in riquadri a destra ----
   Stessa sezione della fascia, disposta in due colonne: il testo a sinistra e
   i quattro riquadri accanto, così i dati si leggono senza scendere sotto
   all'immagine. Sotto i 900px torna tutto in colonna, altrimenti né il testo
   né i numeri avrebbero larghezza sufficiente. */
.home2-hero-riquadri{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);align-items:center;
}
.home2-hero-riquadri .home2-stats{
  grid-template-columns:1fr 1fr;margin-top:0;
  background:transparent;gap:12px;border-radius:0;overflow:visible;
}
.home2-hero-riquadri .home2-stat{
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;padding:26px 18px;
}
.home2-hero-riquadri .home2-stat-num{font-size:clamp(28px,3.4vw,42px)}
@media(max-width:900px){
  .home2-hero-riquadri{grid-template-columns:1fr}
  .home2-hero-riquadri .home2-stats{margin-top:clamp(28px,4vw,40px)}
}
@media(max-width:520px){
  .home2-hero-riquadri .home2-stats{grid-template-columns:1fr}
}

/* ---- 6 card "perché scegliere" ---- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(30px,4vw,44px)}
.feature-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px;border-top:3px solid var(--gold)}
.feature-icon{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--navy);border-radius:6px;color:var(--gold-light)}
.feature-icon svg{width:22px;height:22px}
.feature-title{font-family:var(--serif);font-size:19px;margin-top:16px;color:var(--ink)}
.feature-text{font-size:14.5px;color:var(--slate);line-height:1.55;margin-top:8px}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr}}

/* ---- 6 step di processo ---- */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px;margin-top:clamp(30px,4vw,44px)}
.process-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  font-family:var(--serif);font-size:19px;color:#fff;background:var(--gold-dark);border-radius:4px;border-left:3px solid var(--gold)}
.process-title{font-family:var(--serif);font-size:19px;margin-top:14px;color:var(--ink)}
.process-sub{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--gold-dark);margin-top:6px;line-height:1.4}
.process-text{font-size:14.5px;color:var(--slate);line-height:1.55;margin-top:8px}
@media(max-width:900px){.process-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.process-grid{grid-template-columns:1fr}}

/* ---- 3 card detail ---- */
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(30px,4vw,44px);align-items:stretch}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px;display:flex;flex-direction:column;height:100%}
.detail-icon{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;background:var(--cream);border:1px solid var(--line);border-radius:8px;color:var(--gold-dark)}
.detail-icon svg{width:24px;height:24px}
.detail-title{font-family:var(--serif);font-size:21px;margin-top:16px;color:var(--ink)}
.detail-sub{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--gold-dark);margin-top:4px}
.detail-text{font-size:14px;color:var(--slate);line-height:1.6;margin-top:12px}
.check-list-light{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.check-list-light li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink)}
.check-list-light li::before{
  content:"";position:absolute;left:0;top:2px;width:16px;height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A07E2E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}

/* ---- 3 colonne sedi/cantieri/partner ---- */
.cols-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px);margin-top:clamp(30px,4vw,44px)}
.col-title{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);font-weight:700;margin-bottom:16px}
.col-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.col-list li{font-size:14.5px;line-height:1.5;color:var(--slate);padding-left:16px;position:relative}
.col-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.col-list strong{color:var(--ink);font-weight:600}
@media(max-width:760px){.cols-grid{grid-template-columns:1fr}}

/* ---- 5 badge certificazioni ---- */
.cert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:clamp(30px,4vw,44px)}
.cert-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 12px;text-align:center}
.cert-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--gold-dark)}
.cert-icon svg{width:28px;height:28px}
.cert-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:10px}
.cert-sub{font-size:12px;color:var(--slate);margin-top:3px;line-height:1.4}
@media(max-width:900px){.cert-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cert-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   SEZIONI AGGIUNTE DAL CMS — immagine+testo, video, documenti
   (non provengono dai siti esistenti: sono nuove del motore)
   ============================================================ */
.imgtext{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.imgtext-media{position:relative;border-radius:8px;overflow:hidden;background:#eceae4;min-height:220px;}
.imgtext-media img{width:100%;height:100%;object-fit: cover;display:block;min-height: 220px;}
.imgtext-media.img-failed{display:flex;align-items:center;justify-content:center;min-height:220px}
.imgtext-media.img-failed::after{content:"Nessuna immagine";color:var(--slate);font-size:13px}
.imgtext-copy .page-h2{margin-bottom:14px}
.imgtext-destra .imgtext-media{order:2}
@media(max-width:799px){
  .imgtext{grid-template-columns:1fr}
  .imgtext-destra .imgtext-media{order:0}
}

.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:var(--navy);margin-top:20px}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-vuoto{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);
  font-size:14px;text-align:center;padding:20px}

.docs-wrap{display:grid;gap:12px;margin-top:18px}
.doc-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:14px 16px}
.doc-icon{width:34px;height:34px;flex-shrink:0;color:var(--gold)}
.doc-icon svg{width:100%;height:100%}
.doc-body{flex:1;min-width:0}
.doc-title{font-weight:600;font-size:14.5px}
.doc-desc{font-size:12.5px;color:var(--slate);margin-top:2px}
.doc-link{flex-shrink:0;font-weight:600;font-size:13.5px;color:var(--navy)}

/* ============================================================
   BLOG — modalità di visualizzazione aggiuntive
   ============================================================ */

/* striscia scorrevole: articoli in fila, scorrimento orizzontale */
.post-strip{
  display:flex;gap:clamp(16px,2vw,24px);
  overflow-x:auto;
  /* Niente aggancio obbligatorio (scroll-snap-type: x mandatory): con quello
     il trascinamento col mouse veniva riportato indietro a ogni frazione di
     movimento e la striscia sembrava bloccata, mentre quella delle card —
     che non ha aggancio — si trascinava. Ora si comportano allo stesso modo. */
  cursor:grab;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  padding:4px 0 18px;
  /* Come la striscia di card: parte e finisce allineata al testo, ma scorre
     fino ai bordi dello schermo. --edge lo definisce .lines-slider. */
  padding-inline:var(--edge);

  /* barra di scorrimento nascosta: si naviga con le frecce, col dito o con
     la rotellina, e una barra grigia sotto le schede sporcava la sezione */
  scrollbar-width:none;
}
.post-strip::-webkit-scrollbar{display:none}
.post-strip .post-card{flex:0 0 clamp(260px,30vw,330px)}
.post-strip.dragging{cursor:grabbing}
.post-strip.dragging .post-card{pointer-events:none}

/* elenco compatto: righe con miniatura piccola */
.post-compact-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.post-row{
  display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;
  padding:14px 8px;border-bottom:1px solid var(--line);
  transition:background .2s,padding-left .2s;
}
.post-row:first-child{border-top:1px solid var(--line)}
.post-row:hover{background:#faf9f5;padding-left:14px}
.post-row-media{
  width:92px;height:66px;border-radius:7px;overflow:hidden;background:#d2d5d9;flex-shrink:0;
}
.post-row-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-row-body{min-width:0}
.post-row-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:5px;
}
.post-row-title{
  font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25;
  color:var(--ink);margin:0 0 5px;
}
.post-row:hover .post-row-title{color:var(--navy)}
.post-row-meta{font-size:12.5px;color:var(--slate)}
.post-row-arrow{
  font-size:19px;color:var(--gold);opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .2s;
}
.post-row:hover .post-row-arrow{opacity:1;transform:translateX(0)}
@media(max-width:600px){
  .post-row{grid-template-columns:70px 1fr;gap:14px}
  .post-row-media{width:70px;height:52px}
  .post-row-arrow{display:none}
  .post-row-title{font-size:16.5px}
}

/* articolo singolo a tutta larghezza */
.post-hero{
  background-color:var(--navy);background-size:cover;background-position:center;
  background-repeat:no-repeat;color:#fff;border-radius:12px;overflow:hidden;
}
.post-hero-inner{
  padding:clamp(32px,5vw,64px) clamp(24px,4vw,56px);
  max-width:720px;display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.post-hero .eyebrow span{color:var(--gold-light)}
.post-hero .page-h2{color:#fff;margin-bottom:18px}
.post-hero-tag{
  display:inline-block;background:var(--gold);color:var(--navy);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 12px;border-radius:5px;margin-bottom:14px;
}
.post-hero-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,40px);
  line-height:1.15;margin:0 0 12px;color:#fff;
}
.post-hero-excerpt{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 14px;
  max-width:60ch;
}
.post-hero-meta{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:26px}

/* ============================================================
   HERO A SEZIONE INTERA ROTANTE
   Le schermate sono impilate nella stessa cella di griglia: l'altezza
   è quella della più alta, e si alternano in dissolvenza.
   ============================================================ */
.hero-full{
  position:relative;display:grid;grid-template-areas:"slide";
  background:linear-gradient(165deg,var(--navy),var(--navy-deep));
  color:#fff;overflow:hidden;isolation:isolate;
}
.hero-full-slide{
  grid-area:slide;position:relative;
  background:linear-gradient(90deg, rgba(9,28,54,0.92) 0%, rgba(11,37,69,0.74) 48%, rgba(11,37,69,0.34) 100%);
  opacity:0;visibility:hidden;
  transition:opacity .8s ease, visibility .8s;
  display:flex;align-items:center;
  min-height:min(76vh,620px);
}
.hero-full-slide.attiva{opacity:1;visibility:visible}
.hero-full-inner{
  width:100%;padding-top:clamp(48px,7vw,90px);padding-bottom:clamp(48px,7vw,90px);
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:var(--maxw);
}
.hero-full-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,5.2vw,60px);line-height:1.06;
  margin:0 0 16px;max-width:17ch;color:#fff;
}
.hero-full-lead{
  font-size:clamp(15px,1.5vw,18px);line-height:1.6;
  color:rgba(255,255,255,.8);margin:0 0 30px;max-width:52ch;
}
/* la slide attiva entra con un lieve movimento verso l'alto */
@media(prefers-reduced-motion:no-preference){
  .hero-full-slide.attiva .hero-full-inner > *{animation:hfsUp .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-full-slide.attiva .hero-full-inner > *:nth-child(2){animation-delay:.06s}
  .hero-full-slide.attiva .hero-full-inner > *:nth-child(3){animation-delay:.12s}
  .hero-full-slide.attiva .hero-full-inner > *:nth-child(4){animation-delay:.18s}
}
@keyframes hfsUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* pallini di navigazione */
.hero-full-dots{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;gap:9px;z-index:6;
}
.hero-full-dot{
  width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.38);border:none;transition:background .25s,width .25s;
}
.hero-full-dot:hover{background:rgba(255,255,255,.65)}
.hero-full-dot.attivo{background:var(--gold);width:26px;border-radius:5px}

/* frecce laterali */
.hero-full-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.hero-full-arrow:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5)}
.hero-full-arrow svg{width:20px;height:20px}
.hero-full-arrow.prev{left:clamp(10px,2vw,26px)}
.hero-full-arrow.next{right:clamp(10px,2vw,26px)}

@media(max-width:799px){
  .hero-full-slide{min-height:min(70vh,540px)}
  .hero-full-title{max-width:100%}
  .hero-full-arrow{width:36px;height:36px}
  .hero-full-arrow svg{width:16px;height:16px}
}

/* ============================================================
   GRIGLIE CHE SI ADATTANO AL NUMERO DI ELEMENTI
   Aggiungendo o togliendo voci dalla dashboard, la disposizione si
   riequilibra da sola: niente più righe spaiate con un elemento solo.
   ============================================================ */
.feature-grid, .process-grid, .detail-grid, .cert-grid,
.services-grid, .lines-slider ~ * .photo-cards, .cols-grid, .contact-grid{
  --colonne:3;
}
.detail-grid, .cols-grid{ --colonne:2; }

/* un elemento solo: colonna singola, centrata e non troppo larga */
.feature-grid:has(> :only-child),
.process-grid:has(> :only-child),
.detail-grid:has(> :only-child),
.cert-grid:has(> :only-child),
.services-grid:has(> :only-child),
.page-block > .photo-cards:has(> :only-child),
.contact-grid:has(> :only-child),
.cols-grid:has(> :only-child){
  grid-template-columns:minmax(0,580px);justify-content:center;
}
/* due o quattro elementi: due colonne (evita la riga finale con un solo elemento) */
.feature-grid:has(> :nth-child(2):last-child), .feature-grid:has(> :nth-child(4):last-child),
.process-grid:has(> :nth-child(2):last-child), .process-grid:has(> :nth-child(4):last-child),
.cert-grid:has(> :nth-child(2):last-child), .cert-grid:has(> :nth-child(4):last-child),
.services-grid:has(> :nth-child(2):last-child), .services-grid:has(> :nth-child(4):last-child),
.page-block > .photo-cards:has(> :nth-child(2):last-child), .page-block > .photo-cards:has(> :nth-child(4):last-child),
.contact-grid:has(> :nth-child(2):last-child), .contact-grid:has(> :nth-child(4):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* tre o sei elementi: tre colonne */
.feature-grid:has(> :nth-child(3):last-child), .feature-grid:has(> :nth-child(6):last-child),
.process-grid:has(> :nth-child(3):last-child), .process-grid:has(> :nth-child(6):last-child),
.cert-grid:has(> :nth-child(3):last-child), .cert-grid:has(> :nth-child(6):last-child),
.services-grid:has(> :nth-child(3):last-child), .services-grid:has(> :nth-child(6):last-child),
.page-block > .photo-cards:has(> :nth-child(3):last-child), .page-block > .photo-cards:has(> :nth-child(6):last-child),
.contact-grid:has(> :nth-child(3):last-child), .contact-grid:has(> :nth-child(6):last-child),
.cols-grid:has(> :nth-child(3):last-child){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* cinque elementi: due righe da 3 e 2, senza buchi evidenti */
.feature-grid:has(> :nth-child(5):last-child),
.cert-grid:has(> :nth-child(5):last-child){
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.feature-grid:has(> :nth-child(5):last-child) > *,
.cert-grid:has(> :nth-child(5):last-child) > *{ grid-column:span 2; }
.feature-grid:has(> :nth-child(5):last-child) > :nth-child(4),
.cert-grid:has(> :nth-child(5):last-child) > :nth-child(4){ grid-column:2 / span 2; }

@media(max-width:900px){
  .feature-grid, .process-grid, .detail-grid, .cert-grid,
  .services-grid, .page-block > .photo-cards, .contact-grid, .cols-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .feature-grid > *, .cert-grid > *{grid-column:auto !important}
}
@media(max-width:600px){
  .feature-grid, .process-grid, .detail-grid, .cert-grid,
  .services-grid, .page-block > .photo-cards, .contact-grid, .cols-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* ============================================================
   HERO — correzioni e opzioni comuni
   ============================================================ */

/* briciole di navigazione (non compaiono in home) */
.breadcrumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.62);margin-bottom:14px;
}
.breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none}
.breadcrumb a:hover{color:var(--gold-light);text-decoration:underline}
.breadcrumb-sep{opacity:.45}
.breadcrumb [aria-current]{color:#fff}

/* hero alto quanto lo schermo, quando richiesto */
.hero-piena{min-height:100svh;display:flex;align-items:center}
.hero-piena > .section,
.hero-piena > .hero-full-slide{width:100%}
.hero-full.hero-piena .hero-full-slide{min-height:100svh}
@media(max-width:799px){
  .hero-piena{min-height:88svh}
  .hero-full.hero-piena .hero-full-slide{min-height:88svh}
}

/* il pulsante dell'hero non deve allargarsi a tutta la colonna */
.hero-cta{align-self:flex-start;width:auto;display:inline-flex}

/* slider immagini: frecce e pallini insieme, sotto le foto (non sovrapposti) */
.slider-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:18px;position:relative;z-index:5;
}
.slider-nav .slider-arrow{
  position:static;transform:none;width:38px;height:38px;flex-shrink:0;
  border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.slider-nav .slider-arrow:hover{background:rgba(255,255,255,.26)}
.slider-nav .slider-arrow svg{width:18px;height:18px}
.slider-nav .slider-dots{position:static;transform:none;display:flex;gap:8px}

/* testo a destra: si inverte l'ordine delle due colonne */
/* l'ordine delle due colonne è deciso dal markup: qui non serve ribaltare
   nulla, altrimenti le due varianti tornerebbero identiche */
/* Il blocco di testo si sposta a destra, ma le righe restano allineate a
   sinistra: un titolo lungo allineato a destra si legge male, perché ogni
   riga comincia in un punto diverso. È lo stesso comportamento della versione
   con lo slider, dove il testo sta a destra della foto e resta leggibile. */
.hero-full.hero-testo-destra .hero-full-inner{
  /* align-items spinge i blocchi a destra, text-align tiene le righe
     allineate a sinistra dentro ciascun blocco: sono due cose diverse e
     servono entrambe */
  margin-left:auto;text-align:left;align-items:flex-end;
}
.hero-full.hero-testo-destra .hero-full-inner > *{
  width:min(100%, 640px);max-width:min(100%, 640px);margin-left:auto;margin-right:0;
}
.hero-full.hero-testo-destra .breadcrumb{justify-content:flex-start}

/* su mobile il testo viene prima della foto, in tutte le versioni */
@media(max-width:799px){
  .hero-inner{display:flex;flex-direction:column}
  .hero-copy{order:1}
  .hero-media{order:2;margin-top:22px}
  .hero-full.hero-testo-destra .hero-full-inner{margin-left:0}
}

/* le frecce della sezione rotante stanno in basso, non sopra il testo */
.hero-full-nav{
  position:absolute;left:0;right:0;bottom:20px;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.hero-full-nav .hero-full-arrow{position:static;transform:none}
.hero-full-nav .hero-full-dots{position:static;transform:none}
/* con lo slider a piena pagina lo spazio vuoto va lasciato in alto */
.hero-full.hero-piena .hero-full-inner{
  padding-top:clamp(90px,14vh,180px);padding-bottom:clamp(70px,10vh,120px);
}
@media(max-width:799px){
  .hero-full-nav{bottom:14px;gap:10px}
  .hero-full-nav .hero-full-arrow{width:34px;height:34px}
}

/* icona dentro i collegamenti rapidi */
.quicklink-ico{display:inline-flex;width:17px;height:17px;flex-shrink:0}
.quicklink-ico svg{width:100%;height:100%}

/* ============================================================
   BLOCCHI — aggiunte e correzioni
   ============================================================ */

/* i riquadri con spunte si affiancano come le altre griglie */
.bullet-panels{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(24px,3vw,36px);align-items:start;
}
.bullet-panels:has(> :only-child){grid-template-columns:minmax(0,720px);justify-content:center}
.bullet-panels:has(> :nth-child(2):last-child),
.bullet-panels:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.bullet-panel-title{
  font-family:var(--serif);font-weight:400;font-size:22px;
  color:var(--ink);margin:0 0 14px;
}
@media(max-width:900px){.bullet-panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bullet-panels{grid-template-columns:minmax(0,1fr)}}

/* ---- pagina del blog: barra di filtro e ordinamento ---- */
.blog-barra{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  justify-content:space-between;margin-bottom:30px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.blog-filtri{display:flex;flex-wrap:wrap;gap:8px}
.blog-filtro{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font:600 13px system-ui,sans-serif;color:var(--slate);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.blog-filtro:hover{border-color:var(--gold)}
.blog-filtro.on{background:var(--navy);border-color:var(--navy);color:#fff}
.blog-titolo-gruppo{margin:44px 0 22px}
.blog-vuoto{padding:40px 0;text-align:center;color:var(--slate)}
/* categoria e data stanno sulla scheda stessa: niente involucro in mezzo alla
   griglia, quindi nascondere e riordinare funzionano senza sotterfugi */
.blog-nascosto{display:none !important}
@media(max-width:600px){
  .blog-barra{flex-direction:column;align-items:stretch}
}

/* ============================================================
   IMMAGINE CON ELENCO ILLUSTRATO
   Adattata dall'originale: variabili tradotte, regole commentate tolte, e il
   riquadro in rilievo rinominato .prodotti-accent — .img-accent era troppo
   generico e avrebbe colpito qualunque altra immagine del sito.
   ============================================================ */
/* ============================================================
   SECTION: PRODOTTI (su sfondo blu)
   ============================================================ */

.prodotti-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .prodotti-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Su mobile: prima il testo, poi l'immagine */
  .prodotti-text { order: 1; }
  .prodotti-img  { order: 2; }
}

.prodotti-img { position: relative; }
.prodotti-img img{width:100%;max-width:100%;display:block;border-radius:6px}
 .prodotti-accent {position: absolute;
    bottom: -24px;
    right: -24px;
    background: var(--navy-light, #1a3f7a);
    color: #fff;
    padding: 1.4rem 1.8rem;
    border-radius: 6px;
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 8px 32px rgb(26 63 122 / 33%);border-radius:16px;
}
.prodotti-img .prodotti-accent strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .2rem;
}

.prodotti-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
/* L'originale stava su fondo blu, quindi righe e testi erano bianchi: sulle
   nostre sezioni, che partono chiare, sparivano. I colori ora sono quelli del
   sito; le varianti chiare tornano quando la sezione ha il fondo scuro. */
.prodotti-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.prodotti-list li:last-child { border-bottom: none; }

.prod-num {
      max-width: 80px;
    flex-shrink: 0;}
.prod-num img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.prod-text { flex: 1; min-width: 0; }
.prod-text h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: .2rem;
}
.prod-text p {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
/* su una sezione dal fondo scuro i testi si schiariscono da soli */
.sez-navy .prodotti-list li{border-bottom-color:rgba(255,255,255,.12)}
.sez-navy .prod-text h3{color:var(--gold-light)}
.sez-navy .prod-text p{color:rgba(255,255,255,.72)}

@media (max-width: 600px) {
  .elenco-foto { padding: 70px var(--pad); }

  .prod-text h3 {font-size: 1.15rem;}
}

/* in modifica ogni voce ospita il cestino: serve un riferimento */
.prodotti-list li{position:relative}
.prodotti-img{position:relative}

/* ============================================================
   BANNER CON NUMERI
   Due varianti dello stesso disegno: pannello scuro con foto a sinistra, o
   pannello chiaro con foto a destra. Cambiano lato e colori, non la struttura.
   ============================================================ */
/* a tutta larghezza: niente angoli arrotondati, la fascia tocca i due bordi */
.banner-dati{
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.banner-dati-img{overflow:hidden;background:var(--navy-deep);position:relative;min-height:320px}
.banner-dati-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.banner-dati:hover .banner-dati-img img{transform:scale(1.04)}
.banner-dati-testo{
  /* il colore arriva dalla sezione: qui si dichiara solo l'impaginazione */
  background:transparent;
  padding:clamp(32px,4vw,64px) clamp(24px,3.5vw,56px);
  display:flex;flex-direction:column;justify-content:center;
}
/* Il lato del testo sta in riga con le altre sezioni.
   La foto no: è una fascia, deve toccare il bordo dello schermo.
   --edge è la stessa distanza che usa .section per staccarsi dal bordo:
   il riempimento del contenitore più metà dello spazio che avanza quando lo
   schermo è più largo del massimo. Senza, su un monitor grande il titolo del
   banner partiva molto più a sinistra di quello della sezione sopra. */
.banner-dati{--edge:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.banner-dati .banner-dati-testo{padding-right:var(--edge)}
.banner-dati-chiaro .banner-dati-testo{padding-right:clamp(24px,3.5vw,56px);padding-left:var(--edge)}
.banner-etichetta{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dark);margin:0 0 16px;
}
.banner-titolo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,40px);line-height:1.15;color:var(--navy);margin:0 0 20px;
}
.banner-testo{font-size:15px;line-height:1.8;color:var(--slate);margin:0 0 32px}
.banner-dati-numeri{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,38px);margin-bottom:32px}
.banner-dato{display:flex;flex-direction:column;gap:4px;position:relative}
.banner-num{font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.banner-label{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate);
}
/* sul fondo scuro tutto si schiarisce */
.sez-navy .banner-etichetta{color:var(--gold-light)}
.sez-navy .banner-titolo{color:#fff}
.sez-navy .banner-testo{color:rgba(255,255,255,.75)}
.sez-navy .banner-num{color:var(--gold)}
.sez-navy .banner-label{color:rgba(255,255,255,.55)}
.banner-cta{
  align-self:flex-start;background:var(--gold);color:#fff;
  padding:14px 30px;border-radius:4px;text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:background .2s;
}
.banner-cta:hover{background:var(--gold-dark)}

/* La variante cambia solo il lato della foto: il colore lo sceglie il
   pulsante dell'aspetto, come in ogni altra sezione. */
.banner-dati-chiaro .banner-dati-img{order:2}

@media(max-width:860px){
  /* In colonna il testo occupa tutta la larghezza: i quattro lati tornano al
     riempimento normale, lo stesso di .section — di lato var(--pad), sopra e
     sotto var(--sez-y). Prima erano 32px contro i 54 delle altre sezioni:
     messo fra due sezioni normali, il banner sembrava schiacciato, e il
     pulsante in fondo finiva quasi a filo del bordo. */
  .banner-dati .banner-dati-testo,
  .banner-dati-chiaro .banner-dati-testo{
    padding-left:var(--pad);padding-right:var(--pad);
    padding-top:var(--sez-y);padding-bottom:var(--sez-y);
  }
  /* in colonna la foto sta sempre sopra, in tutte e due le varianti */
  .banner-dati{grid-template-columns:1fr}
  .banner-dati-chiaro .banner-dati-img{order:0}
  .banner-dati-img{min-height:240px}
}

/* ============================================================
   PRODOTTO IN EVIDENZA
   Adattata: colori del sito, e su telefono la foto passa dietro al testo
   invece di stargli sopra come blocco a sé.
   ============================================================ */
.focus-prodotto{display:grid;grid-template-columns:1fr 1fr;min-height:460px;overflow:hidden}
.focus-testo{
  padding:clamp(36px,4.5vw,64px) clamp(24px,3.5vw,48px);
  display:flex;flex-direction:column;justify-content:center;
}
/* stessa regola del banner: il testo in riga con le altre sezioni, la foto no */
.focus-prodotto{--edge:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.focus-prodotto .focus-testo{padding-left:var(--edge)}
.focus-etichetta{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-dark);margin:0 0 12px;
}
.focus-titolo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.2vw,40px);line-height:1.15;color:var(--navy);margin:0 0 18px;
}
.focus-testo-corpo{font-size:15px;line-height:1.8;color:var(--slate);margin:0 0 24px}
.focus-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.focus-tag{
  position:relative;background:rgba(11,37,69,.05);border:1px solid var(--line);
  color:var(--slate);font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:20px;
}
.focus-azioni{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.focus-btn{
  display:inline-flex;background:var(--gold);color:#fff;
  padding:13px 28px;border-radius:6px;font-weight:700;font-size:14px;text-decoration:none;
  transition:background .2s,transform .2s;
}
.focus-btn:hover{background:var(--gold-dark);transform:translateY(-2px)}
.focus-prezzo{font-size:13.5px;color:var(--slate)}
.focus-img{position:relative;overflow:hidden;background:var(--navy-deep);min-height:320px}
.focus-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.focus-prodotto:hover .focus-img img{transform:scale(1.04)}
.sez-navy .focus-etichetta{color:var(--gold-light)}
.sez-navy .focus-titolo{color:#fff}
.sez-navy .focus-testo-corpo{color:rgba(255,255,255,.68)}
.sez-navy .focus-tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}
.sez-navy .focus-prezzo{color:rgba(255,255,255,.45)}
@media(max-width:860px){
  /* la foto passa dietro: il testo ci si appoggia sopra, leggibile grazie al velo */
  .focus-prodotto{display:block;position:relative}
  .focus-prodotto .focus-testo{padding-left:var(--pad);padding-right:var(--pad)}
  .focus-img{min-height:520px}
  .focus-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.25),rgba(11,37,69,.82))}
  /* Qui il testo sta sopra la foto, appoggiato in basso: conta soprattutto
     lo stacco da sotto, che è quello del pulsante dal bordo della sezione. */
  .focus-testo{position:absolute;inset:0;justify-content:flex-end;z-index:1;
    padding:var(--sez-y) var(--pad)}
  .focus-titolo,.focus-etichetta{color:#fff}
  .focus-etichetta{color:var(--gold-light)}
  .focus-testo-corpo{color:rgba(255,255,255,.88)}
  .focus-tag{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
  .focus-prezzo{color:rgba(255,255,255,.7)}
}

/* ============================================================
   GRIGLIA DI CATEGORIE — bento
   Le misure non stanno più qui ma sulle celle (--cat-col, --cat-riga): le
   decide il PHP in base a quante categorie ci sono, così l'ultima riga non
   resta mai spaiata. Prima erano fisse — le prime due larghe il doppio — e
   con due o con sette il disegno si sfasciava.
   ============================================================ */
.cat-slider{position:relative;margin-top:36px}
.cat-griglia{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  grid-auto-rows:minmax(200px,auto);
}
.cat-wrap{position:relative;grid-column:span var(--cat-col,2);grid-row:span var(--cat-riga,1)}
/* la cella su cui passa il mouse sale sopra alle altre: senza, i comandi
   dell'editor che sporgono dal riquadro finivano sotto la cella successiva,
   che essendo posizionata e scritta dopo vinceva */
.cat-wrap:hover,.cat-wrap:focus-within{z-index:3}
.cat-card{
  position:relative;display:block;height:100%;min-height:200px;overflow:hidden;
  border-radius:8px;background:var(--navy-deep);border:1px solid var(--line);
  text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(11,37,69,.28);border-color:var(--gold)}
.cat-card img{width:100%;height:100%;object-fit:cover;display:block;opacity:.8;transition:opacity .4s,transform .7s}
.cat-card:hover img{opacity:.95;transform:scale(1.03)}
.cat-velo{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,28,54,.92) 0%,rgba(9,28,54,.25) 48%,transparent 100%);
}
.cat-corpo{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.cat-indice{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--gold-light)}
.cat-nome{font-family:var(--serif);font-size:18px;color:#fff}
.cat-freccia{
  position:absolute;right:16px;bottom:18px;color:var(--gold-light);font-size:18px;
  opacity:0;transform:translate(-6px,4px);transition:opacity .25s,transform .25s;
}
.cat-card:hover .cat-freccia{opacity:1;transform:translate(0,0)}

@media(max-width:1024px){
  /* due colonne: gli schemi del bento non ci stanno, tutte uguali */
  .cat-griglia{grid-template-columns:repeat(2,1fr)}
  .cat-wrap{grid-column:span 1;grid-row:span 1}
}
@media(max-width:640px){
  /* Striscia che si trascina, con lo stesso impianto delle card in striscia:
     esce fino ai bordi dello schermo e il primo riquadro resta allineato al
     testo della sezione. Prima restava dentro il contenitore e si vedeva un
     rientro che le card non hanno. */
  .cat-slider{
    --edge: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
    width:100vw;margin-left:calc(50% - 50vw);
  }
  /* Niente aggancio (scroll-snap): il browser, all'apertura, agganciava il
     primo riquadro al bordo del contenitore e mangiava i 20px di rientro —
     il riquadro partiva incollato allo schermo mentre il titolo sopra era
     rientrato. La striscia delle card non lo usa, e infatti si allinea: qui
     facciamo lo stesso. */
  .cat-griglia{
    display:flex;overflow-x:auto;gap:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;
    padding-inline:var(--edge);padding-bottom:6px;
  }
  .cat-griglia::-webkit-scrollbar{display:none}
  .cat-griglia.dragging{cursor:grabbing}
  .cat-griglia.dragging .cat-card{pointer-events:none}
  .cat-wrap{flex:0 0 74%;max-width:260px;user-select:none}
  .cat-card:hover{transform:none;box-shadow:none}
}

/* ============================================================
   PUNTI DI FORZA SCORREVOLI
   Misure allineate all'originale: la fascia respirava 48px sopra e sotto —
   senza, il testo toccava i bordi e l'altezza scendeva da 136 a 62 pixel.
   Gli scostamenti voluti dall'originale sono due: i colori non sono fissi
   (verde e oro) ma seguono lo sfondo scelto col pulsante dell'aspetto, e il
   riempimento laterale è fisso a 48px come là, non più a fisarmonica — a
   schermo stretto la fisarmonica stringeva le voci e ne entravano di più,
   cambiando il ritmo dello scorrimento.
   ============================================================ */
.punti-forza{overflow:hidden;padding:clamp(34px,4vw,48px) 0}
.forza-nastro{display:flex;width:max-content;animation:forza-scorre 28s linear infinite}
.forza-nastro:hover{animation-play-state:paused}
/* In modifica sta ferma: inseguire un testo che scorre è impossibile.
   Il rientro in più fa posto alla barra dei comandi della sezione (arriva a
   47px dal bordo) e alla "x" della prima riga, che sta 9px sopra la voce e
   con overflow:hidden verrebbe tagliata. */
.forza-nastro.fermo{animation:none;width:auto;flex-wrap:wrap;gap:8px;padding-top:14px}
@keyframes forza-scorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.forza-voce{
  display:flex;align-items:center;gap:16px;padding:0 48px;
  min-width:280px;flex-shrink:0;border-right:1px solid var(--line);position:relative;
}
.forza-voce:last-child{border-right:none}
.forza-nastro.fermo .forza-voce{border-right:none;min-width:240px;padding:10px 0}
.forza-icona{flex-shrink:0;color:var(--gold-dark);display:inline-flex;position:relative}
/* l'originale usava illustrazioni da 40px: le icone di tratto a quella misura
   pesano troppo accanto a un testo da 13px, quindi restano un filo più piccole */
.forza-icona svg{width:36px;height:36px}
.forza-icona .segno-img{width:40px;height:40px;object-fit:contain}
.forza-testo h4{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 4px;line-height:1.3;white-space:nowrap}
.forza-testo p{font-size:12px;color:var(--slate);line-height:1.55;margin:0;max-width:240px}
/* in modifica il titolo deve poter andare a capo: scrivendone uno lungo, con
   nowrap, la voce si allargava a dismisura e spingeva fuori le altre */
.forza-nastro.fermo .forza-testo h4{white-space:normal}
.sez-navy .forza-voce{border-right-color:rgba(255,255,255,.1)}
.sez-navy .forza-icona{color:var(--gold-light)}
.sez-navy .forza-testo h4{color:var(--gold-light)}
.sez-navy .forza-testo p{color:rgba(255,255,255,.85)}
@media(prefers-reduced-motion:reduce){.forza-nastro{animation:none}}

/* ============================================================
   COME FUNZIONA — passaggi in fila su una linea
   L'originale era verde scuro con una griglia di puntini nello sfondo. Lo
   sfondo qui non lo decide la sezione ma il pulsante dell'aspetto, quindi la
   griglia e la vignettatura sono cadute: restano la linea, i pallini e le
   schede, che sono il disegno vero.
   ============================================================ */
.passi-fila{
  --passo-gap:clamp(16px,2vw,26px);
  display:grid;grid-template-columns:repeat(var(--passo-col,4),1fr);
  gap:var(--passo-gap);
  margin-top:44px;position:relative;
}
/* La linea che unisce i pallini. Prima era un elemento unico piazzato con le
   percentuali: sbagliava di dieci pixel per lato, perché il centro della prima
   colonna non è il 12,5% del contenitore quando in mezzo ci sono gli spazi
   della griglia. Ora ogni passo disegna il pezzo che lo separa dal successivo,
   e l'allineamento viene da solo. */
.passo:not(:last-child)::before{
  content:'';position:absolute;top:17px;left:50%;
  width:calc(100% + var(--passo-gap));height:1px;
  background:rgba(194,161,77,.3);
  transform:scaleX(0);transform-origin:left;
  animation:passi-linea-in .5s cubic-bezier(.4,0,.2,1) forwards;
}
.passo:nth-child(1)::before{animation-delay:.25s}
.passo:nth-child(2)::before{animation-delay:.6s}
.passo:nth-child(3)::before{animation-delay:.95s}
.passo:nth-child(n+4)::before{animation-delay:1.3s}
@keyframes passi-linea-in{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .passo::before{animation:none;transform:scaleX(1)}
}

.passo{position:relative;display:flex;flex-direction:column;align-items:center}
.passo-punto{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:1.5px solid rgba(194,161,77,.5);
  position:relative;z-index:2;margin-bottom:24px;
  transition:border-color .3s,box-shadow .3s;
}
.passo-punto-cuore{
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  transition:transform .3s;
}
.passo:hover .passo-punto{border-color:var(--gold);box-shadow:0 0 0 6px rgba(194,161,77,.12)}
.passo:hover .passo-punto-cuore{transform:scale(1.25)}

.passo-card{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 22px 28px;position:relative;overflow:hidden;
  flex-grow:1;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.passo:hover .passo-card{
  transform:translateY(-6px);border-color:rgba(194,161,77,.45);
  box-shadow:0 20px 44px rgba(11,37,69,.12);
}
.passo-ombra{
  position:absolute;top:-6px;right:10px;
  font-family:var(--serif);font-size:62px;line-height:1;
  color:rgba(11,37,69,.06);pointer-events:none;user-select:none;
}
.passo-icona{
  width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(194,161,77,.1);border:1px solid rgba(194,161,77,.2);
  color:var(--gold-dark);margin-bottom:16px;position:relative;
  transition:background .3s,transform .3s;
}
.passo:hover .passo-icona{background:rgba(194,161,77,.18);transform:scale(1.06)}
.passo-icona svg{width:22px;height:22px}
.passo-icona .segno-img{width:26px;height:26px;object-fit:contain}
.passo-titolo{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;
  color:var(--ink);margin:0 0 8px;
}
.passo-testo{color:var(--slate);font-size:15px;line-height:1.7;margin:0 0 16px}
.passo-tag{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-dark);background:rgba(194,161,77,.1);
  border:1px solid rgba(194,161,77,.24);border-radius:20px;padding:4px 11px;
}
.passi-chiusura{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:12px}
.passi-nota{font-size:14px;color:var(--slate);margin:0;position:relative}

.sez-navy .passo-punto{background:var(--navy-deep)}
.sez-navy .passo-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.sez-navy .passo-ombra{color:rgba(255,255,255,.05)}
.sez-navy .passo-icona{color:var(--gold-light)}
.sez-navy .passo-titolo{color:#fff}
.sez-navy .passo-testo{color:rgba(255,255,255,.6)}
.sez-navy .passo-tag{color:var(--gold-light)}
.sez-navy .passi-nota{color:rgba(255,255,255,.45)}

@media (max-width:1024px){
  .passi-fila{grid-template-columns:repeat(2,1fr)}
  /* a due colonne la linea unirebbe passi che non si susseguono */
  .passo:not(:last-child)::before{display:none}
}
@media (max-width:640px){
  /* in colonna la linea diventa verticale: i pallini si agganciano al bordo
     sinistro, che è l'unico modo perché la sequenza si legga ancora */
  .passi-fila{
    grid-template-columns:1fr;gap:0;padding-left:16px;
    border-left:1px solid rgba(194,161,77,.28);
  }
  .passo{flex-direction:row;align-items:flex-start;gap:18px;padding-bottom:28px}
  .passo:not(:last-child)::before{display:none}
  .passo:last-child{padding-bottom:0}
  .passo-punto{margin-bottom:0;margin-left:-33px}
  .passo:hover .passo-card{transform:none;box-shadow:none}
}
.sez-navy .passi-fila{border-left-color:rgba(255,255,255,.2)}

/* ============================================================
   DOMANDE FREQUENTI
   Una sola aperta per volta. In modifica sono tutte aperte, altrimenti nella
   risposta non ci si potrebbe scrivere.
   ============================================================ */
.faq-blocco{max-width:860px;margin-left:auto;margin-right:auto}
.faq-elenco{
  display:flex;flex-direction:column;margin-top:32px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.faq-voce{border-bottom:1px solid var(--line);position:relative}
.faq-voce:last-child{border-bottom:none}

.faq-domanda{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:16px;font-weight:600;
  color:var(--ink);line-height:1.4;
  transition:background .2s;
}
.faq-domanda:hover,.faq-voce.aperta .faq-domanda{background:rgba(11,37,69,.04)}
.faq-freccia{flex-shrink:0;color:var(--gold-dark);display:flex;align-items:center}
.faq-freccia svg{width:18px;height:18px;transition:transform .28s}
.faq-voce.aperta .faq-freccia svg{transform:rotate(180deg)}

.faq-risposta{
  max-height:0;overflow:hidden;padding:0 22px;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .35s;
}
.faq-voce.aperta .faq-risposta,
.faq-elenco.tutte-aperte .faq-risposta{max-height:600px;padding:0 22px 16px}
.faq-risposta p{
  margin:0;font-size:15px;line-height:1.8;color:var(--slate);
  border-left:3px solid rgba(194,161,77,.4);padding-left:14px;
}
.faq-chiusura{margin-top:32px;display:flex;justify-content:center}

.sez-navy .faq-elenco{border-color:rgba(255,255,255,.14)}
.sez-navy .faq-voce{border-bottom-color:rgba(255,255,255,.12)}
.sez-navy .faq-domanda{color:#fff}
.sez-navy .faq-domanda:hover,.sez-navy .faq-voce.aperta .faq-domanda{background:rgba(255,255,255,.06)}
.sez-navy .faq-freccia{color:var(--gold-light)}
.sez-navy .faq-risposta p{color:rgba(255,255,255,.7)}

@media (max-width:640px){
  .faq-domanda{padding:14px 18px;font-size:15px}
  .faq-risposta{padding:0 18px}
  .faq-voce.aperta .faq-risposta,
  .faq-elenco.tutte-aperte .faq-risposta{padding:0 18px 14px}
  .faq-chiusura .btn-gold{display:block;width:100%;text-align:center}
}

/* ============================================================
   CANALI DI CONTATTO
   Tre schede cliccabili per intero. Gli <span> al posto dei <div> non sono un
   vezzo: dentro un <a> un <div> non è ammesso, e i browser lo spostano fuori
   rompendo la scheda.
   ============================================================ */
.canali-griglia{
  display:grid;grid-template-columns:repeat(var(--canale-col,3),1fr);
  gap:20px;align-items:stretch;margin-top:36px;
}
.canale{position:relative;display:flex}
.canale-card{
  flex:1;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 28px 34px;position:relative;overflow:hidden;text-decoration:none;
  box-shadow:0 4px 16px rgba(11,37,69,.05);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.canale-card:hover{
  transform:translateY(-6px);border-color:rgba(194,161,77,.4);
  box-shadow:0 24px 52px rgba(11,37,69,.12);
}
.canale-riga{
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.canale-card:hover .canale-riga{transform:scaleX(1)}

.canale-alto{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px}
.canale-icona{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(194,161,77,.1);border:1px solid rgba(194,161,77,.22);
  color:var(--gold-dark);transition:background .2s,border-color .2s,transform .2s;
}
.canale-icona svg{width:20px;height:20px}
.canale-icona .segno-img{width:48px;height:48px;object-fit:contain}
.canale-card:hover .canale-icona{background:rgba(194,161,77,.18);transform:scale(1.06)}
.canale-num{font-size:11px;font-weight:700;letter-spacing:.15em;color:rgba(11,37,69,.2)}

.canale-corpo{display:flex;flex-direction:column;gap:7px;flex:1;margin-bottom:22px}
.canale-tag{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark)}
.canale-titolo{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--ink);line-height:1.2}
.canale-testo{font-size:14px;color:var(--slate);line-height:1.7}
.canale-valore{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;letter-spacing:.02em}

.canale-cta{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1.5px solid rgba(11,37,69,.18);padding-bottom:3px;
  transition:color .2s,border-color .2s,gap .2s;
}
.canale-cta svg{width:13px;height:13px;transition:transform .2s}
.canale-card:hover .canale-cta{color:var(--gold-dark);border-color:rgba(194,161,77,.45);gap:12px}
.canale-card:hover .canale-cta svg{transform:translateX(3px)}

.sez-navy .canale-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.sez-navy .canale-icona{color:var(--gold-light)}
.sez-navy .canale-num{color:rgba(255,255,255,.22)}
.sez-navy .canale-tag{color:var(--gold-light)}
.sez-navy .canale-titolo,.sez-navy .canale-valore{color:#fff}
.sez-navy .canale-testo{color:rgba(255,255,255,.65)}
.sez-navy .canale-cta{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.sez-navy .canale-card:hover .canale-cta{color:var(--gold-light)}

/* Riquadri contatto con recapiti: stesso vestito dei canali — quadratino
   dell'icona, numero in filigrana, riga dorata in basso — ma non è un
   collegamento unico: dentro c'è un elenco di righe, ognuna con la sua
   destinazione. Le regole comuni stanno sopra e valgono per entrambe. */
.canale-riq{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 28px 34px;box-shadow:0 4px 16px rgba(11,37,69,.05);
}
.canale-riq .canale-alto{margin-bottom:22px}
.canale-riq .canale-tag{display:block;margin-bottom:4px}
.canale-riq .canale-titolo{display:block;margin-bottom:14px}
.canale-riq .contact-righe{margin-top:0}
.canale-riq .canale-riga{transform:scaleX(1)}
.sez-navy .canale-riq{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.sez-navy .canale-riq .canale-titolo{color:#fff}
.sez-navy .canale-riq .contact-riga{color:rgba(255,255,255,.72)}
.sez-navy .canale-riq .contact-riga .ci{color:var(--gold-light)}
.sez-navy .canale-riq a.contact-link:hover{color:var(--gold-light)}

@media (max-width:1024px){
  .canali-griglia{grid-template-columns:repeat(2,1fr);gap:16px}
  .canale-card{padding:26px 22px 28px}
}
@media (max-width:640px){
  .canali-griglia{grid-template-columns:1fr;gap:14px}
  .canale-card:hover{transform:none;box-shadow:0 4px 16px rgba(11,37,69,.05)}
}

/* ============================================================
   PASSI NUMERATI
   Ricostruita: l'originale portava con sé un intero framework, con un blocco
   :root che avrebbe riscritto spaziature, testi e colori di tutto il sito.
   Qui restano solo il disegno — cerchio, linea tratteggiata a zig-zag, lati
   alternati — e le variabili sono chiuse dentro .passi-numerati, così non
   toccano nient'altro.
   ============================================================ */
.passi-numerati{
  --passon-cerchio:44px;
  --passon-tratto:2px;
  --passon-curva:16px;
  --passon-gap-x:clamp(16px,2.4vw,28px);
  --passon-gap-y:clamp(56px,7vw,104px);
  --passon-linea:rgba(11,37,69,.22);
}
.passon-elenco{list-style:none;margin:44px auto 0;padding:0;max-width:980px;counter-reset:none}

.passon-voce{position:relative;display:flex;gap:var(--passon-gap-x)}
.passon-voce:not(:last-child){
  padding-bottom:calc(var(--passon-gap-y) / 2);
  margin-bottom:calc(var(--passon-gap-y) / 2);
}

/* la linea tratteggiata: ::before scende accanto al cerchio e piega verso il
   centro, ::after riparte dal centro e piega verso il lato opposto. Insieme
   fanno la esse che porta al passo dopo. */
.passon-voce::before,
.passon-voce::after{
  content:'';position:absolute;pointer-events:none;
  width:calc(50% - var(--passon-cerchio) / 2 + var(--passon-tratto) / 2);
}
.passon-voce::before{
  top:calc(var(--passon-cerchio) + var(--passon-tratto));
  height:calc(100% - var(--passon-cerchio) - var(--passon-tratto));
  border-bottom:var(--passon-tratto) dashed var(--passon-linea);
}
.passon-voce::after{
  top:calc(100% - var(--passon-tratto));
  height:calc(var(--passon-gap-y) / 2);
  border-top:var(--passon-tratto) dashed var(--passon-linea);
}
.passon-voce:last-child::before,
.passon-voce:last-child::after{display:none}

/* dispari: cerchio a sinistra */
.passon-voce:nth-child(odd){padding-right:calc(var(--passon-cerchio) / 2)}
.passon-voce:nth-child(odd)::before{
  left:calc(var(--passon-cerchio) / 2 - var(--passon-tratto) / 2);
  border-left:var(--passon-tratto) dashed var(--passon-linea);
  border-bottom-left-radius:var(--passon-curva);
}
.passon-voce:nth-child(odd)::after{
  left:50%;
  border-right:var(--passon-tratto) dashed var(--passon-linea);
  border-top-right-radius:var(--passon-curva);
}
/* pari: tutto specchiato */
.passon-voce:nth-child(even){padding-left:calc(var(--passon-cerchio) / 2);flex-direction:row-reverse}
.passon-voce:nth-child(even)::before{
  right:calc(var(--passon-cerchio) / 2 - var(--passon-tratto) / 2);
  border-right:var(--passon-tratto) dashed var(--passon-linea);
  border-bottom-right-radius:var(--passon-curva);
}
.passon-voce:nth-child(even)::after{
  right:50%;
  border-left:var(--passon-tratto) dashed var(--passon-linea);
  border-top-left-radius:var(--passon-curva);
}

.passon-numero{
  width:var(--passon-cerchio);height:var(--passon-cerchio);flex-shrink:0;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:var(--passon-tratto) solid rgba(194,161,77,.5);
  color:var(--gold-dark);background:transparent;
  font-family:var(--serif);font-size:20px;line-height:1;
}
/* Il segno può essere numero, icona, SVG o foto: dentro il cerchio devono
   pesare tutti uguale, altrimenti un'icona lo riempie fino al bordo e un
   numero ci nuota dentro. */
.passon-numero svg{width:20px;height:20px}
.passon-numero .segno-img{width:26px;height:26px;object-fit:cover;border-radius:50%}
.passon-numero .segno-vuoto{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.4}

.passon-corpo{
  flex-grow:1;display:flex;align-items:center;
  gap:clamp(18px,2.6vw,36px);
}
.passon-voce:nth-child(even) .passon-corpo{flex-direction:row-reverse}
.passon-media{flex:1 1 50%;margin:0;position:relative;min-width:0}
.passon-media img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;background:rgba(11,37,69,.05);
}
.passon-testo{flex:1 1 50%;min-width:0}
.passon-titolo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.4vw,27px);line-height:1.15;
  color:var(--ink);margin:0 0 10px;
}
.passon-desc{color:var(--slate);line-height:1.65;margin:0}
.passon-chiusura{margin-top:44px;text-align:center}

/* fondo scuro: la linea e il cerchio si schiariscono, altrimenti spariscono */
.sez-navy .passi-numerati{--passon-linea:rgba(255,255,255,.25)}
.sez-navy .passon-numero{border-color:rgba(216,190,126,.55);color:var(--gold-light)}
.sez-navy .passon-titolo{color:#fff}
.sez-navy .passon-desc{color:rgba(255,255,255,.72)}
.sez-navy .passon-media img{background:rgba(255,255,255,.06)}

@media (max-width:860px){
  .passi-numerati{--passon-cerchio:34px}
  .passon-numero{font-size:16px}
  .passon-corpo,
  .passon-voce:nth-child(even) .passon-corpo{flex-direction:column;align-items:stretch;gap:16px}
  .passon-media,.passon-testo{flex:1 1 auto}
  .passon-media img{aspect-ratio:16/10}
}

/* ============================================================
   MENÙ A SCHEDE
   Adattata dall'originale: variabili tradotte, il selettore #menu — che non
   si può ripetere — diventa .menu-listino, e sfondo e riempimento tolti
   perché li dà .page-section, che ne permette anche la scelta.
   ============================================================ */
.menu-listino .menu-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap;gap:24px;
}
.menu-header-testo{flex:1;min-width:min(100%,320px)}
.menu-tabs{display:flex;gap:5px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.menu-tabs li{position:relative}
.menu-tab{
  display:inline-block;
  font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 19px;border-radius:2px;
  border:1px solid var(--line);background:transparent;color:var(--slate);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.menu-tab:hover{color:var(--ink);border-color:var(--gold)}
/* la linguetta attiva prende il colore dei collegamenti, non un rosso che nel
   nostro sito non esiste */
.menu-tab.active{background:var(--gold);border-color:var(--gold);color:#fff}

.menu-panel{display:none}
.menu-panel.active{display:grid;grid-template-columns:repeat(2,1fr);gap:1px}
@media(max-width:680px){.menu-panel.active{grid-template-columns:1fr}}

.menu-item{
  padding:24px 20px;background:rgba(11,37,69,.03);
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  border-bottom:1px solid var(--line);transition:background .2s;position:relative;
}
.menu-item:hover{background:rgba(11,37,69,.06)}
.mi-info{min-width:0}
.mi-info h4{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink);margin-bottom:5px}
.mi-info p{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0}
.mi-badge{
  display:inline-block;margin-top:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:2px;
}
.badge-oro{background:rgba(194,161,77,.16);color:var(--gold-dark)}
.badge-azzurro{background:rgba(61,146,188,.14);color:#2a6b8f}
.badge-verde{background:rgba(40,150,90,.14);color:#1f7a48}
.badge-rosso{background:rgba(179,38,30,.14);color:#b3261e}
.mi-price{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--gold-dark);white-space:nowrap;flex-shrink:0}

/* su fondo scuro: righe, riquadri e testi si schiariscono */
.sez-navy .menu-tab{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6)}
.sez-navy .menu-tab:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.sez-navy .menu-item{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.07)}
.sez-navy .menu-item:hover{background:rgba(255,255,255,.07)}
.sez-navy .mi-info h4{color:#fff}
.sez-navy .mi-info p{color:rgba(255,255,255,.5)}
.sez-navy .mi-price{color:var(--gold-light)}
.sez-navy .badge-oro{color:var(--gold-light)}
.sez-navy .badge-azzurro{color:#7ecfed}
.sez-navy .badge-verde{color:#5ddba0}
.sez-navy .badge-rosso{color:#f08080}

/* ============================================================
   SEZIONE SEDI — schede con orari
   Adattata dal file originale: variabili tradotte in quelle del sito, sfondo
   e riempimento tolti perché li dà .page-section (che ne permette anche la
   scelta), e il vecchio selettore #sedi sostituito da .sedi-blocco — un id
   non si può ripetere, e la sezione può comparire più volte nel sito.
   ============================================================ */
/* ============================================================
   SECTION: SEDI (tabs + card tone-on-tone)
   ============================================================ */
/* Lo sfondo e il riempimento della sezione li dà .page-section, che ne
   permette anche la scelta dal pulsante dell'aspetto: imporli qui li avrebbe
   resi fissi e diversi da tutte le altre sezioni. */

.sedi-tabs-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  margin-top: 2rem;
}

/* TABS verticali su desktop */
.sedi-tabs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 0;
  margin: 0;
}
.sedi-tabs li { width: 100%; }
.sedi-tab {
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .85rem 1.2rem;
  border-radius: 2px;
  border: 1px solid rgb(0 0 0 / 18%);
  background: transparent;
  color: rgb(0 0 0 / 55%);
  cursor: pointer;
  transition: all .2s;
}
.sedi-tab:hover {
  color: var(--ink);
  border-color: rgb(0 0 0 / 40%);
}
/* La linguetta attiva prende il colore dei collegamenti, non un rosso che
   nel nostro sito non esiste. */
.sedi-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* PANNELLI */
.sedi-panels { position: relative; }
.sede-panel { display: none; }
.sede-panel.active {
  display: block;
  animation: fadeInPanel .35s ease;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CARD tone-on-tone */
.sede-card {
  background: var(--cream-dk, #f1ede4);
  padding: 2.5rem 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}


/* Immagine sede */
.sede-card .sede-map {
  width: 100%;
  height: 160px;
  background: rgba(14,42,92,.06);
  border-radius: 6px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  position: relative;
}
@media (min-width: 520px) {
    .sede-card .sede-map {
        height: 320px;
    }
}
.sede-card .sede-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.sede-card .sede-map svg {
  display: none;
  width: 42px; height: 42px;
  fill: rgba(14,42,92,.2);
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Etichetta località in alto */
.sede-card .sede-nav {
  position: absolute;
  top: 23px;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem .4rem .45rem;
  background: #c5281e7a;
  border: 1px solid #991f175e;
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sede-card .sede-nav-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
  padding: 2px;
}
.sede-card .sede-nav-label { line-height: 1; }

/* Indirizzo cliccabile con icona */
.sede-address-link {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0;
  color: var(--slate);
  text-decoration: none;
  transition: color .2s;
}
.sede-address-link:hover, .sede-tel-link:hover { color: var(--navy); }
.sede-address-link svg {
  width: 18px; height: 18px;
  fill: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.sede-address-link address {
  font-style: normal;
  font-size: .88rem;
  line-height: 1.5;
  margin: 0;
}

/* Telefono cliccabile con icona */
.sede-tel-link {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 0;
  text-decoration: none;
  transition: color .2s;
  margin-bottom: 1.2rem;
}

.sede-tel-link svg {
  width: 18px; height: 18px;
  fill: var(--gold);
  flex-shrink: 0;
}
.sede-tel-link .sede-tel {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: rgb(0 0 0 / 85%);
}

/* Badge stati */
.sede-card .sede-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 4px;
  margin-bottom: 1.2rem;
  width: fit-content;
}
.sede-card .sede-badge.aperto      { background: rgba(40,140,80,.15); color: #1f7a3a; }
.sede-card .sede-badge.presto      { background: rgba(200,148,58,.18); color: var(--gold-dark); }
.sede-card .sede-badge.apre-presto { background: rgba(200,148,58,.18); color: var(--gold-dark); }
.sede-card .sede-badge.chiuso      { background: rgba(179,38,30,.14); color: #b3261e; }

/* ---- la sezione segue lo sfondo scelto ----
   Su fondo scuro linguette, scheda, righe e testi si schiariscono: prima
   erano colori fissi, pensati per la sola versione chiara, e sul blu notte
   diventavano illeggibili. */
.sez-navy .sedi-tab{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.72)}
.sez-navy .sedi-tab:hover{border-color:rgba(255,255,255,.55);color:#fff}
.sez-navy .sede-card{background:rgba(255,255,255,.06)}
.sez-navy .sede-card .sede-orari th,
.sez-navy .sede-tel-link .sede-tel{color:#fff}
.sez-navy .sede-card .sede-orari,
.sez-navy .sede-address-link{color:rgba(255,255,255,.75)}
.sez-navy .sede-card .sede-orari th,
.sez-navy .sede-card .sede-orari td{border-bottom-color:rgba(255,255,255,.12)}
.sez-navy .sede-card .sede-orari td.turno-vuoto,
.sez-navy .sede-chiuso-riga{color:rgba(255,255,255,.4)}
.sez-navy .sede-address-link:hover,.sez-navy .sede-tel-link:hover{color:var(--gold-light)}
.sez-navy .sede-cta{border-color:rgba(255,255,255,.45);color:#fff}
.sez-navy .sede-cta:hover{background:#fff;color:var(--navy)}
.sez-navy .sede-cta--primary{background:var(--gold);border-color:var(--gold);color:#fff}
.sez-navy .sede-cta--primary:hover{background:var(--gold-dark);color:#fff}
/* l'icona dentro il pulsante segue il testo, qualunque sia il modo scelto */
.sede-cta-icona{display:inline-flex;align-items:center;position:relative}
.sede-cta-icona svg{width:16px;height:16px;fill:currentColor}
.sede-cta-icona .segno-img{width:18px;border-radius:4px}
.sede-cta-icona .segno-numero{font-size:14px}

/* Orari in tabella */
.sede-card .sede-orari {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--slate);
  margin: .25rem 0 1.5rem;
}
.sede-card .sede-orari th,
.sede-card .sede-orari td {
  padding: .5rem .35rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(14,42,92,.08);
}
.sede-card .sede-orari th {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  width: 40%;
}
.sede-card .sede-orari td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sede-card .sede-orari td.turno-vuoto { color: rgba(14,42,92,.3); }
.sede-card .sede-orari tr:last-child th,
.sede-card .sede-orari tr:last-child td { border-bottom: none; }

/* CTA row — 3 pulsanti, 33% su desktop, 100% impilati su mobile */
.sede-cta-row {
  display: flex;
  gap: .6rem;
  margin-top: auto;
  padding-top: 1.25rem;
}
.sede-cta {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .9rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--navy);
  background: #ffffff00;
  color: var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.sede-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}
.sede-cta:hover {
  background: var(--navy);
  color: #fff;
}
.sede-cta--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.sede-cta--primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

/* ====== MOBILE: tabs in alto su più righe (versione semplice) ====== */
@media (max-width: 900px) {
  .sedi-tabs-wrap {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sedi-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .sedi-tabs li { width: auto; }
  .sedi-tab {
    width: auto;
    padding: .5rem 1.2rem;
    font-size: .72rem;
  }
}

@media (max-width: 600px) {
  /* Padding laterale solo all'header tabs visto che il wrap perde il padding */
  .sedi-blocco .sedi-tabs {
    padding: 0 var(--pad);
  }
  /* CTA impilati */
  .sede-cta-row {
    flex-direction: column;
    gap: .5rem;
  }
  .sede-cta { width: 100%; }
}

/* in modifica la scheda ospita anche i comandi: serve spazio e un riferimento */
.sede-card{position:relative}
.ve-orari-btn{
  background:#fff;color:#0B2545;border:1.5px dashed #0e6e6b;border-radius:6px;
  padding:6px 12px;font:600 12px system-ui,sans-serif;cursor:pointer;margin:8px 0 0;
}

/* ---- il segno di una voce: numero, icona o immagine ----
   Occupano lo stesso posto, quindi devono avere la stessa misura: cambiando
   modo la riga non deve saltare. */
.segno-numero{
  font-family:var(--serif);font-size:1.5em;font-weight:400;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;min-width:1em;
}
/* Un'immagine al posto del numero resta sempre quadrata: dentro una fila di
   numeri, una foto di proporzioni qualsiasi farebbe saltare l'allineamento. */
.segno-img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:12px;display:block}
/* i tre posti dove il segno sostituisce un numero: misura contenuta */
.process-num .segno-img,.banner-num .segno-img,.home2-stat-num .segno-img{width:64px}
.process-num,.banner-num,.home2-stat-num{position:relative}
.process-num .segno-numero,.banner-num .segno-numero,.home2-stat-num .segno-numero{font-size:inherit}
.process-num svg,.banner-num svg,.home2-stat-num svg{width:40px;height:40px}
.segno-vuoto{display:block;width:100%;min-height:2em;background:#eceef1;border-radius:5px}

/* ---- immagine che non si carica ----
   Il segnaposto sostituisce il contenuto dell'elemento: il bordo tratteggiato
   e il fondo restano dietro, così si vede che lì ci andrebbe una foto.
   `content` funziona sui browser recenti; per gli altri resta lo sfondo, che
   da solo copre già l'icona di immagine rotta nella maggior parte dei casi. */
img.img-mancante{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23b9bfc8'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Zm142.5-297.5Q400-595 400-620t-17.5-42.5Q365-680 340-680t-42.5 17.5Q280-645 280-620t17.5 42.5Q315-560 340-560t42.5-17.5Z'/%3E%3C/svg%3E");
  object-fit:contain;padding:14%;box-sizing:border-box;
  background:#eceef1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23b9bfc8'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm40-160h480L570-480 450-320l-90-120-120 160Zm142.5-297.5Q400-595 400-620t-17.5-42.5Q365-680 340-680t-42.5 17.5Q280-645 280-620t17.5 42.5Q315-560 340-560t42.5-17.5Z'/%3E%3C/svg%3E") center / 34% no-repeat;
  border:1px dashed #c9cdd4;border-radius:5px;
  font-size:0;color:transparent;   /* nasconde il testo alternativo */
  min-height:80px;
}

/* ---- elementi del corpo dell'articolo ---- */
/* p.article-lead e non .article-lead: dentro .article-content c'è una regola
   sui paragrafi che vale quanto questa e, venendo dopo, vinceva — l'apertura
   si vedeva come un paragrafo qualunque. Aggiungendo il tag il peso sale. */
p.article-lead{font-size:clamp(18px,2.2vw,21px);line-height:1.6;color:var(--ink);margin-bottom:22px}
.article-content > .article-h2,.article-content .article-h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);
  line-height:1.2;color:var(--ink);margin:34px 0 12px}
.article-h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,25px);
  line-height:1.25;color:var(--ink);margin:26px 0 10px}
.article-h4{font-weight:700;font-size:17px;color:var(--ink);margin:22px 0 8px}
.article-quote{
  margin:28px 0;padding:20px 26px;border-left:3px solid var(--gold);
  background:rgba(194,161,77,.07);border-radius:0 6px 6px 0;
}
.article-quote p{font-family:var(--serif);font-size:clamp(19px,2.3vw,23px);line-height:1.4;color:var(--ink)}
.article-quote cite{display:block;margin-top:10px;font-style:normal;font-size:13.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);font-weight:700}
.article-lista{margin:18px 0 18px 22px}
.article-lista li{margin-bottom:8px;line-height:1.65;color:var(--slate)}
.article-figura{margin:30px 0}
.article-figura img{width:100%;height:auto;border-radius:5px;display:block}
.article-figura figcaption{margin-top:9px;font-size:13.5px;color:var(--slate);font-style:italic}
.article-affianco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);
  align-items:center;margin:30px 0}
.article-affianco.foto-destra .article-affianco-media{order:2}
.article-affianco-media img{width:100%;height:auto;border-radius:5px;display:block}
.article-affianco-testo p{line-height:1.7}
.article-html{margin:26px 0}
.article-html iframe{max-width:100%}
/* gli articoli correlati in fondo */
.article-correlati{background:var(--cream);border-top:1px solid var(--line);
  padding:clamp(44px,6vw,72px) 0}
.article-correlati .section-title{margin-bottom:26px}
@media(max-width:700px){
  /* affiancare foto e testo sotto i 700px li rimpicciolisce entrambi:
     meglio uno sotto l'altro, con la foto sempre sopra */
  .article-affianco{grid-template-columns:1fr}
  .article-affianco.foto-destra .article-affianco-media{order:0}
}

/* ---- timeline: tappe alternate su una linea centrale ----
   La linea grigia corre al centro; sopra ci scorre una seconda linea dorata
   che si riempie man mano che si scende, e ogni tappa compare quando entra
   nello schermo. Il riempimento è una scalatura verticale comandata da
   --progress, che aggiorna il JavaScript: si anima sulla GPU e non costringe
   il browser a ricalcolare il layout a ogni pixel di scorrimento. */
/* Qui l'intestazione va al centro: la timeline è simmetrica rispetto alla
   linea, e un titolo appoggiato a sinistra le resterebbe storto sopra.
   Vale solo dentro .timeline-blocco, non nelle altre sezioni. */
.timeline-blocco .section-head{flex-direction:column;align-items:center;text-align:center;gap:6px}
.timeline-blocco .section-head-main{text-align:center}
.timeline-blocco .eyebrow{justify-content:center}
.timeline-blocco .section-intro,
.timeline-blocco .page-lead,
.timeline-blocco .page-text{max-width:46rem;margin-left:auto;margin-right:auto;text-align:center}
.timeline-blocco .section-intro{font-style:italic}

.timeline{position:relative;list-style:none;padding:8px 0;margin-top:36px}
.timeline::before,
.timeline::after{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);
  /* Le due linee stanno SOTTO alle tappe. Senza dirlo, essendo pseudo-elementi
     sono gli ultimi figli e venivano disegnate sopra a tutto: la linea dorata
     attraversava il cerchio dell'icona invece di sparirci dietro. */
  z-index:0;
}
.timeline::before{background:var(--line)}
.timeline::after{
  background:linear-gradient(var(--gold), var(--gold-light));
  transform-origin:top center;
  transform:translateX(-50%) scaleY(var(--progress,0));
}

.timeline-tappa{
  position:relative;z-index:1;width:50%;padding:18px 44px;
  opacity:0;transform:translateY(26px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s;
}
/* Il riempimento sta solo dal lato della linea: così la scheda arriva fino al
   bordo esterno di .page-block, allineata al resto della pagina, e lascia
   spazio solo verso il centro dove passano linea e nodo. */
.timeline-tappa[data-lato="sinistra"]{left:0;text-align:right;padding-left:0;padding-right:44px}
.timeline-tappa[data-lato="destra"]{left:50%;text-align:left;padding-left:44px;padding-right:0}
.timeline-tappa.in-vista{opacity:1;transform:translateY(0)}

.timeline-nodo{
  position:absolute;top:30px;width:44px;height:44px;z-index:2;
  display:grid;place-items:center;border-radius:50%;
  background:var(--cream);border:1px solid var(--line);color:var(--gold-dark);
  transform:scale(.5);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, box-shadow .5s;
}
.timeline-tappa.in-vista .timeline-nodo{
  transform:scale(1);border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(194,161,77,.16);
}
.timeline-nodo svg{width:24px;height:24px}
.timeline-tappa[data-lato="sinistra"] .timeline-nodo{right:-22px}
.timeline-tappa[data-lato="destra"] .timeline-nodo{left:-22px}

.timeline-card{
  display:block;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:22px 24px;
}
/* su fondo bianco la scheda bianca sparirebbe: si inverte */
.sez-bianco .timeline-card{background:var(--cream)}
.sez-bianco .timeline-nodo{background:#fff}

.timeline-etichetta{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);background:rgba(194,161,77,.10);border:1px solid rgba(194,161,77,.28);
}
.timeline-titolo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2.2vw,23px);line-height:1.2;color:var(--ink);
}
.timeline-desc{font-size:15.5px;line-height:1.6;color:var(--slate);margin-top:8px}

@media(max-width:760px){
  /* su telefono niente centratura: titolo e testi tornano a sinistra come
     nel resto del sito, dove la colonna è una sola */
  .timeline-blocco .section-head,
  .timeline-blocco .section-head-main{align-items:flex-start;text-align:left}
  .timeline-blocco .eyebrow{justify-content:flex-start}
  .timeline-blocco .section-intro,
  .timeline-blocco .page-lead,
  .timeline-blocco .page-text{margin-left:0;margin-right:0;text-align:left}
  /* la linea si sposta a sinistra e le tappe vanno in colonna unica */
  .timeline::before,.timeline::after{left:21px}
  .timeline-tappa,
  .timeline-tappa[data-lato="sinistra"],
  .timeline-tappa[data-lato="destra"]{width:100%;left:0;padding:14px 0 14px 62px;text-align:left}
  .timeline-tappa[data-lato="sinistra"] .timeline-nodo,
  .timeline-tappa[data-lato="destra"] .timeline-nodo{left:0;right:auto;top:16px}
  /* sul telefono il cerchio è più piccolo: l'icona a 24px lo riempirebbe */
  .timeline-nodo svg{width:20px;height:20px}
  .timeline-card{max-width:none;display:block}
}

/* chi ha chiesto meno animazioni vede tutto subito, linea compresa */
@media(prefers-reduced-motion:reduce){
  .timeline-tappa{opacity:1;transform:none;transition:none}
  .timeline-nodo{transform:scale(1)}
}

/* ---- griglia di card (non la striscia) ----
   Prima usava lo stesso contenitore della striscia, .photo-cards, che ha
   overflow-x:auto: la griglia scorreva di lato invece di andare a capo.
   Qui è una griglia vera, con le colonne decise dalla sezione (--card-col)
   contando le card: fino a 3 in fila, 4 diventano 2+2, da 5 in su 3 per riga. */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(var(--card-col,3), minmax(0,1fr));
  gap:18px;
  /* spazio sopra e sotto per la foto che sporge e per l'ombra */
  padding-top:60px;padding-bottom:20px;margin-top:-40px;
  align-items:stretch;
}
/* nella griglia la larghezza la dà la colonna, non il calcolo della striscia */
.photo-grid .photo-card{width:auto;flex:initial;display:flex;flex-direction:column;height:100%}
.photo-grid .photo-card-body{flex:1;display:flex;flex-direction:column}
.photo-grid .photo-card-text{flex:1}
/* con la foto contenuta non sporge niente: niente spazio da riservare */
.photo-grid.photo-cards-contenuta{padding-top:0;margin-top:8px}
@media(max-width:900px){.photo-grid{--card-col:2 !important}}
@media(max-width:600px){.photo-grid{--card-col:1 !important}}

/* card con foto: stessa altezza sulla stessa riga */
.photo-cards{align-items:stretch}
.photo-cards .photo-card{display:flex;flex-direction:column;height:100%}
.photo-cards .photo-card-body{flex:1;display:flex;flex-direction:column}
.photo-cards .photo-card-text{flex:1}

/* variante con la foto contenuta nel riquadro, senza sporgere */
.photo-cards-contenuta .photo-card{overflow:hidden}
.photo-cards-contenuta .photo-card-media{
  margin:0;border-radius:0;aspect-ratio:16/10;overflow:hidden;
}
.photo-cards-contenuta .photo-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}



/* Card in scorrimento dentro una sezione del CMS.
   L'originale usciva a tutta larghezza perché stava al primo livello della
   pagina; qui è annidato in .page-section, che aggiunge il proprio margine:
   la larghezza piena raddoppiava lo scostamento e disallineava la prima card.
   Restando dentro il contenitore, la prima card si allinea al titolo. */
.page-section .lines-slider{
  width:100%;margin-left:0;
}
.page-section .lines-slider .photo-cards{
  padding-inline:0;
  /* lo spazio sopra/sotto serve a non tagliare la foto che sporge e l'ombra */
  padding-top:60px;padding-bottom:60px;margin-bottom:-40px;
}


/* Il video di sfondo è posizionato in modo assoluto: senza un riferimento sul
   contenitore esce e ricopre l'intera pagina. Queste regole lo tengono dentro. */
.photo-band, .tiles-band, .section-split, .contact-band{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* .bg-video-wrap e .bg-video erano già definiti più su: qui erano ripetuti e
   la seconda copia cancellava il riempimento laterale del video. Resta solo
   l'aggiunta utile — il ritaglio del contenitore. */
.bg-video-wrap{overflow:hidden}
/* il contenuto deve restare sopra il video */
/* il contenuto va sopra il video, ma i comandi dell'editor devono restare
   fuori dal flusso: altrimenti occupano una colonna della griglia e
   spostano il testo dalla sua posizione */
.photo-band > .section, .tiles-band > .section, .contact-band > .section{position:relative;z-index:1}
/* Il video della fascia con elenco puntato ora sta dentro la colonna del
   contenuto: è quel riquadro a doverlo contenere e ritagliare, e il testo
   deve restare sopra. Stessa impostazione di .section-split. */
.photo-band-inner{position:relative;overflow:hidden;isolation:isolate}
.photo-band-inner > *:not(.bg-video-wrap):not(.ve-img-tools){position:relative;z-index:1}
.section-split > *:not(.bg-video-wrap):not(.ve-img-tools):not(.ve-sec-bar){position:relative;z-index:1}
/* il pulsante "aggiungi" occupa tutta la larghezza, non una colonna */
.section-split > .ve-item-add{grid-column:1 / -1;justify-self:start}

/* navigazione dell'hero rotante: pallini a sinistra, frecce a destra */
.hero-full-nav{
  position:absolute;left:0;right:0;bottom:22px;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-inline:var(--pad);
  max-width:var(--maxw);margin-inline:auto;
}
.hero-full-arrows{display:flex;gap:10px}
.hero-full-nav .hero-full-dots{position:static;transform:none;display:flex;gap:9px}
.hero-full-nav .hero-full-arrow{position:static;transform:none}
@media(max-width:799px){
  .hero-full-nav{bottom:14px;padding-inline:20px}
  .hero-full-arrows{gap:8px}
}

/* ============================================================
   HERO CENTRATA
   Tutto in mezzo: sopratitolo, titolo, testo e pulsanti. La riga in corsivo
   va a capo da sola perché è un <em> di livello blocco: nel titolo è una
   riga sua, non una parola in mezzo alle altre.
   ============================================================ */
.page-hero.hero-centrata > .section{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.page-hero.hero-centrata > .section > *{max-width:820px}
.page-hero.hero-centrata .breadcrumb{justify-content:center}
.page-hero.hero-centrata .page-intro{margin-left:auto;margin-right:auto}
.page-hero.hero-centrata .hero-ctas{justify-content:center;flex-wrap:wrap}
.hero-c-em{
  display:block;font-style:italic;font-weight:400;
  color:var(--gold-light);position:relative;
}
@media(max-width:640px){
  .page-hero.hero-centrata .hero-ctas{flex-direction:column;align-items:stretch;width:100%}
  .page-hero.hero-centrata .hero-ctas .btn-lg{width:100%;text-align:center}
}

/* hero semplice con testo a destra */
/* Come sopra: il blocco va a destra, il testo dentro resta a sinistra.
   .hero-copy-stack tiene insieme le righe e si allarga quanto basta. */
.page-hero.hero-testo-destra > .section{
  display:flex;flex-direction:column;align-items:flex-end;text-align:left;
}
/* tutti gli elementi larghi uguale: così i loro bordi sinistri coincidono e
   sopratitolo, titolo, testo e pulsanti cominciano tutti dallo stesso punto.
   Con la sola larghezza automatica ognuno partiva da dove capitava. */
.page-hero.hero-testo-destra > .section > *{
  width:min(100%, 640px);max-width:min(100%, 640px);margin-left:auto;margin-right:0;
}
/* Il pulsante è un elemento in linea: la larghezza fissa lo stirerebbe per
   tutta la colonna. Torna a misura di contenuto, ma con il margine destro
   automatico invece che sinistro, così si allinea al bordo sinistro del
   blocco insieme a tutto il resto. */
.page-hero.hero-testo-destra > .section > a,
.hero-full.hero-testo-destra .hero-full-inner > a{
  /* Il pulsante resta a misura di contenuto, quindi non si può allinearlo
     con la larghezza come gli altri elementi. Lo si scosta invece dello
     spazio che avanza a sinistra della colonna: così il suo bordo sinistro
     cade esattamente sotto al titolo, qualunque sia la sua lunghezza. */
  width:auto;max-width:100%;align-self:flex-start;
  margin-left:calc(100% - min(100%, 640px));margin-right:0;
}
.page-hero.hero-testo-destra .hero-ctas,
.hero-full.hero-testo-destra .hero-ctas{justify-content:flex-start}
.page-hero.hero-testo-destra .breadcrumb{justify-content:flex-start}
@media(max-width:799px){
  .page-hero.hero-testo-destra > .section{align-items:flex-start}
}

/* ---- modulo di richiesta: trappola antirobot ed esito dell'invio ---- */
/* Il campo trappola deve essere invisibile ma non con display:none: alcuni
   robot saltano i campi nascosti in quel modo, e la trappola non scatterebbe. */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-esito{margin:10px 0 0;font-size:14px;line-height:1.45;display:none}
.form-esito.visibile{display:block}
.form-esito.ok{color:#1c7a4a}
.form-esito.ko{color:#b3261e}
/* dentro la fascia scura il verde e il rosso pieni sarebbero illeggibili */
.contact-band .form-esito.ok,.modal-form .form-esito.ok{color:#3fbf82}
.contact-band .form-esito.ko,.modal-form .form-esito.ko{color:#ff8f86}
.js-form-richiesta.in-invio{opacity:.6;pointer-events:none}