/* =========================================================
   OPTIMA LUX — foglio di stile del sito
   Colori, font e misure sono definiti una sola volta qui sotto
   (:root). Cambiando un valore si aggiorna tutto il sito.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..600&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --verde:#348F55;--verde-scuro:#1A6134;--verdino:#E8F3EC;--bianco-brand:#F6F9F7;
  --grigio-sfondo:var(--verdino);--bordo:var(--verdino);--bordo-forte:var(--testo-tenue);
  --testo-forte:#1F3328;--testo:#1F3328;--testo-tenue:#737C86;
  --scuro-header:#1F3328;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',Menlo,monospace;
  --larghezza:1200px;--raggio:8px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-padding-top:80px;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:300;font-size:16px;line-height:24px;color:var(--testo);background:var(--bianco-brand);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--verde);text-decoration:none}
a:hover{color:var(--verde-scuro);text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,p,ul{margin:0}
.contenitore{max-width:var(--larghezza);margin:0 auto;padding-left:32px;padding-right:32px}

/* ---------- Pulsanti ---------- */
.pulsante{display:inline-flex;align-items:center;justify-content:center;font:450 16px/24px var(--font);letter-spacing:-0.01em;padding:16px 32px;border:1px solid var(--verde);border-radius:2px;background:var(--verde);color:var(--bianco-brand);white-space:nowrap;cursor:pointer;transition:background .15s}
.pulsante:hover{background:var(--verde-scuro);border-color:var(--verde-scuro);color:var(--bianco-brand);text-decoration:none}
.pulsante.piccolo{font-size:12px;line-height:18px;padding:8px 16px}

/* ---------- Barra di navigazione ---------- */
.navbar{position:sticky;top:0;z-index:10;background:var(--bianco-brand);border-bottom:1px solid var(--bordo)}
.navbar .contenitore{height:68px;display:flex;align-items:center;gap:64px}
.navbar .simbolo{height:30px;width:auto}
.navbar nav{display:flex;gap:32px}
.navbar nav a{font-size:12px;font-weight:450;color:var(--testo);padding-bottom:2px;border-bottom:2px solid transparent}
.navbar nav a:hover{color:var(--verde);text-decoration:none}
.navbar nav a.attivo{color:var(--verde);border-bottom-color:var(--verde)}
.navbar .lingua{margin-left:auto;display:flex;align-items:center;gap:2px;font:12px var(--mono);color:var(--testo-tenue)}
.navbar .lingua a{padding:2px 4px;color:var(--testo-tenue)}
.navbar .lingua a.attiva{color:var(--testo-forte);font-weight:600}
.navbar .lingua a:hover{text-decoration:none;color:var(--verde)}

/* ---------- Logo per esteso ---------- */
.logo-esteso{display:inline-flex;align-items:center;gap:8px;line-height:1;white-space:nowrap}
.logo-esteso img{height:28px;width:auto}
.logo-esteso span{font-size:36px;font-weight:600;letter-spacing:-0.02em;color:var(--testo-forte)}
.logo-esteso b{font-weight:600;color:var(--verde)}

/* ---------- Header con onde (pagina Servizi) ---------- */
.hero-onde{position:relative;overflow:hidden;background:var(--scuro-header);color:var(--bianco-brand)}
.hero-onde canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-onde .testo{position:relative;text-shadow:0 2px 18px rgba(31,51,40,.95);max-width:var(--larghezza);margin:0 auto;padding:128px 32px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:32px}
.hero-onde h1{font-size:clamp(48px,8vw,88px);line-height:1;font-weight:600;letter-spacing:-0.02em}
.hero-onde h1{display:inline-flex;align-items:center;gap:.165em;white-space:nowrap;color:var(--bianco-brand)}.hero-onde h1 .simbolo-hero{height:.826em;width:auto;filter:drop-shadow(0 2px 14px rgba(31,51,40,.9))}.hero-onde h1 .nome span{color:var(--verde);margin-left:.18em}
.hero-onde .motto{font-size:20px;line-height:1.3;font-weight:450;font-variant-caps:all-small-caps;letter-spacing:.06em}
.hero-onde .intro{max-width:560px;font-size:16px;line-height:1.55;color:var(--bianco-brand)}

/* ---------- Header grigio (RayJack, Contatti) ---------- */
.hero-grigio{background:var(--grigio-sfondo)}
.hero-grigio .contenitore{padding-top:120px;padding-bottom:120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:64px;align-items:center}
.hero-grigio .contenitore.stretto{max-width:760px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.hero-grigio .colonna{display:flex;flex-direction:column;gap:16px}
.hero-grigio .colonna .pulsante{align-self:flex-start;margin-top:16px}
.hero-grigio h1{font-size:36px;line-height:44px;font-weight:600;letter-spacing:-0.02em;color:var(--testo-forte)}
.hero-grigio p{font-size:16px;line-height:28px;color:var(--testo-tenue)}
.hero-grigio .logo-prodotto{width:100%;max-width:460px}
/* Header con immagine di sfondo dietro al logo (RayJack) */
.hero-grigio.con-immagine{background:linear-gradient(90deg,var(--grigio-sfondo) 30%,rgba(232,243,236,.55)),url("../img/rj-obiettivo-multilente.png") center/cover no-repeat}
.hero-grigio .targa{justify-self:center;background:rgba(246,249,247,.88);border-radius:var(--raggio);padding:32px;box-shadow:0 8px 32px rgba(31,51,40,.12)}

/* Etichette piccole in maiuscolo */
.etichetta{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:450;letter-spacing:.08em;text-transform:uppercase;color:var(--verde)}
.etichetta::before{content:"";width:28px;height:2px;background:var(--verde)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:450;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-forte)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verde)}

/* ---------- I 3 vantaggi (dentro l'invito finale, pagina Servizi) ---------- */
.cta .vantaggi{padding-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.cta .vantaggio{display:flex;flex-direction:column;gap:16px}
.cta .vantaggio h3{margin:0;font-size:20px;line-height:1.2;font-weight:600;color:var(--verde)}
.cta .vantaggio p{font-size:16px;line-height:1.5;text-align:left;font-weight:300;color:var(--testo-forte);text-wrap:pretty}

/* ---------- Sezioni testo + immagine ---------- */
/* Aggiungere la classe "invertita" per mettere l'immagine a sinistra */
.sezione{background:var(--bianco-brand)}
.sezione .contenitore{padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:64px;align-items:center}
.sezione .testo{display:flex;flex-direction:column;gap:16px;max-width:480px}
.sezione.invertita .testo{order:2}
.sezione.invertita .media{order:1}
.sezione .media{min-width:0}
.striscia{width:48px;height:4px;border-radius:2px;background:var(--verde)}
.sezione h2,.cta h2{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-0.02em;color:var(--testo-forte)}
.sezione p{text-wrap:pretty}
.sezione .lead{font-weight:600;color:var(--testo-forte)}
.sezione ul{padding-left:18px;display:flex;flex-direction:column;gap:8px}
.sezione.verdina{background:var(--verdino)}

/* Servizi: barre che si aprono cliccando (pagina Servizi) */
.servizi .contenitore{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:8px}
.servizio{background:var(--bianco-brand);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden}
.servizio summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:16px;padding:16px 32px;font-size:20px;line-height:32px;font-weight:600;text-align:center;color:var(--testo-forte);background:var(--verdino);transition:background .2s}
.servizio summary::-webkit-details-marker{display:none}
.servizio summary::before{content:""}
.servizio summary::after{content:"+";justify-self:end;font:300 36px/1 var(--font);color:var(--verde);transition:transform .25s}
.servizio summary:hover{background:var(--verdino)}
.servizio[open] summary::after{transform:rotate(45deg)}
.servizio .corpo{padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px;align-items:stretch}
.servizio .testo{display:flex;flex-direction:column;gap:8px}
.servizio ul{margin:0;padding-left:20px}

/* Servizi: scelta del servizio (come i moduli della Formazione) + dettaglio */
.schede{align-items:stretch}
.schede .corso{aspect-ratio:auto;min-height:170px;font:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.schede .corso:hover{border-color:var(--bordo-forte)}
.schede .corso[aria-selected="true"]{border-color:var(--verde);background:var(--verdino)}
.schede .corso[aria-selected="true"] svg{color:var(--verde)}
.sezione .contenitore.pannelli{display:block;padding-top:0}
.pannello{border:1px solid var(--bordo);border-radius:var(--raggio);padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px;align-items:stretch}
.pannello[hidden]{display:none}
.pannello .testo{display:flex;flex-direction:column;gap:8px;align-self:center}
.pannello ul{margin:0;padding-left:20px}

/* Immagini della pagina RayJack: alte quanto il testo accanto */
.sezione.rj .contenitore{align-items:stretch}
.sezione.rj .testo{align-self:center}
.sezione.rj .media{position:relative;min-height:260px}
.sezione.rj .media>.immagine{position:absolute;inset:0;height:100%;object-fit:contain;background:var(--bianco-brand)}
.collage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px}
.collage img{min-width:0;min-height:0;width:100%;height:100%;object-fit:cover;border-radius:var(--raggio)}
.collage img:first-child{grid-row:span 2}
/* Elenco puntato (Formazione) */
.elenco{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
/* Immagine singola (pagina RayJack) */
.immagine{width:100%;cursor:zoom-in}
.immagine.segnaposto{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--grigio-sfondo);border:1px dashed var(--bordo-forte);color:var(--testo-tenue);font-size:12px}

/* Header della pagina Contatti, nello stile dell'invito a scriverci */
.cta.testata .invito{padding-top:120px;padding-bottom:120px}
.cta h1{font-size:36px;line-height:1.1;font-weight:600;letter-spacing:-0.02em;color:var(--testo-forte)}

/* Sezione centrata (titolo + testo + pulsante) */
.sezione.centrata .contenitore{max-width:760px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.sezione.centrata p{font-size:16px;line-height:1.55}

/* ---------- Galleria immagini ---------- */
.galleria{margin:0;height:100%;display:flex;flex-direction:column;gap:8px}
.galleria .cornice{position:relative;flex:1;min-height:240px;background:var(--bianco-brand);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden}
.galleria .cornice img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none}
.galleria .cornice img.visibile{display:block}
.galleria button{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:999px;border:1px solid var(--bordo-forte);background:var(--bianco-brand);color:var(--testo-forte);cursor:pointer;font-size:16px;line-height:1}
.galleria .prec{left:12px}.galleria .succ{right:12px}
.galleria figcaption{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:18px;color:var(--testo-tenue)}
.galleria .contatore{font-family:var(--mono);white-space:nowrap}

/* ---------- Moduli dei corsi (Formazione) ---------- */
.corsi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.corso{aspect-ratio:1/1.15;border-radius:var(--raggio);border:2px solid var(--bordo);background:var(--bianco-brand);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:38px 12px 16px;transition:all .2s}
.corso svg{width:52px;height:52px;overflow:visible;color:var(--testo-forte)}
.corso .nome{font-weight:600;color:var(--testo-forte);text-align:center}

/* Formazione: i tre moduli (solo illustrativi, non cliccabili) */
.moduli{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.modulo{display:flex;flex-direction:column;gap:16px}
.modulo .numero{font:450 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue)}
.modulo svg{width:44px;height:44px;overflow:visible;color:var(--testo-forte)}
.modulo .nome{font-size:20px;line-height:1.2;font-weight:600;color:var(--testo-forte)}
.elenco-moduli{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.elenco-moduli li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--testo-forte)}
.elenco-moduli li::before{content:"";width:16px;height:2px;background:var(--verde)}
.sezione#formazione .media{container-type:inline-size}
.moduli.blocchi{--s:calc(100cqi/3.15);--d:calc(var(--s)*.2);display:flex;justify-content:center;align-items:center;gap:0;padding:calc(var(--s)*.3) 0}
.blocco{width:var(--s);height:var(--s);flex:none;margin-right:calc(var(--s)*.04)}.blocco:last-child{margin-right:0}
.cubo{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-30deg);transition:transform .6s ease}
.blocco:hover .cubo{transform:rotateX(-16deg) rotateY(-14deg)}
.cubo>span{position:absolute;inset:0;border-radius:calc(var(--s)*.14);background:var(--verdino)}
.cubo .fronte{display:flex;align-items:center;justify-content:center;background:var(--bianco-brand);border:1px solid var(--bordo-forte);transform:translateZ(calc(var(--d)/2))}
.cubo .strato:nth-child(2){transform:translateZ(calc(var(--d)*(0.409)))}.cubo .strato:nth-child(3){transform:translateZ(calc(var(--d)*(0.318)))}.cubo .strato:nth-child(4){transform:translateZ(calc(var(--d)*(0.227)))}.cubo .strato:nth-child(5){transform:translateZ(calc(var(--d)*(0.136)))}.cubo .strato:nth-child(6){transform:translateZ(calc(var(--d)*(0.045)))}.cubo .strato:nth-child(7){transform:translateZ(calc(var(--d)*(-0.045)))}.cubo .strato:nth-child(8){transform:translateZ(calc(var(--d)*(-0.136)))}.cubo .strato:nth-child(9){transform:translateZ(calc(var(--d)*(-0.227)))}.cubo .strato:nth-child(10){transform:translateZ(calc(var(--d)*(-0.318)))}.cubo .strato:nth-child(11){transform:translateZ(calc(var(--d)*(-0.409)))}.cubo .strato:nth-child(12){transform:translateZ(calc(var(--d)*(-0.500)))}
.cubo .fronte svg{width:52%;height:52%;overflow:visible;color:var(--testo-forte)}

/* ---------- Invito finale ---------- */
.cta{background:var(--verdino)}
.cta .invito{max-width:720px;padding-top:56px;padding-bottom:64px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px}
.cta p{font-size:16px;line-height:1.55}

/* ---------- Sezione ESA ---------- */
.esa .contenitore{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.esa .testo{max-width:none}
.esa .loghi{display:flex;flex-direction:column;align-items:center;gap:32px}
.esa .loghi img{width:100%;height:auto}
.esa .loghi .hembach-logo{max-width:300px;mix-blend-mode:multiply}

/* ---------- Chi siamo (Contatti) ---------- */
.persone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.persona{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.persona .ritratto{width:140px;height:140px;border-radius:50%;background:var(--verdino);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:600;color:var(--verde);margin-bottom:8px;overflow:hidden}
.persona .ritratto img{width:100%;height:100%;object-fit:cover}
.persona .nome{font-size:20px;font-weight:600;color:var(--testo-forte)}
.persona .ruolo{font:450 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue);margin-bottom:8px}
.persona a{display:inline-flex;align-items:center;gap:8px;font-size:12px}
.persona a svg{width:16px;height:16px;flex:none}

/* Immagini ingrandibili (pagina RayJack) */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(31,51,40,.88);display:flex;align-items:center;justify-content:center;padding:64px;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;background:var(--bianco-brand)}
.lightbox button{position:absolute;top:16px;right:20px;background:none;border:0;color:var(--bianco-brand);font:300 36px/1 var(--font);cursor:pointer}
.link-icona{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding-top:8px}
.link-icona svg{width:20px;height:20px;flex:none}

/* ---------- Footer ---------- */
.footer{background:var(--scuro-header);color:var(--bianco-brand)}
.footer .griglia{padding-top:64px;padding-bottom:32px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:64px}
.footer .linguetta{align-self:end;justify-self:start;margin-bottom:-32px;background:var(--bianco-brand);border-radius:8px 8px 0 0;padding:32px}
.footer .colonna{display:flex;flex-direction:column;gap:8px}
.footer .gruppi{display:flex;flex-direction:column;gap:32px}
.footer .titolo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bianco-brand);font-weight:450}
.footer a{font-size:12px;color:var(--bianco-brand);display:inline-flex;align-items:center;gap:8px}
.footer a svg{width:16px;height:16px}
.footer .fondo{border-top:1px solid var(--bianco-brand);padding:16px 0 64px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--bianco-brand)}

/* ---------- Schermi piccoli ---------- */
@media (max-width:800px){
  .navbar .contenitore{gap:16px}.navbar nav{gap:16px}.navbar .pulsante{display:none}
  .sezione.invertita .testo{order:1}.sezione.invertita .media{order:2}
  .esa .contenitore{grid-template-columns:1fr}
  .footer .griglia{grid-template-columns:1fr}.footer .linguetta{margin-bottom:0;border-radius:8px}
  .footer .fondo{flex-direction:column}
  .hero-onde .testo{padding-left:24px;padding-right:24px}
  .moduli{grid-template-columns:1fr}
}