/* ==========================================================================
   MCA design s.r.l. — landing page
   ========================================================================== */

/* ---------- Caratteri serviti dal nostro sito ----------
   Non da Google: caricarli dal CDN di Google significherebbe mandare l'indirizzo
   IP di ogni visitatore a un server terzo, cosa discussa sotto il GDPR.
   Sono due file variabili: uno solo copre tutti i pesi di ciascun carattere. */
@font-face{
  font-family:'Jost';
  src:url('assets/fonts/jost-latin.woff2') format('woff2');
  font-weight:200 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight:300 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Token ---------- */
:root{
  --bg:        #fbfaf8;
  --bg-alt:    #f3f0ea;
  --ink:       #14130f;
  --ink-2:     #3d3a33;
  --ink-soft:  #7b756a;
  --line:      #e2ddd3;
  --line-2:    #cfc8ba;
  --accent:    #8d7c5e;
  --wa:        #25d366;
  --wa-dark:   #1da851;

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --ff-display: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 96px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  /* "clip" invece di "hidden": non crea un contenitore di scroll,
     quindi non interferisce con il position:sticky di "Chi siamo". */
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:200; line-height:1.12; margin:0; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--ink); color:var(--bg); }

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

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--bg); padding:12px 18px; text-decoration:none;
}
.skip-link:focus{ top:16px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* Header su due righe: il marchio al centro sopra, il menu centrato sotto.
   Con sette voci non c'era modo di tenere il logo grande e centrato
   sulla stessa riga. */
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--header-h);
  transition:height .4s var(--ease);
}
.header-top{ display:flex; align-items:center; }
.brand{ flex:0 0 auto; }     /* il logo non si lascia schiacciare dal menu */
.brand img{
  height:64px; width:auto; max-width:none;
  transition:filter .4s var(--ease), height .4s var(--ease);
}
/* Con la foto nell'hero l'header parte in bianco; senza foto resta scuro. */
.hero-scuro .brand img{ filter:invert(1) brightness(2); }
.hero-scuro .site-header.scrolled .brand img{ filter:none; }

/* usata solo per misurare il punto d'arrivo del logo, senza animazioni di mezzo */
.site-header.senza-transizione, .site-header.senza-transizione *{ transition:none !important; }

.site-header.scrolled{
  background:rgba(251,250,248,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.site-header.scrolled .header-inner{ height:74px; }
.site-header.scrolled .brand img{ height:44px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,28px); }
.nav > a{
  font-family:var(--ff-display);
  font-size:14px; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
  position:relative; padding:6px 0;
  transition:color .35s var(--ease), opacity .35s var(--ease);
}
.hero-scuro .nav > a{ color:#fff; }
.nav > a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor;
  transition:width .35s var(--ease);
}
.nav > a:hover::after, .nav > a.active::after{ width:100%; }
.nav > a:hover{ color:var(--ink); }
.hero-scuro .site-header.scrolled .nav > a{ color:var(--ink-2); }
.hero-scuro .site-header.scrolled .nav > a:hover{ color:var(--ink); }


/* Burger */
.burger{
  display:none; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:0;
  position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:2;
}
.burger span{
  display:block; height:1px; width:24px; margin:6px auto; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease), background .35s var(--ease);
}
.hero-scuro .burger span{ background:#fff; }
.hero-scuro .site-header.scrolled .burger span,
.nav-open .burger span{ background:var(--ink); }
.nav-open .burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-open .burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  color:var(--ink);
  background:
    radial-gradient(110% 80% at 50% 28%, #ffffff 0%, var(--bg) 46%, var(--bg-alt) 100%);
}
.hero-scuro .hero{ color:#fff; background:var(--ink); }
/* Fondo materico: la pietra c'è davvero, ma sotto un velo di luce
   che tiene leggibile il logo nero al centro. */
.hero-texture{ position:absolute; inset:0; overflow:hidden; }
.hero-texture img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.06);            /* margine per il parallasse: niente bordi scoperti */
  will-change:transform;
}
/* Niente velo in sfumatura sopra la foto: la foto arriva già scurita
   dal file, così si vede la pietra senza ombreggiature sopra. */
.hero-scuro.ha-foto .hero-texture{ display:none; }

.hero-media{ position:absolute; inset:0; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,9,7,.58) 0%, rgba(10,9,7,.14) 40%, rgba(10,9,7,.74) 100%),
    linear-gradient(90deg, rgba(10,9,7,.62) 0%, rgba(10,9,7,.28) 42%, rgba(10,9,7,0) 78%);
}
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation:kenburns 26s ease-out both;
}
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

.hero-inner{
  position:relative; z-index:1; text-align:center;
  padding-block:calc(var(--header-h) + 40px) 120px;
  perspective:1200px;              /* la scena 3d vive qui dentro */
}

/* Il palco porta l'inclinazione (perno al centro),
   il logo porta il volo verso l'header (perno in alto a sinistra):
   due trasformazioni separate che non si pestano i piedi. */
.hero-stage{
  transform-style:preserve-3d;
  animation:heroEntra 1.5s var(--ease) both;
  will-change:transform;
}
@keyframes heroEntra{
  from{ opacity:0; transform:rotateX(24deg) translateY(30px) scale(.93); }
  to  { opacity:1; transform:none; }
}

.hero-logo{
  width:min(430px, 62vw); height:auto;
  margin:0 auto clamp(24px,3vw,40px);
  transform-origin:top left;       /* il volo verso l'header parte da qui */
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.hero-scuro .hero-logo{ filter:invert(1) brightness(2); }

.hero-sub{
  /* è l'h1 della pagina, ma deve restare un sottotitolo:
     riporto carattere e interlinea a quelli del testo normale */
  font-family:var(--ff-body); line-height:1.6; letter-spacing:normal;
  max-width:46ch; font-size:clamp(16px,1.1vw + 13px,20px); font-weight:300;
  color:var(--ink-soft); margin:0 auto clamp(28px,3vw,40px);
  animation:heroSale 1.2s .25s var(--ease) both;
  will-change:transform;
}
.hero-scuro .hero-sub{ color:rgba(255,255,255,.82); }
.hero-cta{ animation:heroSale 1.2s .4s var(--ease) both; will-change:transform; }
@keyframes heroSale{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.hero-scroll{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:1; text-decoration:none; color:var(--ink-2);
  font-family:var(--ff-display); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  transition:color .3s var(--ease);
}
.hero-scroll:hover{ color:var(--ink); }
.hero-scuro .hero-scroll{ color:rgba(255,255,255,.75); }
.hero-scuro .hero-scroll:hover{ color:#fff; }
.hero-scroll-line{ width:1px; height:46px; background:rgba(20,19,15,.28); position:relative; overflow:hidden; }
.hero-scuro .hero-scroll-line{ background:rgba(255,255,255,.45); }
.hero-scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--ink);
  animation:scrollcue 2.2s var(--ease) infinite;
}
.hero-scuro .hero-scroll-line::after{ background:#fff; }
@keyframes scrollcue{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); } }

/* ==========================================================================
   Bottoni
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--ff-display); font-size:14px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  padding:16px 32px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-solid:hover{ background:var(--accent); }
.btn-outline{ border-color:rgba(20,19,15,.30); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

.hero-scuro .btn-solid{ background:#fff; color:var(--ink); }
.hero-scuro .btn-solid:hover{ background:#e8dcc4; }
.hero-scuro .btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; }
.hero-scuro .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn-dark{ background:var(--ink); color:var(--bg); border:0; }
.btn-dark:hover{ background:var(--accent); }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-dark); }
.btn-wa svg{ width:19px; height:19px; fill:currentColor; }

/* ==========================================================================
   Sezioni
   ========================================================================== */
.section{ padding-block:clamp(72px,10vw,140px); }
.section-alt{ background:var(--bg-alt); }

.label{
  display:flex; align-items:center; gap:14px;
  font-family:var(--ff-display); font-size:12px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 22px;
}
.label-num{ color:var(--accent); }
.label::after{ content:''; height:1px; flex:0 0 56px; background:var(--line-2); }

.section-head{ max-width:760px; margin-bottom:clamp(44px,6vw,80px); }
.section-head h2{ font-size:clamp(30px,4vw,54px); margin-bottom:24px; }
.section-intro{ color:var(--ink-soft); max-width:56ch; margin:0; }

/* ---------- Chi siamo ---------- */
.about{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(36px,6vw,88px); align-items:start;
}
.about-media{
  position:sticky; top:calc(var(--header-h) + 28px);
  padding:14px 0 0 14px;
}
.about-media img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.about-media::before{
  content:''; position:absolute; inset:0 28px 28px 0;
  border:1px solid var(--line-2); pointer-events:none;
}
.about-text h2{ font-size:clamp(26px,3.3vw,44px); margin-bottom:30px; }
.about-text .lead{
  font-size:clamp(17px,.9vw + 14px,20px); color:var(--ink-2); font-weight:300; line-height:1.7;
}
.about-text p{ color:var(--ink-soft); }
.about-text .lead{ color:var(--ink-2); }

.values{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.values li{ background:var(--bg); padding:22px 24px; }
.values strong{
  display:block; font-family:var(--ff-display); font-weight:400; font-size:15px;
  letter-spacing:.04em; margin-bottom:6px;
}
.values span{ font-size:14px; color:var(--ink-soft); line-height:1.5; }

/* ---------- Servizi ---------- */
.services{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:1px; background:var(--line-2); border:1px solid var(--line-2);
}
.service{
  background:var(--bg-alt); padding:clamp(28px,3vw,44px);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.service:hover{ background:var(--bg); }
.service-num{
  display:block; font-family:var(--ff-display); font-size:13px;
  letter-spacing:.2em; color:var(--accent); margin-bottom:22px;
}
.service h3{ font-size:22px; font-weight:300; margin-bottom:14px; }
.service p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.65; }

/* ---------- Prodotti ---------- */
.products{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:clamp(18px,2.2vw,32px);
}
.product{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--bg); border:1px solid var(--line);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product:hover{
  border-color:var(--line-2); transform:translateY(-4px);
  box-shadow:0 18px 44px -28px rgba(20,19,15,.42);
}
.product-img{ display:block; overflow:hidden; aspect-ratio:4/3; }
.product-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.product:hover .product-img img{ transform:scale(1.06); }
.product-body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.product-name{
  font-family:var(--ff-display); font-size:20px; font-weight:400; letter-spacing:.01em;
  margin-bottom:8px;
}
.product-desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; flex:1; }
.product-cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.product-cta svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.2;
  transition:transform .4s var(--ease);
}
.cta-short{ display:none; }   /* etichetta corta usata solo su mobile */
.product:hover .product-cta svg{ transform:translateX(5px); }

.products-note{
  margin:clamp(32px,4vw,52px) 0 0; text-align:center; color:var(--ink-soft); font-size:15px;
}
.products-note a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.products-note a:hover{ border-color:var(--ink); }

/* ---------- Marchi trattati (dentro Materiali) ---------- */
.partners{
  margin-top:clamp(36px,4.5vw,60px);
  padding-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.4vw,30px);
}
.partners-label{
  font-family:var(--ff-display); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); margin:0;
}
.partners-logos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,72px);
}
.partners-logos img{
  height:46px; width:auto; display:block;
  opacity:.78; filter:grayscale(1);
  transition:opacity .35s var(--ease), filter .35s var(--ease);
}
.partners-logos a{ display:block; }
.partners-logos a:hover img,
.partners-logos a:focus-visible img{ opacity:1; filter:none; }
/* Cosentino è il solo marchio senza la riga "by Cosentino" sotto:
   a parità di altezza risulterebbe sproporzionato rispetto agli altri. */
/* Cosentino è solo il nome, senza la riga "by Cosentino" sotto: a parità di
   altezza le sue lettere risulterebbero il doppio delle altre. */
.partners-logos img.p-cosentino{ height:26px; }

/* ---------- Galleria ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,40px);
}
.filter{
  background:none; border:1px solid var(--line-2); border-radius:999px;
  padding:9px 20px; cursor:pointer;
  font-family:var(--ff-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter:hover{ border-color:var(--ink); color:var(--ink); }
.filter.is-active{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

.gallery{ columns:3; column-gap:14px; }
.g-item[hidden]{ display:none; }   /* batte il display:block qui sotto: senza, i filtri non nascondono nulla */
.g-item{
  display:block; width:100%; margin:0 0 14px; padding:0;
  border:0; background:none; cursor:zoom-in; position:relative; overflow:hidden;
  break-inside:avoid;
  animation:fadeIn .5s var(--ease) both;
}
@keyframes fadeIn{ from{ opacity:0; transform:scale(.98); } to{ opacity:1; transform:none; } }
.g-item img{ width:100%; transition:transform 1.1s var(--ease), filter .5s var(--ease); }
.g-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,9,7,.68));
  opacity:0; transition:opacity .45s var(--ease);
}
.g-cap{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:1;
  color:#fff; text-align:left;
  font-family:var(--ff-display); font-size:13px; letter-spacing:.08em;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.g-item:hover img, .g-item:focus-visible img{ transform:scale(1.05); }
.g-item:hover::after, .g-item:focus-visible::after{ opacity:1; }
.g-item:hover .g-cap, .g-item:focus-visible .g-cap{ opacity:1; transform:none; }

/* ---------- Varianti di intestazione sezione ---------- */
.section-head--row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px 48px; max-width:none; flex-wrap:wrap;
}
.section-head--row > div{ max-width:620px; }
.section-head--row .section-intro{ margin-bottom:0; }
.section-head--center{ max-width:640px; margin-inline:auto; text-align:center; }
.section-head--center .label{ justify-content:center; }
.section-head--center .label::before{
  content:''; height:1px; flex:0 0 56px; background:var(--line-2);
}
.section-head--center .section-intro{ margin-inline:auto; }

/* ==========================================================================
   Promozioni
   ========================================================================== */
.promos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(18px,2.2vw,30px);
}
.promo{
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.promo:hover{
  border-color:var(--line-2); transform:translateY(-4px);
  box-shadow:0 18px 44px -28px rgba(20,19,15,.42);
}
.promo-img{ overflow:hidden; aspect-ratio:4/3; }
.promo-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.promo:hover .promo-img img{ transform:scale(1.05); }

.promo-body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 26px; }
.promo-nota{
  align-self:flex-start;
  font-family:var(--ff-display); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line-2); border-radius:999px;
  padding:5px 12px; margin-bottom:14px;
}
.promo-titolo{ font-size:20px; font-weight:300; line-height:1.25; margin:0 0 10px; }
.promo-desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 18px; flex:1; }
.promo-prezzo{
  font-family:var(--ff-display); font-size:clamp(22px,2vw,28px); font-weight:300;
  color:var(--ink); margin:0 0 18px; letter-spacing:-.01em;
}
.promo-btn{ align-self:stretch; padding:13px 20px; font-size:12.5px; }
.promo-btn .corto{ display:none; }

.promos--page{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }

.promos-vuote{
  margin:0; padding:clamp(28px,4vw,48px) 0; text-align:center;
  color:var(--ink-soft); font-size:15px;
}
.promos-vuote a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.promos-vuote a:hover{ border-color:var(--ink); }

/* ---------- Pagina interna (promozioni.html) ---------- */
.page-interna{ padding-top:var(--header-h); }
.page-head{ padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px); }
.page-head h1{
  font-size:clamp(34px,5vw,64px); font-weight:200; letter-spacing:-.02em;
  margin:0 0 20px;
}
.breadcrumb{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:22px;
}
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ color:var(--ink); border-bottom:1px solid var(--line-2); }

/* ---------- Contatti: info + mappa ---------- */
.contact{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px); align-items:stretch;
}
/* mappa disattivata da CONFIG: i recapiti restano da soli, centrati */
.contact--senza-mappa{ grid-template-columns:minmax(0,760px); justify-content:center; }
.contact--senza-mappa .contact-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
/* con un numero dispari di voci l'ultima occupa tutta la riga,
   altrimenti resta una cella vuota colorata */
.contact--senza-mappa .contact-list > div:last-child:nth-child(odd){ grid-column:1 / -1; }
.contact--senza-mappa .contact-info{ align-items:center; }
.contact--senza-mappa .socials{ justify-content:center; }
.contact-info{ display:flex; flex-direction:column; }
.contact-list{ margin:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); width:100%; }
.contact-list > div{ background:var(--bg); padding:20px 24px; }
.contact-list dt{
  font-family:var(--ff-display); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.contact-list dd{ margin:0; font-size:16px; }
.contact-list a{ text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:1px; }
.contact-list a:hover{ border-color:var(--ink); }

.socials{ display:flex; gap:12px; margin-top:26px; }
.socials:empty{ display:none; }
.socials a{
  width:44px; height:44px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.socials svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.3; }

/* Mappa */
.contact-map{
  margin:0; display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--bg-alt);
}
.contact-map iframe{
  display:block; width:100%; flex:1; min-height:400px; border:0;
  filter:grayscale(1) contrast(1.04);
  transition:filter .5s var(--ease);
}
.contact-map:hover iframe, .contact-map:focus-within iframe{ filter:none; }
.contact-map figcaption{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px;
  padding:16px 20px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--ink-soft);
}
.contact-map figcaption a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.contact-map figcaption a svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3;
  transition:transform .35s var(--ease);
}
.contact-map figcaption a:hover svg{ transform:translate(2px,-2px); }

/* ---------- Contatti: form ---------- */
.form-wrap{ margin-top:clamp(36px,5vw,68px); }

.contact-form{
  max-width:780px; margin-inline:auto;
  background:var(--bg-alt); border:1px solid var(--line);
  padding:clamp(26px,4vw,52px);
  display:grid; gap:20px;
}
.form-head{ text-align:center; margin-bottom:6px; }
.form-head h3{ font-size:clamp(23px,2.6vw,32px); font-weight:200; margin-bottom:10px; }
.form-head p{ margin:0; color:var(--ink-soft); font-size:15px; }

.field{ display:grid; gap:9px; }
.field-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.field label{
  font-family:var(--ff-display); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.req{ color:var(--accent); }

.field input, .field select, .field textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:0;
  padding:13px 15px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--line-2); }
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(141,124,94,.14);
}

/* Select con freccia disegnata a mano (appearance:none toglie quella di sistema) */
.select-wrap{ position:relative; }
.select-wrap::after{
  content:''; position:absolute; right:18px; top:50%; width:8px; height:8px;
  border-right:1px solid var(--ink-soft); border-bottom:1px solid var(--ink-soft);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px; }

.form-submit{ justify-self:center; min-width:min(300px,100%); margin-top:4px; }
.form-alt{ margin:0; text-align:center; font-size:14px; color:var(--ink-soft); }
.form-alt a{ color:var(--ink); }
.form-error{
  margin:0; text-align:center; font-size:14px; color:#b3352c;
  background:rgba(179,53,44,.07); border:1px solid rgba(179,53,44,.2); padding:10px 14px;
}

/* ==========================================================================
   Banda social (fra Servizi e Prodotti) — striscia chiara, non un blocco pieno
   ========================================================================== */
.social-band{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.social-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:clamp(24px,3vw,38px);
}
.social-brand img{ height:34px; width:auto; }

.social-right{ display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); }
.social-label{
  font-family:var(--ff-display); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap;
}
.social-icons{ display:flex; gap:10px; }
.social-icons a{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease);
}
.social-icons a:hover{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
  transform:translateY(-2px);
}
.social-icons svg{ width:19px; height:19px; fill:currentColor; }
.social-icons svg.ico-outline{ fill:none; stroke:currentColor; stroke-width:1.4; }

/* La copia sotto "Chi siamo": sotto parte una sezione con il suo fondo,
   la riga inferiore non serve. */
.social-band--sotto-chi-siamo{ border-bottom:0; }

/* ---------- Domande frequenti ----------
   Costruite con <details>/<summary>: si aprono senza JavaScript, sono
   accessibili da tastiera e il testo resta sempre nel codice, quindi
   leggibile dai motori di ricerca anche a risposta chiusa. */
.faq{ max-width:780px; margin:clamp(44px,6vw,80px) auto 0; }
.faq-titolo{
  font-size:clamp(21px,2vw,28px); font-weight:300; text-align:center;
  margin:0 0 clamp(22px,3vw,34px);
}
.faq-elenco{ border-top:1px solid var(--line); }

.faq-voce{ border-bottom:1px solid var(--line); }
.faq-voce summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 44px 18px 0;
  font-family:var(--ff-display); font-size:clamp(15px,1vw + 12px,18px); font-weight:400;
  color:var(--ink); line-height:1.4;
  transition:color .3s var(--ease);
}
.faq-voce summary::-webkit-details-marker{ display:none; }
.faq-voce summary:hover{ color:var(--accent); }
.faq-voce summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* il più che diventa meno */
.faq-voce summary::before,
.faq-voce summary::after{
  content:''; position:absolute; right:6px; top:50%;
  width:15px; height:1px; background:var(--ink-soft);
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.faq-voce summary::after{ transform:rotate(90deg); }
.faq-voce[open] summary::after{ transform:rotate(0deg); }
.faq-voce[open] summary{ color:var(--ink); }

.faq-risposta{ padding:0 44px 20px 0; }
.faq-risposta p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.7; }
.faq-risposta strong{ color:var(--ink-2); font-weight:500; }

@media (prefers-reduced-motion:no-preference){
  .faq-voce[open] .faq-risposta{ animation:faqApre .35s var(--ease); }
  @keyframes faqApre{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}

/* ==========================================================================
   Footer — essenziale: recapiti, mappa e social stanno già poco sopra,
   qui bastano il marchio, i link e la riga legale.
   ========================================================================== */
.site-footer{ background:var(--bg-alt); color:var(--ink-soft); }

.footer-top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px 40px;
  padding-block:clamp(36px,4vw,56px);
}
.footer-logo img{ height:30px; width:auto; }

.footer-nav{ display:flex; flex-wrap:wrap; gap:8px clamp(20px,2.4vw,34px); }
.footer-nav a{
  position:relative; text-decoration:none; font-size:14.5px; color:var(--ink-soft);
  padding-bottom:3px; transition:color .3s var(--ease);
}
.footer-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ink); transition:width .3s var(--ease);
}
.footer-nav a:hover{ color:var(--ink); }
.footer-nav a:hover::after{ width:100%; }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line);
  padding-block:18px 22px;
  /* spazio per i due pulsanti flottanti (telefono a sinistra, WhatsApp a destra) */
  padding-inline:calc(var(--gut) + 74px);
}
.footer-bottom p{ margin:0; font-size:12.5px; color:var(--ink-soft); }
.credit a{
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:border-color .3s var(--ease);
}
.credit a:hover{ border-color:var(--ink); }

/* ---------- Riga legale nel footer ---------- */
.footer-legale{
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center;
  border-top:1px solid var(--line);
  padding-block:14px 18px;
}
.footer-legale a{
  font-size:12.5px; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.footer-legale a:hover{ color:var(--ink); border-bottom-color:var(--line-2); }

/* ---------- Testo delle pagine legali ---------- */
.testo-legale{ max-width:74ch; }
.testo-legale h2{
  font-size:clamp(19px,1.6vw + 14px,26px); font-weight:300;
  margin:clamp(28px,3vw,42px) 0 12px;
}
.testo-legale h2:first-of-type{ margin-top:0; }
.testo-legale p, .testo-legale li{ color:var(--ink-soft); }
.testo-legale ul{ margin:0 0 1.1em; padding-left:1.2em; }
.testo-legale li{ margin-bottom:.5em; }
.testo-legale strong{ color:var(--ink); font-weight:500; }
.testo-legale a{ color:var(--ink); }
.legale-data{
  font-family:var(--ff-display); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:clamp(24px,3vw,36px);
}

/* ==========================================================================
   WhatsApp flottante
   ========================================================================== */
.wa-float, .tel-float{
  position:fixed; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  color:#fff;
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.9);
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             visibility .4s var(--ease), background .3s var(--ease);
}
.wa-float.show, .tel-float.show{ opacity:1; visibility:visible; transform:none; }
.wa-float svg, .tel-float svg{ width:30px; height:30px; fill:currentColor; }

/* WhatsApp: in basso a destra */
.wa-float{
  right:20px;
  background:var(--wa);
  box-shadow:0 12px 30px -10px rgba(37,211,102,.75);
}
.wa-float:hover{ background:var(--wa-dark); }

/* Telefono: in basso a sinistra */
.tel-float{
  left:20px;
  background:var(--ink);
  box-shadow:0 12px 30px -10px rgba(20,19,15,.65);
}
.tel-float:hover{ background:var(--accent); }
.tel-float svg{ width:26px; height:26px; }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:150;
  background:rgba(12,11,9,.96);
  display:grid; place-items:center; padding:clamp(16px,5vw,64px);
  animation:lbIn .3s var(--ease);
}
.lightbox[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lb-figure{ margin:0; max-width:100%; max-height:100%; display:grid; gap:16px; justify-items:center; }
.lb-figure img{
  max-width:100%; max-height:78svh; object-fit:contain;
  animation:lbImg .4s var(--ease);
}
@keyframes lbImg{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.lb-figure figcaption{
  color:rgba(255,255,255,.7); font-family:var(--ff-display);
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-align:center;
}
.lb-close, .lb-nav{
  position:absolute; background:none; border:0; color:rgba(255,255,255,.7);
  cursor:pointer; line-height:1; transition:color .25s var(--ease), transform .25s var(--ease);
}
.lb-close:hover, .lb-nav:hover{ color:#fff; }
.lb-close{ top:18px; right:22px; font-size:38px; width:48px; height:48px; }
.lb-nav{ top:50%; transform:translateY(-50%); font-size:52px; width:56px; height:72px; }
.lb-prev{ left:10px; }
.lb-next{ right:10px; }
.lb-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.lb-next:hover{ transform:translateY(-50%) translateX(3px); }

body.no-scroll{ overflow:hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ---------- Fascia stretta: stringo solo le voci, il menu ha una riga tutta sua ---------- */
@media (min-width:821px) and (max-width:1120px){
  .nav{ gap:13px; }
  .nav > a{ font-size:12px; letter-spacing:.05em; }
  /* su una riga sola un logo da 64px non lascerebbe spazio alle sette voci */
  .brand img{ height:46px; }
  .site-header.scrolled .brand img{ height:40px; }
  :root{ --header-h:78px; }
  .site-header.scrolled .header-inner{ height:66px; }
}

/* ---------- Tablet largo ---------- */
@media (max-width:1100px){
  .gallery{ columns:2; }
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .about{ grid-template-columns:1fr; }
  /* NON static, altrimenti la cornice ::before si stacca dalla foto;
     ma serve azzerare il "top" dello sticky desktop, se no scende sul testo. */
  .about-media{ position:relative; top:auto; max-width:460px; }
  .about-media img{ aspect-ratio:4/3; }
  .contact{ grid-template-columns:1fr; }
}

/* ---------- Menu mobile ---------- */
@media (max-width:820px){
  :root{ --header-h:62px; }

  /* Niente backdrop-filter su mobile: renderebbe l'header il contenitore
     del menu fixed, schiacciandolo nell'altezza della barra. */
  .site-header.scrolled{
    background:var(--bg);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }

  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:1;
    background:var(--bg);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:2px; padding:0 var(--gut);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
  }
  .nav-open .nav{ opacity:1; visibility:visible; transform:none; }
  /* Solo su telefono il marchio va al centro, con l'hamburger sovrapposto a sinistra */
  .header-inner{ justify-content:center; gap:0; }
  .header-top{ position:relative; width:100%; justify-content:center; }
  .brand{ position:relative; z-index:2; }
  .nav-open .brand img{ filter:none; }
  .nav > a{ color:var(--ink) !important; font-size:clamp(18px,5.2vw,24px); letter-spacing:.02em; padding:9px 0; }
  .nav > a::after{ display:none; }
  .site-header.scrolled .nav > a{ color:var(--ink); }
  body.nav-open{ overflow:hidden; }

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

/* ==========================================================================
   MOBILE — tutta l'interfaccia riscalata per lo schermo del telefono
   ========================================================================== */
@media (max-width:760px){
  :root{
    --gut:16px;
    --header-h:66px;          /* una riga sola: marchio al centro, menu nel pannello */
  }

  body{ font-size:13.5px; line-height:1.62; }

  /* --- Header --- */
  .brand img{ height:42px; }
  .site-header.scrolled .brand img{ height:36px; }
  .site-header.scrolled .header-inner{ height:58px; gap:0; }
  .burger{ width:38px; height:38px; }
  .burger span{ width:19px; margin:4.5px auto; }

  /* --- Hero: resta a tutto schermo anche su mobile --- */
  .hero-inner{ padding-block:calc(var(--header-h) + 28px) 84px; }
  .hero-logo{ width:min(290px, 66vw); margin-bottom:20px; }
  .hero-sub{ font-size:13.5px; margin-bottom:22px; max-width:36ch; }
  .hero-cta{ gap:8px; }
  .hero-cta .btn{ flex:1 1 100%; }
  .hero-scroll{ bottom:18px; font-size:8.5px; letter-spacing:.2em; gap:7px; }
  .hero-scroll-line{ height:26px; }

  /* --- Bottoni --- */
  .btn{ font-size:11.5px; letter-spacing:.09em; padding:12px 20px; gap:8px; }
  .btn-wa svg{ width:15px; height:15px; }

  /* --- Sezioni --- */
  .section{ padding-block:44px; }
  .section-head{ margin-bottom:26px; }
  .section-head h2{ font-size:22px; margin-bottom:12px; }
  .section-intro{ font-size:13.5px; max-width:42ch; }
  .label{ font-size:9.5px; letter-spacing:.2em; margin-bottom:12px; gap:8px; }
  .label::after{ flex-basis:28px; }

  /* --- Chi siamo --- */
  .about{ gap:26px; }
  .about-media{ max-width:none; padding:8px 0 0 8px; }
  .about-media::before{ inset:0 16px 16px 0; }
  .about-media img{ aspect-ratio:16/10; }
  .about-text h2{ font-size:21px; margin-bottom:16px; }
  .about-text h2 br{ display:none; }   /* titolo lungo: meglio che vada a capo da solo */
  .about-text .lead{ font-size:14px; line-height:1.62; }
  .values{ margin-top:22px; }
  .values li{ padding:13px 15px; }
  .values strong{ font-size:13px; margin-bottom:4px; }
  .values span{ font-size:12px; line-height:1.45; }

  /* --- Servizi --- */
  .services{ grid-template-columns:1fr; }
  .service{ padding:18px 16px; }
  .service-num{ font-size:10.5px; letter-spacing:.16em; margin-bottom:10px; }
  .service h3{ font-size:16px; margin-bottom:8px; }
  .service p{ font-size:12.5px; line-height:1.55; }

  /* --- Materiali, Prodotti, Complementi ---
     Schede compatte: foto, nome e freccia su una riga sola. Tolgo la
     descrizione invece di rimpicciolirla: a 11px non si leggeva comunque,
     e senza entrano il doppio delle schede nella schermata. */
  .products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .product-img{ aspect-ratio:4/3; }
  .product-body{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:8px; padding:11px 12px 12px;
  }
  .product-name{ font-size:14.5px; margin:0; }
  .product-desc{ display:none; }
  .product-cta{ font-size:0; gap:0; flex:0 0 auto; }   /* resta solo la freccia */
  .product-cta svg{ width:16px; height:16px; }
  .products-note{ font-size:12.5px; margin-top:22px; }

  /* --- Marchi trattati --- */
  .partners{ margin-top:28px; padding-top:22px; gap:16px; }
  .partners-label{ font-size:9.5px; letter-spacing:.2em; }
  .partners-logos{ gap:22px 26px; }
  .partners-logos img{ height:30px; }
  .partners-logos img.p-cosentino{ height:17px; }

  /* --- Galleria --- */
  .filters{ gap:6px; margin-bottom:16px; }
  .filter{ font-size:9.5px; letter-spacing:.09em; padding:6px 12px; }
  .gallery{ columns:2; column-gap:8px; }
  .g-item{ margin-bottom:8px; }
  .g-cap{ left:8px; right:8px; bottom:7px; font-size:9.5px; letter-spacing:.03em; }

  /* --- Contatti: info + mappa --- */
  .contact{ gap:24px; }
  .contact-list{ margin-top:20px; }
  .contact-list > div{ padding:12px 15px; }
  .contact-list dt{ font-size:9px; letter-spacing:.18em; margin-bottom:3px; }
  .contact-list dd{ font-size:13.5px; }
  .socials{ margin-top:16px; gap:8px; }
  .socials a{ width:36px; height:36px; }
  .socials svg{ width:15px; height:15px; }

  .contact-map iframe{ min-height:260px; filter:none; }   /* su touch non c'è hover: mappa subito a colori */
  .contact-map figcaption{ padding:12px 14px; font-size:12.5px; gap:8px 14px; }
  .contact-map figcaption a{ font-size:10px; letter-spacing:.11em; }
  .contact-map figcaption a svg{ width:13px; height:13px; }

  /* --- Contatti: form --- */
  .form-wrap{ margin-top:28px; }
  .contact-form{ padding:22px 18px 26px; gap:16px; }
  .form-head{ margin-bottom:2px; }
  .form-head h3{ font-size:20px; margin-bottom:6px; }
  .form-head p{ font-size:13px; }
  .field{ gap:7px; }
  .field-row{ grid-template-columns:1fr; gap:16px; }
  .field label{ font-size:9.5px; letter-spacing:.16em; }
  .field input, .field select, .field textarea{ font-size:16px; padding:11px 13px; } /* 16px evita lo zoom su iOS */
  .field textarea{ min-height:110px; }
  .select-wrap::after{ right:15px; width:7px; height:7px; }
  .form-submit{ width:100%; min-width:0; }
  .form-alt{ font-size:12.5px; }
  .form-error{ font-size:12.5px; padding:9px 12px; }

  /* --- Domande frequenti --- */
  .faq{ margin-top:34px; }
  .faq-titolo{ font-size:19px; margin-bottom:18px; }
  .faq-voce summary{ padding:14px 34px 14px 0; font-size:14px; }
  .faq-voce summary::before, .faq-voce summary::after{ width:12px; right:4px; }
  .faq-risposta{ padding:0 34px 16px 0; }
  .faq-risposta p{ font-size:13px; line-height:1.65; }

  /* --- Footer --- */
  .footer-top{
    flex-direction:column; align-items:center; text-align:center;
    gap:18px; padding-block:30px;
  }
  .footer-logo img{ height:24px; }
  .footer-nav{ justify-content:center; gap:6px 18px; }
  .footer-nav a{ font-size:12.5px; }
  /* Su telefono la barra è troppo stretta per stare fra i due pulsanti:
     invece di comprimerla, la stacco in verticale. */
  .footer-bottom{ padding:14px var(--gut) 76px; text-align:center; justify-content:center; }
  .footer-bottom p{ font-size:11px; }
  .footer-legale{ padding-block:12px 16px; gap:6px 18px; }
  .footer-legale a{ font-size:11.5px; }
  .testo-legale h2{ font-size:18px; margin-top:26px; }
  .legale-data{ font-size:10px; margin-bottom:22px; }

  /* --- Promozioni ---
     Stessa misura delle schede di Materiali e Prodotti: due colonne compatte.
     Resta quello che conta in un'offerta (foto, titolo, prezzo, pulsante),
     via la descrizione lunga come nelle altre schede. */
  .section-head--row{ flex-direction:column; align-items:stretch; gap:16px; }
  .promo-all{ align-self:flex-start; padding:12px 20px; font-size:11px; }
  .promos, .promos--page{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .promo-img{ aspect-ratio:4/3; }
  .promo-body{ padding:11px 12px 13px; }
  .promo-nota{ display:none; }     /* andava a capo e raddoppiava l'altezza della scheda */
  .promo-titolo{
    font-size:13px; line-height:1.3; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;                /* i titoli lunghi non sfondano la scheda */
  }
  .promo-desc{ display:none; }
  .promo-prezzo{ font-size:16px; margin:0 0 10px; }
  .promo-btn{ padding:11px 10px; font-size:10px; letter-spacing:.1em; }
  .promo-btn .lungo{ display:none; }    /* su due righe gonfiava la scheda */
  .promo-btn .corto{ display:inline; }

  .promos-vuote{ font-size:13px; padding:22px 0; }

  /* --- Pagina interna --- */
  .page-head{ padding-block:28px 20px; }
  .page-head h1{ font-size:30px; margin-bottom:14px; }
  .breadcrumb{ font-size:10px; letter-spacing:.16em; margin-bottom:16px; }

  /* --- Contatti senza mappa --- */
  .contact--senza-mappa .contact-list{ grid-template-columns:1fr; }

  /* --- Banda social --- */
  .social-inner{ padding-block:22px; gap:14px; }
  .social-brand img{ height:24px; }
  .social-right{ gap:12px; }
  .social-label{ display:none; }          /* su telefono le icone parlano da sole */
  .social-icons{ gap:8px; }
  .social-icons a{ width:40px; height:40px; }
  .social-icons svg{ width:17px; height:17px; }

  /* --- Pulsanti flottanti + lightbox --- */
  .wa-float, .tel-float{ width:46px; height:46px; bottom:12px; }
  .wa-float{ right:12px; }
  .tel-float{ left:12px; }
  .wa-float svg{ width:23px; height:23px; }
  .tel-float svg{ width:21px; height:21px; }
  .lb-close{ top:8px; right:10px; font-size:28px; width:38px; height:38px; }
  .lb-nav{ font-size:30px; width:36px; height:52px; }
  .lb-figure{ gap:12px; }
  .lb-figure img{ max-height:68svh; }
  .lb-figure figcaption{ font-size:10px; letter-spacing:.08em; }
}

/* ---------- Telefoni piccoli ---------- */
@media (max-width:400px){
  :root{ --gut:14px; }

  body{ font-size:13px; }
  .hero-logo{ width:min(225px, 64vw); }
  .hero-sub{ font-size:12.5px; }
  .btn{ font-size:11px; padding:11px 18px; }
  .section{ padding-block:38px; }
  .section-head h2, .about-text h2{ font-size:20px; }
  .service{ padding:16px 14px; }
  .service h3{ font-size:15px; }
  .products, .promos, .promos--page{ gap:8px; }
  .product-body{ padding:10px 10px 11px; }
  .product-name{ font-size:13.5px; }
  /* sotto i 400px la freccia ruba lo spazio ai nomi lunghi, che andrebbero
     a capo: la tolgo, tanto tutta la scheda è cliccabile */
  .product-cta{ display:none; }
  .filter{ padding:5px 10px; font-size:9px; }
  .gallery{ column-gap:7px; }
  .g-item{ margin-bottom:7px; }
  .contact-list > div{ padding:11px 13px; }
  .contact-map iframe{ min-height:220px; }
  .contact-form{ padding:20px 16px 24px; }
  .footer-bottom p{ font-size:10px; }
}

/* ---------- Accessibilità ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}