:root{
  --pink:#e2086a;
  --gray-head:#000;
  --gray-body:#5a5a5a;
  --gray-section:#ebebeb;
  --black:#000;
  --footer-bg:#1a1a1a;
}

*{ box-sizing:border-box; }

body{
  font-family:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  color:var(--gray-body);
  margin:0;
}

/* ---- Container forzato a 1200px ---- */
@media (min-width:1200px){
  .container{ max-width:1200px; }
}

/* ---- Tipografia ricorrente ---- */
.eyebrow{
  color:var(--pink);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.3px;
  margin:0 0 .25rem;
}
.heading{
  color:var(--gray-head);
  font-weight:600;
  font-size:2.5rem;
  letter-spacing:.5px;
  margin:0 0 1rem;
}
.heading-light{ color:#fff; }
.subheading{
  color:var(--gray-head);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:.5px;
  margin:0 0 1rem;
}
.body-text{
  color:var(--gray-body);
  font-size:1rem;
  line-height:1.55;
  margin:0 0 1rem;
}
.text-light-2{ color:#fff; }

.section{ background:#fff; }

/* =========================================================
   NAVBAR
   ========================================================= */
.site-nav{
  background:#fff;
  padding:18px 0;
  border-bottom:1px solid #f0f0f0;
}
.logo-box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:78px;
  border:1px solid #cfcfcf;
  color:var(--gray-head);
  font-size:1.5rem;
  letter-spacing:1px;
  text-decoration:none;
}
.main-nav .nav{ gap:6px; }
.main-nav .nav-link{
  color:#6f6f6f;
  font-size:.95rem;
  letter-spacing:.4px;
  padding:.4rem .7rem;
}
.main-nav .nav-link:hover{ color:var(--pink); }

/* =========================================================
   HERO SLIDER (full width)
   ========================================================= */
.hero-slider{ width:100%; }
.hero-slider .carousel-item img{
  width:100%;
  height:800px;
  object-fit:cover;
  display:block;
}
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
  width:70px;
  opacity:1;
}
.hero-slider .arrow{
  color:var(--pink);
  font-size:4rem;
  line-height:1;
  font-weight:300;
}

/* =========================================================
   Immagine con offset rosa (rettangolo pieno in basso a destra)
   ========================================================= */
.img-offset{ position:relative; display:inline-block; line-height:0; }
.img-offset::after{
  content:"";
  position:absolute;
  z-index:0;
  top:18px; left:18px;     /* stesso ingombro dell'immagine, traslato */
  right:-10px; bottom:-10px;
  background:var(--pink);
}
.img-offset img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
}
.py-5 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}
/* =========================================================
   CHI SIAMO — card certificazione
   ========================================================= */
.cert-card{ background:transparent; }
.cert-img{ position:relative; line-height:0; }
.cert-img img{ width:100%; display:block; }
.cert-badge{
  position:absolute;
  left:0; bottom:0;
  width:86px; height:86px;
  background:var(--pink);
  display:flex; align-items:center; justify-content:center;
}
.cert-badge img{ width:48px; height:48px; }
.cert-bar{ height:8px; background:var(--pink); }
.cert-body{ background:var(--gray-section); padding:26px 24px; }
.cert-title{ color:#222; font-weight:600; font-size:1.6rem; margin:0; }
.cert-code{ color:var(--pink); font-weight:600; font-size:1.6rem; margin:0 0 1rem; }

/* =========================================================
   FONDERIA
   ========================================================= */
.section-gray{ background:var(--gray-section); }
.fonderia-left{ padding:48px 40px 48px 0; }
.fonderia-right{ background:#fff; }
.fonderia-block + .fonderia-block{ border-top:1px solid #e6e6e6; }
.fonderia-block-text{ padding:34px 30px; }
.fonderia-block-img{ padding:0; }
.fonderia-block-img img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
@media (max-width:991.98px){
  .fonderia-left{ padding:40px 0; }
}

/* =========================================================
   BANNER NERO
   ========================================================= */
.banner-black{ background:var(--black); padding:26px 0; }
.banner-icon{ width:46px; height:46px; margin-right:18px; }
.banner-text{
  color:#fff; font-size:1.4rem; font-weight:500; letter-spacing:.5px;
}

/* =========================================================
   COMMERCIO METALLI — carosello leghe
   ========================================================= */
.alloy-carousel{ gap:10px; }
.alloy-arrow{
  background:none; border:none;
  color:#9a9a9a; font-size:2.6rem; line-height:1;
  padding:0 6px; cursor:pointer;
}
.alloy-arrow:hover{ color:var(--pink); }
.alloy-item img{ width:100%; height:150px; object-fit:cover; display:block; }
.alloy-label{
  text-align:center; color:var(--gray-head);
  font-size:14px;  margin:.6rem 0 0;
}
.logistica-inner{
  max-width:570px;
  margin-left:auto;
  padding:60px 40px 60px 0px;
  color:#fff;
}
/* =========================================================
   LOGISTICA
   ========================================================= */
.logistica{ background:var(--black); overflow:hidden; }
.logistica-left{ background:var(--black); }
/* allinea il contenuto al bordo del container 1200 */
.logistica-inner2{
  max-width:680px;
  margin-left:60px;
  padding:60px 140px 60px 15px;
}
.logistica-img{
  min-height:520px;
  background-size:cover;
  background-position:center;
}
.logi-bar{
  display:flex; align-items:center;
  background:#fff;
  margin-bottom:18px;
  max-width:430px;
}
.logi-icon{
  width:62px; height:62px;
  background:var(--pink);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 62px;
}
.logi-icon img{ width:34px; height:34px; }
.logi-text{ color:#222; font-size:1.15rem; padding:0 18px; }
@media (max-width:991.98px){
  .logistica-inner{ max-width:none; margin:0; padding:48px 24px; }
  .logistica-inner2{ max-width:none; margin:0; padding:48px 24px; }
  .logistica-img{ min-height:320px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--footer-bg); color:#e9e9e9; }
.footer-top{ padding:50px 0 40px; }
.footer-logo{
  font-family:"Pacifico", cursive;
  font-size:2.6rem;
  color:#fff;
  margin-bottom:14px;
  line-height:1;
}
.footer-addr{ font-size:.92rem; color:#cfcfcf; margin:0 0 .35rem; }
.footer-addr a{ color:#cfcfcf; text-decoration:none; }
.footer-addr a:hover{ color:var(--pink); }
.footer-col-title{
  color:#fff; font-size:1.05rem; font-weight:700;
  padding-bottom:8px; margin-bottom:12px;
  border-bottom:2px solid var(--pink);
  display:inline-block;
}
.footer-name{ color:#fff; font-weight:700; font-size:1.1rem; margin:0; }
.footer-phone{ color:#fff; font-weight:700; font-size:1.1rem; margin:0; }
.footer-bottom{
  background:var(--black);
  padding:16px 0;
  font-size:.8rem;
  color:#b9b9b9;
  letter-spacing:.3px;
}

/* =========================================================
   Responsive generale
   ========================================================= */
@media (max-width:575.98px){
  .fonderia-block-text{ padding:28px 22px; }
  .fonderia-block-img img{ min-height:220px; }
}
@media (max-width:767.98px){
  .site-nav .container{ flex-direction:column; gap:14px; }
  .main-nav .nav{ flex-wrap:wrap; justify-content:center; }
  .heading{ font-size:2rem; }
  .hero-slider .carousel-item img{ height:340px; }
  .banner-text{ font-size:1.05rem; }
}
/* Bottone hamburger */
.nav-toggle{
  display:none;                 /* nascosto su desktop */
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0; border:none; background:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:26px; height:3px;
  background:var(--gray-head);
  transition:transform .25s ease, opacity .25s ease;
}
/* diventa una "X" quando aperto */
.nav-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media (max-width:767.98px){
  .nav-toggle{ display:flex; }

  .site-nav .container{
    flex-direction:row;     /* logo e burger sulla stessa riga */
    flex-wrap:wrap;         /* il menu va a capo sotto */
    align-items:center;
  }

  .main-nav{
    order:3;                /* forza il menu sempre sotto logo+burger */
    flex-basis:100%;
    display:none;           /* chiuso di default */
  }
  .main-nav.open{ display:block; }

  .main-nav .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding-top:10px;
  }
  .main-nav .nav-link{ width:100%; padding:.6rem .2rem; }

  /* queste le avevi già */
  .heading{ font-size:2rem; }
  .hero-slider .carousel-item img{ height:340px; }
  .banner-text{ font-size:1.05rem; }
}

.alloy-track{
  display:flex;
  gap:16px;
  flex:1 1 auto;
  min-width:0;                 /* fondamentale dentro un flex, altrimenti non scrolla */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.alloy-track::-webkit-scrollbar{ display:none; }

.alloy-item{
  flex:0 0 calc((100% - 32px) / 3);   /* 3 visibili su desktop */
  scroll-snap-align:start;
}

@media (max-width:767.98px){
  .alloy-item{
    flex:0 0 calc((100% - 16px) / 2); /* 2 visibili su mobile, il resto scorre */
  }
}


.footer-phone a,

.footer-addr a {

    color: inherit;

    text-decoration: none;

}

.footer-phone a:hover,

.footer-addr a:hover {

    text-decoration: underline;

}

 :root{
    --item-w: 25vw;           /* 25vw = 4 visibili */
    --frame-ratio: 1 / 1;
    --frame-bg: #0e0f12;
  }
  @media (max-width: 768px){ :root{ --item-w: 50vw; } }
  @media (max-width: 480px){ :root{ --item-w: 80vw; } }

  body{ overflow-x:hidden; }

  .strip{ position: relative; width: 100%;  }

  .strip-track{
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    padding: 0 var(--gap);
  }
  .strip-track::-webkit-scrollbar{ display: none; }
  .strip-track.dragging{ cursor: grabbing; scroll-snap-type: none; }
  .strip-track.dragging .thumb{ pointer-events: none; }   /* niente apertura mentre trascino */

  .item{ flex: 0 0 var(--item-w); scroll-snap-align: start; }

  .thumb{
    aspect-ratio: var(--frame-ratio);
    background: var(--frame-bg);
    border-radius: var(--frame-radius);
    overflow: hidden;
    cursor: zoom-in;
  }
  .thumb img{
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    user-select: none; -webkit-user-drag: none;
    transition: transform .35s ease;
  }
  .thumb:hover img{ transform: scale(1.04); }
  .thumb:focus-visible{ outline: 3px solid #4c8bf5; outline-offset: 2px; }

  /* Freccine bianche ai lati */
  .strip-arrow{
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 6; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; font-size: 1.4rem;
    cursor: pointer; transition: background .2s ease;
  }
  .strip-arrow:hover{ background: rgba(0,0,0,.7); }
  .strip-arrow.prev{ left: 10px; }
  .strip-arrow.next{ right: 10px; }
  .strip-arrow:focus-visible{ outline: 3px solid #4c8bf5; outline-offset: 2px; }

  /* === Pop-up overlay (custom, affidabile nell'anteprima) === */
  .lb-overlay{
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(0,0,0,.85);
    display: none; align-items: center; justify-content: center;
    padding: 4vmin;
  }
  .lb-overlay.open{ display: flex; }
  .lb-img{
    max-width: 95vw; max-height: 90vh;
    object-fit: contain; display: block;
    border-radius: 8px;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform .3s ease;
    will-change: transform;
    user-select: none; -webkit-user-drag: none;
  }
  .lb-img.is-zoomed{ cursor: zoom-out; transform: scale(2.4); }
  .lb-close{
    position: fixed; top: 16px; right: 20px; z-index: 1090;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: background .2s ease;
  }
  .lb-close:hover{ background: rgba(255,255,255,.3); }

  @media (prefers-reduced-motion: reduce){
    .thumb img, .lb-img{ transition: none; }
  }

   .logistica .row{ min-height: 540px; }

  /* --- Sinistra: GALLERY --- */
  .logistica-gallery{ position: relative; padding: 0; }
  .logi-gallery{ position: relative; height: 100%; min-height: 540px; overflow: hidden; outline: none; }
  .logi-track{
    display: flex; height: 100%;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .logi-slide{ flex: 0 0 100%; height: 100%; }
  .logi-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; user-select:none; -webkit-user-drag:none; }

  .logi-arrow{
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
    transition: background .2s ease;
  }
  .logi-arrow:hover{ background: rgba(0,0,0,.7); }
  .logi-arrow.prev{ left: 16px; }
  .logi-arrow.next{ right: 16px; }
  .logi-arrow:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }

  .logi-dots{ position: absolute; bottom: 16px; left: 0; right: 0; z-index: 3;
              display: flex; gap: 8px; justify-content: center; }
  .logi-dots button{ width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
                     background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s; }
  .logi-dots button.active{ background: #fff; }

  /* --- Destra: TESTI (pannello nero) --- */
  .logistica-right{ background: var(--panel-bg); display: flex; align-items: center; }

  .eyebrow{ text-transform: uppercase; letter-spacing: .12em;
            font-weight: 700; font-size: .95rem; margin: 0 0 .6rem; }

  /* --- Responsive --- */
  @media (max-width: 991.98px){
    .logistica-inner{ padding: 44px 32px; }
    .logi-gallery{ min-height: 460px; }
  }
  @media (max-width: 575.98px){
    .logistica .row{ min-height: 0; }
    .logi-gallery{ min-height: 300px; }
    .logistica-inner{ padding: 40px 24px; max-width: none; }
  }