/* ============================================================
   Nuova Fimat - "Orbita" style system
   Dark / premium / WebGL, ispirazione Awwwards. Un canvas
   Three.js persistente nell'hero regge un "nucleo meccanico
   orbitale" - il resto del sito riprende il motivo (anelli,
   nodi, traiettorie) in puro CSS, restando leggibile anche
   senza WebGL. Firma strutturale: diagramma orbitale (centro
   + nodi in rotazione) al posto di hero full-bleed/split/rail/
   bande - vedi concept-orbita.html per il razionale completo.
   ============================================================ */

:root{
  --void:#05070A;
  --graphite:#101820;
  --steel:#8EA4B8;
  --signal:#7CF4FF;
  --plasma:#B66DFF;
  --cream:#F5F1E8;
  --panel:rgba(142,164,184,0.07);
  --panel-border:rgba(142,164,184,0.18);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Manrope', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;
  --container:1280px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--void); color:var(--cream);
  font-family:var(--font-body); line-height:1.65; font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
::selection{background:var(--signal); color:var(--void);}
a{color:inherit; text-decoration:none;}
.mono{font-family:var(--font-mono);}

.h-display{
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;
  line-height:1.08; margin:0; color:var(--cream);
}
.eyebrow{
  font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--signal); display:flex; align-items:center; gap:0.6em; margin:0 0 1rem;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--signal); display:inline-block;}
.lede{font-size:1.08rem; color:rgba(245,241,232,0.78); max-width:38em;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em; font-family:var(--font-display); font-weight:500;
  font-size:0.96rem; padding:0.85em 1.7em; border-radius:8px; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--signal); color:var(--void); box-shadow:0 8px 26px rgba(124,244,255,0.22);}
.btn-primary:hover{background:var(--cream); box-shadow:0 10px 32px rgba(124,244,255,0.32); transform:translateY(-2px);}
.btn-ghost{background:rgba(245,241,232,0.04); color:var(--cream); border-color:var(--panel-border);}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal); transform:translateY(-2px);}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(5,7,10,0.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-border); display:flex; align-items:center; justify-content:space-between;
  padding:1rem var(--gutter);
}
.nav-logo{display:flex; align-items:center;}
.nav-logo-img{height:32px; width:auto;}
/* Otto voci di primo livello (due delle quali con megamenu) non stanno in
   riga sotto i ~1400px: la soglia del menu desktop è più alta del 900px
   originale, sotto si passa al menu fullscreen. */
.nav-links{display:none; align-items:center; gap:1.1rem; font-size:0.88rem; color:rgba(245,241,232,0.82);}
.nav-links a:hover{color:var(--signal);}
.nav-links a.is-current{color:var(--signal); position:relative;}
.nav-links a.is-current::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.9rem; height:2px; background:var(--signal);
}
.nav-call{font-family:var(--font-mono); font-size:0.86rem; color:var(--signal); white-space:nowrap; display:inline-flex; align-items:center; gap:0.4em;}
@media (min-width:1400px){ .nav-links{display:flex;} }
.nav-right{display:flex; align-items:center; gap:1.1rem;}
/* Sotto i 600px logo e numero di telefono per esteso non ci stanno accanto
   all'hamburger sulla stessa riga (il logo, molto largo rispetto alla sua
   altezza, e "0733 671338" per esteso insieme superano lo spazio disponibile
   a fianco dell'hamburger): il logo si riduce e il numero resta un link
   "tel:" funzionante ma solo con l'icona, senza le cifre stampate. */
@media (max-width:600px){
  .nav-logo-img{height:22px;}
  .nav-call-text{display:none;}
}

/* ---------- Nav dropdown ---------- */
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  display:flex; align-items:center; gap:0.4em; background:none; border:none; padding:0; margin:0;
  font:inherit; color:rgba(245,241,232,0.82); cursor:pointer;
}
.nav-dropdown-trigger:hover, .nav-dropdown.is-open .nav-dropdown-trigger, .nav-dropdown-trigger.is-current{color:var(--signal);}
.nav-caret{transition:transform .18s ease;}
.nav-dropdown.is-open .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:rgba(16,24,32,0.96); backdrop-filter:blur(14px); border:1px solid var(--panel-border); border-radius:10px;
  padding:0.6rem; min-width:220px; display:flex; flex-direction:column; gap:0.1rem;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.nav-dropdown.is-open .nav-dropdown-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block; padding:0.6em 0.8em; border-radius:6px; font-size:0.9rem; color:rgba(245,241,232,0.82);}
.nav-dropdown-menu a:hover{background:var(--panel); color:var(--signal);}

/* ---------- Nav burger + fullscreen menu ---------- */
.nav-burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px; width:32px; height:26px;
  background:none; border:none; padding:0; cursor:pointer;
}
.nav-burger span{display:block; width:100%; height:1.5px; background:var(--cream); transition:transform .2s ease, opacity .2s ease;}
@media (min-width:1400px){ .nav-burger{display:none;} }

.menu-full{
  position:fixed; inset:0; z-index:100; background:var(--void); display:flex; flex-direction:column;
  justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:6rem var(--gutter) 3rem; opacity:0; pointer-events:none; transform:translateY(-8px);
  transition:opacity .28s ease, transform .28s ease;
}
.menu-full.is-open{opacity:1; pointer-events:auto; transform:none;}
.menu-close{
  /* fixed, non absolute: .menu-full ora scorre (overflow-y:auto) quando il
     contenuto supera l'altezza dello schermo - un pulsante assoluto
     scorrerebbe via con il resto, lasciando l'utente senza modo di chiudere
     il menu (niente tastiera su touch per il fallback Escape). */
  position:fixed; top:1.6rem; right:var(--gutter); z-index:1; background:none; border:none; color:var(--cream);
  font-family:var(--font-mono); font-size:0.9rem; cursor:pointer;
}
.menu-full-links{list-style:none; margin:0; padding:0; max-width:var(--container); width:100%; margin-inline:auto;}
/* `> li`: le voci di gruppo (ul.menu-sub) sono annidate dentro un <li>,
   un selettore discendente darebbe un bordo anche a ogni sotto-voce. */
.menu-full-links > li{border-top:1px solid var(--panel-border);}
.menu-full-links > li:last-child{border-bottom:1px solid var(--panel-border);}
.menu-full-links a{
  display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0.2rem;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.4rem,4vw,2.4rem); color:var(--cream);
  transition:color .2s ease;
}
.menu-full-links a:hover, .menu-full-links a.is-current{color:var(--signal);}
.menu-full-links .idx{font-family:var(--font-mono); font-size:0.8rem; color:var(--signal);}

/* Voci con sottomenu (Macchine Olearie/Agricole): <details>/<summary> nativo,
   stesso pattern "senza JS" usato per le FAQ. Il link resta un vero <a> per
   navigare alla panoramica del reparto; toccare il resto della riga (indice,
   freccia) apre/chiude l'elenco sottostante senza navigare. */
.menu-item-details{border:none;}
.menu-item-details summary{
  display:flex; justify-content:space-between; align-items:center; gap:0.8rem; padding:1.1rem 0.2rem;
  cursor:pointer; list-style:none;
}
.menu-item-details summary::-webkit-details-marker{display:none;}
.menu-item-details summary a{
  display:inline; padding:0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,4vw,2.4rem); color:var(--cream); transition:color .2s ease;
}
.menu-item-details summary a:hover, .menu-item-details summary a.is-current{color:var(--signal);}
.menu-item-meta{display:flex; align-items:center; gap:0.7rem; flex-shrink:0;}
.menu-sub-caret{transition:transform .2s ease; color:rgba(245,241,232,0.6);}
.menu-item-details[open] .menu-sub-caret{transform:rotate(180deg);}
.menu-item-details .menu-sub{padding-bottom:1rem;}
.menu-full-sub{
  max-width:var(--container); width:100%; margin:2rem auto 0; display:flex; flex-wrap:wrap; gap:1.4rem;
  font-family:var(--font-mono); font-size:0.82rem; color:rgba(245,241,232,0.6);
}
.menu-full-sub a:hover{color:var(--signal);}

@media (max-width:1399px){
  .nav{flex-wrap:wrap; row-gap:0.8rem;}
}

/* ---------- Megamenu (Macchine Olearie / Macchine Agricole) ----------
   Il pannello è ancorato alla barra `.nav`, non al singolo trigger: con
   translateX(-50%) sul trigger un pannello largo finirebbe fuori dal
   viewport quando la voce è vicina al bordo. Per questo il contenitore
   `.nav-dropdown.mega` è `position:static` e il pannello si stende da
   bordo a bordo della nav. */
.nav{position:relative;}
.nav-dropdown.mega{position:static;}
.nav-mega{
  position:absolute; top:calc(100% + 1px); left:0; right:0; transform:translateY(-6px);
  min-width:0; padding:2rem var(--gutter) 2.2rem; border-radius:0 0 14px 14px;
  border-left:none; border-right:none; display:block;
  /* fondo pieno, non translucido: il pannello copre l'hero (video + canvas 3D)
     e con un alfa < 1 il titolo dell'hero traspariva sotto le voci di menu. */
  background:#0B1218; box-shadow:0 26px 60px rgba(0,0,0,0.55);
}
.nav-dropdown.is-open .nav-mega{transform:translateY(0);}
.mega-inner{
  max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start;
}
.mega-col{flex:1 1 240px; min-width:0;}
.mega-col h4{
  font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--signal); margin:0 0 1rem; padding-bottom:0.7rem; border-bottom:1px solid var(--panel-border);
}
.mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.15rem;}
.nav-mega a{
  display:block; padding:0.5em 0.7em; margin-left:-0.7em; border-radius:6px; font-size:0.88rem; line-height:1.4;
  color:rgba(245,241,232,0.8);
}
.nav-mega a:hover{background:var(--panel); color:var(--signal);}
.nav-mega a .sub{display:block; font-size:0.76rem; color:rgba(245,241,232,0.45);}
.mega-media{flex:0 1 260px;}
.mega-media-img{height:150px; border-radius:10px; overflow:hidden; border:1px solid var(--panel-border);}
.mega-media-img img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.mega-media p{margin:0.9rem 0 0; font-size:0.84rem; color:rgba(245,241,232,0.6);}
.mega-media .btn{margin-top:1rem;}
.mega-media .btn-primary{color:var(--void);}
@media (max-width:1399px){ .nav-mega{display:none;} }

/* Voci di gruppo nel menu fullscreen (mobile): le stesse categorie dei
   megamenu, in scala ridotta sotto la voce principale. */
.menu-full-links .menu-sub{
  list-style:none; margin:0 0 1rem; padding:0 0 0 0.2rem; display:flex; flex-wrap:wrap; gap:0.4rem 1.2rem;
  font-family:var(--font-mono); font-size:0.78rem;
}
.menu-full-links .menu-sub a{
  display:inline; padding:0; font-family:var(--font-mono); font-weight:400; font-size:0.78rem;
  color:rgba(245,241,232,0.6);
}
.menu-full-links .menu-sub a:hover, .menu-full-links .menu-sub a.is-current{color:var(--signal);}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:6rem var(--gutter) 4rem; text-align:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(182,109,255,0.14), transparent 60%), var(--void);
}
.hero-canvas-wrap{position:absolute; inset:0; z-index:0; overflow:hidden;}
#orbita-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:3;}
.hero-canvas-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(124,244,255,0.16), transparent 55%),
    repeating-radial-gradient(circle at 50% 45%, rgba(142,164,184,0.08) 0 1px, transparent 1px 90px);
}
.hero-video{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.hero-video.is-ready{opacity:0.55;}
.hero-video-overlay{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(124,244,255,0.10), transparent 62%),
    linear-gradient(180deg, rgba(5,7,10,0.42) 0%, rgba(5,7,10,0.58) 45%, rgba(5,7,10,0.9) 85%, var(--void) 100%);
}
.hero-content{position:relative; z-index:2; max-width:760px;}
.hero .eyebrow{justify-content:center;}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.6rem);}
.hero-sub{color:rgba(245,241,232,0.78); max-width:38em; margin:1.5rem auto 0;}
.hero-ctas{display:flex; justify-content:center; gap:1rem; margin-top:2.2rem; flex-wrap:wrap;}
.hero-scroll{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:rgba(245,241,232,0.55);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.hero-scroll-bar{
  position:relative; width:1px; height:32px; overflow:hidden; background:rgba(245,241,232,0.12);
}
.hero-scroll-bar::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:linear-gradient(rgba(124,244,255,0), var(--signal) 60%, rgba(124,244,255,0));
  animation:hero-scroll-signal 2.2s ease-in-out infinite;
}

/* ---------- Ingresso animato dei componenti dell'hero ---------- */
.hero .eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-scroll{
  opacity:0; animation:hero-in .8s cubic-bezier(.16,.8,.3,1) forwards;
}
.hero .eyebrow{animation-delay:.15s;}
.hero h1{animation-delay:.32s;}
.hero-sub{animation-delay:.55s;}
.hero-ctas{animation-delay:.75s;}
.hero-scroll{animation-delay:1.3s;}
.hero-ctas .btn{transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;}
.hero-ctas .btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,244,255,0.28);}
.hero-ctas .btn-ghost:hover{transform:translateY(-2px);}

@keyframes hero-in{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
@keyframes hero-scroll-signal{ 0%{top:-100%;} 60%,100%{top:100%;} }

@media (prefers-reduced-motion: reduce){
  .hero .eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-scroll{opacity:1; animation:none; transform:none;}
  .hero-scroll-bar::after{animation:none; display:none;}
  .hero-scroll-bar{background:linear-gradient(rgba(124,244,255,0.9), transparent);}
}

/* ---------- Sections ---------- */
.section{padding:6rem var(--gutter); position:relative;}
.section.on-panel{
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,244,255,0.06), transparent 65%), var(--graphite);
  border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
}
.section.on-void{
  background:radial-gradient(ellipse 70% 50% at 50% 100%, rgba(182,109,255,0.07), transparent 65%), var(--void);
  border-top:1px solid var(--panel-border);
}
.section-inner{max-width:var(--container); margin:0 auto;}
.section-inner.narrow{max-width:760px; text-align:center;}
.section-inner.narrow .eyebrow{justify-content:center;}
.section-inner.narrow .lede{margin:0 auto;}

/* ---------- Hub (sistema) - foto reale + lista connessa, non più un diagramma
   circolare: layout completamente diverso dalla prima versione ---------- */
.hub{display:flex; flex-wrap:wrap; gap:3rem; max-width:var(--container); margin:3.5rem auto 0; align-items:stretch;}
.hub-photo{flex:1 1 340px; position:relative; border-radius:12px; overflow:hidden; min-height:420px; border:1px solid var(--panel-border);}
.hub-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% center; filter:saturate(0.85) contrast(1.05);}
.hub-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(5,7,10,0.88));
}
.hub-photo-label{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:1; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--signal);
}

.hub-list{flex:1 1 420px; list-style:none; margin:0; padding:0; position:relative;}
.hub-list::before{content:""; position:absolute; left:19px; top:8px; bottom:8px; width:1px; background:var(--panel-border);}
.hub-item{display:flex; gap:1.4rem; padding:1.15rem 0;}
.hub-item:first-child{padding-top:0;}
.hub-idx{
  position:relative; z-index:1; flex:0 0 40px; height:40px; border-radius:50%; background:var(--void);
  border:1px solid rgba(124,244,255,0.4); color:var(--signal); display:flex; align-items:center; justify-content:center;
  font-size:0.76rem; box-shadow:0 0 12px rgba(124,244,255,0.25);
}
.hub-item h3{margin:0 0 0.3rem; font-family:var(--font-display); font-weight:600; font-size:1.1rem;}
.hub-item p{margin:0; color:rgba(245,241,232,0.7); font-size:0.92rem;}
@media (max-width:720px){ .hub-photo{min-height:260px;} }

/* ---------- Numeri (radicano il sistema in fatti reali) ---------- */
.stat-row{display:flex; flex-wrap:wrap; justify-content:center; gap:0 3rem; border-top:1px solid var(--panel-border); padding-top:2.4rem;}
.stat-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.4rem;}
.stat-val{
  font-family:var(--font-display); font-weight:600; font-size:2.2rem; color:var(--signal);
  text-shadow:0 0 22px rgba(124,244,255,0.32);
}
.stat-lbl{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(245,241,232,0.6);}

/* ---------- Satellite grid (reparti) ---------- */
.satellite-grid{max-width:var(--container); margin:3rem auto 0; display:flex; flex-wrap:wrap; gap:1.6rem;}
.satellite-card{
  flex:1 1 260px; position:relative; padding:0 0 1.8rem; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:10px; overflow:hidden; transition:border-color .2s ease, transform .2s ease;
}
.satellite-card:hover{border-color:var(--signal); transform:translateY(-4px);}
.satellite-media{height:150px; overflow:hidden;}
.satellite-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.satellite-card .satellite-idx{display:block; color:var(--signal); font-size:0.78rem; padding:1.2rem 1.8rem 0;}
.satellite-card h3{font-family:var(--font-display); font-weight:600; font-size:1.25rem; margin:0.8rem 1.8rem 0.5rem;}
.satellite-card p{margin:0 1.8rem 1.4rem; color:rgba(245,241,232,0.72); font-size:0.94rem;}
.satellite-link{font-family:var(--font-mono); font-size:0.78rem; color:var(--signal); margin:0 1.8rem;}

/* ---------- Transit path (officina orbitale) ---------- */
.transit-path{
  max-width:var(--container); margin:3.5rem auto 0; display:flex; flex-wrap:wrap; gap:2.2rem; position:relative;
}
.transit-line{
  position:absolute; top:14px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--panel-border) 8%, var(--panel-border) 92%, transparent);
  display:none;
}
@media (min-width:900px){ .transit-line{display:block;} }
.transit-node{flex:1 1 220px; position:relative; padding-top:2.2rem;}
.transit-dot{
  position:absolute; top:0; left:0; width:30px; height:30px; border-radius:50%; background:var(--void);
  border:1px solid var(--signal); color:var(--signal); display:flex; align-items:center; justify-content:center;
  font-size:0.74rem; box-shadow:0 0 14px rgba(124,244,255,0.35);
}
.transit-node h3{font-family:var(--font-display); font-weight:600; font-size:1.1rem; margin:0.6rem 0 0.4rem;}
.transit-node p{margin:0; color:rgba(245,241,232,0.7); font-size:0.9rem;}

/* ---------- Photo row (foto reali officina) ---------- */
.photo-row{max-width:var(--container); margin:3rem auto 0; display:flex; flex-wrap:wrap; gap:1.4rem;}
.photo-frame{
  flex:1 1 320px; border:1px solid var(--panel-border); border-radius:12px; overflow:hidden; height:220px;
  box-shadow:0 16px 40px rgba(0,0,0,0.3);
}
.photo-frame img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
/* Un'unica foto a piena riga ha bisogno di un'altezza maggiore: alla stessa
   altezza di due foto affiancate (220px) su ~1280px di larghezza il crop
   diventa un letterbox estremo che taglia via il soggetto (trattore, macchina)
   e mostra solo texture di sfondo - un bug reale, non solo una scelta estetica. */
.photo-row:has(.photo-frame:only-child){max-width:900px;}
.photo-row:has(.photo-frame:only-child) .photo-frame{height:420px;}
@media (max-width:720px){ .photo-row:has(.photo-frame:only-child) .photo-frame{height:300px;} }
.split-photo{max-width:var(--container); margin:0 auto; display:flex; gap:2.6rem; align-items:center; flex-wrap:wrap;}

/* ---------- Rotation grid (usato) ---------- */
.rotation-grid{max-width:var(--container); margin:3rem auto 0; display:flex; flex-wrap:wrap; gap:1.4rem;}
.rotation-card{
  flex:1 1 240px; padding:0 0 1.5rem; background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; overflow:hidden;
}
.rotation-media{height:130px; overflow:hidden;}
.rotation-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.rotation-head{display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:rgba(245,241,232,0.6); padding:1.2rem 1.6rem 0;}
.rotation-status{
  font-family:var(--font-mono); text-transform:uppercase; font-size:0.68rem; letter-spacing:0.04em;
  color:var(--signal); border:1px solid rgba(124,244,255,0.35); padding:0.2em 0.6em; border-radius:4px;
}
.rotation-card h4{margin:0.9rem 1.6rem 0.4rem; font-family:var(--font-display); font-weight:600; font-size:1.1rem;}
.rotation-meta{color:rgba(245,241,232,0.6); font-size:0.82rem; margin:0 1.6rem;}

/* ---------- Brand row (marchi) ---------- */
.brand-row{max-width:var(--container); margin:3rem auto 0; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center;}
.brand-panel{
  background:var(--cream); border-radius:12px; padding:1rem 1.4rem; display:flex; align-items:center; justify-content:center;
  height:72px; width:150px;
}
.brand-panel img{max-height:34px; width:auto; object-fit:contain;}

/* ---------- Journal grid (giornale) ---------- */
.journal-grid{max-width:var(--container); margin:3rem auto 0; display:flex; flex-wrap:wrap; gap:1.4rem;}
.journal-card{flex:1 1 260px; padding:1.6rem 1.7rem; background:var(--panel); border:1px solid var(--panel-border); border-radius:12px;}
.journal-tag{
  display:inline-block; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--signal);
  border:1px solid rgba(124,244,255,0.35); border-radius:4px; padding:0.2em 0.6em; margin-bottom:0.9rem;
}
.journal-card h3{margin:0 0 0.5rem; font-family:var(--font-display); font-weight:600; font-size:1.08rem; line-height:1.3;}
.journal-card p{margin:0; color:rgba(245,241,232,0.7); font-size:0.9rem;}
.journal-card-media{height:140px; margin:-1.6rem -1.7rem 1.2rem; border-radius:12px 12px 0 0; overflow:hidden;}
.journal-card-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}

/* ---------- Contact meta ---------- */
.contact-meta{
  display:flex; flex-direction:column; gap:0.4rem; margin-top:2.2rem; font-size:0.8rem; color:rgba(245,241,232,0.55);
}

/* ============================================================
   Componenti per le pagine interne (aggiunti quando Orbita è
   passata da homepage singola a sito a 11 pagine)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(245,241,232,0.5); margin:0 0 1.4rem;
}
.breadcrumb a:hover{color:var(--signal);}

/* ============================================================
   Pagine interne - sistema unico, coerente e a grande scala.

   Un primo tentativo dava a ciascuna delle 10 pagine un impianto
   diverso (tabella, quadrante, definition list, rubrica a colonne,
   mosaico...): la varietà strutturale era reale, ma ogni singolo
   pattern era eseguito in scala piccola (bordi sottili da 1px,
   pannelli stretti, foto minuscole) e il sito nel complesso leggeva
   come "generico/economico", non premium. La diagnosi era sbagliata:
   il problema non era la mancanza di varietà, era la mancanza di
   scala e di fotografia reale. Rifatto da zero con un impianto
   condiviso e deliberatamente grande - un'apertura fotografica a
   piena larghezza su ogni pagina, blocchi testo+foto ampi, numeri
   enormi - che resta coerente pagina per pagina (dando l'impressione
   di un solo sito curato) e resta comunque strutturalmente estraneo
   alle altre quattro proposte (nessuna usa un'apertura fotografica
   piena larghezza con titolo sovrapposto + blocchi larghi come
   firma ricorrente). Il contenuto specifico di ciascuna pagina
   (tabella prezzi, catalogo, rubrica marchi...) resta distinto;
   il linguaggio visivo con cui è composto è ora condiviso e curato. */

/* ---------- Apertura pagina: foto piena larghezza + titolo ---------- */
.page-intro{position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden;}
.page-intro img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.82) contrast(1.05);
}
.page-intro::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,10,0.1) 0%, rgba(5,7,10,0.55) 55%, var(--void) 96%);
}
.page-intro-content{position:relative; z-index:1; max-width:var(--container); margin:0 auto; width:100%; padding:0 var(--gutter) 4rem;}
.page-intro h1{font-size:clamp(2.6rem,6vw,4.6rem); text-shadow:0 4px 30px rgba(0,0,0,0.5);}
.page-intro .lede{max-width:42em; margin-top:1.2rem;}
@media (max-width:720px){ .page-intro{min-height:52vh;} }

/* ---------- Blocco testo + foto ampio (narrativa, cross-link) ---------- */
.feature-split{max-width:var(--container); margin:0 auto; display:flex; gap:3.2rem; align-items:center; flex-wrap:wrap;}
.feature-split.reverse{flex-direction:row-reverse;}
.feature-split-media{
  flex:1 1 460px; height:440px; border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.feature-split-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.feature-split-media.media-carousel{position:relative;}
.feature-split-media.media-carousel img{position:absolute; inset:0; opacity:0; transition:opacity 1s ease;}
.feature-split-media.media-carousel img.is-active{opacity:1;}
.feature-split-text{flex:1 1 420px;}
.feature-split-text h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:1rem;}
.feature-split-text p{color:rgba(245,241,232,0.78); font-size:1.05rem; max-width:34em;}
.feature-split-text .btn{margin-top:0.6rem;}
@media (max-width:760px){ .feature-split-media{height:280px;} }

/* ---------- Numerazione tipografica grande (principi, fasi, gamma) ---------- */
.tenets{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:0;}
.tenet{position:relative; display:flex; gap:2.2rem; align-items:flex-start; padding:2.4rem 0; border-top:1px solid var(--panel-border);}
.tenet:first-child{border-top:none; padding-top:0.6rem;}
.tenet-num{
  font-family:var(--font-display); font-size:4rem; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--signal); flex:0 0 auto; min-width:2.2ch;
}
.tenets.plasma .tenet-num{-webkit-text-stroke-color:var(--plasma);}
.tenet h3{margin:0 0 0.5rem; font-size:1.3rem;}
.tenet p{margin:0; color:rgba(245,241,232,0.75); font-size:1.02rem; max-width:36em;}
@media (max-width:640px){ .tenet-num{font-size:2.6rem;} .tenet{gap:1.4rem;} }

/* ---------- Numeri: ticker in linea e cifra enorme singola ---------- */
.ticker{
  max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:baseline; gap:0.8rem 2rem; text-align:center;
}
.ticker-item{display:flex; align-items:baseline; gap:1.4rem;}
.ticker-val{
  font-family:var(--font-display); font-weight:600; font-size:3.2rem; color:var(--signal);
  text-shadow:0 0 30px rgba(124,244,255,0.4);
}
.ticker-lbl{font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(245,241,232,0.6); display:block; margin-top:0.3rem;}
.ticker-sep{font-size:2.2rem; color:var(--panel-border); font-weight:300;}
.big-stat{max-width:820px; margin:0 auto; text-align:center;}
.big-stat .num{
  font-family:var(--font-display); font-weight:700; font-size:clamp(3.6rem,10vw,6.5rem); color:var(--signal); line-height:1;
  text-shadow:0 0 50px rgba(124,244,255,0.45); display:inline-block;
}
.big-stat p{margin:1.1rem 0 0; color:rgba(245,241,232,0.78); font-size:1.1rem;}

/* ---------- Manifesto editoriale (Azienda) ---------- */
.manifesto{max-width:760px; margin:0 auto;}
.manifesto p.drop::first-letter{
  font-family:var(--font-display); font-size:4rem; float:left; line-height:0.8; padding:0.1rem 0.6rem 0 0;
  color:var(--signal);
}
.manifesto p{font-size:1.08rem; color:rgba(245,241,232,0.78);}

/* ---------- Foto full-bleed con didascalia (respiro tra sezioni) ---------- */
.photo-band{max-width:none; margin:0; padding:0;}
.photo-band .pb-img{position:relative; height:460px; overflow:hidden;}
.photo-band .pb-img img{width:100%; height:100%; object-fit:cover; filter:saturate(0.82) contrast(1.05);}
.photo-band figcaption{
  position:absolute; bottom:0; left:0; right:0;
  padding:3.5rem var(--gutter) 1.1rem;
  background:linear-gradient(transparent, rgba(5,7,10,0.70));
  font-family:var(--font-mono); font-size:0.8rem; color:rgba(245,241,232,0.72);
}
@media (max-width:640px){ .photo-band .pb-img{height:280px;} }
.photo-band .pb-img.pb-img--duo{display:flex;}
.photo-band .pb-img.pb-img--duo img{width:50%; flex:1 1 50%;}
@media (max-width:640px){
  .photo-band .pb-img.pb-img--duo{flex-direction:column; height:auto;}
  .photo-band .pb-img.pb-img--duo img{width:100%; height:220px; flex:none;}
}

/* ---------- Galleria officina: quattro scatti grandi, 2x2 ---------- */
.officina-gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:var(--container); margin:3rem auto 0;
}
.officina-shot{margin:0; position:relative; height:440px; border-radius:14px; overflow:hidden;}
.officina-shot img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.officina-shot figcaption{
  position:absolute; bottom:0; left:0; right:0;
  padding:2.4rem 1.4rem 0.9rem;
  background:linear-gradient(transparent, rgba(5,7,10,0.72));
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(245,241,232,0.75);
}
@media (max-width:760px){ .officina-gallery{grid-template-columns:1fr;} .officina-shot{height:300px;} }

/* ---------- Catalogo usato: card grandi con foto reale ---------- */
.catalog-grid{max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:1.8rem;}
.catalog-card{
  flex:1 1 320px; max-width:420px; border-radius:16px; overflow:hidden; background:var(--panel);
  border:1px solid var(--panel-border); box-shadow:0 18px 44px rgba(0,0,0,0.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.catalog-card:hover{box-shadow:0 24px 54px rgba(0,0,0,0.38);}
.catalog-media{height:220px; overflow:hidden; position:relative;}
.catalog-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.88) contrast(1.05);}
.catalog-id{
  position:absolute; top:0.9rem; left:0.9rem; font-family:var(--font-mono); font-size:0.72rem; color:var(--signal);
  background:rgba(5,7,10,0.75); padding:0.3em 0.7em; border-radius:4px;
}
.catalog-status{
  position:absolute; top:0.9rem; right:0.9rem; font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase;
  color:var(--cream); background:rgba(5,7,10,0.75); padding:0.3em 0.7em; border-radius:4px;
}
.catalog-body{padding:1.5rem 1.7rem 1.7rem;}
.catalog-body h4{margin:0 0 0.4rem; font-size:1.15rem;}
.catalog-meta{font-family:var(--font-mono); font-size:0.85rem; color:rgba(245,241,232,0.55); margin:0;}
.catalog-note{font-size:0.9rem; color:rgba(245,241,232,0.68); margin:0.6rem 0 0;}
.text-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:0 1rem; font-family:var(--font-mono); font-size:0.92rem;}
.text-filters .chip{background:none !important; border:none !important; color:rgba(245,241,232,0.55); cursor:pointer; padding:0.3em 0; border-radius:0;}
.text-filters .chip.active, .text-filters .chip:hover{background:none !important; color:var(--signal) !important;}
.text-filters .chip:not(:last-child)::after{content:"/"; margin-left:1rem; color:var(--panel-border);}

/* ---------- Usato: semplice gallery fotografica, senza schede/filtri ---------- */
.usato-gallery{
  max-width:var(--container); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.4rem;
}
.usato-shot{margin:0; position:relative; height:320px; border-radius:14px; overflow:hidden;}
.usato-shot img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.usato-shot figcaption{
  position:absolute; bottom:0; left:0; right:0;
  padding:2.2rem 1.2rem 0.8rem;
  background:linear-gradient(transparent, rgba(5,7,10,0.72));
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(245,241,232,0.78);
}
@media (max-width:640px){ .usato-gallery{grid-template-columns:1fr;} .usato-shot{height:260px;} }

/* ---------- Marchi: placche grandi, raggruppate per reparto ---------- */
.brand-plate-group{max-width:var(--container); margin:0 auto 3.5rem;}
.brand-plate-group h3{font-size:1.3rem; margin:0 0 1.6rem; text-align:center;}
.brand-plate-row{display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem;}
.brand-plate{
  background:var(--cream); border-radius:14px; height:110px; width:190px; display:flex; align-items:center;
  justify-content:center; padding:1.4rem; box-shadow:0 16px 38px rgba(0,0,0,0.3); transition:transform .2s ease;
}
.brand-plate:hover{transform:translateY(-3px);}
.brand-plate img{max-height:40px; max-width:100%; width:auto; object-fit:contain;}
/* Alcuni loghi ufficiali esistono solo in versione "in negativo" (grafica
   bianca su trasparente: Honda, Vigolo, Rain Bird, la coda "Count on it."
   di Toro): sulla placca crema sparirebbero. Non si filtrano né si
   ricolorano i loghi (regola di progetto) - si cambia il fondo della
   placca. */
.brand-plate.on-dark{background:var(--graphite); border:1px solid var(--panel-border);}

/* ---------- FAQ (accordion nativo, unico stile su tutte le pagine) ---------- */
.page-faq{max-width:800px; margin:0 auto;}
.page-faq details{border-bottom:1px solid var(--panel-border); padding:1.4rem 0;}
.page-faq summary{
  cursor:pointer; font-family:var(--font-display); font-weight:500; font-size:1.1rem; list-style:none;
  display:flex; justify-content:space-between; gap:1rem;
}
.page-faq summary::-webkit-details-marker{display:none;}
.page-faq summary::after{content:"+"; color:var(--signal); flex:0 0 auto; font-size:1.3rem;}
.page-faq details[open] summary::after{content:"\2212";}
.page-faq p{margin:1rem 0 0; color:rgba(245,241,232,0.72); font-size:1rem; max-width:36em;}

/* ---------- Riga di pillole (cross-link reparti) ---------- */
.pill-row{max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:0.9rem;}
.pill-row a{
  font-family:var(--font-mono); font-size:0.9rem; padding:0.7em 1.4em; border:1px solid var(--panel-border);
  border-radius:999px; color:rgba(245,241,232,0.75); background:rgba(142,164,184,0.05);
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pill-row a:hover{
  border-color:var(--signal); color:var(--signal); box-shadow:0 8px 24px rgba(124,244,255,0.2);
  transform:translateY(-2px);
}

/* ---------- Giornale: griglia editoriale grande, una tessera in evidenza ---------- */
.editorial-grid{max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:1.8rem;}
.editorial-card{
  flex:1 1 320px; max-width:420px; border-radius:16px; overflow:hidden; background:var(--panel);
  border:1px solid var(--panel-border); box-shadow:0 18px 44px rgba(0,0,0,0.3); transition:transform .25s ease;
}
.editorial-card:hover{transform:translateY(-5px);}
.editorial-card.feature{flex:1 1 100%; max-width:none; display:flex; flex-wrap:wrap;}
.editorial-media{height:210px; overflow:hidden;}
.editorial-card.feature .editorial-media{flex:1 1 460px; height:auto; min-height:320px;}
.editorial-media img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) contrast(1.05);}
.editorial-body{padding:1.6rem 1.8rem 1.8rem;}
.editorial-card.feature .editorial-body{flex:1 1 380px; display:flex; flex-direction:column; justify-content:center;}
.editorial-tag{
  display:inline-block; font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; color:var(--signal);
  border:1px solid rgba(124,244,255,0.35); border-radius:4px; padding:0.25em 0.7em; margin-bottom:1rem;
}
.editorial-body h3{margin:0 0 0.6rem; font-size:1.15rem;}
.editorial-card.feature .editorial-body h3{font-size:1.6rem;}
.editorial-body p{margin:0; color:rgba(245,241,232,0.72); font-size:0.96rem;}
.editorial-body .satellite-link{display:inline-block; margin:0.9rem 0 0;}

/* ---------- Contatti: riga di link inline ---------- */
.inline-links{max-width:var(--container); margin:0 auto; text-align:center; font-family:var(--font-mono); font-size:0.95rem;}
.inline-links a{color:rgba(245,241,232,0.75);}
.inline-links a:hover{color:var(--signal);}
.inline-links .sep{color:var(--panel-border); margin:0 0.9rem;}


/* ---------- FAQ accordion ---------- */
/* ---------- Filter chips (usato completo) ---------- */
.filters{display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; margin-bottom:2.2rem;}
.chip{
  font-family:var(--font-mono); font-size:0.8rem; padding:0.5em 1.1em; border-radius:999px;
  border:1px solid var(--panel-border); background:transparent; color:rgba(245,241,232,0.7); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover{border-color:var(--signal); color:var(--signal);}
.chip.active{background:var(--signal); border-color:var(--signal); color:var(--void);}
.is-hidden-by-filter{display:none !important;}

/* ---------- Contatti: info + form ---------- */
.contatti-grid{max-width:var(--container); margin:0 auto; display:flex; gap:3.5rem; flex-wrap:wrap;}
.contatti-info{flex:1 1 380px;}
.contatti-info dl{margin:1.8rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:0.6rem 1.4rem;}
.contatti-info dt{font-family:var(--font-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(245,241,232,0.5); align-self:center;}
.contatti-info dd{margin:0; font-size:0.98rem;}
.contatti-info dd a:hover{color:var(--signal);}
.map-sketch{margin-top:2.2rem; border:1px solid var(--panel-border); border-radius:12px; padding:1.4rem; color:var(--signal); background:var(--panel);}
.map-sketch svg{width:100%; height:auto; display:block; opacity:0.7;}
.map-label{margin-top:0.8rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; color:rgba(245,241,232,0.55);}
.contatti-form{
  flex:1 1 380px; background:linear-gradient(160deg, rgba(142,164,184,0.09), rgba(142,164,184,0.03));
  border:1px solid var(--panel-border); border-radius:16px; padding:2.2rem; box-shadow:0 20px 50px rgba(0,0,0,0.28);
}
.field{margin-bottom:1.2rem;}
.field label{display:block; font-family:var(--font-mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(245,241,232,0.6); margin-bottom:0.5rem;}
.field input, .field textarea{
  width:100%; background:rgba(5,7,10,0.6); border:1px solid var(--panel-border); border-radius:8px; color:var(--cream);
  font-family:var(--font-body); font-size:0.96rem; padding:0.75em 0.9em; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--signal);}
.contatti-form .btn{margin-top:0.4rem; width:100%; justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{background:var(--void); border-top:1px solid var(--panel-border); padding:4rem var(--gutter) 2rem;}
.footer-cols{
  max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:2.4rem 3rem; padding-bottom:2.6rem;
}
.footer-brand{flex:1 1 260px;}
.footer-brand p{margin:1rem 0 0; color:rgba(245,241,232,0.6); font-size:0.9rem; max-width:28em;}
.footer-col{flex:1 1 160px;}
.footer-col h5{
  font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--signal); margin:0 0 1rem;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem;}
.footer-col a{color:rgba(245,241,232,0.72); font-size:0.92rem;}
.footer-col a:hover{color:var(--signal);}
.footer-col p{margin:0; color:rgba(245,241,232,0.72); font-size:0.9rem;}
.footer-legal{
  max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; gap:0.8rem 2rem;
  align-items:center; padding-top:1.8rem; border-top:1px solid var(--panel-border);
  font-family:var(--font-mono); font-size:0.76rem; color:rgba(245,241,232,0.55);
}
.footer-legal-credits{text-align:center; white-space:nowrap;}
.footer-legal-links{display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center; justify-content:flex-end;}
.footer-legal-links a:hover{color:var(--signal);}
@media (max-width:780px){
  .footer-legal{grid-template-columns:1fr; text-align:center;}
  .footer-legal-links{justify-content:center;}
}
.footer-row{
  max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  justify-content:space-between; font-family:var(--font-mono); font-size:0.76rem; color:rgba(245,241,232,0.6);
}
.footer-logo{height:34px; width:auto;}
.footer-social{display:flex; gap:1rem; margin-top:0.9rem;}
.footer-social a{display:inline-flex; color:rgba(245,241,232,0.72);}
.footer-social a:hover{color:var(--signal);}

/* Credits link */
.credits_link { color: #38B5E6 !important; font-weight: 700; }
.credits_link:hover { color: #fff !important; }
.credits_link::before {
  content: "";
  vertical-align: middle;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 4px;
  background: url(../img/clion-favicon.png) center/contain no-repeat;
  transition: transform 450ms ease;
}
.credits_link:hover::before { transform: rotateZ(360deg); }

/* ============================================================
   Componenti aggiunti nella revisione richiesta dal cliente:
   pagina unica "Macchine Agricole" con le categorie e i relativi
   loghi, sezione "Macchine Olearie" completa (7 categorie con
   schede prodotto), pagina "Abbigliamento da lavoro", banner +
   catalogo autogestito per l'Usato, mappa Google nei contatti.
   ============================================================ */

/* ---------- Indice di categoria (pagina Macchine Agricole) ---------- */
.cat-index{
  max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:0.7rem;
}
.cat-index a{
  font-family:var(--font-mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em;
  padding:0.55em 1.1em; border:1px solid var(--panel-border); border-radius:999px; color:rgba(245,241,232,0.7);
  transition:border-color .2s ease, color .2s ease;
}
.cat-index a:hover{border-color:var(--signal); color:var(--signal);}

/* ---------- Blocco categoria: titolo + loghi associati ---------- */
.cat-block{
  max-width:var(--container); margin:0 auto; padding:3.2rem 0; border-top:1px solid var(--panel-border);
  scroll-margin-top:96px; /* la nav è sticky: senza questo l'ancora finisce sotto la barra */
}
.cat-block:first-of-type{border-top:none;}
.cat-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.8rem 1.6rem; margin-bottom:1.8rem;}
.cat-num{
  font-family:var(--font-display); font-size:2.6rem; font-weight:700; line-height:0.9; color:transparent;
  -webkit-text-stroke:1.4px var(--signal);
}
.cat-title{margin:0; font-size:clamp(1.5rem,3vw,2.1rem);}
.cat-block > p{margin:0 0 2rem; color:rgba(245,241,232,0.75); max-width:44em;}
.cat-block .brand-plate-row{justify-content:flex-start;}
.cat-more{
  display:inline-flex; align-items:center; gap:0.5em; margin-top:1.8rem; font-family:var(--font-mono);
  font-size:0.82rem; color:var(--signal);
}
.cat-more:hover{text-decoration:underline;}
@media (max-width:640px){ .cat-block .brand-plate-row{justify-content:center;} }

/* ---------- Scheda prodotto oleario: foto su fondo chiaro ----------
   Le foto di catalogo delle macchine olearie sono scontornate su bianco:
   dentro un pannello scuro il rettangolo bianco stonerebbe, quindi il
   media ha fondo crema e la foto è contenuta (contain), non ritagliata. */
.media-product{background:var(--cream);}
.media-product img{object-fit:contain !important; padding:1.6rem; filter:none !important;}
.satellite-media.media-product{height:170px;}
.satellite-media.media-product img{padding:1rem;}
/* Griglia con numero di schede che non riempie la riga (es. 5 categorie
   Sansone: 4 + 1): senza un tetto alla larghezza la scheda orfana si
   allarga per tutta la riga - stesso problema dei grid a conteggio
   variabile documentato per .tile-grid. */
.satellite-grid.center-cap{justify-content:center;}
.satellite-grid.center-cap .satellite-card{max-width:300px;}
/* altezza media uniforme: in queste griglie convivono foto di catalogo
   (.media-product, 170px) e fotografie reali, che altrimenti resterebbero
   ai 150px del default e disallineerebbero i titoli. */
.satellite-grid.center-cap .satellite-media{height:170px;}
.spec-list{list-style:none; margin:1.4rem 0 0; padding:0;}
.spec-list li{
  position:relative; padding:0.55rem 0 0.55rem 1.6rem; color:rgba(245,241,232,0.78); font-size:1rem;
  border-top:1px solid var(--panel-border);
}
.spec-list li:first-child{border-top:none;}
.spec-list li::before{
  content:""; position:absolute; left:0; top:1.15rem; width:7px; height:7px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 10px rgba(124,244,255,0.6);
}

/* ---------- Banner testuale forte (Usato, Abbigliamento) ---------- */
.statement{
  max-width:960px; margin:0 auto; padding:2.8rem 2.6rem; border-radius:18px;
  background:linear-gradient(160deg, rgba(142,164,184,0.10), rgba(142,164,184,0.03));
  border:1px solid var(--panel-border); box-shadow:0 22px 56px rgba(0,0,0,0.3);
}
.statement h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 0.4rem;}
.statement .statement-sub{
  font-family:var(--font-mono); font-size:0.86rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--signal); margin:0 0 1.6rem;
}
.statement p{color:rgba(245,241,232,0.78); font-size:1.03rem; max-width:60em;}
.statement p:last-child{margin-bottom:0;}
@media (max-width:640px){ .statement{padding:2rem 1.4rem;} }

/* ---------- Nota "area gestita dal cliente" (catalogo usato) ---------- */
.cms-note{
  max-width:960px; margin:2.4rem auto 0; padding:1.1rem 1.4rem; border:1px dashed var(--panel-border);
  border-radius:10px; font-family:var(--font-mono); font-size:0.8rem; color:rgba(245,241,232,0.6);
  display:flex; flex-wrap:wrap; gap:0.5rem 1rem; align-items:center;
}
.cms-note strong{color:var(--signal); font-weight:500;}

/* ---------- Mappa Google ---------- */
.map-embed{
  margin-top:2.2rem; border:1px solid var(--panel-border); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,0.3);
}
.map-embed iframe{display:block; width:100%; height:340px; border:0; filter:grayscale(0.25) contrast(1.05);}
.map-embed-full iframe{height:440px;}
@media (max-width:640px){ .map-embed iframe{height:280px;} }

/* ---------- Sigillo "anni" (homepage): cerchio a doppio anello ---------- */
.stat-cluster-layout{flex-direction:column; align-items:center; gap:2.8rem;}
.stat-minor-row{display:flex; gap:4rem; justify-content:center; flex-wrap:wrap;}

.years-seal{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; width:200px; height:200px;
}
.years-seal::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(124,244,255,0.30);
}
.years-seal::after{
  content:''; position:absolute; inset:14px; border-radius:50%;
  border:1.5px solid var(--signal);
  box-shadow:0 0 36px rgba(124,244,255,0.20), inset 0 0 20px rgba(124,244,255,0.06);
}
.years-seal-num{
  font-family:var(--font-display); font-size:5rem; font-weight:700; line-height:1;
  color:var(--signal); position:relative; z-index:1;
}
.years-seal-sub{
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(245,241,232,0.55); margin-top:0.4rem; position:relative; z-index:1;
}
@media (max-width:640px){
  .years-seal{width:164px; height:164px;}
  .years-seal-num{font-size:4rem;}
  .stat-minor-row{gap:2.6rem;}
}

/* ---------- Badge con icona (stile precedente, tenuto per compatibilità) ---------- */
.stat-val:has(.stat-icon){display:inline-flex; align-items:center; gap:0.6rem;}
.stat-item .stat-icon{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(124,244,255,0.4);
  color:var(--signal); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(124,244,255,0.22);
}
.stat-item .stat-icon svg{width:22px; height:22px;}
.stat-row{gap:2.4rem 3rem;}

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

/* ---------- Stagger reveal (griglie: reparti, officina, usato, marchi) ----------
   Le card devono comparire chiaramente una alla volta, non tutte insieme:
   ritardi ampi (180ms) invece di una sfumatura quasi impercettibile.
   Il reveal (translateY/scale) e il tilt al mouse (rotateX/rotateY, vedi sotto)
   agiscono entrambi sulla proprietà `transform` dello stesso elemento: per non
   farli annullare a vicenda (l'ultima dichiarazione "transform"/"transition" in
   cascata sovrascriverebbe l'altra per intero, non le somma) sono composti in
   un'unica dichiarazione tramite custom property, invece di due regole separate
   che si contendono la stessa proprietà. */
.stagger-item{
  --reveal-y:28px; --reveal-scale:0.97; --tilt-x:0deg; --tilt-y:0deg;
  opacity:0;
  transform:translateY(var(--reveal-y)) scale(var(--reveal-scale)) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:opacity .5s ease, transform .5s ease, border-color .2s ease;
  will-change:transform;
}
.stagger.in-view .stagger-item{opacity:1; --reveal-y:0px; --reveal-scale:1;}
.stagger.in-view .stagger-item:nth-child(1){transition-delay:0s;}
.stagger.in-view .stagger-item:nth-child(2){transition-delay:0.18s;}
.stagger.in-view .stagger-item:nth-child(3){transition-delay:0.36s;}
.stagger.in-view .stagger-item:nth-child(4){transition-delay:0.54s;}
.stagger.in-view .stagger-item:nth-child(5){transition-delay:0.72s;}
.stagger.in-view .stagger-item:nth-child(6){transition-delay:0.9s;}
.stagger.in-view .stagger-item:nth-child(7){transition-delay:1.08s;}
.stagger.in-view .stagger-item:nth-child(8){transition-delay:1.26s;}

/* ---------- Tilt card (parallasse 3D leggera al passaggio del mouse) ----------
   Il JS imposta solo --tilt-x/--tilt-y (vedi main.js); il valore vero e proprio
   di `transform` resta definito una sola volta, su .stagger-item qui sopra. */
.tilt-card:hover{transition:opacity .5s ease, transform .12s linear, border-color .2s ease;}

/* ============================================================
   Utility classes
   Estratte dagli stili inline che comparivano nell'HTML (spaziature
   puntuali, allineamenti, poche eccezioni di colore/posizione) per
   tenere ogni pagina priva di attributi style="" mantenendo lo
   stesso identico risultato visivo. Nomi corti e descrittivi,
   nessun framework/preprocessore: solo classi singole componibili.
   ============================================================ */
.jc-center{justify-content:center;}
.jc-start{justify-content:flex-start;}
.text-center{text-align:center;}
.flex-shrink-0{flex-shrink:0;}
.flex-full{flex:1 1 100%;}
.icon-inline{vertical-align:-2px;}

.mb-0{margin-bottom:0;}
.mb-06{margin-bottom:0.6rem;}
.mb-16{margin-bottom:1.6rem;}
.mb-18{margin-bottom:1.8rem;}
.mb-20{margin-bottom:2rem;}
.mb-22{margin-bottom:2.2rem;}
.mb-24{margin-bottom:2.4rem;}
.mb-26{margin-bottom:2.6rem;}

.mt-14{margin-top:1.4rem;}
.mt-16{margin-top:1.6rem;}
.mt-18{margin-top:1.8rem;}
.mt-20{margin-top:2rem;}
.mt-24{margin-top:2.4rem;}
.mt-26{margin-top:2.6rem;}
.mt-32{margin-top:3.2rem;}
.mt-40{margin-top:4rem;}
.mt-10-auto{margin:1rem auto 0;}
.mt-12-auto{margin:1.2rem auto 0;}

.pt-30{padding-top:3rem;}
.py-30{padding-top:3rem; padding-bottom:3rem;}

.max-w-820{max-width:820px;}
.max-w-880{max-width:880px;}

.text-85{color:rgba(245,241,232,0.85);}
.text-dim-sm{color:rgba(245,241,232,0.55); font-size:0.85rem;}
.text-clamp-sub{font-size:clamp(1.5rem,3vw,2.1rem);}
.no-border-top{border-top:none; padding-top:0;}

.obj-pos-top20{object-position:center 20%;}
.logo-frame-white{object-fit:contain; padding:3rem; background:#fff;}
.media-frame-center{background:var(--panel); display:flex; align-items:center; justify-content:center;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .stagger-item{opacity:1; transform:none; transition:none; --tilt-x:0deg; --tilt-y:0deg;}
  html{scroll-behavior:auto;}
}