@charset "UTF-8";
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ─── FALLBACK "SAGOMATI" ANTI-FOUT ───
   Finché i font di Google non sono scaricati, il testo usa Arial/Roboto
   ridimensionati con le metriche dei font finali (size-adjust ecc.):
   il testo di riserva occupa lo stesso spazio, quindi lo scambio di font
   non sposta il layout. Barlow Condensed è stretto → Arial va compresso. */
@font-face{
  font-family:'Barlow Condensed Fallback';
  src:local('Arial'),local('Roboto'),local('Helvetica Neue');
  font-weight:100 599;
  size-adjust:78%;
  ascent-override:105%;
  descent-override:25%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Barlow Condensed Fallback';
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'),local('Helvetica Neue Bold');
  font-weight:600 900;
  size-adjust:78%;
  ascent-override:105%;
  descent-override:25%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial'),local('Roboto'),local('Helvetica Neue');
  font-weight:100 599;
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.5%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'),local('Helvetica Neue Bold');
  font-weight:600 900;
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.5%;
  line-gap-override:0%;
}

/* ─── FONT OSPITATI SUL NOSTRO DOMINIO ───
   Prima venivano da Google: il browser doveva risolvere e contattare DUE domini
   (fonts.googleapis.com per il CSS, fonts.gstatic.com per i file), scaricare un
   foglio di stile di 1,7 KB che si limitava a dire dove stessero i font, e solo
   allora chiederli. Quel giro valeva ~750 ms di blocco del rendering su rete
   mobile, per 1700 byte. Ora i file stanno in /fonts/ e partono dalla stessa
   connessione già aperta per l'HTML.

   Sono i sottoinsiemi LATINI (U+0000-00FF: copre gli accenti italiani), cioè
   esattamente quelli che Google serviva finora — gli alfabeti cirillico, greco
   e vietnamita non venivano comunque mai scaricati.

   Di Barlow Condensed servono solo i pesi 700, 800 e 900: sono gli unici usati
   da --font-display. Al momento del passaggio la richiesta a Google ne
   dichiarava anche 400 e 600, che non sono mai stati scaricati da nessuno.

   Licenza: entrambi i caratteri sono SIL Open Font License, che consente
   espressamente di ospitarli in proprio. */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable.woff2') format('woff2');
  font-weight:100 900;          /* carattere variabile: un file per tutti i pesi */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-800.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('../fonts/barlow-condensed-900.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0D1B2A;
  --navy:#0e235d;
  --navy-dark:#091a4a;
  --green:#3D9E3D;
  --green-dark:#2E7A2E;
  --ash:#F4F6FA;
  --white:#FFFFFF;
  --red:#c11212;
  --steel:#5A6474;
  --border:#DDE2EC;
  --font-display:'Barlow Condensed','Barlow Condensed Fallback',sans-serif;
  --font-body:'Inter','Inter Fallback',sans-serif;
  --max-w:1200px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--ash);color:var(--ink);line-height:1.6;overflow-x:hidden}
.inner{max-width:var(--max-w);margin:0 auto;width:100%}

/* ─── NAVBAR ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:72px;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(14,35,93,0.08);
}
.nav-inner{max-width:auto;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:0.75rem;text-decoration:none}
.nav-logo img{height:65px;width:65px;object-fit:contain; margin-top:1px}
.nav-logo-text{font-family:serif;font-weight:800;font-size:1.3rem;letter-spacing:0.05em;color:#174a99;line-height: 0.85;text-transform: uppercase;}
.nav-logo-text span{color:var(--green)}
.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{font-size:0.8rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--navy)}
.nav-cta{background:var(--green)!important;color:#fff!important;padding:.45rem 1.2rem;border-radius:3px;font-weight:700!important;transition:background .2s!important}
.nav-cta:hover{background:var(--green-dark)!important;color:#fff!important}
/* ─── HAMBURGER & MOBILE NAV ─── */
/* 48x48 per il tocco; i margini negativi riassorbono i 10px in più, così
   nella barra il pulsante resta dov'era e le tre righine non si spostano */
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0;width:48px;height:48px;margin:-5px}
.nav-hamburger span{display:block;height:2px;width:24px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;top:72px;left:0;right:0;z-index:190;background:#fff;border-bottom:2px solid var(--border);box-shadow:0 8px 24px rgba(14,35,93,.1);max-height:0;overflow:hidden;transition:max-height .35s ease}
.mobile-nav.open{max-height:500px}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column}
.mobile-nav ul li a{display:block;padding:.9rem 5vw;font-size:.9rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);text-decoration:none;border-bottom:1px solid var(--border);transition:color .2s,background .2s}
.mobile-nav ul li a:hover,.mobile-nav ul li a:active{color:var(--navy);background:var(--ash)}
.mobile-nav ul li:last-child a{border-bottom:none;margin:1rem 5vw;background:var(--green);color:#fff!important;border-radius:3px;text-align:center;font-weight:700}
.mobile-nav ul li:last-child a:hover{background:var(--green-dark)}

/* ─── OVERLAY ─── */
.form-overlay{position:fixed;inset:0;z-index:500;background:rgba(7,14,35,.88);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.form-overlay.active{opacity:1;pointer-events:all}
.form-overlay-inner{background:#fff;border-radius:6px;width:90%;max-width:560px;padding:2.5rem;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto}
.form-overlay-close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:var(--steel);font-size:1.5rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
.form-overlay-close:hover{background:var(--ash)}
.form-overlay-title{font-family:var(--font-display);font-weight:800;font-size:2rem;text-transform:uppercase;color:var(--navy);margin-bottom:.25rem}
.form-overlay-sub{font-size:.88rem;color:var(--steel);margin-bottom:1.5rem}

/* ─── FORM ─── */
.contact-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.form-group input,.form-group textarea,.form-group select{border:1.5px solid var(--border);border-radius:3px;padding:.75rem .9rem;font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:var(--ash);transition:border-color .2s,background .2s;width:100%}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--navy);background:#fff}

/* ─── INDICATORE DI FOCUS DA TASTIERA ──────────────────────────────────────
   Chi naviga con il tabulatore deve vedere dov'è. :focus-visible si accende
   solo per tastiera e non al clic del mouse, quindi non cambia nulla per gli
   altri. Il doppio contorno (verde + alone bianco) resta leggibile sia sulle
   sezioni chiare sia su quelle blu scuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:3px;
  box-shadow:0 0 0 5px rgba(255,255,255,.85);
}
/* dentro i blocchi scuri l'alone va invertito, altrimenti sparisce */
.prima-dopo a:focus-visible,.prima-dopo button:focus-visible,
.copertura a:focus-visible,.copertura button:focus-visible,
footer a:focus-visible,footer button:focus-visible{
  box-shadow:0 0 0 5px rgba(14,35,93,.85);
}
.form-group.error input,.form-group.error textarea{border-color:#C0392B}
.form-error-msg{font-size:.72rem;color:#C0392B}
.form-group textarea{resize:vertical;min-height:110px}
.form-success{background:#EAF5EA;border:1px solid #3D9E3D;border-radius:4px;padding:1rem 1.2rem;color:var(--green-dark);font-size:.9rem;font-weight:500}
.form-required{font-size:.72rem;color:var(--steel)}

/* ─── BTN ─── */
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.9rem 2rem;border-radius:3px;transition:background .2s,transform .15s;border:none;cursor:pointer}
.btn-primary:hover{background:var(--navy-dark);transform:translateY(-1px)}
.btn-primary.green{background:var(--green)}
.btn-primary.green:hover{background:var(--green-dark)}
.btn-primary.full{width:100%;justify-content:center}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;border:2px solid rgba(255,255,255,.35);color:rgba(255,255,255,.9);font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.75rem 1.5rem;border-radius:3px;transition:border-color .2s,color .2s;background:none;cursor:pointer}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-outline.dark{border-color:var(--border);color:var(--ink)}
.btn-outline.dark:hover{border-color:var(--navy);color:var(--navy)}

/* ─── HERO ─── */
.hero{
  min-height:100vh;
  background:#310f0f;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;padding:72px 5vw 0;
  position:relative;overflow:hidden;
}
/* hero bg image placeholder - sostituire l'url con l'immagine reale */
.hero-bg-img{
  position:absolute;inset:0;
  /* ◀ IMMAGINE DI APERTURA — su telefono ne va online una versione da 600px
     (bg-m.webp, 38 KB contro 85): è l'elemento più grande della prima
     schermata, quindi da sola sposta il punteggio mobile. La variante mobile
     sta nella media query in fondo a questo blocco. */
  background:url('../images/bg.webp') center/cover no-repeat;
  opacity:1;
  pointer-events:none;
  z-index:0;
}
/* ◀ VARIANTE MOBILE DELL'IMMAGINE DI APERTURA: i browser scaricano soltanto
   l'immagine della media query che corrisponde, quindi su telefono gli 85 KB
   della versione desktop non vengono nemmeno richiesti. */
@media(max-width:600px){
  .hero-bg-img{background-image:url('../images/bg-m.webp')}
}
/* ember gradient: bassa opacità a sinistra, alta a destra */
.hero-bg-gradient{
  position:absolute;inset:0;
  background:linear-gradient(to right, rgb(0 0 0 / 45%) 0%, rgb(26 7 7 / 44%) 100%);
  pointer-events:none;z-index:1;
}
.embers{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;
  background-size:cover;
}
.ember{
  position:absolute;bottom:-20px;border-radius:50%;opacity:0;
  animation:rise var(--dur,6s) ease-in infinite;animation-delay:var(--delay,0s);
  left:var(--x,50%);width:var(--sz,4px);height:var(--sz,4px);
  background:var(--col,#aaa);
}
@keyframes rise{
  0%  {transform:translateY(0) scale(1);opacity:0}
  8%  {opacity:var(--op,.5)}
  75% {opacity:calc(var(--op,.5)*.35)}
  100%{transform:translateY(-108vh) translateX(var(--drift,0px)) scale(.2);opacity:0}
}
.hero-content{position:relative;z-index:3;padding:5rem 0}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:1.5rem}
.hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--green)}
.hero-title{font-family:var(--font-display);font-weight:900;font-size:clamp(3.8rem,6.5vw,6rem);line-height:.95;letter-spacing:-.01em;color:#fff;text-transform:uppercase;margin-bottom:1.5rem;text-shadow: 0 0 3px #000;}
.hero-title .accent{color:var(--green);display:block}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.65);max-width:460px;line-height:1.75;margin-bottom:2.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ring  *********************************** DISATTIVATO HERO VISUAL ************************************************************************** */
.hero-visual{ display:none!important; position:relative;z-index:3;display:flex;align-items:center;justify-content:center;padding:5rem 0}
.response-ring{position:relative;width:300px;height:300px}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:8}
.ring-progress{fill:none;stroke:var(--green);stroke-width:8;stroke-linecap:round;stroke-dasharray:880;stroke-dashoffset:880;animation:fillRing 2.5s ease-out .5s forwards}
.ring-progress-2{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3;stroke-linecap:round;stroke-dasharray:880;stroke-dashoffset:880;animation:fillRing2 2.5s ease-out 1s forwards}
@keyframes fillRing {to{stroke-dashoffset:176}}
@keyframes fillRing2{to{stroke-dashoffset:440}}
.ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-logo{width:66px;height:66px;object-fit:contain;margin-bottom:.4rem}
.ring-label-top{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ring-number{font-family:var(--font-display);font-weight:900;font-size:4rem;line-height:1;color:#fff}
.ring-number span{font-size:1.6rem;color:var(--green);font-weight:700}
.ring-label-bottom{font-size:.72rem;color:rgba(255,255,255,.5)}
.ring-badge{position:absolute;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:.3rem .55rem;font-size:.62rem;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.7);white-space:nowrap;text-transform:uppercase}
.ring-badge.top-right{top:10px;right:-40px}
.ring-badge.bottom-left{bottom:45px;left:-50px}
.ring-badge.bottom-right{bottom:18px;right:-30px}

/* ─── STATS BAR ─── */
.stats-bar{background:var(--navy);border-top:1px solid rgba(255,255,255,.08)}
.stats-bar-inner{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-around;flex-wrap:wrap}
.stat-item{flex:1;min-width:160px;text-align:center;padding:2rem 1rem;border-right:1px solid rgba(255,255,255,.12)}
.stat-item:last-child{border-right:none}
.stat-number{font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:#fff;line-height:1;display:block}
.stat-label{font-size:.78rem;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.7);text-transform:uppercase;display:block;margin-top:.3rem}

/* ─── SECTIONS ─── */
section{padding:6rem 5vw}
.section-eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.section-eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--navy);flex-shrink:0}
.section-eyebrow.green{color:var(--green)}
.section-eyebrow.green::before{background:var(--green)}
.section-eyebrow.white{color:rgba(255,255,255,.8)}
.section-eyebrow.white::before{background:var(--green)}
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4vw,3.5rem);line-height:1.0;text-transform:uppercase;color:var(--ink)}
.section-sub{font-size:1rem;color:var(--steel);max-width:600px;line-height:1.75;margin-top:1rem}

/* ─── CONTATTI / FORM ─── */
.form-section{background:#05103f;padding:5.5rem 5vw}
.form-section-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;align-items:start}
.form-section .section-title{color:#fff}
.form-section .section-sub{color:rgba(255,255,255,.6)}
.form-contact-info{margin-top:2rem;display:flex;flex-direction:column;gap:1.25rem}
.form-contact-item{display:flex;align-items:center;gap:.75rem}
.form-contact-icon{color:var(--green);flex-shrink:0}
.form-contact-text{font-size:.95rem;color:rgba(255,255,255,.7)}
.form-contact-text a{color:rgba(255,255,255,.95);text-decoration:none;font-weight:600}
.form-contact-text a:hover{color:var(--green)}
.form-inline-wrap{background:#fff;border-radius:6px;padding:2.25rem;box-shadow:0 12px 40px rgba(0,0,0,.2)}

/* ─── IMG PLACEHOLDER ─── */
.img-placeholder{background:#e8ecf3;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:#8A96A8;font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:1.5rem;border:2px dashed #C0C8D8}
.img-placeholder svg{opacity:.4}
.img-placeholder span{opacity:.65}

/* ─── SERVIZI ─── */
.services{background:#fff}
.services .inner{display:flex;flex-direction:column}
.services-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:3.5rem}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border);border:1.5px solid var(--border)}
.service-card{background:#fff;padding:2.5rem 2rem;position:relative;overflow:hidden;transition:background .25s}
.service-card::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--navy);transition:width .3s}
.service-card:hover{background:var(--ash)}
.service-card:hover::after{width:100%}
.service-icon{width:42px;height:42px;margin-bottom:1.5rem;color:var(--navy)}
.service-name{font-family:var(--font-display);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin-bottom:.75rem}
.service-desc{font-size:.9rem;color:var(--steel);line-height:1.65}

/* ─── PRIMA DOPO ─── */
.prima-dopo{background:var(--navy)}
.prima-dopo .section-title{color:#fff}
.prima-dopo .section-sub{color:rgba(255,255,255,.55)}
.prima-dopo-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}
.slider-outer{position:relative;overflow:hidden;border-radius:4px}
.slider-track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.slider-item{flex:0 0 calc(33.333% - 1rem);min-width:calc(33.333% - 1rem)}
.comparison-wrap{position:relative;user-select:none;overflow:hidden;border-radius:4px;background:#111;width:100%;aspect-ratio:650/550}
.comparison-before img,.comparison-after img{width:100%;height:100%;object-fit:cover;display:block}
.comparison-before,.comparison-after{position:absolute;inset:0;overflow:hidden}
.comparison-before{z-index:1}
.comparison-after{z-index:2;clip-path:inset(0 50% 0 0)}
.comparison-img-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em}
.comparison-img-placeholder.before-ph{background:#1a1a1a;color:rgba(255,255,255,.2)}
.comparison-img-placeholder.after-ph{background:#182B18;color:rgba(61,158,61,.4)}
.comparison-img-placeholder svg{opacity:.3}
.comparison-handle{position:absolute;top:0;bottom:0;z-index:3;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;cursor:ew-resize}
.comparison-handle-line{width:2px;flex:1;background:#fff}
.comparison-handle-btn{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.4);color:var(--ink);flex-shrink:0;margin:6px 0}
.comparison-label{position:absolute;top:1rem;padding:.3rem .75rem;font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;z-index:10}
.label-before{left:1rem;background:rgba(0,0,0,.7);color:rgba(255,255,255,.85)}
.label-after{right:1rem;background:rgba(27,58,140,.85);color:#fff;z-index:11}
.slider-caption{padding:.9rem 0 .25rem;font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.4}
.slider-nav{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
/* 48px: è la misura minima che i controlli tattili devono avere per essere
   colpiti senza sbagliare, ed è la soglia usata anche dagli strumenti di
   verifica. Prima erano 40. */
.slider-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.slider-btn:hover{border-color:var(--green);color:var(--green)}
.slider-dots{display:flex;gap:.5rem}
.slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:background .2s;border:none}
.slider-dot.active{background:var(--green)}

/* ─── RECENSIONI ─── */
.recensioni{background:var(--ash)}
.recensioni .inner{display:flex;flex-direction:column}
.recensioni-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:3rem}
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.review-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:2rem;position:relative}
.review-stars{display:flex;gap:.15rem;margin-bottom:1rem}
.review-stars span{color:#F59E0B;font-size:1.2rem;line-height:1}
.review-text{font-size:.92rem;color:var(--steel);line-height:1.75;margin-bottom:1.25rem;font-style:italic}
.review-author{display:flex;align-items:center;gap:.75rem}
.review-avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;flex-shrink:0}
.review-name{font-weight:600;font-size:.9rem;color:var(--ink)}
.review-meta{font-size:.75rem;color:var(--steel)}
.review-badge{position:absolute;top:1.25rem;right:1.25rem;background:#EBF5FB;border:1px solid #AED6F1;border-radius:3px;padding:.2rem .55rem;font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1A5276}

/* ─── CERTIFICAZIONI ─── */
.certificazioni{background:#fff}
.cert-intro{max-width:640px;margin-bottom:3.5rem}
.cert-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.cert-block-title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin-bottom:1.25rem;padding-bottom:.6rem;border-bottom:2px solid var(--navy)}
.cert-list{display:flex;flex-direction:column;gap:.7rem}
.cert-chip{display:flex;align-items:center;gap:.75rem;background:var(--ash);border:1px solid var(--border);border-radius:4px;padding:.85rem 1.2rem;font-size:.88rem;font-weight:600;color:var(--ink);letter-spacing:.02em}
.cert-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.cert-dot.blue{background:var(--navy)}
/* cert quality icon cards */
.cert-icons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}
.cert-icon-card{background:var(--ash);border:1px solid var(--border);border-radius:6px;padding:1.5rem 1rem 1.25rem;text-align:center;transition:box-shadow .2s,transform .2s}
.cert-icon-card:hover{box-shadow:0 6px 20px rgba(14,35,93,.1);transform:translateY(-2px)}
.cert-icon-card .cert-icon-img{margin:0 auto .85rem;display:block;line-height:1.3;min-height: 82px;}
.cert-icon-card .cert-icon-name{font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:uppercase;color:var(--navy);letter-spacing:.03em;margin-bottom:.25rem}
.cert-icon-card .cert-icon-desc{font-size:.75rem;color:var(--steel);line-height:1.5}

/* ─── METODI ─── */
.metodi{background:var(--ash)}
.metodi-intro{margin-bottom:3rem}
.principi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:3.5rem}
.principio{background:#fff;border:1px solid var(--border);border-radius:4px;padding:1.5rem;border-left:3px solid var(--navy)}
.principio-title{font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--navy);margin-bottom:.5rem}
.principio-text{font-size:.85rem;color:var(--steel);line-height:1.65}
.metodi-section-label{font-family:var(--font-display);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:2rem;margin-top:3rem}
/* metodi cards */
.metodi-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.metodo-card{background:#fff;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.metodo-img{width:100%}
/* Le foto dei macchinari erano schiacciate: con max-width al 100% la larghezza
   si adatta al riquadro, ma senza height:auto il browser tiene l'altezza scritta
   nell'attributo height e l'immagine si deforma. Le dimensioni negli attributi
   NON vanno tolte — servono al browser per riservare lo spazio giusto ed evitare
   che la pagina salti durante il caricamento (metrica CLS): basta height:auto,
   che ristabilisce le proporzioni lasciando intatta quella protezione. */
.metodo-img img{display:block;max-width:100%;height:auto}
.about-img-block img{display:block;max-width:100%;height:auto}
.metodo-img .img-placeholder{height:200px;border-radius:0;border:none;border-bottom:1px solid var(--border)}
.metodo-body{padding:1.75rem}
.metodo-badge{display:inline-block;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.18rem .55rem;border-radius:2px;margin-bottom:.75rem}
.badge-civile{background:rgba(61,158,61,.1);color:var(--green-dark);border:1px solid rgba(61,158,61,.3)}
.badge-industria{background:rgba(14,35,93,.08);color:var(--navy);border:1px solid rgba(14,35,93,.2)}
/* Il nome del metodo era un <div>: la home saltava così da h2 a h4 e la
   gerarchia dei titoli risultava spezzata. Ora è un <h3>, e queste due
   dichiarazioni in più (margine superiore azzerato, interlinea del corpo)
   servono a farlo vedere esattamente come prima. */
.metodo-name{font-family:var(--font-display);font-weight:800;font-size:1.3rem;text-transform:uppercase;color:var(--ink);margin:0 0 .5rem;line-height:1.2}
.metodo-machine{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--navy);margin-bottom:1rem}
.metodo-machine a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(14,35,93,.25);transition:color .2s}
.metodo-machine a:hover{color:var(--green)}
.metodo-desc{font-size:.87rem;color:var(--steel);line-height:1.65;margin-bottom:1rem}
.metodo-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.metodo-pros h4,.metodo-cons h4{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.metodo-pros h4{color:var(--green)}
.metodo-cons h4{color:#B45309}
.metodo-pros li,.metodo-cons li{font-size:.78rem;line-height:1.5;color:var(--steel);display:flex;gap:.4rem;margin-bottom:.25rem}
/* i simboli sono scritti come sequenze di escape CSS (ASCII puro) invece che come
   caratteri: così non dipendono dalla codifica con cui il server serve il foglio
   di stile. \2713 = segno di spunta, \B7 = punto mediano. */
.metodo-pros li::before{content:'\2713';color:var(--green);font-weight:700;flex-shrink:0}
.metodo-cons li::before{content:'\B7';color:#B45309;font-weight:700;flex-shrink:0}
.macchinario-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--navy);text-decoration:none;font-weight:600;margin-top:.3rem}
.macchinario-link:hover{color:var(--green);text-decoration:underline}
/* focus */
.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.focus-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:2rem;border-top:3px solid var(--navy)}
.focus-title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.focus-title span{color:var(--navy)}
.focus-list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.focus-list li{display:flex;gap:.6rem;font-size:.87rem;color:var(--steel);line-height:1.55}
.focus-list li::before{content:'\2192';color:var(--navy);flex-shrink:0;font-weight:700}
.focus-warning{margin-top:1rem;padding:.75rem 1rem;background:#FEF2F2;border:1px solid #FECACA;border-radius:3px;font-size:.8rem;color:#7F1D1D}
.focus-warning strong{display:block;margin-bottom:.2rem}

/* ─── TABELLA COMPARATIVA ─── */
.comparativa{background:var(--navy)}
.comparativa .section-title{color:#fff}
.comparativa .section-sub{color:rgba(255,255,255,.6)}
.comparativa .section-eyebrow{color:var(--green)}
.comparativa .section-eyebrow::before{background:var(--green)}
.comp-table-wrap{overflow-x:auto;margin-top:3rem;border-radius:6px;border:1px solid rgba(255,255,255,.1)}
.comp-table{width:100%;border-collapse:collapse;min-width:640px}
.comp-table th{padding:1rem 1.25rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.1)}
.comp-table th.our{color:var(--green);background:rgba(61,158,61,.1)}
.comp-table td{padding:1rem 1.25rem;font-size:.88rem;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.comp-table tr:last-child td{border-bottom:none}
.comp-table .criterion{font-weight:600;color:rgba(255,255,255,.85);font-size:.9rem}
.comp-table .trad{color:rgba(255,255,255,.4)}
.comp-table .our-val{color:#fff;font-weight:500}
.check{color:var(--green);font-weight:700;margin-right:.3rem}
.cross{color:#F87171;font-weight:700;margin-right:.3rem}
.comp-table tr:hover td{background:rgba(255,255,255,.03)}

/* ─── PROCESSO ─── */
.processo{background:#fff}
.processo-cta{margin-top:3.5rem;text-align:center}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:4rem;position:relative}
.steps-grid::before{content:'';position:absolute;top:35px;left:calc(12.5%);right:calc(12.5%);height:2px;background:linear-gradient(to right,var(--navy),var(--navy));z-index:0;opacity:.15}
.step{position:relative;z-index:1;text-align:center;padding:0 .5rem}
.step-dot{width:70px;height:70px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:2rem;color:#fff;margin:0 auto 1.75rem;box-shadow:0 4px 20px rgba(14,35,93,.25)}
.step-title{font-family:var(--font-display);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.step-desc{font-size:.88rem;color:var(--steel);line-height:1.65}

/* ─── WHY ─── */
.why{background:var(--ash)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-top:3rem}
.why-items{display:flex;flex-direction:column;gap:2.25rem}
.why-item{display:flex;gap:1.25rem;align-items:flex-start}
.why-num{font-family:var(--font-display);font-weight:900;font-size:3.2rem;line-height:1;color:rgba(14,35,93,.08);flex-shrink:0;width:56px;text-align:right}
.why-title{font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:.3rem}
.why-text{font-size:.9rem;color:var(--steel);line-height:1.65}
.why-image-block{background:var(--navy);border-radius:6px;padding:3rem;position:relative;overflow:hidden}
.why-image-block::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;border-radius:50%;background:rgba(61,158,61,.1);pointer-events:none}
.coverage-title{font-family:var(--font-display);font-weight:800;font-size:2rem;text-transform:uppercase;color:#fff;margin-bottom:1rem;position:relative;z-index:1}
.coverage-title span{color:#e43838}
.coverage-text{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1}
/* ─── MAPPA ITALIA INTERATTIVA ─── */
.italy-map{display:block;width:460px;max-width:100%;height:500px;margin:0 auto;position:relative;z-index:1}
.im-stage{position:relative;width:100%;height:100%}
.im-stage>svg{width:100%;height:calc(100% - 24px);display:block}
.im-hint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.im-reg{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.5);stroke-width:.7;cursor:pointer;outline:none;transition:fill .18s ease,transform .22s ease;transform-box:fill-box;transform-origin:center}
.im-reg:hover,.im-reg:focus-visible,.im-reg.im-act{fill:var(--green);stroke:#fff;transform:scale(1.06)}
.im-panel{position:absolute;inset:0;background:#fff;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:6}
.im-panel.im-open{opacity:1;visibility:visible;transform:none}
.im-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem .35rem 1.1rem}
.im-panel-title{font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:1;text-transform:uppercase;color:var(--navy)}
.im-panel-sub{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);margin:0 1.1rem .25rem}
.im-panel-close{width:30px;height:30px;border:none;border-radius:50%;background:var(--ash);color:var(--navy);font-size:1rem;line-height:1;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
.im-panel-close:hover{background:var(--red);color:#fff}
.im-panel-svg{flex:1;min-height:0;padding:.35rem .8rem .8rem}
.im-panel-svg svg{width:100%;height:100%;display:block}
.im-prov{cursor:pointer;outline:none}
.im-prov path{fill:#EDF1F8;stroke:#fff;stroke-width:1.1;transition:fill .15s ease}
.im-prov:hover path,.im-prov:focus-visible path{fill:var(--green)}
/* provincia senza pagina (classe assegnata da mappa-italia.js): non è un link,
   quindi non deve reagire al passaggio del mouse come se lo fosse */
.im-prov-off{cursor:default}
.im-prov-off:hover path,.im-prov-off:focus-visible path{fill:#EDF1F8}
.im-labels text{font-family:var(--font-display);font-weight:700;fill:var(--ink);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-linejoin:round}
.im-labels text.im-on{fill:#fff;stroke:rgba(13,27,42,.4)}
.im-list{display:none}
@media(max-width:768px){
  .italy-map{width:100%;height:auto}
  .im-stage{display:none}
  .im-list{display:block}
  .im-list details{border-bottom:1px solid rgba(255,255,255,.14)}
  .im-list summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .1rem;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
  .im-list summary::-webkit-details-marker{display:none}
  .im-list summary::after{content:'+';font-weight:400;font-size:1.3rem;color:var(--green);transition:transform .2s}
  .im-list details[open] summary::after{content:'\2212'}
  .im-provlinks{display:flex;flex-wrap:wrap;gap:.45rem;padding:0 .1rem .85rem}
  /* province con e senza pagina: stesso font e stesso ingombro, così la lista resta
     allineata; cambia solo il contorno, che segnala cosa è cliccabile */
  .im-provlinks a,.im-provlinks span{font-size:.8rem;line-height:1.25;border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:.28rem .6rem}
  .im-provlinks a{color:rgba(255,255,255,.8);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
  .im-provlinks a:hover{background:var(--green);border-color:var(--green);color:#fff}
  /* senza pagina: leggibile sul fondo blu, ma con bordo tratteggiato e nessun hover */
  .im-provlinks span{color:rgba(255,255,255,.7);border-style:dashed;border-color:rgba(255,255,255,.16);cursor:default}
}

/* ─── ABOUT ─── */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:5rem;align-items:start}
.about-block{background:var(--navy);border-radius:6px;padding:3rem 2.5rem;color:#fff;position:relative;overflow:hidden}
.about-block::after{content:'"';position:absolute;bottom:-20px;right:20px;font-family:Georgia,serif;font-size:12rem;line-height:1;color:rgba(255,255,255,.05);pointer-events:none}
.about-block blockquote{font-family:var(--font-display);font-weight:700;font-size:1.4rem;line-height:1.3;text-transform:uppercase;position:relative;z-index:1}
.about-block cite{display:block;margin-top:1.5rem;font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);font-style:normal}
.about-img-block{margin-top:1.5rem}
.about-meta{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-meta-item{border-left:2px solid var(--navy);padding-left:.75rem}
.about-meta-label{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:.2rem}
.about-meta-value{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);text-transform:uppercase;display:block}

/* ─── CTA FINALE ─── */
.cta-final{background:var(--ink);text-align:center;padding:7rem 5vw;position:relative;overflow:hidden}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(14,35,93,.35) 0%,transparent 70%);pointer-events:none}
.cta-final .section-eyebrow{justify-content:center;color:var(--green)}
.cta-final .section-eyebrow::before{background:var(--green)}
.cta-final-title{font-family:var(--font-display);font-weight:900;font-size:clamp(2.8rem,5vw,4.8rem);text-transform:uppercase;line-height:.98;color:#fff;margin:1rem 0 1.5rem;position:relative;z-index:1}
.cta-final-title span{color:#e43838}
.cta-final p{font-size:1.05rem;color:rgba(255,255,255,.55);max-width:500px;margin:0 auto 2.5rem;line-height:1.7;position:relative;z-index:1}
.cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;position:relative;z-index:1}

/* ─── FOOTER ─── */
footer{background:#050D1A;padding:3.5rem 5vw;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.footer-logo img{height:100px;width:100px;object-fit:contain}
.footer-brand{font-family: serif;font-weight: 800;font-size: 1.9rem;letter-spacing: 0.05em;color: #3d5aa8;line-height: 0.85;text-transform: uppercase;margin-left: 10px;}
.footer-brand span{color:var(--green)}
.footer-desc{font-size:.92rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:320px}
.footer-assicurazione{margin-top:1rem;font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.6;border-top:1px solid rgba(255,255,255,.06);padding-top:.75rem}
.footer-col-title{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-links a{font-size:.9rem;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--green)}
/* voce senza indirizzo (es. la sede): esce come <span> e senza questa regola
   erediterebbe il testo scuro del body, illeggibile sul fondo del footer */
.footer-links span{font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.6}
.footer-bottom{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:.4rem}
.footer-legal{font-size:.82rem;color:rgba(255,255,255,.25);line-height:1.6}
.footer-legal a{color:rgba(255,255,255,.25);text-decoration:none}
.footer-legal a:hover{color:rgba(255,255,255,.5)}

/* ─── FLOATING BUTTONS ─── */
.floating-btns{position:fixed;bottom:1.5rem;right:1.5rem;z-index:150;display:flex;flex-direction:column;gap:.75rem}
.sticky-btn{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:3px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 18px rgba(0,0,0,.25);line-height: 1.4;}
.sticky-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sticky-btn.call{background:var(--green);color:#fff}
.sticky-btn.quote{background:var(--red);color:#fff}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .form-section-inner{grid-template-columns:1fr;gap:2.5rem}
  .principi-grid{grid-template-columns:repeat(2,1fr)}
  .metodi-cards{grid-template-columns:1fr}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-visual{display:none}
  .cert-cols{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid::before{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom {padding-bottom: 3rem;}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .focus-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .metodo-pros-cons{grid-template-columns:1fr}
}
@media(max-width:700px){
  .slider-item{flex:0 0 calc(85%);min-width:calc(85%)}
  .slider-track{gap:1rem}
}
@media(max-width:600px){
  .steps-grid{grid-template-columns:1fr}
  .about-meta{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .principi-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .comparativa .comp-table td,.comparativa .comp-table th{padding:.7rem .8rem;font-size:.8rem}
  .cert-icons-grid{grid-template-columns:repeat(2,1fr)}
  /* CSS Simone */
  .hero {padding-top: 0;}
  .hero-actions {display: none;}
  .hero-content {padding-top:0!important;}
  .hero-title .accent {text-shadow: 0 0 3px #000;}
  .hero-sub {color: rgba(255, 255, 255, 1);text-shadow: 0 0 5px #000;} 
  
}
@media(prefers-reduced-motion:reduce){
  .ember,.ring-progress,.ring-progress-2,*{animation:none!important;transition:none!important}
  .ring-progress{stroke-dashoffset:176}
  .ring-progress-2{stroke-dashoffset:440}
}

/* ───────── CSS SIMONE ───────── */

/* ─── RECENSIONI GOOGLE (badge voto) ─── */
.g-rating{display:inline-flex;align-items:center;gap:.85rem;margin-top:1.25rem;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.7rem 1.1rem;text-decoration:none;box-shadow:0 2px 10px rgba(14,35,93,.06);transition:box-shadow .2s,transform .15s,border-color .2s}
.g-rating:hover{box-shadow:0 10px 26px rgba(14,35,93,.14);transform:translateY(-2px);border-color:#c9d2e4}
.g-logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);flex-shrink:0}
.g-rating-main{display:flex;flex-direction:column;gap:.2rem}
.g-score-row{display:flex;align-items:center;gap:.45rem}
.g-score{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--ink);line-height:1}
.g-stars{color:#F59E0B;font-size:.95rem;letter-spacing:.08em;line-height:1}
.g-count{font-size:.8rem;color:var(--steel)}
.g-arrow{color:var(--steel);opacity:.5;flex-shrink:0;transition:transform .2s,opacity .2s}
.g-rating:hover .g-arrow{transform:translateX(3px);opacity:1}
.g-review-cta{margin-top:1.75rem;font-size:.85rem;color:var(--steel)}
.g-review-cta a{color:var(--navy);font-weight:600}

/* ─── WHATSAPP (solo mobile) ─── */
.wa-float{display:none;position:fixed;bottom:1.25rem;right:1.25rem;z-index:150;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.3);transition:transform .15s}
.wa-float:hover{transform:translateY(-2px)}
@media(max-width:768px){
  .wa-float{display:flex}
  .floating-btns{left:1rem;right:auto;bottom:1.25rem}
  /* dopo ~100px di scroll (classe .scrolled via JS) i due bottoni si affiancano
     su un'unica riga, senza coprire il bottone WhatsApp a destra */
  .floating-btns.scrolled{flex-direction:row;gap:.5rem;align-items:center;max-width:calc(100vw - 1rem - 56px - 2.25rem)}
  .floating-btns.scrolled .sticky-btn{padding:.6rem .9rem;font-size:.9rem;letter-spacing:.04em;white-space:nowrap}
}
@media(max-width:420px){
  .floating-btns.scrolled .sticky-btn svg{display:none}
}
@media(max-width:380px){
  .floating-btns.scrolled .sticky-btn{padding:.6rem .8rem;font-size:.75rem}
}


/* ─── PAGINE PROVINCIA ─── */
.prov-hero{position:relative;margin-top:72px;min-height:420px;display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}
.prov-hero-img{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.prov-hero-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,14,35,0.92) 0%,rgba(7,14,35,0.65) 100%,rgba(7,14,35,.5) 100%)}
.prov-hero-content{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;width:100%;padding:3.5rem 5vw}
.breadcrumb{font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:.9rem;letter-spacing:.04em}
.breadcrumb a{color:rgba(255,255,255,.85);text-decoration:none}
.breadcrumb a:hover{color:var(--green)}
.prov-h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;text-transform:uppercase;color:#fff}
.prov-h1 .accent{color:var(--green)}
.prov-hero-sub{color:rgba(255,255,255,.85);max-width:640px;margin-top:.9rem;font-size:1.02rem}
.prov-hero-cta{display:flex;gap:1rem;margin-top:1.75rem;flex-wrap:wrap}
.prov-testo{background:#fff;padding:4.5rem 5vw}
.prov-testo-inner{max-width:860px;margin:0 auto}
.prov-testo h2{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1.15;text-transform:uppercase;color:var(--navy);margin:2.2rem 0 .9rem}
.prov-testo h2:first-child{margin-top:0}
.prov-testo h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;text-transform:uppercase;color:var(--ink);margin:1.8rem 0 .7rem}
.prov-testo p{margin-bottom:1rem;color:#3a4354}
/* riga "Ultima modifica" sotto il titolo di informative e pagine libere */
.pagina-aggiornata{font-size:.82rem;color:#5A6474;margin:-.5rem 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.prov-testo ul,.prov-testo ol{margin:0 0 1rem 1.4rem;color:#3a4354}
.prov-testo li{margin-bottom:.4rem}
.prov-testo a{color:var(--navy);font-weight:600}
.prov-testo strong{color:var(--ink)}
/* ─── DOMANDE FREQUENTI: riquadro staccato dal resto del testo.
   Il contenitore lo aggiunge includes/faq.php, non chi scrive il testo. ─── */
.faq-box{background:var(--ash);border:1px solid var(--border);border-radius:14px;padding:2.2rem 2.4rem 1.8rem;margin-top:3rem}
.faq-box h2:first-child{margin-top:0}
.faq-box h3{font-size:1.15rem;margin:1.6rem 0 .5rem;color:var(--navy)}
.faq-box h3:first-of-type{margin-top:1.2rem}
.faq-box p:last-child{margin-bottom:0}
@media(max-width:600px){.faq-box{padding:1.5rem 1.3rem 1.2rem;border-radius:10px;margin-top:2.2rem}}
/* ─── SEZIONE AMBIENTI (includes/ambienti.php) ───────────────────────────
   Le schede degli ambienti non ancora pubblicati restano visibili ma spente,
   come le province non attive sulla mappa: l'elenco resta completo e non si
   creano link verso pagine che risponderebbero 404. */
.ambienti{padding:5.5rem 5vw;background:#fff}
.ambienti .inner{max-width:var(--max-w);margin:0 auto}
.ambienti-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}
.ambienti-header .section-sub{max-width:520px;margin:0}
.ambienti-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border);border:1.5px solid var(--border)}
.ambiente-card{background:#fff;padding:2rem 1.75rem;position:relative;overflow:hidden;display:block;text-decoration:none;color:inherit;transition:background .25s}
.ambiente-card::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--green);transition:width .3s}
a.ambiente-card:hover{background:var(--ash)}
a.ambiente-card:hover::after{width:100%}
.ambiente-img{width:100%;height:160px;object-fit:cover;display:block;border-radius:4px;margin-bottom:1.2rem;background:var(--ash)}
.ambiente-nome{font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin-bottom:.6rem;line-height:1.25}
.ambiente-desc{font-size:.87rem;color:var(--steel);line-height:1.6;margin:0}
.ambiente-link{display:inline-block;margin-top:1rem;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
/* scheda senza pagina: nessun richiamo al clic */
.ambiente-card.off{background:#FAFBFC;cursor:default}
.ambiente-card.off .ambiente-img{opacity:.55;filter:grayscale(1)}
.ambiente-card.off .ambiente-nome{color:var(--steel)}
/* schede senza descrizione (pagine provincia): riquadri bassi, immagine più corta */
.ambienti-grid.compatta .ambiente-card{padding:1.2rem 1.1rem;text-align:center}
.ambienti-grid.compatta .ambiente-img{height:110px;margin-bottom:.85rem}
.ambienti-grid.compatta .ambiente-nome{font-size:.92rem;margin:0}
/* sola lista di collegamenti (pagine ambiente): sfondo bianco, perché sotto
   c'è già la copertura territoriale in grigio e due fasce uguali si fonderebbero */
.ambienti.solo-link{padding:3.5rem 5vw;background:#fff}
.ambienti.solo-link .inner{max-width:860px}
.ambienti.solo-link .ambienti-header{display:block;margin-bottom:1.2rem}
.ambienti.solo-link .section-title{font-size:1.6rem}
.ambienti-link{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.ambienti-link li{margin:0}
.ambienti-link a,.ambienti-link span{display:inline-block;font-size:.85rem;background:#fff;border:1px solid var(--border);border-radius:3px;padding:.4rem .8rem;text-decoration:none;color:var(--navy);font-weight:600;transition:border-color .2s,color .2s}
.ambienti-link a:hover{border-color:var(--green)}
.ambienti-link span{color:#6B7280;font-weight:400;border-style:dashed}
@media(max-width:900px){.ambienti-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .ambienti{padding:3.5rem 5vw}
  .ambienti-grid{grid-template-columns:1fr}
  .ambienti-grid.compatta{grid-template-columns:repeat(2,1fr)}
  .ambiente-card{padding:1.5rem 1.35rem}
}

/* pulsante centrale in fondo alla sezione (richiamo alla galleria Prima & Dopo) */
.ambienti-cta{text-align:center;margin-top:2.5rem}
.ambienti.solo-link .ambienti-cta{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}

.copertura{padding:5rem 5vw;background:var(--ash)}
.copertura .inner{max-width:var(--max-w)}
.comuni-cloud{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2rem}
.comune-chip{font-size:.78rem;background:#fff;border:1px solid var(--border);border-radius:3px;padding:.28rem .65rem;color:var(--steel);white-space:nowrap}
/* nelle pagine ambiente le province della copertura sono collegamenti */
a.comune-chip{text-decoration:none;transition:border-color .2s,color .2s}
a.comune-chip:hover{border-color:var(--green);color:var(--navy)}
.cop-regione{margin-top:2rem}
.cop-regione-nome{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.cop-regione .comuni-cloud{margin-top:.6rem}
@media(max-width:600px){
  /* ◀ ALTEZZA DELL'HERO SU TELEFONO: l'immagine riempie tutto lo schermo sotto
     la barra di navigazione (alta 72px). Il primo valore è la riserva per i
     browser che non conoscono svh; il secondo è quello che vale davvero.
     Per un hero più basso sostituisci 100svh con una percentuale (es. 80svh). */
  .prov-hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);align-items:center}
  /* ◀ POSIZIONE DEL TESTO: il blocco è centrato verticalmente, e questo padding
     in basso lo solleva. Più è alto, più il testo sale. */
  .prov-hero-content{padding: .5rem 6vw 8rem 3vw;}
  /* H1 più grande su telefono: qui si regola la dimensione mobile del titolo
     provincia (il valore desktop resta quello di .prov-h1, riga 579) */
  .prov-h1{font-size:clamp(3.5rem,9vw,3.2rem)}
  /* i due pulsanti dell'hero spariscono: su telefono restano i pulsanti
     flottanti in basso, che fanno la stessa cosa senza rubare spazio */
  .prov-hero-cta{display:none}
  .prov-testo{padding:3rem 5vw}
}

/* ─── PROVINCIA: breadcrumb + intro con titolo e immagine ─── */
.prov-breadcrumb{background:#fff;padding:1.75rem 5vw 0}
.prov-breadcrumb .breadcrumb{max-width:860px;margin:0 auto}
.prov-intro{background:#fff;padding:1.5rem 5vw 0}
.prov-intro-inner{max-width:860px;margin:0 auto}
.breadcrumb.dark{color:var(--steel);margin-bottom:0;font-size:.78rem;letter-spacing:.04em}
.breadcrumb.dark a{color:var(--navy);font-weight:600}
.breadcrumb.dark a:hover{color:var(--green)}
.breadcrumb.dark .breadcrumb-current{color:var(--ink);font-weight:600}
.prov-intro-title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3.5vw,2.4rem);line-height:1.1;text-transform:uppercase;color:var(--navy);margin-bottom:1.5rem}
.prov-intro-img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 8px 30px rgba(14,35,93,.12)}


/* CSS Personalizzato */
.grecaptcha-badge {display:none}

/* ─── SERVIZI COMPATTI (pagine provincia: solo icona + nome) ─── */
.services-grid.compatta .service-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.75rem;padding:1.6rem 1rem}
.services-grid.compatta .service-icon{margin:0 auto}
.services-grid.compatta .service-name{font-size:1.05rem}

/* ─── SLIDER: località nelle didascalie nascosta sulle pagine generate ─── */
body.category-province .slider-loc,
body.category-ambienti .slider-loc{display:none}

/* ─── PAGINA CERTIFICAZIONI: registro documenti ─── */
.documenti-sezione{background:var(--ash)}
.doc-lista{display:flex;flex-direction:column;gap:.7rem}
.doc-riga{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;background:#fff;
  border:1px solid var(--border);border-radius:6px;padding:1.1rem 1.4rem}
.doc-info{flex:1;min-width:220px}
.doc-titolo{font-weight:700;color:var(--ink);letter-spacing:.02em}
.doc-ente{font-size:.88rem;color:#5A6474;margin-top:.2rem}
.doc-validita{font-size:.85rem;color:#5A6474;white-space:nowrap}
.doc-azione{margin-left:auto}
.doc-btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-size:.82rem;
  font-weight:700;letter-spacing:.03em;padding:.6rem 1.1rem;border-radius:4px;border:none;cursor:pointer;white-space:nowrap}
.doc-btn:hover{background:var(--navy-dark);color:#fff}
.doc-btn.chiaro{background:none;color:#fff;border:1px solid rgba(255,255,255,.5)}
.doc-btn.chiaro:hover{background:rgba(255,255,255,.14)}
.doc-lock{display:inline-block;font-size:.82rem;font-weight:700;color:#5A6474;text-decoration:none;
  background:var(--ash);border:1px solid var(--border);border-radius:4px;padding:.6rem 1.1rem;white-space:nowrap}
.doc-lock:hover{color:var(--navy);border-color:var(--navy)}
.doc-avviso{background:#FFF8E6;border:1px solid #e6c34d;color:#8a6d1a;border-radius:6px;
  padding:.85rem 1.2rem;font-size:.9rem;margin-bottom:1.25rem}
.doc-accesso{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:var(--navy);color:#fff;border-radius:8px;padding:1.6rem 1.8rem;margin-top:2rem}
.doc-accesso.aperto{background:var(--green-dark)}
.doc-accesso strong{font-size:1.05rem}
.doc-accesso p{color:rgba(255,255,255,.75);font-size:.9rem;margin-top:.4rem;max-width:640px;line-height:1.6}
.doc-accesso a{color:#fff;text-decoration:underline}
.doc-errore{color:#ffd7d2 !important;font-weight:600}
.doc-form{display:flex;gap:.6rem;flex-wrap:wrap}
.doc-form input{border:none;border-radius:4px;padding:.65rem .9rem;font-size:.92rem;min-width:200px;font-family:inherit}
@media(max-width:600px){
  .doc-riga{align-items:flex-start}
  .doc-azione{margin-left:0}
  .doc-form{width:100%}
  .doc-form input{flex:1}
}

/* "Preferenze Cookie" era un <a href="#">: un collegamento che non porta da
   nessuna parte confonde i lettori di schermo. Ora è un <button>, travestito
   da link perché graficamente nella riga legale deve restare identico. */
.footer-cookie-btn{background:none;border:none;padding:0;font:inherit;color:rgba(255,255,255,.25);cursor:pointer;text-decoration:none}
.footer-cookie-btn:hover{color:rgba(255,255,255,.5)}