/* =====================================================================
   Walter Tosto S.p.A. — Concept sito web 2026
   --------------------------------------------------------------------- */

/* ── HOVER ZOOM SU IMMAGINI ── */
.sector-card img,
.mach-card img,
.mach-card image-slot,
.news-card img,
.framed,
.sdg-card img,
.team-card image-slot,
.process-card image-slot,
.split-img image-slot,
.split-eng image-slot {
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s;
  will-change: transform;
}
.sector-card:hover img,
.mach-card:hover img,
.mach-card:hover image-slot,
.news-card:hover img,
.sdg-card:hover img,
.team-card:hover image-slot {
  transform: scale(1.05);
}
.framed:hover,
.process-card:hover image-slot,
.split-img:hover image-slot,
.split-eng:hover image-slot {
  transform: scale(1.03);
  box-shadow: 0 12px 36px rgba(0,0,0,.15);
}
/* Contenitore overflow hidden per evitare ritagli */
.sector-card,
.mach-card,
.news-card {
  overflow: hidden;
}

/* ── FINE HOVER ZOOM ──
   Walter Tosto S.p.A. — Concept sito web 2026
   Sistema visivo "clean & istituzionale"
   ---------------------------------------------------------------------
   Tutti i colori, spaziature e font sono definiti come variabili CSS
   qui sotto: per cambiare l'aspetto del sito basta modificare questa
   sezione, senza toccare l'HTML.
   ===================================================================== */

:root {
  /* --- Palette ------------------------------------------------------ */
  --navy-900: #505052;   /* sfondo scuro profondo (header, footer) */
  --navy-800: #505052;   /* navy istituzionale principale */
  --navy-700: #505052;   /* superfici scure secondarie */
  --steel-500: #505052;  /* blu acciaio */
  --accent:    #e08a1e;  /* ambra / rame — richiama metallo e saldatura */
  --accent-dk: #c4711a;

  --ink:       #505052;  /* testo principale */
  --muted:     #5f6c79;  /* testo secondario */
  --line:      #e3e8ee;  /* bordi sottili */
  --surface:   #f5f7fa;  /* sfondo sezioni chiare */
  --surface-2: #eef2f6;
  --white:     #ffffff;

  /* --- Tipografia --------------------------------------------------- */
  --font-head: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* --- Layout ------------------------------------------------------- */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 48px -22px rgba(8, 24, 43, 0.35);
  --shadow-sm: 0 8px 24px -14px rgba(8, 24, 43, 0.30);
  --header-h: 76px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
/* <picture> avvolge le immagini servite in WebP con riserva JPEG: senza
   questa riga resterebbe un elemento inline fra il contenitore e la
   <img>, e le regole che dimensionano l'immagine perderebbero presa. */
picture { display: block; }
/* Un elemento con display inline nello style= vincerebbe sulla regola
   del browser per [hidden]: serve !important perche' i pulsanti dei
   documenti restino nascosti finche' il PDF non c'e'. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}

/* --- Utility ------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-block: .6rem .4rem; }
.section-lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* --- Bottoni ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight: 600;
  font-family: var(--font-head); font-size: .95rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(224,138,30,.7); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-dark { background: var(--navy-800); color: #fff; }
.btn-dark:hover { background: var(--navy-700); transform: translateY(-2px); }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-weight: 600; color: var(--steel-500); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.5);
  backdrop-filter: saturate(140%) blur(10px);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; }

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; align-items: center; gap: .35rem; }
.main-nav a.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: 8px; font-weight: 500; font-size: .96rem;
  color: var(--navy-800); transition: color .2s, background .2s;
  white-space: nowrap;   /* "Lavora con noi" non va spezzato su due righe */
}
.main-nav a.nav-link:hover { color: var(--accent); background: rgba(0,0,0,.04); }
/* Pagina corrente: la voce di menu resta segnata (aria-current lo dice
   anche ai lettori di schermo, quindi non serve una classe in piu). */
.main-nav a.nav-link[aria-current="page"] { color: var(--accent); position: relative; }
.main-nav a.nav-link[aria-current="page"]::before {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-item { position: relative; }
.nav-item.has-mega > a::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
  margin-left: .15rem; opacity: .7;
}

/* Header solido (allo scroll o su pagine interne) */
.site-header.solid, .site-header.inner {
  background: rgba(255,255,255,.98);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 20px -4px rgba(0,0,0,.08);
}

/* Sub-menu semplice (Azienda) */
.sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  padding-top: 14px;
  min-width: 200px; background: var(--white); color: var(--ink);
  border-radius: 14px; box-shadow: 0 12px 40px -8px rgba(80,80,82,.18);
  padding: .5rem;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-item.has-mega:hover .sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sub a {
  display: block; padding: .6rem 1rem; border-radius: 8px;
  font-size: .93rem; font-weight: 500; color: var(--ink);
  transition: background .2s;
  white-space: nowrap;
}
.sub a:hover { background: var(--surface); }

/* Mega menu prodotti */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  padding-top: 14px;
  width: min(760px, 88vw); background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-item.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega a {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 10px;
  font-weight: 500; transition: background .2s;
}
.mega a:hover { background: var(--surface); }
.mega a img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.mega a span small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }

/* Azioni header (lingua, ricerca) */
.header-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.lang-switch { display: flex; align-items: center; background: rgba(0,0,0,.07); border-radius: 999px; padding: 3px; }
.lang-switch button {
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  font-family: var(--font-head); color: var(--muted); transition: all .2s;
}
.lang-switch button.active { background: #fff; color: var(--navy-800); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-800); transition: background .2s; }
.icon-btn:hover { background: rgba(0,0,0,.06); }
.icon-btn svg { width: 20px; height: 20px; }

.menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; color: #fff; }
.menu-toggle span { width: 24px; height: 2px; background: currentColor; transition: .3s; }
/* Sull'intestazione piena le tre barrette erano bianche su bianco: invisibili. */
.site-header.solid .menu-toggle,
.site-header.inner .menu-toggle { color: var(--navy-800); }

/* =====================================================================
   HERO con video di sfondo
   ===================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; color: #fff; overflow: hidden; }
/* Tre livelli espliciti anche qui — immagine, velo, testo — come nelle
   fasce interne. Con hero-media a z-index negativo lo spazio immagine
   finiva dietro a tutto e non riceveva il doppio clic dell'inquadratura. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero > .hero-overlay { z-index: 1; }
.hero > .container, .hero .hero-content { position: relative; z-index: 2; }
.hero-media video,
.hero-media .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Effetto "vivo" anche senza file video: lento zoom sull'immagine poster */
.hero-media .hero-poster { animation: slowZoom 22s ease-in-out infinite alternate; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
/* Il velo scuro sopra l'immagine e' decorativo: se intercetta il puntatore
   il doppio clic non arriva mai allo spazio immagine, e l'inquadratura
   diventa irraggiungibile. pointer-events:none lo rende trasparente al
   mouse — il testo sopra (titolo, briciole di pane) resta cliccabile. */
/* Il video di sfondo sta sopra lo spazio immagine e, essendo senza
   comandi, non ha motivo di ricevere clic: se li riceve intercetta il
   doppio clic dell'inquadratura. Vale anche dove il file .mp4 non c'e'
   ancora: l'elemento resta comunque un rettangolo trasparente. */
.hero-media video { pointer-events: none; }
.hero-overlay, .hero-veil { pointer-events: none; }

/* Scelta dell'inquadratura sulle immagini di apertura.
   Il testo della fascia sta sopra l'immagine, quindi intercetta il doppio
   clic che aprirebbe la modalita' inquadratura. Solo quando c'e' una
   sessione admin attiva (classe messa da image-slot.js) il blocco di testo
   diventa trasparente al puntatore, cosi' il doppio clic arriva
   all'immagine; i link restano cliccabili.
   Il selettore :has() prende qualunque fascia contenga uno spazio
   immagine, comprese quelle che verranno; l'elenco esplicito sotto e' la
   riserva per i browser che non lo supportano. */
.wt-slot-edit section:has(> .hero-media) > .container { pointer-events: none; }
.wt-slot-edit .hero > .container,
.wt-slot-edit .page-hero > .container,
.wt-slot-edit .sus-hero > .container,
.wt-slot-edit .att-hero > .container,
.wt-slot-edit .careers-hero > .container,
.wt-slot-edit .contact-hero > .container,
.wt-slot-edit .weld-hero > .container,
.wt-slot-edit .eng-hero > .container,
.wt-slot-edit .mach-hero > .container,
.wt-slot-edit .rs-hero > .container { pointer-events: none; }
.wt-slot-edit section:has(> .hero-media) > .container a,
.wt-slot-edit section:has(> .hero-media) > .container button { pointer-events: auto; }
.wt-slot-edit .hero > .container a,
.wt-slot-edit .hero > .container button,
.wt-slot-edit .page-hero > .container a,
.wt-slot-edit .sus-hero > .container a,
.wt-slot-edit .att-hero > .container a,
.wt-slot-edit .careers-hero > .container a,
.wt-slot-edit .contact-hero > .container a,
.wt-slot-edit .weld-hero > .container a,
.wt-slot-edit .eng-hero > .container a,
.wt-slot-edit .mach-hero > .container a,
.wt-slot-edit .rs-hero > .container a { pointer-events: auto; }

.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  /* Nero, non grigio: scurisce senza ingrigire, i colori della foto e del
     video restano pieni. Stessa forma di prima: uno dall'alto per il testo
     in mezzo, uno da sinistra dove sta il blocco di testo. */
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.86) 100%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.12) 70%);
}
.hero-content { max-width: 760px; padding-top: var(--header-h); }
.hero .eyebrow { color: #ffd9a0; }
.hero .eyebrow::before { background: #ffd9a0; }
.hero h1 {
  color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; margin-block: 1rem 1.2rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero h1 .accent { color: var(--accent); }
.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.92); max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.7); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
}
.hero-scroll .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px; position: relative; }
.hero-scroll .mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 7px; background: #fff; border-radius: 2px; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0%{opacity:1; top:7px;} 100%{opacity:0; top:18px;} }

.video-badge {
  position: absolute; top: calc(var(--header-h) + 1rem); right: var(--gutter);
  display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem;
  background: rgba(80,80,82,.45); border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85);
  backdrop-filter: blur(4px); z-index: 3;
}
.video-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5252; animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* =====================================================================
   STATS / numeri
   ===================================================================== */
.stats { background: var(--navy-800); color: #fff; }
.stats .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; }
.stat { text-align: center; padding: .5rem; }
.stat .num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--accent); line-height: 1; }
.stat .label { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: .5rem; letter-spacing: .02em; }

/* =====================================================================
   INTRO / chi siamo
   ===================================================================== */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split img.framed { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.quote-block { border-left: 3px solid var(--accent); padding-left: 1.3rem; margin: 1.6rem 0; font-style: italic; color: var(--navy-700); font-size: 1.15rem; }

/* =====================================================================
   PRODOTTI / settori
   ===================================================================== */
.sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.sector-card {
  position: relative; display: flex; flex-direction: column; gap: .7rem;
  padding: 1.6rem 1.4rem; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  overflow: hidden;
}
.sector-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.sector-card:hover::before { transform: scaleX(1); }
.sector-card img { width: 52px; height: 52px; object-fit: contain; }
.sector-card h3 { font-size: 1.18rem; }
.sector-card p { color: var(--muted); font-size: .92rem; }
.sector-card .more { margin-top: auto; color: var(--steel-500); font-weight: 600; font-size: .9rem; font-family: var(--font-head); }
.sector-card.featured { background: var(--navy-800); border-color: var(--navy-800); }
.sector-card.featured h3, .sector-card.featured p { color: #fff; }
.sector-card.featured p { color: rgba(255,255,255,.75); }
.sector-card.featured .tag { position: absolute; top: 1.1rem; right: 1.1rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.sector-card.featured img { filter: brightness(0) invert(1); }

/* =====================================================================
   FOCUS NUCLEARE (banda scura immersiva)
   ===================================================================== */
.focus { position: relative; color: #fff; overflow: hidden; }
.focus-media { position: absolute; inset: 0; z-index: -2; }
.focus-media img, .focus-media video { width: 100%; height: 100%; object-fit: cover; }
/* Con la foto ITER nuova, molto piu' chiara, sul grigio il titolo bianco
   arrivava a 1.00:1 nel punto peggiore: illeggibile. Col nero 21:1. */
.focus-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.74) 45%, rgba(0,0,0,.42) 100%); }
.focus .section-title { color: #fff; }
.focus-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.focus-points { display: grid; gap: 1rem; margin-top: 1.8rem; }
.focus-point { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); }
.focus-point .pi { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(224,138,30,.18); color: var(--accent); }
.focus-point .pi svg { width: 22px; height: 22px; }
.focus-point h4 { color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }
.focus-point p { color: rgba(255,255,255,.72); font-size: .9rem; }
.focus-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.proj-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); overflow: hidden; }
.proj-card img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.proj-card .pc-body { padding: 1rem 1.1rem; }
.proj-card h4 { color: #fff; font-size: 1.05rem; }
.proj-card p { color: rgba(255,255,255,.7); font-size: .85rem; margin-top: .3rem; }

/* =====================================================================
   ATTIVITÀ / capabilities
   ===================================================================== */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cap-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.cap-card img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.cap-card .cc-body { padding: 1.3rem 1.4rem; }
.cap-card h3 { font-size: 1.2rem; }
.cap-card p { color: var(--muted); font-size: .93rem; margin-top: .4rem; }

/* =====================================================================
   NEWS
   ===================================================================== */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.news-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.news-card img { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.news-card .nc-body { padding: 1.2rem 1.3rem 1.5rem; }
.news-card .date { font-size: .78rem; color: var(--accent); font-weight: 600; font-family: var(--font-head); letter-spacing: .04em; }
.news-card h3 { font-size: 1.12rem; margin-block: .5rem .6rem; }
.news-card p { color: var(--muted); font-size: .9rem; }

/* =====================================================================
   CTA finale
   ===================================================================== */
.cta-band { background: linear-gradient(120deg, var(--navy-900), var(--steel-500)); color: #fff; border-radius: var(--radius); padding: clamp(2.2rem, 5vw, 3.6rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 22ch; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding-top: clamp(3rem, 6vw, 5rem); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-top img.flogo { height: 34px; margin-bottom: 1.2rem; }
.footer-top h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--font-head); }
.footer-top a { display: block; padding: .28rem 0; color: rgba(255,255,255,.7); font-size: .92rem; transition: color .2s; }
.footer-top a:hover { color: var(--accent); }
.footer-top address { font-style: normal; font-size: .92rem; line-height: 1.8; }
.socials { display: flex; gap: .6rem; margin-top: 1.2rem; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; transition: background .2s, transform .2s; }
.socials a:hover { background: var(--accent); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; font-size: .82rem; }

/* =====================================================================
   PAGINA INTERNA — hero sezione
   ===================================================================== */
.page-hero { position: relative; min-height: clamp(380px, 52vh, 620px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy-800); }
/* L'immagine dell'hero interno era invisibile: con z-index negativo veniva
   dipinta DIETRO al fondo navy della sezione stessa. Ora i tre livelli sono
   espliciti — immagine, velo, testo — e il fondo navy resta solo come
   colore di attesa mentre l'immagine carica. */
.page-hero .hero-media { z-index: 0; }
/* Velo ancorato IN PIXEL al blocco di testo, non in percentuale della
   fascia: la parte scura resta incollata al testo e ogni pixel di
   altezza in piu' diventa foto pulita in cima. Nero e non grigio:
   scurisce senza ingrigire, i colori della foto restano pieni. */
.page-hero .hero-overlay { z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.80) 0, rgba(0,0,0,.70) 260px, rgba(0,0,0,.20) 380px, rgba(0,0,0,0) 450px); }
.page-hero .ph-content { position: relative; z-index: 2; padding-bottom: 3.2rem; padding-top: calc(var(--header-h) + 2rem); max-width: 820px; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.page-hero .ph-content .breadcrumb,
.page-hero p.lead { text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: .8rem; }
.page-hero .breadcrumb a:hover { color: var(--accent); }
.page-hero p.lead { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 60ch; margin-top: 1rem; }
/* Da telefono il testo riempie da se' la fascia: alzarla oltre questo
   non mostra piu' foto, spinge solo il contenuto sotto la piega.
   svh invece di vh: con i vh la fascia salta quando la barra degli
   indirizzi si ritrae. */
@media (max-width: 767px) {
  .page-hero { min-height: clamp(340px, 46svh, 460px); }
  .page-hero .hero-overlay { background: linear-gradient(to top, rgba(0,0,0,.86) 0, rgba(0,0,0,.76) 55%, rgba(0,0,0,.52) 100%); }
  .page-hero .ph-content .breadcrumb { text-shadow: 0 1px 3px rgba(0,0,0,.9); }
}

/* ── Figura dentro il testo ───────────────────────────────────────────
   Lo spazio si riempie dal pannello; finche' e' vuoto mostra il pannello
   grigio, quindi la pagina non resta con un buco. Regole qui e non nel
   <style> della singola pagina: si cambiano in un posto solo. */
.wt-figura { margin: 2.4rem 0; }
.wt-figura figcaption {
  margin-top: .7rem; font-size: .84rem; color: var(--muted);
  line-height: 1.6; max-width: 60ch;
}
.wt-figura.affiancate { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.wt-figura.affiancate figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 780px) {
  .wt-figura.affiancate { grid-template-columns: 1fr; }
}

/* ── Schede prodotto gestite dal pannello ─────────────────────────────
   Tre colonne su desktop, e l'ultima riga puo' restare spaiata: due
   schede su tre, o una. Sotto i 980 px due colonne, sotto i 640 una. */
.wt-prod-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 1.8rem; margin-top: 2.4rem; }
@media (max-width: 980px) { .wt-prod-griglia { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; } }
@media (max-width: 640px) { .wt-prod-griglia { grid-template-columns: 1fr; } }

.wt-prod { display: flex; flex-direction: column; }
/* 3:2, il formato di una reflex. Il ritaglio si sceglie dal pannello. */
.wt-prod-foto {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden; border-radius: var(--radius); background: var(--surface);
  padding: 0; border: 0; font: inherit; color: inherit;
}
.wt-prod-foto image-slot { display: block; width: 100%; height: 100%; }
.wt-prod[data-ingrandibile] .wt-prod-foto { cursor: zoom-in; }
.wt-prod[data-ingrandibile] .wt-prod-foto:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wt-prod-titolo {
  font-family: var(--font-head); font-weight: 700; color: var(--navy-800);
  font-size: 1.02rem; line-height: 1.35; margin-top: 1rem;
}
/* La riga arancione che divide il titolo dalla descrizione */
.wt-prod-riga { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: .7rem 0 .85rem; }
/* Gli "a capo" scritti nel pannello vanno rispettati: il testo arriva
   come testo semplice e l'HTML, da solo, schiaccerebbe ogni ritorno a
   capo in uno spazio. pre-line tiene i capoversi e continua a mandare a
   capo da solo le righe lunghe. */
.wt-prod-desc { font-size: .9rem; color: var(--muted); line-height: 1.7; white-space: pre-line; }

/* La foto ingrandita */
.wt-lente {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); padding: 2.5rem 2rem 3.4rem;
}
.wt-lente[data-aperta] { display: flex; }
.wt-lente img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.wt-lente-chiudi {
  position: absolute; top: .9rem; right: 1.1rem; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s;
}
.wt-lente-chiudi:hover { background: rgba(255,255,255,.26); }
.wt-lente-dida {
  position: absolute; bottom: 1.1rem; left: 2rem; right: 2rem; text-align: center;
  color: rgba(255,255,255,.82); font-size: .9rem;
}

.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 2.4rem; margin-bottom: .8rem; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8rem; margin-bottom: .5rem; color: var(--steel-500); }
.prose p { margin-bottom: 1rem; color: #38444f; }

.project-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; margin-block: 3rem; }
.project-block.flip .pb-media { order: 2; }
.project-block img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 340px; object-fit: cover; }
.project-block .badge-n { display: inline-block; background: var(--surface-2); color: var(--steel-500); font-weight: 600; font-size: .8rem; padding: .3rem .8rem; border-radius: 999px; margin-bottom: .8rem; font-family: var(--font-head); }
.project-block h3 { font-size: 1.5rem; color: var(--navy-800); margin-bottom: .6rem; }
.project-block p { color: var(--muted); }

.cert-band { background: var(--surface); }
.cert-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.cert-chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.2rem; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--navy-800); }
.cert-chip span { color: var(--accent); }

/* =====================================================================
   MOBILE
   ===================================================================== */
.mobile-nav { display: none; }

/* =====================================================================
   NAVIGAZIONE: soglia del menu a scomparsa
   Le otto voci con la barra orizzontale stanno in una riga sola sopra i
   1280px. Con la vecchia soglia di 860px, in tutta la fascia intermedia il
   menu andava su due righe e le icone finivano fuori dallo schermo.
   ===================================================================== */
@media (max-width: 1279px) {
  .main-nav, .header-actions .lang-switch, .header-actions .icon-btn { display: none; }
  .menu-toggle { display: flex; }
  /* Senza la barra di navigazione (che portava margin-left:auto) il pulsante
     del menu resterebbe appiccicato al logo invece di stare a destra. */
  .header-actions { margin-left: auto; }

  /* menu mobile a comparsa */
  .mobile-nav {
    display: block; position: fixed; inset: 0; z-index: 200; background: var(--navy-900);
    transform: translateX(100%); transition: transform .35s var(--ease); padding: 5rem var(--gutter) 2rem; overflow-y: auto;
  }
  .mobile-nav.open { transform: translateX(0); }
  .mobile-nav a { display: block; color: #fff; font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .mobile-nav .mn-sub a { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.7); padding-left: 1rem; border: none; }
  .mobile-nav .mn-close { position: absolute; top: 1.4rem; right: var(--gutter); width: 44px; height: 44px; color: #fff; font-size: 2rem; }
  .mobile-nav .mn-lang { display: flex; gap: .5rem; margin-top: 1.5rem; }
  .mobile-nav .mn-lang button { flex: 1; padding: .7rem; border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }
  .mobile-nav .mn-lang button.active { background: var(--accent); }
}

@media (max-width: 1080px) {
  .stats .grid { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1rem; }
  .sectors-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .split, .focus-grid, .project-block, .project-block.flip .pb-media { grid-template-columns: 1fr; }
  .project-block.flip .pb-media { order: 0; }
  .cap-grid, .news-grid { grid-template-columns: 1fr 1fr; }
  .sectors-grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .stats .grid { grid-template-columns: 1fr 1fr; }
  .cap-grid, .news-grid, .focus-projects, .sectors-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}

/* Animazioni di ingresso */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media .hero-poster { animation: none; }
}