/* Demo Montenegro Angela — blu notte e bianco; il giallo è riservato alle azioni */
/* font in locale (licenza OFL): il sito funziona anche senza internet */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(assets/fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(assets/fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-700.woff2) format('woff2')}
:root{
  --blu:#0A2F66; --blu-chiaro:#0B4EA2; --giallo:#F5B800; --inchiostro:#1B2430;
  --carta:#F2F4F6; --linea:#D3D9DF; --grigio:#4A5563; --verde:#4C733A;
  --gutter:clamp(20px,4vw,32px);
  --titolo:'Barlow Condensed','Arial Narrow',sans-serif;
  --testo:'Barlow',system-ui,sans-serif;
  --s: 150px;
  --g:/calc(var(--s)*0.195) calc(var(--s)*0.195) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat;
  --r: .8em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding:84px 0 90px}
body{margin:0;font:400 1.125rem/1.6 var(--testo);color:var(--inchiostro);background:#fff}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.sec{padding-block:clamp(72px,9vw,120px)}
h2{font:700 clamp(2.5rem,5.6vw,4.25rem)/1.02 var(--titolo);color:var(--blu);text-wrap:nowrap}
:focus-visible{outline:3px solid var(--blu-chiaro);outline-offset:3px;border-radius:4px}
.nav :focus-visible,.hero :focus-visible,.fine :focus-visible{outline-color:#fff}
.salta{position:fixed;left:12px;top:12px;transform:translateY(-200%);z-index:30;padding:10px 16px;background:#fff;color:var(--blu);font-weight:600;border-radius:6px}
.salta:focus{transform:none}


/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6em 1.4em;border:2px solid transparent;border-radius:8px;font:700 1.375rem/1.1 var(--titolo);text-decoration:none;cursor:pointer;transition:transform .15s,background-color .15s,color .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn-sm{min-height:44px;font-size:1.2rem;padding:.3em 1.1em}
.btn-yellow{background:var(--giallo);color:var(--inchiostro)}
.btn-yellow:hover{background:#FFCB2B}
.btn-ghost{border-color:#fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--blu)}
.whatsappFloat{
  background:#facc14;
  box-shadow: 1px 1px 3px black;
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.whatsappFloat img{
  width: 60%;
  height: 60%;
  display: block;
  filter:
  drop-shadow(1px 1px 1px black);
}

.whatsappFloat:hover{
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.05);
}

.cta{display:flex;flex-wrap:wrap;gap:12px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:var(--blu);color:#fff}
.nav-bar{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 1.625rem/1 var(--titolo);text-decoration:none;padding-block:9px}
.brand img{flex:none}
.menu{display:flex;align-items:center;gap:clamp(18px,3vw,32px)}
.menu a:not(.btn){font-weight:500;text-decoration:none;padding:.45em 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .2s}
.menu a:not(.btn):hover{background-size:100% 2px}
.burger{display:none;width:48px;height:48px;margin-right:-10px;padding:12px;background:none;border:0;color:#fff;cursor:pointer}
.burger span{display:block;height:3px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.brand,.menu,.burger{position:relative;z-index:1}
.trip{position:absolute;left:0;right:0;top:100%;height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.7) 0 14px,transparent 14px 26px) 0 50%/100% 2px no-repeat var(--inchiostro);pointer-events:none}
.trip-fatta{position:absolute;inset:0;background:var(--giallo);transform:scaleX(0);transform-origin:left}
#mini{position:absolute;left:0;bottom:calc(100% - 3px);width:56px;height:auto;overflow:visible;will-change:transform}
.mw{transform-box:fill-box;transform-origin:center}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 68px);background:linear-gradient(180deg,var(--blu) 40%,#0D3A7C);color:#fff;overflow:clip}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(180px,34vh,320px);max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 30%,#000 62%)}
.hero-text{position:relative;padding-block:clamp(32px,6vh,64px) 40px}
h1{font:700 clamp(4.2rem,min(10.5vw,15vh),9.25rem)/.92 var(--titolo);letter-spacing:-.01em}
.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line>span{display:block}
.lead{margin:22px 0 26px;font-size:clamp(1.2rem,1.7vw,1.375rem);line-height:1.5;max-width:33em}
.fiducia{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:22px;font-weight:500;font-size:1.0625rem}
.fiducia li{display:flex;align-items:center;gap:8px}
.fiducia svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--giallo);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* foto del camion: col logo sull'angolo. La colonna a destra esiste solo se c'è la foto */
.cornice{display:block;width:100%;border:6px solid var(--verde);border-radius:10px;background:var(--verde)}
.con-foto .hero-text{display:grid;grid-template-columns:minmax(0,1fr) min(500px,36vw);gap:clamp(48px,6vw,88px);align-items:center}
.hero-foto{position:relative;margin:0}
/* spazio riservato: la pagina non salta mentre la foto carica */
#hero-img{aspect-ratio:1200/655;height:auto;object-fit:cover}
.hero-logo{position:absolute;left:-33px;top:-39px;width:clamp(90px,8.25vw,117px);height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.road{position:relative;height:clamp(72px,11vh,104px);background:var(--inchiostro);flex:none}
.dashes{position:absolute;left:-300px;right:0;top:62%;height:6px;background:repeating-linear-gradient(90deg,#fff 0 56px,transparent 56px 100px)}
.truck{position:absolute;right:max(5vw,calc(50vw - 640px));bottom:calc(100% - 26px);width:clamp(230px,28vw,470px);height:auto;overflow:visible}
.wheel{transform-box:fill-box;transform-origin:center}

/* animazioni */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .js .line>span{animation:sale .8s cubic-bezier(.2,.8,.2,1) both}
  .js .line:nth-child(2)>span{animation-delay:.1s}
  .js .line:nth-child(3)>span{animation-delay:.2s}
  .js .truck{animation:arriva 2s .3s cubic-bezier(.16,.75,.25,1) both}
  .js .wheel{animation:gira 2s .3s cubic-bezier(.16,.75,.25,1) both}
  .js .body{animation:assesta .55s 1.75s ease-out both}
  .js .dashes{animation:strada 2s .3s cubic-bezier(.16,.75,.25,1) both}
  /* il secondo camion resta fuori scena finché la strada finale non entra in vista */
  .js .road-fine:not(.in) .truck{animation:none;transform:translateX(-115vw)}
  .js .road-fine:not(.in) .wheel,.js .road-fine:not(.in) .body,.js .road-fine:not(.in) .dashes{animation:none}
  /* comparsa leggera allo scroll */
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
  .js .rv.in{opacity:1;transform:none}
  .js .steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s .1s ease-out}
  .js .steps.in::before{transform:none}
}
/* sugli schermi larghi camion e testo sono alla stessa altezza: il camion entra già a destra del testo, senza passarci sopra */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .js .road-fine.in .truck{animation-name:arriva-vicino}
}
@keyframes arriva-vicino{from{transform:translateX(-40px);opacity:0}}
@keyframes sale{from{transform:translateY(105%)}}
@keyframes arriva{from{transform:translateX(-115vw)}}
@keyframes gira{from{transform:rotate(-1440deg)}}
@keyframes strada{from{transform:translateX(300px)}}
@keyframes assesta{0%{transform:none}35%{transform:translateY(5px)}70%{transform:translateY(-2px)}100%{transform:none}}

/* problema e casi */
.intro{display:flex; flex-direction:column;gap:20px clamp(32px,6vw,80px);align-items:start}
.intro p{font-size:1.25rem;line-height:1.55;color:var(--grigio);max-width:34em}
.casi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px);margin-top:clamp(40px,6vw,72px)}
.casi li{border-top:3px solid var(--blu);padding-top:22px}
.casi svg{width:40px;height:40px;fill:none;stroke:var(--blu-chiaro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.casi h3{font:700 clamp(1.75rem,2.6vw,2.125rem)/1.1 var(--titolo);color:var(--blu);margin-bottom:10px}
.casi p{color:var(--grigio)}
.nota{margin-top:clamp(36px,5vw,56px);font-size:1.25rem;font-weight:500;max-width:46em}
.nota+.invito{margin-top:14px}
.invito{margin-top:clamp(36px,5vw,56px);font-size:1.25rem;font-weight:500}
.invito a{display:inline-block;padding-block:9px;color:var(--blu-chiaro);font-weight:600;text-underline-offset:4px}
.invito a:hover{color:var(--blu)}

/* perché noi */
.perche{background:var(--carta)}
.perche-testa{display:flex;justify-content:space-between;align-items:center;gap:clamp(32px,4vw,56px)}
.foto-riga{flex:0 0 52%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.foto-riga img{aspect-ratio:4/3;height:auto;object-fit:cover}
.punti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px;margin-top:clamp(56px,7vw,80px)}
/* schede a forma di cassone: corpo, bordo superiore, piedini e macerie */
.punti li{position:relative;isolation:isolate;padding:36px 28px 38px;color:#D5D9DB;background:linear-gradient(var(--inchiostro),var(--inchiostro)) 18% 100%/22% 8px no-repeat,linear-gradient(var(--inchiostro),var(--inchiostro)) 82% 100%/22% 8px no-repeat}
.punti li::before{content:"";position:absolute;z-index:-1;inset:6px 0 8px;background:linear-gradient(90deg,transparent 33%,#262626 33% 34%,transparent 34% 66%,#262626 66% 67%,transparent 67%),#2E2E2E;clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.punti li::after{content:"";position:absolute;z-index:-1;top:0;left:-5px;right:-5px;height:14px;background:#1C1C1C;border-radius:3px}
.punti svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.punti .macerie{position:absolute;z-index:-2;left:5%;top:-36px;width:90%;height:48px;margin:0;stroke:none}
.punti h3{font:700 clamp(1.625rem,2.2vw,1.875rem)/1.1 var(--titolo);color:#fff;margin-bottom:8px}
.punti p{font-size:1.0625rem}

/* come funziona */
.passi-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.passi-testo{margin-top:12px;font-size:1.25rem;line-height:1.55;color:var(--grigio);max-width:26em}
.video-box{position:relative;flex:none;width:min(46%,500px)}
#passi-video{aspect-ratio:16/9;object-fit:cover}
.video-pausa{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(27,36,48,.8);cursor:pointer}
.video-pausa::before{content:"";width:12px;height:14px;border-inline:4px solid #fff}
.video-pausa.ferma::before{width:0;height:0;margin-left:3px;border-block:8px solid transparent;border-inline:13px solid transparent;border-left-color:#fff;border-right-width:0}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:clamp(36px,5vw,56px)}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:4px;background:repeating-linear-gradient(90deg,var(--blu) 0 28px,transparent 28px 48px)}
.steps li{position:relative}
.step-n{display:grid;place-items:center;width:58px;height:58px;margin-bottom:20px;border-radius:50%;background:var(--blu);color:#fff;font:700 1.875rem/1 var(--titolo)}
.steps h3{font:700 clamp(1.75rem,2.6vw,2.125rem)/1.1 var(--titolo);color:var(--blu);margin-bottom:8px}
.steps p{color:var(--grigio);max-width:26em}


/* chiusura: stessa composizione della prima schermata, testo a sinistra e camion a destra sulla strada */
.fine{position:relative;background:linear-gradient(180deg,var(--blu),#0D3A7C);color:#fff;overflow:clip;padding-block:clamp(72px,9vw,112px) calc(clamp(72px,11vh,104px) + 56px)}
.fine-col{max-width:min(720px,58%)}
.fine h2{color:#fff}
.fine-testo{margin:18px 0 26px;font-size:1.25rem;line-height:1.55;max-width:32em}
.info{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;gap:20px 28px;margin:32px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.3)}
.info dt{font:700 1.375rem/1.2 var(--titolo);margin-bottom:4px}
.info dd{margin:0;font-size:1rem;line-height:1.5}
.info dd p{white-space:nowrap}
.mail{display:inline-block;padding-block:10px;margin-top:-10px;text-decoration: none; overflow-wrap:anywhere}
.mail:hover{color:var(--giallo);}
.road-fine{position:absolute;left:0;right:0;bottom:0}

/* footer */
.foot{background:var(--inchiostro);color:#D5D9DB;padding-block:clamp(32px,4vw,44px);font-size:1rem;line-height:1.5}
.foot-grid{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px 48px}
.foot-tit{font:700 1.25rem/1.2 var(--titolo);color:#fff;margin-bottom:4px}
.foot a{color:#fff;text-underline-offset:3px}
.foot-fondo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:.9375rem}
.foot-link{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot-fondo a{display:inline-block;padding-block:10px;margin-block:-10px}


/* il pulsante WhatsApp fisso non deve coprire il footer */
@media (min-width:641px) and (max-width:1420px){
  .foot-grid,.foot-fondo{padding-right:64px}
}
/* tablet e telefono */
@media (max-width:1100px){
  .perche-testa{flex-direction:column;align-items:stretch;gap:28px}
  .foto-riga{flex:none}
  .punti{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .intro{grid-template-columns:1fr}
  .con-foto .hero-text{grid-template-columns:1fr;gap:0}
  .hero-foto{margin-top:48px;margin-left:18px}
  .hero-logo{left:-18px;top:-33px}
  .passi-testa{flex-direction:column;align-items:stretch}
  .video-box{width:100%}
  h2{text-wrap:balance}
  .punti{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fine-col{max-width:none}
  .fine{padding-bottom:clamp(220px,50vw,330px)}
  .casi{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  .burger{display:block}
  .menu{position:absolute;top:calc(100% + 6px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 20px;background:#08264F;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .menu.open{visibility:visible;opacity:1;transform:none}
  .menu a:not(.btn){padding:.7em 0;font:700 1.75rem/1.1 var(--titolo);background:none}
  .menu .btn{margin-top:10px}
  h1{font-size:clamp(4rem,min(20.5vw,13vh),9rem)}
  .truck{width:min(60vw,380px);right:6vw}
  .steps{grid-template-columns:1fr;gap:32px}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:4px;height:auto;background:repeating-linear-gradient(180deg,var(--blu) 0 28px,transparent 28px 48px)}
  .steps li{padding-left:80px}
  .step-n{position:absolute;left:0;top:0}
}
@media (prefers-reduced-motion:no-preference) and (max-width:820px){
  .js .steps::before{transform:scaleY(0);transform-origin:top}
}
@media (max-width:640px){
  .skyline{-webkit-mask-image:none;mask-image:none;height:150px}
  .hero .btn{width:100%}
  .road{height:72px}
  .lead{margin-bottom:20px}
  .fiducia{flex-direction:column;margin-top:16px}
  .foot{padding-bottom:calc(32px + 60px + env(safe-area-inset-bottom))}
  .foot-grid{grid-template-columns:1fr;gap:20px}
  .punti{grid-template-columns:1fr}
  .fine .btn{width:100%}
  .info{grid-template-columns:1fr;gap:16px}
}

/* telefoni bassi: togliamo la lista così il camion resta nella prima schermata */
@media (max-width:640px) and (max-height:700px){
  .hero-text{padding-top:20px}
  h1{font-size:17vw}
  .lead{margin-top:14px;font-size:1.125rem}
  .fiducia{display:none}
}

/* pagina 404 */
.nav-404 .btn{flex:none}
.errore{min-height:calc(100svh - 68px - 120px);display:flex;align-items:center}

/* pagine di testo (privacy) */
.pagina{padding-block:clamp(48px,7vw,96px)}
.testo-legale>*{max-width:46em}
.testo-legale h1{font:700 clamp(2.5rem,5.6vw,4.25rem)/1.02 var(--titolo);color:var(--blu)}
.testo-legale h2{font-size:clamp(1.625rem,2.6vw,2rem);text-wrap:balance;margin:40px 0 4px}
.testo-legale p{margin-top:12px}
.testo-legale a{color:var(--blu-chiaro);text-underline-offset:3px;overflow-wrap:anywhere}
.aggiornata{color:var(--grigio);font-size:1rem}