/* =========================================================================
   MVR Antincendio — foglio di stile del restyling 2026-09
   Estensione di assets/styles.css. Condiviso da tutte le pagine del restyling.
   In implementazione va unito a styles.css.
   ========================================================================= */

/* =========================================================================
   MVR — revisione grafica 2026-09-08
   Da spostare in assets/styles.css alla implementazione.
   Regola: nessun gradiente. Solo colori della palette DESIGN.md.
   ========================================================================= */

/* --- 1. Neutralizzazione gradienti e texture (palette piatta, piu' nero) --- */
.atmo, .atmo-red{ background:#1C1C1E !important; }
.atmo::before, .atmo-red::before{ display:none !important; }
.blueprint{ background:#1C1C1E !important; }
.seam-divider, .zone-split-divider{ background:rgba(255,255,255,.16) !important; }

/* --- 2. HERO: foto a scorrimento, velo scuro piatto, citazione fissa --- */
.hero-quote{
  position:relative;
  min-height:clamp(520px, 82vh, 820px);
  display:flex; align-items:center;
  background:#1C1C1E;
  overflow:hidden;
  isolation:isolate;
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{ position:absolute; inset:0; opacity:0; animation:mvrHeroFade 90s linear infinite; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation:mvrHeroZoom 90s ease-in-out infinite;
  will-change:transform;
}
.hero-slide:nth-child(1){ animation-delay:0s }    .hero-slide:nth-child(1) img{ animation-delay:0s }
.hero-slide:nth-child(2){ animation-delay:5s }    .hero-slide:nth-child(2) img{ animation-delay:5s }
.hero-slide:nth-child(3){ animation-delay:10s }    .hero-slide:nth-child(3) img{ animation-delay:10s }
.hero-slide:nth-child(4){ animation-delay:15s }    .hero-slide:nth-child(4) img{ animation-delay:15s }
.hero-slide:nth-child(5){ animation-delay:20s }    .hero-slide:nth-child(5) img{ animation-delay:20s }
.hero-slide:nth-child(6){ animation-delay:25s }    .hero-slide:nth-child(6) img{ animation-delay:25s }
.hero-slide:nth-child(7){ animation-delay:30s }    .hero-slide:nth-child(7) img{ animation-delay:30s }
.hero-slide:nth-child(8){ animation-delay:35s }    .hero-slide:nth-child(8) img{ animation-delay:35s }
.hero-slide:nth-child(9){ animation-delay:40s }    .hero-slide:nth-child(9) img{ animation-delay:40s }
.hero-slide:nth-child(10){ animation-delay:45s }    .hero-slide:nth-child(10) img{ animation-delay:45s }
.hero-slide:nth-child(11){ animation-delay:50s }    .hero-slide:nth-child(11) img{ animation-delay:50s }
.hero-slide:nth-child(12){ animation-delay:55s }    .hero-slide:nth-child(12) img{ animation-delay:55s }
.hero-slide:nth-child(13){ animation-delay:60s }    .hero-slide:nth-child(13) img{ animation-delay:60s }
.hero-slide:nth-child(14){ animation-delay:65s }    .hero-slide:nth-child(14) img{ animation-delay:65s }
.hero-slide:nth-child(15){ animation-delay:70s }    .hero-slide:nth-child(15) img{ animation-delay:70s }
.hero-slide:nth-child(16){ animation-delay:75s }    .hero-slide:nth-child(16) img{ animation-delay:75s }
.hero-slide:nth-child(17){ animation-delay:80s }    .hero-slide:nth-child(17) img{ animation-delay:80s }
.hero-slide:nth-child(18){ animation-delay:85s }    .hero-slide:nth-child(18) img{ animation-delay:85s }

@keyframes mvrHeroFade{
  0%{ opacity:0 } 1.00%{ opacity:1 } 5.56%{ opacity:1 } 6.56%{ opacity:0 } 100%{ opacity:0 }
}
@keyframes mvrHeroZoom{
  0%{ transform:scale(1.02) } 6.56%{ transform:scale(1.10) } 100%{ transform:scale(1.10) }
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{ animation:none; opacity:0 }
  .hero-slide:nth-child(1){ opacity:1 }
  .hero-slide img{ animation:none }
}

/* velo piatto, nessun gradiente */
.hero-veil{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.62); }

.hero-quote-inner{ position:relative; z-index:2; padding-block:var(--sp-4xl); }
.hero-quote-text{ margin:0; max-width:min(100%, 980px); }
.hero-quote-text p{
  font-family:var(--f-display);
  font-weight:800;
  /* niente max-width in ch sul contenitore: il ch si calcola sul font-size del
     contenitore, non su questo. Il limite sta sul blockquote, in px. */
  font-size:clamp(30px, 4.1vw, 60px);
  line-height:1.06;
  letter-spacing:-.005em;
  color:#fff;
  margin:0;
  text-wrap:balance;
}
.hero-quote-text cite{
  display:block;
  margin-top:var(--sp-lg);
  padding-top:var(--sp-md);
  border-top:1px solid rgba(255,255,255,.28);
  font:400 13px/20px var(--f-body);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-style:normal;
  color:rgba(255,255,255,.72);
  max-width:44ch;
}
@media (max-width:700px){ .hero-quote-text{ max-width:none } }

.hero-scroll{
  position:absolute; z-index:2; left:50%; bottom:28px; transform:translateX(-50%);
  width:1px; height:44px; background:rgba(255,255,255,.45);
}

/* --- 3. INTRO: H1 + descrizione, fondo chiaro --- */
.intro{ padding-block:var(--sp-4xl) var(--sp-2xl); background:var(--s-0); }
.intro-grid{ display:grid; grid-template-columns:1fr minmax(300px, 440px); gap:var(--sp-2xl); align-items:start; }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; gap:var(--sp-xl) } }
.intro-main{ max-width:68ch; display:flex; flex-direction:column; gap:var(--sp-md); }
.intro-main .eyebrow{ display:block; margin-bottom:calc(var(--sp-sm) - var(--sp-md)); }
.intro-title{ margin:0; color:var(--c-primary); }
.intro-lead{ font:600 20px/30px var(--f-body); color:var(--c-primary); margin:0; max-width:56ch; }
.intro .body{ margin:0; }
.intro .btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-md); margin-top:var(--sp-sm); }
.intro-note{ font:400 14px/22px var(--f-body); color:var(--s-600); margin:0; }
.intro-side{
  border-left:2px solid var(--c-primary);
  padding-left:var(--sp-lg);
  display:flex; flex-direction:column; gap:2px;
}
@media (max-width:900px){ .intro-side{ border-left:0; border-top:2px solid var(--c-primary); padding:var(--sp-md) 0 0 } }
.intro-stat{ font:800 56px/1 var(--f-display); color:var(--c-primary); }
.intro-stat-label{ font:600 12px/16px var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:var(--s-600); }
.intro-logo{
  display:block; width:100%; height:auto; max-width:440px;
  margin-top:var(--sp-2xl);
}
@media (max-width:900px){ .intro-logo{ max-width:300px; margin-top:var(--sp-xl); } }

/* --- 4. Icone e stati link: viola MVR (--c-secondary #1F1339) --- */
/* Il viola MVR e' molto scuro: in un tratto sottile legge nero. Va usato a
   superficie piena, con il glifo in negativo. */
.svc-icon{
  width:48px; height:48px; border-radius:var(--r-md);
  background:var(--c-secondary);
  color:#fff;
  box-shadow:0 2px 8px rgba(31,19,57,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover .svc-icon{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(31,19,57,.34); }
@media (prefers-reduced-motion:reduce){ .svc-icon{ transition:none } }

/* evidenziazione dei link al clic e da tastiera */
a:active,
.svc-card:active .svc-link,
.svc-link:active{ color:var(--c-secondary); }
.svc-card:active .svc-icon{ transform:none; }
a:focus-visible{ outline:2px solid var(--c-secondary); outline-offset:3px; border-radius:2px; }

/* --- 5. Blocco servizi unificato --- */
.svc-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .svc-grid.cols-2{ grid-template-columns:1fr; } }
.svc-grid + .svc-grid{ margin-top:var(--sp-lg); }
.svc-card .svc-lead{ font-weight:600; color:var(--c-primary); margin:0; }
/* styles.css mette flex:1 su ogni <p> della card: con due paragrafi lo spazio
   libero si divide tra i due e apre un buco. Il riempitivo lo fa il link. */
.svc-card p, .svc-card ul.svc-courses{ flex:0 0 auto; }
.svc-card .svc-link{ margin-top:auto; padding-top:var(--sp-md); }
.svc-card ul.svc-courses{ margin:0; padding-left:18px; font:400 14px/22px var(--f-body); color:var(--s-600); }
.svc-card ul.svc-courses li{ margin-bottom:4px; }
/* =========================================================================
   VARIANTE: logo MVR grande fisso sul fondo, il contenuto ci scorre sopra.
   ========================================================================= */
body{ background:var(--s-0); }

/* Logo a colori come fondale. L'attenuazione non la fa l'opacita' del logo ma
   il velo grigio chiaro delle sezioni che ci passano sopra. */
.mvr-watermark{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.mvr-watermark img{
  width:min(88vw, 1150px); height:auto;
  opacity:.55;
}
@media (max-width:700px){
  .mvr-watermark img{ width:150vw; opacity:.45; }
}

/* tutto il contenuto sta sopra al watermark */
/* NB: il .nav non va toccato — ha gia' position:sticky e z-index:40, che lo
   tengono sopra al watermark. Sovrascriverlo con position:relative gli toglieva
   lo sticky e il menu smetteva di seguire lo scroll. */
main, footer{ position:relative; z-index:1; }
.fab{ z-index:41; }

/* le sezioni chiare sono trasparenti: il logo si vede attraverso.
   Quelle che avevano un fondo pieno diventano velate. */
/* velo grigio chiaro traslucido: attenua il logo e tiene leggibile il testo */
.intro, .services, .faq, .proof{ background:rgba(243,242,240,.86) !important; }
.social{ background:rgba(236,235,232,.88) !important; }
/* --- Sezione contatti in viola MVR: unico blocco a colore pieno della pagina.
       Resta traslucida, cosi' il logo di fondo ci trasparisce sotto. --- */
.cta-final.atmo{ background:rgba(31,19,57,.92) !important; }
.cta-final.atmo .eyebrow{ color:#E8A8A0 !important; }
.cta-final.atmo .display, .cta-final.atmo .h2{ color:#fff !important; }
.cta-final.atmo .body-lg, .cta-final.atmo .body{ color:rgba(255,255,255,.78) !important; }
.cta-final.atmo .contact-channel .ico{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.cta-final.atmo .contact-channel .lbl{ color:rgba(255,255,255,.62) !important; }
.cta-final.atmo .contact-channel .val{ color:#fff !important; }
.cta-final.atmo .contact-form{ background:rgba(255,255,255,.96) !important; }

footer{ background:rgba(28,28,30,.94) !important; }


/* la hero resta opaca: sotto ci sono le foto */
.hero-quote{ z-index:1; }

/* le card devono restare leggibili sopra il logo */
.svc-card{ background:rgba(255,255,255,.94) !important; }
.faq-item{ background:rgba(255,255,255,.80); }
.reviews-card{ background:rgba(255,255,255,.90) !important; }

/* --- Nastro partner: 11 voci invece di 6, la striscia e' quasi il doppio.
       Senza allungare la durata lo scorrimento raddoppiava di velocita'. --- */
/* Loghi ingranditi. La striscia si allunga, quindi la durata sale di conseguenza
   per non accelerare lo scorrimento. */
.marquee{ animation-duration:79s !important; }
/* Stato di partenza. L'accensione la gestisce lo script in fondo alla pagina,
   in base alla distanza dal centro dello schermo. */
.marquee img{ height:72px; max-width:260px; filter:grayscale(1) opacity(.62); transition:none; }
.marquee span{ opacity:.62; }
.marquee img, .marquee span{ transform-origin:center; }

/* I marchi quadrati o a fondo pieno, alla stessa altezza di quelli orizzontali,
   pesano meno: vanno un po' piu' alti e con gli angoli smussati. */
.marquee img[src*="mentelocale"],
.marquee img[src*="giardini-luzzati"],
.marquee img[src*="cascina-gasta"],
.marquee img[src*="international-school"]{ height:84px; border-radius:8px; }
/* MotoGP Guru e' un cerchio nero su fondo bianco: gli angoli smussati non servono,
   il ritaglio circolare toglie il bordo bianco superfluo */
.marquee img[src*="motogp-guru"]{ height:84px; border-radius:50%; }
/* .marquee span: non ci sono piu' voci in testo, ora hanno tutte il logo.
   La regola resta per sicurezza se se ne riaggiungesse una. */
.marquee span{ font-size:24px !important; }

/* =========================================================================
   Rifiniture 2026-09-08
   ========================================================================= */

/* 6. hero a tutta pagina: 100svh meno l'altezza della barra di navigazione,
      cosi' hero + menu riempiono esattamente una schermata */
.hero-quote{ min-height:calc(100svh - 92px) !important; }
@supports not (height:100svh){ .hero-quote{ min-height:calc(100vh - 92px) !important; } }

/* 2-3. barra partner: bianca e opaca, cosi' il logo di fondo comincia dopo.
        Piu' respiro tra l'etichetta e i loghi. */
.proof{ background:#FFFFFF !important; padding-block:var(--sp-xl) var(--sp-2xl) !important; }
.proof-label{ margin-bottom:var(--sp-2xl) !important; }

/* 7. gerarchia dei fondali: chiaro per intro e servizi, grigio percepibile
      per "Dove operiamo" e le FAQ */
.intro, #servizi{ background:rgba(255,255,255,.88) !important; }
#aree, .faq{ background:rgba(232,231,228,.90) !important; }
.social{ background:rgba(243,242,240,.88) !important; }

/* --- "Dove siamo" in viola MVR. Card mappa e recapiti restano bianche:
       sul viola staccano e tengono il testo leggibile. --- */
#dove-siamo{ background:rgba(31,19,57,.92) !important; }
#dove-siamo .eyebrow{ color:#E8A8A0 !important; }
#dove-siamo .h2{ color:#fff !important; }
#dove-siamo .mappa-box{ border-color:rgba(255,255,255,.18) !important; box-shadow:none !important; }
#dove-siamo .mappa-info{ border-color:rgba(255,255,255,.18) !important; box-shadow:none !important; }

/* 5. box FAQ costruito come le altre card della pagina */
.faq-card{
  max-width:none !important;
  background:rgba(255,255,255,.94);
  border:1px solid var(--s-200);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:0 var(--sp-lg);
}
.faq-card .faq-item{ background:transparent !important; border-bottom:1px solid var(--s-200) !important; }
.faq-card .faq-item:last-child{ border-bottom:none !important; }
.faq-card .faq-item .a{ max-width:80ch; }

/* --- Zone su 4 colonne. La classe non esiste in styles.css, va aggiunta li'.
       Gap ridotto: a 48px come nelle altre griglie le quattro schede restavano
       troppo strette per i minibox. --- */
.zone-groups.cols-4{ grid-template-columns:repeat(4,1fr); gap:var(--sp-lg); }
@media (max-width:1080px){ .zone-groups.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .zone-groups.cols-4{ grid-template-columns:1fr; } }

/* --- Sezione "Dove siamo": mappa + recapiti --- */
.mappa-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-2xl); align-items:stretch; }
@media (max-width:900px){ .mappa-grid{ grid-template-columns:1fr; } }
.mappa-box{
  border:1px solid var(--s-200); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--s-0); min-height:340px;
}
.mappa-box iframe{ display:block; width:100%; height:100%; min-height:340px; border:0; }
.mappa-info{
  background:rgba(255,255,255,.94); border:1px solid var(--s-200);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  padding:var(--sp-xl); display:flex; flex-direction:column; gap:var(--sp-md);
}
.mappa-nome{ font:600 19px/26px var(--f-body); color:var(--c-primary); margin:0; }
.mappa-info .body{ margin:0; }
.mappa-dati{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px var(--sp-md); align-items:baseline; }
.mappa-dati dt{ font:600 13px/20px var(--f-body); letter-spacing:.04em; text-transform:uppercase; color:var(--s-600); }
.mappa-dati dd{ margin:0; font:600 16px/22px var(--f-body); }
.mappa-dati a{ color:var(--c-primary); text-decoration:none; }
.mappa-dati a:hover{ text-decoration:underline; }
.mappa-info .btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-md); margin-top:auto; padding-top:var(--sp-sm); }

/* il numero al posto di "Chiama" e' piu' largo: niente a capo nel bottone */
.nav-cta .btn{ white-space:nowrap; }

/* Se le animazioni di sistema sono disattivate lo script non parte:
   l'accensione al passaggio del mouse la copre il CSS. */
@media (prefers-reduced-motion: reduce){
  .marquee img{ transition:filter .2s ease; }
  .marquee img:hover{ filter:grayscale(0) opacity(1); }
  .marquee span{ transition:opacity .2s ease; }
  .marquee span:hover{ opacity:1; }
}


/* =========================================================================
   Pagine interne — aggiunte 2026-09-09
   ========================================================================= */

/* --- Hero compatta di pagina: foto + velo piatto, come la home ma bassa.
       NB: si chiama .hero-pagina e non .hero-pagina perche' in styles.css esiste gia'
       una .hero-pagina, centrata, usata dalle altre pagine del sito. --- */
.hero-pagina{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(380px, 54vh, 540px);
  display:flex; align-items:center;
  background:#1C1C1E;
}
.hero-pagina > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0;
}
.hero-pagina .velo{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.62); }
/* il .wrap dentro un contenitore flex si restringe al contenuto e finisce centrato:
   va forzato a piena larghezza e allineato a sinistra come nel resto del sito */
.hero-pagina .wrap{ position:relative; z-index:2; padding-block:var(--sp-2xl); width:100%; text-align:left; }
.hero-pagina .eyebrow{ color:#E8A8A0; }
.hero-pagina h1{
  font-family:var(--f-display); font-weight:800; color:#fff; margin:8px 0 0;
  font-size:clamp(34px, 4.6vw, 64px); line-height:1.06; max-width:20ch;
}
.hero-pagina .sottotitolo{
  font:400 18px/28px var(--f-body); color:rgba(255,255,255,.82);
  margin:var(--sp-md) 0 0; max-width:60ch;
}

/* --- Briciole di pane --- */
.breadcrumb-bar{ background:var(--s-0); border-bottom:1px solid var(--s-200); }
.breadcrumb-bar ol{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:12px 0;
  font:400 13px/20px var(--f-body); color:var(--s-600);
}
.breadcrumb-bar li + li::before{ content:"›"; margin-right:8px; color:var(--s-500); }
.breadcrumb-bar a{ color:var(--s-600); text-decoration:none; }
.breadcrumb-bar a:hover{ color:var(--c-primary); text-decoration:underline; }

/* --- Blocco foto + testo affiancati --- */
.media-row{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-3xl); align-items:center; }
.media-row.invertita{ grid-template-columns:1.15fr .85fr; }
@media (max-width:900px){
  .media-row, .media-row.invertita{ grid-template-columns:1fr; gap:var(--sp-xl); }
  .media-row .media-foto{ order:-1; }
}
.media-foto{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--s-200);
  box-shadow:var(--shadow-sm); background:var(--s-0);
}
.media-foto img{ display:block; width:100%; height:100%; max-height:520px; object-fit:cover; }
.media-testo{ display:flex; flex-direction:column; gap:var(--sp-md); }
.media-testo .h2{ margin:0; }
.media-testo p{ margin:0; }

/* --- Passi numerati --- */
.passi{ counter-reset:passo; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-lg); margin-top:var(--sp-xl); }
@media (max-width:820px){ .passi{ grid-template-columns:1fr; } }
.passo{
  counter-increment:passo; position:relative;
  background:rgba(255,255,255,.94); border:1px solid var(--s-200);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  padding:var(--sp-lg) var(--sp-lg) var(--sp-lg) 74px;
}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute; left:var(--sp-lg); top:var(--sp-lg);
  font:800 22px/1 var(--f-display); color:var(--c-secondary);
}
.passo h3{ font:600 17px/24px var(--f-body); margin:0 0 6px; }
.passo p{ font:400 14px/22px var(--f-body); color:var(--s-600); margin:0; }

/* --- Sezione in viola MVR, riusabile su ogni pagina --- */
.sezione-viola{ background:rgba(31,19,57,.92) !important; }
.sezione-viola .eyebrow{ color:#E8A8A0 !important; }
.sezione-viola .h2, .sezione-viola .h3, .sezione-viola .display{ color:#fff !important; }
.sezione-viola .body, .sezione-viola p{ color:rgba(255,255,255,.78) !important; }
.sezione-viola .nota{ color:rgba(255,255,255,.55) !important; font-size:13px; }
.sezione-viola .btn-secondary{ border-color:rgba(255,255,255,.55) !important; color:#fff !important; }
.sezione-viola .btn-secondary:hover{ background:rgba(255,255,255,.10) !important; }

/* =========================================================================
   SEO homepage — 2026-09-15: H1 e CTA dentro la hero
   ========================================================================= */
.hero-quote-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-md); }
.hero-h1{
  font:700 clamp(20px, 2.1vw, 28px)/1.25 var(--f-body);
  color:#fff; margin:0; letter-spacing:.005em;
  padding-left:14px; border-left:3px solid var(--c-accent);
}
.hero-sub{ font:400 clamp(15px, 1.25vw, 18px)/1.5 var(--f-body); color:rgba(255,255,255,.86); margin:0 0 var(--sp-sm); max-width:62ch; }
.hero-quote-text{ margin:var(--sp-sm) 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-md); margin-top:var(--sp-lg); }
@media (max-width:700px){
  .hero-quote-inner{ padding-block:var(--sp-2xl) var(--sp-xl); gap:12px; }
  .hero-quote-text p{ font-size:clamp(26px, 7.4vw, 34px); }
  .hero-cta{ width:100%; flex-direction:column; }
  .hero-cta .btn{ width:100%; justify-content:center; text-align:center; }
  .hero-scroll{ display:none; }
}
/* Senza JavaScript le slide dalla seconda in poi non hanno immagine (data-src):
   niente animazione, resta ferma la prima. */
html:not(.js) .hero-slide{ animation:none; opacity:0; }
html:not(.js) .hero-slide:first-child{ opacity:1; }
html:not(.js) .hero-slide img{ animation:none; }

/* Intro: la frase-risposta apre la sezione, con un peso un filo piu' leggero del lead */
.intro .intro-risposta{ font-weight:500; }

/* Footer: titoli di colonna come paragrafi. Erano H4 subito dopo un H2 (salto di livello). */
footer p.footer-titolo{ font:600 13px/18px var(--f-body); letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 var(--sp-sm); display:block; }

/* Pagina Antincendio: griglia delle tipologie di estintori e link nel testo */
.tipi-estintori{ margin-top:var(--sp-2xl); }
.svc-card p a, .media-testo .body a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Le schede .passo restano bianche anche dentro la sezione viola: il testo
   deve tornare scuro, altrimenti eredita il bianco di .sezione-viola p */
.sezione-viola .passo h3{ color:var(--s-900) !important; }
.sezione-viola .passo p{ color:var(--s-600) !important; }

/* --- Blocchi e tabelle della sezione estintori / manutenzione --- */
.blocco-estintori{ margin-top:var(--sp-2xl); max-width:80ch; }
.blocco-estintori .h3{ margin:0 0 var(--sp-sm); }
.lista-classi{ margin:0 0 var(--sp-md); padding-left:18px; }
.lista-classi li{ font:400 16px/28px var(--f-body); color:var(--s-600); }
.tabella-wrap{ overflow-x:auto; margin:var(--sp-md) 0 var(--sp-sm); }
.tab-scadenze{ width:100%; border-collapse:collapse; min-width:560px; background:#fff; border:1px solid var(--s-200); border-radius:var(--r-md); overflow:hidden; }
.tab-scadenze th{ text-align:left; font:600 13px/18px var(--f-body); letter-spacing:.04em; text-transform:uppercase; color:var(--s-600); background:var(--s-100,#F4F4F5); padding:12px 16px; border-bottom:1px solid var(--s-200); }
.tab-scadenze td{ font:400 15px/24px var(--f-body); color:var(--s-900); padding:14px 16px; border-bottom:1px solid var(--s-200); vertical-align:top; }
.tab-scadenze tbody tr:last-child td{ border-bottom:0; }
.tab-scadenze td:first-child{ font-weight:600; white-space:nowrap; }
.nota-tabella{ font:400 14px/22px var(--f-body); color:var(--s-600); margin:0; }
.lista-checklist{ margin:0 0 var(--sp-md); padding-left:20px; }
.lista-checklist li{ font:400 16px/28px var(--f-body); color:var(--s-600); margin-bottom:6px; }
.lista-checklist strong{ color:var(--s-900); }
/* Elenco compatto dei servizi nelle pagine delle aree */
.lista-servizi{ list-style:none; margin:0; padding:0; max-width:80ch; border-top:1px solid var(--s-200); }
.lista-servizi li{ font:400 17px/28px var(--f-body); color:var(--s-600); padding:14px 0; border-bottom:1px solid var(--s-200); }
.lista-servizi a{ color:var(--s-900); font-weight:600; text-decoration:none; border-bottom:2px solid var(--c-primary); }
.lista-servizi a:hover{ color:var(--c-primary); }
/* Colonna laterale dell'intro con foto al posto del dato numerico */
.intro-side-foto{ border-left:0; padding-left:0; }
.intro-side-foto img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
@media (max-width:900px){ .intro-side-foto{ border-top:0; padding-top:0 } }

/* --- Titolo di pagina: parola chiave grande + riga descrittiva dentro l'H1 --- */
.hero-pagina h1.titolo-chiave{ max-width:none; display:flex; flex-direction:column; gap:12px; }
.titolo-chiave .tc-parola{ display:block; max-width:18ch; }
.titolo-chiave .tc-coda{
  font-family:var(--f-body); font-weight:400; letter-spacing:0;
  font-size:clamp(17px, 1.7vw, 22px); line-height:1.55;
  color:rgba(255,255,255,.9); max-width:54ch;
}

/* --- Griglie di schede prodotto (gamma estintori, idranti e componenti) --- */
.griglia-prodotti{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-lg); margin-top:var(--sp-xl);
}
@media (max-width:1080px){ .griglia-prodotti{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .griglia-prodotti{ grid-template-columns:repeat(2,1fr); } }
.scheda-prodotto{
  margin:0; background:#fff; border:1px solid var(--s-200); border-radius:var(--r-md);
  padding:var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-sm);
}
.scheda-prodotto img{
  display:block; width:100%; height:150px; object-fit:contain; mix-blend-mode:multiply;
}
.scheda-prodotto figcaption{ font:400 14px/21px var(--f-body); color:var(--s-600); }
.scheda-prodotto figcaption strong{ display:block; font:600 15px/22px var(--f-body); color:var(--s-900); margin-bottom:2px; }

/* --- Tre foto a rotazione nella colonna laterale dell'intro --- */
.rotazione{ position:relative; width:100%; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--s-200); }
.rotazione img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:rotazione-foto 15s infinite;
}
.rotazione img:nth-child(2){ animation-delay:5s; }
.rotazione img:nth-child(3){ animation-delay:10s; }
@keyframes rotazione-foto{
  0%{ opacity:0 } 3%{ opacity:1 } 30%{ opacity:1 } 35%{ opacity:0 } 100%{ opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .rotazione img{ animation:none; opacity:0 }
  .rotazione img:first-child{ opacity:1 }
}

/* --- Pagine legali (privacy e cookie policy) --- */
.legale{ max-width:78ch; }
.legale h2{ font:700 24px/32px var(--f-display); color:var(--s-900); margin:var(--sp-2xl) 0 var(--sp-sm); }
.legale h2:first-child{ margin-top:0; }
.legale h3{ font:600 17px/26px var(--f-body); color:var(--s-900); margin:var(--sp-lg) 0 6px; }
.legale p, .legale li{ font:400 16px/28px var(--f-body); color:var(--s-600); }
.legale p{ margin:0 0 var(--sp-md); }
.legale ul{ margin:0 0 var(--sp-md); padding-left:1.2em; }
.legale li{ margin-bottom:8px; }
.legale a{ color:var(--c-primary); text-decoration:underline; text-underline-offset:2px; }

/* Consenso privacy nel modulo di contatto */
.contact-form .consenso{
  display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px;
  font:400 13px/20px var(--f-body); color:var(--s-600); margin-bottom:var(--sp-sm);
}
.contact-form .consenso span{ flex:1; }
.contact-form .consenso input{ width:auto; margin-top:2px; flex:0 0 auto; }
.contact-form .consenso a{ color:inherit; text-decoration:underline; }


/* Link legali nella riga finale del footer */
.footer-legale a{ color:rgba(255,255,255,.75); text-decoration:none; }
.footer-legale a:hover{ color:#fff; text-decoration:underline; }
/* Mappa statica della sede: immagine servita dal sito, apre le indicazioni su Google */
.mappa-statica{ position:relative; display:block; height:100%; min-height:320px; border-radius:var(--r-md); overflow:hidden; }
.mappa-statica img{ display:block; width:100%; height:100%; object-fit:cover; }
.mappa-apri{
  position:absolute; left:var(--sp-md); bottom:var(--sp-md);
  background:#fff; color:var(--s-900); border-radius:999px; padding:9px 16px;
  font:600 13px/1 var(--f-body); box-shadow:var(--shadow-sm);
}
.mappa-statica:hover .mappa-apri{ background:var(--c-primary); color:#fff; }

/* --- Banner di consenso ai cookie --- */
.banner-cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:1000;
  max-width:760px; margin:0 auto; padding:var(--sp-lg);
  background:#fff; border:1px solid var(--s-200); border-radius:var(--r-md);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:var(--sp-lg);
}
.banner-cookie-testo p{ font:400 14px/22px var(--f-body); color:var(--s-600); margin:0; }
.banner-cookie-testo p + p{ margin-top:4px; }
.banner-cookie-testo strong{ color:var(--s-900); }
.banner-cookie-testo a{ color:inherit; text-decoration:underline; }
.banner-cookie-azioni{ display:flex; gap:10px; flex:0 0 auto; }
@media (max-width:640px){
  .banner-cookie{ flex-direction:column; align-items:stretch; }
  .banner-cookie-azioni .btn{ flex:1; }
}

/* Modulo contatti: campo trappola nascosto ed esito dell'invio */
.contact-form .campo-trappola{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-form .form-esito{ margin:0; padding:10px 12px; border-radius:var(--r-sm); font:600 14px/20px var(--f-body); background:#E8F2EC; color:var(--c-success); }
.contact-form .form-esito.errore{ background:#FBEAE8; color:var(--c-accent-active); }