/* ==========================================================================
   InstallGramm — Porte da Garage
   Foglio di stile unico, nessuna risorsa esterna (nessun font remoto,
   nessuna CDN, nessun analytics) → zero cookie, zero raccolta dati.
   Palette dal logo: navy #042c54, oro #D4AF37, ghiaccio #DCE4EC.
   ========================================================================== */

:root{
  --navy:        #042c54;
  --navy-dark:   #021e3a;
  --navy-mid:    #0d2847;
  --navy-soft:   #1a4770;
  --oro:         #D4AF37;
  --oro-testo:   #8a6d1f;   /* oro leggibile su fondo bianco (WCAG AA) */
  --oro-light:   #e8cd6e;
  --ghiaccio:    #DCE4EC;
  --carta:       #f5f8fc;
  --bianco:      #ffffff;
  --testo:       #1a2332;
  --testo-muto:  #5a6b7d;
  --bordo:       #d8e0ea;

  --radius:      10px;
  --radius-sm:   6px;
  --ombra:       0 2px 8px rgba(4,44,84,.07);
  --ombra-hover: 0 8px 26px rgba(4,44,84,.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --max: 1140px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

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

body{
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

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

a{ color: var(--navy-soft); text-decoration: underline; text-underline-offset:2px; }
a:hover{ color: var(--navy); }

/* Focus visibile e netto — requisito WCAG 2.4.7 / EAA */
:focus-visible{
  outline: 3px solid var(--oro);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Solo per screen reader */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------- Contenitore ---------- */
.wrap{ max-width: var(--max); margin:0 auto; padding:0 20px; }
.wrap-narrow{ max-width: 780px; margin:0 auto; padding:0 20px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--oro);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--bianco);
  flex-shrink: 0;
}
.logo img{
  width: 40px; height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo-name{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.logo-name em{ font-style:normal; color:var(--oro); }
.logo-tag{
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.58);
  font-weight: 400;
}

/* ---------- Navigazione ---------- */
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: 15px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.nav a:hover{ color:var(--bianco); background:rgba(255,255,255,.09); }
.nav a[aria-current="page"]{
  color: var(--oro);
  font-weight: 600;
}

/* ---------- Pulsanti ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s, color .15s;
  line-height: 1.25;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-oro{
  background: var(--oro);
  color: var(--navy-dark);
  box-shadow: 0 3px 10px rgba(212,175,55,.32);
}
.btn-oro:hover{ background: var(--oro-light); color: var(--navy-dark); }

.btn-navy{
  background: var(--navy);
  color: var(--bianco);
}
.btn-navy:hover{ background: var(--navy-mid); color: var(--bianco); }

.btn-bordo{
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-bordo:hover{ background: var(--navy); color: var(--bianco); }

.btn-bordo-bianco{
  background: transparent;
  color: var(--bianco);
  border-color: rgba(255,255,255,.42);
}
.btn-bordo-bianco:hover{
  background: rgba(255,255,255,.12);
  border-color: var(--bianco);
  color: var(--bianco);
}

/* Pulsante header (più compatto) */
.site-header .btn{ padding: 10px 19px; font-size: 14.5px; }

/* ---------- Menu mobile (senza JS) ---------- */
.nav-toggle{ display: none; }

/* ==========================================================================
   SEZIONI
   ========================================================================== */
section{ padding: 76px 0; }
section.compatta{ padding: 52px 0; }

.sezione-carta{ background: var(--carta); }

.etichetta{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--oro-testo);
  font-size: 12.5px;
  margin-bottom: 12px;
}
.etichetta-chiara,
.su-scuro .etichetta,
.hero .etichetta{ color: var(--oro); }

h1,h2,h3,h4{
  color: var(--navy);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.4px;
}

h1{ font-size: clamp(31px, 4.6vw, 50px); margin-bottom: 20px; }
h2{ font-size: clamp(25px, 3.2vw, 37px); margin-bottom: 18px; }
h3{ font-size: clamp(19px, 2.1vw, 23px); margin-bottom: 11px; letter-spacing:-.2px; }
h4{ font-size: 17px; margin-bottom: 7px; letter-spacing:0; }

.sottotitolo{
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--testo-muto);
  line-height: 1.62;
  margin-bottom: 0;
}

.testa-sezione{
  max-width: 720px;
  margin-bottom: 46px;
}
.testa-sezione.centrata{
  margin-left:auto; margin-right:auto; text-align:center;
}
.testa-sezione p{
  color: var(--testo-muto);
  font-size: 17.5px;
}

/* ---------- Su sfondo scuro ---------- */
.su-scuro h1,.su-scuro h2,.su-scuro h3,.su-scuro h4{ color: var(--bianco); }
.su-scuro .sottotitolo,
.su-scuro .testa-sezione p{ color: rgba(255,255,255,.76); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: linear-gradient(160deg, #042c54 0%, #021e3a 62%, #042c54 100%);
  color: var(--bianco);
  padding: 88px 0 92px;
  position: relative;
  overflow: hidden;
}
/* Trama sottile, nessuna immagine esterna */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(212,175,55,.12) 0%, transparent 46%),
    radial-gradient(circle at 84% 76%, rgba(26,71,112,.42) 0%, transparent 52%);
  pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; }

.hero-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 58px;
  align-items: center;
}

.hero h1{
  color: var(--bianco);
  margin-bottom: 22px;
}
.hero h1 em{
  font-style: normal;
  color: var(--oro);
}
.hero p.intro{
  font-size: 19px;
  line-height: 1.68;
  color: rgba(255,255,255,.8);
  margin-bottom: 32px;
  max-width: 540px;
}

.hero-azioni{
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 34px;
}

.hero-fiducia{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-fiducia div{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}
.hero-fiducia svg{ flex-shrink:0; color: var(--oro); }

/* Riquadro "scheda" a destra dell'hero */
.hero-scheda{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: var(--radius);
  padding: 30px 28px;
  backdrop-filter: blur(2px);
}
.hero-scheda h2{
  font-size: 19px;
  color: var(--oro);
  margin-bottom: 18px;
  letter-spacing: .2px;
}
.hero-scheda ul{ list-style:none; }
.hero-scheda li{
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 15.2px;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
}
.hero-scheda li:last-child{ border-bottom:none; padding-bottom:0; }
.hero-scheda li svg{ flex-shrink:0; color: var(--oro); margin-top:3px; }

/* ==========================================================================
   GRIGLIE
   ========================================================================== */
.griglia{
  display: grid;
  gap: 24px;
}
.griglia-2{ grid-template-columns: repeat(2, 1fr); }
.griglia-3{ grid-template-columns: repeat(3, 1fr); }
.griglia-4{ grid-template-columns: repeat(4, 1fr); }

/* ---------- Galleria lavori ---------- */
.griglia-lavori{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lavoro{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius: var(--radius);
  background: #0b1a2b;
  box-shadow: 0 8px 22px rgba(4,44,84,.10);
}
.lavoro-grande{ grid-column: span 2; }
.lavoro img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s ease;
}
.lavoro-grande img{ aspect-ratio: 16 / 7.2; }
.lavoro:hover img{ transform: scale(1.03); }
.lavoro figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 26px 16px 12px;
  font-size:13.5px;
  line-height:1.4;
  color:#fff;
  background: linear-gradient(to top, rgba(4,20,38,.92), rgba(4,20,38,0));
}
@media (max-width: 900px){
  .griglia-lavori{ grid-template-columns: repeat(2, 1fr); gap:12px; }
  .lavoro-grande{ grid-column: span 2; }
  .lavoro-grande img{ aspect-ratio: 16 / 9; }
  .lavoro figcaption{ font-size:12px; padding:20px 10px 9px; }
}
@media (max-width: 560px){
  .griglia-lavori{ grid-template-columns: 1fr; }
  .lavoro-grande{ grid-column: span 1; }
}

/* ---------- Card servizio ---------- */
.card{
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--ombra);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover{
  box-shadow: var(--ombra-hover);
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.5);
}

.card-icona{
  width: 50px; height: 50px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  flex-shrink: 0;
}
.card-icona svg{ color: var(--oro); }

.card h3{ margin-bottom: 9px; }
.card p{
  color: var(--testo-muto);
  font-size: 15.3px;
  line-height: 1.62;
  margin-bottom: 16px;
  flex-grow: 1;
}
.card-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  margin-top: auto;
  padding: 4px 0;
}
.card-link:hover{ color: var(--oro); }
.card-link:hover svg{ transform: translateX(3px); }
.card-link svg{ transition: transform .15s; }

/* ---------- Card catalogo ---------- */
.cat-card{
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--ombra);
  transition: box-shadow .18s, transform .18s, border-color .18s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cat-card:hover{
  box-shadow: var(--ombra-hover);
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.5);
}
.cat-visual{
  height: 132px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cat-visual::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 72% 28%, rgba(212,175,55,.18) 0%, transparent 58%);
}
.cat-visual svg{ color: var(--oro); position:relative; z-index:1; }
.cat-corpo{
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.cat-corpo h3{
  font-size: 17.5px;
  margin-bottom: 7px;
}
.cat-corpo p{
  font-size: 14.6px;
  color: var(--testo-muto);
  line-height: 1.58;
  margin-bottom: 14px;
  flex-grow: 1;
}
.cat-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tag{
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--ghiaccio);
  color: var(--navy);
  letter-spacing: .2px;
}

/* ==========================================================================
   ELENCO VANTAGGI (numerato)
   ========================================================================== */
.vantaggi{ display:grid; gap:18px; grid-template-columns:repeat(2,1fr); }
.vantaggio{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.vantaggio-num{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--navy);
  color:var(--oro);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
}
.vantaggio h3.vantaggio-titolo{ margin-bottom:5px; font-size:16.5px; letter-spacing:0; }
.vantaggio p{ font-size:14.8px; color:var(--testo-muto); line-height:1.6; }

/* ==========================================================================
   BANDA CONTATTO (CTA)
   ========================================================================== */
.cta{
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--bianco);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(212,175,55,.14) 0%, transparent 58%);
  pointer-events:none;
}
.cta .wrap{ position:relative; z-index:1; }
.cta h2{ color:var(--bianco); margin-bottom:16px; }
.cta p{
  color:rgba(255,255,255,.78);
  font-size:18px;
  max-width:620px;
  margin:0 auto 32px;
}
.cta-azioni{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:26px;
}
.cta-nota{
  font-size:14px;
  color:rgba(255,255,255,.55);
}

/* ==========================================================================
   FAQ (senza JS, <details>)
   ========================================================================== */
.faq{ max-width:820px; margin:0 auto; }
.faq details{
  border:1px solid var(--bordo);
  border-radius:var(--radius-sm);
  margin-bottom:11px;
  background:var(--bianco);
  overflow:hidden;
}
.faq details[open]{
  border-color:rgba(212,175,55,.6);
  box-shadow:var(--ombra);
}
.faq summary{
  cursor:pointer;
  padding:19px 22px;
  font-weight:600;
  font-size:16.3px;
  color:var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  transition:background .14s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--carta); }
.faq summary::after{
  content:'+';
  font-size:23px;
  font-weight:400;
  color:var(--oro);
  flex-shrink:0;
  line-height:1;
  transition:transform .18s;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .risposta{
  padding:0 22px 20px;
  color:var(--testo-muto);
  font-size:15.4px;
  line-height:1.68;
}

/* ==========================================================================
   CONTATTI
   ========================================================================== */
.contatti-griglia{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.contatto-card{
  background:var(--bianco);
  border:1px solid var(--bordo);
  border-radius:var(--radius);
  padding:32px 26px;
  text-align:center;
  box-shadow:var(--ombra);
  transition:box-shadow .18s, transform .18s;
}
.contatto-card:hover{
  box-shadow:var(--ombra-hover);
  transform:translateY(-3px);
}
.contatto-card .card-icona{ margin:0 auto 16px; }
.contatto-card h3{ font-size:16.5px; margin-bottom:7px; }
.contatto-card p,
.contatto-card a{
  font-size:16px;
  color:var(--testo-muto);
  text-decoration:none;
  line-height:1.55;
}
.contatto-card a:hover{ color:var(--navy); text-decoration:underline; }
.contatto-card strong{
  display:block;
  font-size:18px;
  color:var(--navy);
  margin-bottom:3px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: var(--navy-dark);
  color: rgba(255,255,255,.62);
  padding: 56px 0 26px;
  font-size: 14.5px;
}
.footer-griglia{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand .logo{ margin-bottom: 16px; }
.footer-brand p{
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.58);
  max-width: 330px;
}
.site-footer h3{
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--oro);
  margin-bottom: 16px;
  font-weight: 700;
}
.site-footer ul{ list-style: none; }
.site-footer li{ margin-bottom: 9px; }
.site-footer a{
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: 14.5px;
}
.site-footer a:hover{ color: var(--oro); text-decoration: underline; }

.footer-basso{
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
}
.footer-basso a{ font-size:13px; color:rgba(255,255,255,.52); }

/* ==========================================================================
   ARTICOLO / BLOG
   ========================================================================== */
.articolo-testa{
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--bianco);
  padding: 62px 0 54px;
}
.articolo-testa h1{
  color: var(--bianco);
  font-size: clamp(27px, 3.6vw, 40px);
  margin-bottom: 14px;
}
.articolo-meta{
  font-size: 14px;
  color: rgba(255,255,255,.6);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.articolo-corpo{
  max-width: 740px;
  margin: 0 auto;
  padding: 56px 20px 20px;
  font-size: 17.3px;
  line-height: 1.78;
}
.articolo-corpo > * + *{ margin-top: 22px; }
.articolo-corpo h2{ margin-top: 44px; font-size: 27px; }
.articolo-corpo h3{ margin-top: 32px; font-size: 21px; }
.articolo-corpo ul,
.articolo-corpo ol{ padding-left: 26px; }
.articolo-corpo li + li{ margin-top: 9px; }
.articolo-corpo blockquote{
  border-left: 4px solid var(--oro);
  background: var(--carta);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--navy);
  font-size: 17px;
}
.articolo-corpo table{
  width:100%;
  border-collapse:collapse;
  font-size:15.5px;
}
.articolo-corpo th{
  background:var(--navy);
  color:var(--bianco);
  padding:12px 14px;
  text-align:left;
  font-size:14px;
}
.articolo-corpo td{
  padding:11px 14px;
  border-bottom:1px solid var(--bordo);
}
.articolo-corpo tbody tr:nth-child(even){ background:var(--carta); }

/* Lista articoli */
.lista-articoli{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.art-card{
  background:var(--bianco);
  border:1px solid var(--bordo);
  border-radius:var(--radius);
  padding:26px 24px;
  box-shadow:var(--ombra);
  transition:box-shadow .18s, transform .18s, border-color .18s;
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
}
.art-card:hover{
  box-shadow:var(--ombra-hover);
  transform:translateY(-3px);
  border-color:rgba(212,175,55,.5);
}
.art-card .tag{ align-self:flex-start; margin-bottom:13px; }
.art-card h3{ font-size:18px; margin-bottom:9px; color:var(--navy); }
.art-card p{
  font-size:14.8px;
  color:var(--testo-muto);
  line-height:1.58;
  flex-grow:1;
  margin-bottom:14px;
}
.art-card .leggi{
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Breadcrumb */
.briciole{
  font-size:13.5px;
  color:rgba(255,255,255,.55);
  margin-bottom:16px;
}
.briciole a{ color:rgba(255,255,255,.72); text-decoration:none; }
.briciole a:hover{ color:var(--oro); text-decoration:underline; }

/* ==========================================================================
   PAGINE LEGALI
   ========================================================================== */
.legale{
  max-width:820px;
  margin:0 auto;
  padding:56px 20px 70px;
  font-size:16px;
  line-height:1.8;
}
.legale > * + *{ margin-top:18px; }
.legale h1{ margin-bottom:24px; }
.legale h2{
  font-size:24px;
  margin-top:38px;
  padding-top:8px;
}
.legale h3{ font-size:19px; margin-top:26px; }
.legale ul, .legale ol{ padding-left:24px; }
.legale li + li{ margin-top:7px; }
.legale table{ width:100%; border-collapse:collapse; font-size:15px; margin-top:16px; }
.legale th{ background:var(--navy); color:var(--bianco); padding:11px 13px; text-align:left; }
.legale td{ padding:9px 13px; border-bottom:1px solid var(--bordo); }

/* ==========================================================================
   UTILITÀ
   ========================================================================== */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.testo-centro{ text-align:center; }
.muto{ color:var(--testo-muto); }
.salto-ancora{ scroll-margin-top: 90px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero{ padding:64px 0 68px; }
  .griglia-4{ grid-template-columns:repeat(2,1fr); }
  .lista-articoli{ grid-template-columns:repeat(2,1fr); }
  .footer-griglia{ grid-template-columns:1fr 1fr; gap:34px; }
  .footer-brand{ grid-column:1 / -1; }
}

/* Mobile */
@media (max-width: 720px){
  body{ font-size:16px; }
  section{ padding:52px 0; }
  section.compatta{ padding:40px 0; }

  .site-header .wrap{
    min-height:64px;
    flex-wrap:wrap;
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .logo img{ width:34px; height:34px; }
  .logo-name{ font-size:17px; }
  .logo-tag{ font-size:9px; letter-spacing:.7px; }

  /* Menu: si apre in blocco sotto il logo, senza JS */
  .nav{
    order:3;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:1px;
    max-height:0;
    overflow:hidden;
    transition:max-height .26s ease;
  }
  .nav-toggle:checked ~ .nav{
    max-height:460px;
    padding-bottom:6px;
  }
  /* Fallback per HTML in cache (vecchia struttura: checkbox dentro .nav-cornice).
     :has() funziona anche quando #nav-toggle NON e' fratello di .nav. */
  .site-header .wrap:has(#nav-toggle:checked) .nav{
    max-height:460px;
    padding-bottom:6px;
  }
  .nav a{ padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.08); }

  .nav-cornice{ display:flex; align-items:center; gap:10px; margin-left:auto; }
  .nav-toggle-label{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px; height:42px;
    cursor:pointer;
    border:1px solid rgba(255,255,255,.28);
    border-radius:var(--radius-sm);
    padding:10px;
  }
  .nav-toggle-label span:not(.sr-only){
    display:block;
    height:2px;
    background:rgba(255,255,255,.86);
    border-radius:1px;
    transition:transform .24s ease, opacity .18s ease;
  }
  .nav-toggle:checked ~ .nav-cornice .nav-toggle-label span:nth-of-type(2){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-cornice .nav-toggle-label span:nth-of-type(3){ opacity:0; }
  .nav-toggle:checked ~ .nav-cornice .nav-toggle-label span:nth-of-type(4){ transform:translateY(-7px) rotate(-45deg); }
  /* fallback cache: checkbox non fratello della cornice */
  .site-header .wrap:has(#nav-toggle:checked) .nav-toggle-label span:nth-of-type(2){ transform:translateY(7px) rotate(45deg); }
  .site-header .wrap:has(#nav-toggle:checked) .nav-toggle-label span:nth-of-type(3){ opacity:0; }
  .site-header .wrap:has(#nav-toggle:checked) .nav-toggle-label span:nth-of-type(4){ transform:translateY(-7px) rotate(-45deg); }

  .site-header .btn{ padding:9px 14px; font-size:13.5px; }

  .griglia-2, .griglia-3, .griglia-4{ grid-template-columns:1fr; }
  .vantaggi{ grid-template-columns:1fr; }
  .lista-articoli{ grid-template-columns:1fr; }
  .contatti-griglia{ grid-template-columns:1fr; }
  .footer-griglia{ grid-template-columns:1fr; gap:30px; }

  .hero{ padding:48px 0 52px; }
  .hero-azioni{ flex-direction:column; }
  .hero-azioni .btn{ width:100%; }
  .hero-fiducia{ flex-direction:column; gap:11px; }
  .hero-scheda{ padding:24px 20px; }

  .cta-azioni{ flex-direction:column; }
  .cta-azioni .btn{ width:100%; }

  .articolo-corpo, .legale{ padding-left:18px; padding-right:18px; }
}

/* Piccoli telefoni */
@media (max-width: 400px){
  .logo-tag{ display:none; }
}

/* ---------- Stampa ---------- */
@media print{
  .site-header, .site-footer, .cta, .nav-toggle-label, .btn{ display:none !important; }
  body{ font-size:11pt; color:#000; }
  a{ color:#000; text-decoration:underline; }
  section{ padding:16px 0; }
  .card, .cat-card, .contatto-card, .art-card{ box-shadow:none; border:1px solid #ccc; }
  .hero{ background:#fff !important; color:#000 !important; padding:0 0 16px; }
  .hero h1, .hero p.intro{ color:#000 !important; }
  .su-scuro h1, .su-scuro h2, .su-scuro h3{ color:#000 !important; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover, .cat-card:hover, .contatto-card:hover, .art-card:hover, .btn:hover{
    transform:none !important;
  }
}

/* ---------- Alto contrasto ---------- */
@media (prefers-contrast: more){
  :root{ --testo-muto:#3d4d5c; --bordo:#9aabbd; }
  .card, .cat-card, .contatto-card, .art-card{ border-width:2px; }
}