/* =====================================================================
   EmmeQuadro — la pelle cinematografica sulle pagine-documento
   ---------------------------------------------------------------------
   Si carica DOPO style.css e non lo sostituisce: la struttura, le griglie
   e il comportamento degli strumenti (catalogo, calcolatore delle ore,
   verificatore delle scadenze) restano quelli collaudati. Qui cambia
   soltanto la LUCE: il fondale, i colori, la scala tipografica, le due
   bande nere e il cartello di scena.

   Perche' non sono inquadrature a schermo intero come la home: queste
   pagine si LEGGONO e si USANO. Rubare lo scorrimento a un modulo di
   contatto o a una tabella di ore la renderebbe scomoda, e un sito che
   vende conformita' non puo' permetterselo.
   ===================================================================== */

:root{
  --ink:#04070b; --ink2:#070c12;
  --paper:#eef4f9; --paper2:#c8d5e0; --paper3:#a2b5c6;
  --key:#8fd4e6; --key-d:#3d99ad; --amber:#e8ae66;
  --ffd:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --ffm:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --ez:cubic-bezier(.16,.84,.28,1);
  --barb:clamp(34px,4vh,44px);

  /* riscrivo i colori che style.css usa ovunque: una sola presa,
     e tutto il sito cambia luce senza toccare una riga di struttura */
  --bg:#04070b;
  --acc:#8fd4e6;
  --acc-2:#3d99ad;
  --steel:#c9d8e4;
  --txt:#e9f0f6;
  --txt-2:#c8d5e0;
  --txt-3:#a2b5c6;
}

/* ---------- il fondale: la luce sta sotto a tutto ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -12%, #0a1119 0%, #04070c 44%, #020408 100%)}
/* La tela si disegna al 22% della dimensione e la lascio ingrandire al
   browser: l'interpolazione dell'ingrandimento E' gia' una sfocatura, e non
   costa nulla. La sfocatura vera scende da 20 a 6 pixel — a 20 era la voce
   piu' cara dell'intera pagina, otto fotogrammi al secondo solo per lei. */
#atmo{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
#dust{position:absolute;inset:0;width:100%;height:100%}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(112% 86% at 50% 46%,transparent 30%,rgba(0,0,0,.46) 72%,rgba(0,0,0,.88) 100%)}

/* i tre strati vecchi si ritirano: al loro posto c'e' la luce vera */
.bg-fx,.grid-fx{display:none}
.noise{opacity:.03}
body{background:var(--ink)}
main,header,footer{position:relative;z-index:2}

/* ---------- la banda nera in basso con il cartello di scena ---------- */
.bar-b{position:fixed;left:0;right:0;bottom:0;height:var(--barb);z-index:30;
  background:#000;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:1rem;padding:0 clamp(12px,3vw,34px)}
.bar-b::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;
  pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.slate{display:flex;align-items:center;gap:.7rem;font-family:var(--ffm);font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper3);margin:0;
  white-space:nowrap;min-width:0}
.slate .rec{width:6px;height:6px;border-radius:50%;background:#e0563f;flex:0 0 auto;
  animation:recPulse 2.4s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:.35}50%{opacity:1}}
.slate b{color:var(--paper);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.trk{flex:1;height:1px;background:rgba(255,255,255,.13);position:relative;min-width:40px}
.trk i{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--key-d),var(--key));transition:width .18s linear}
.tc{font-family:var(--ffm);font-size:.63rem;letter-spacing:.18em;color:var(--paper2);
  white-space:nowrap;margin:0}
body{padding-bottom:var(--barb)}
.totop{bottom:calc(var(--barb) + 1rem)}
@media(max-width:620px){
  .slate b{display:none}
  .bar-b{gap:.7rem}
}

/* ---------- tipografia: la scala della regia ---------- */
h1,h2,h3,.stat b,.kf b{font-family:var(--ffd);letter-spacing:-.02em}
.phero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.02;max-width:20ch}
h2{letter-spacing:-.022em}
.eyebrow,.crumb{font-family:var(--ffm);letter-spacing:.2em;font-size:.68rem}
.eyebrow{color:var(--key)}

/* ---------- l'apertura di pagina diventa un'inquadratura ---------- */
.phero{min-height:clamp(460px,72vh,760px);display:flex;align-items:center;
  padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.phero::before{content:"";position:absolute;left:50%;top:-40%;width:150%;height:160%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 46% 40% at 50% 60%,
    rgba(143,212,230,.13),rgba(143,212,230,.04) 46%,transparent 72%)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(143,212,230,.26) 28%,
    rgba(143,212,230,.26) 72%,transparent)}
.phero > .wrap{position:relative;z-index:2}

/* la figura 3D e' l'attore dell'inquadratura: piu' spazio e piu' luce */
.scena-3d{width:min(48%,660px);height:min(100%,500px)}
@media(max-width:900px){.scena-3d{width:100%;height:min(100%,300px);opacity:.26}}

/* ---------- superfici: vetro scuro invece di scatole grigie ---------- */
.card,.step,.person,.ctile,.course,.cal-item,.kf,.dtable,.notice,.calc{
  background:linear-gradient(180deg,rgba(143,212,230,.055),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.09)}
/* niente backdrop-filter sulle schede: su una pagina con venti schede
   obbliga il browser a conservare come texture cio' che sta dietro a
   ognuna, e su un portatile senza scheda grafica si sente. */
.card:hover,.course:hover,.ctile:hover,.cal-item:hover{
  border-color:rgba(143,212,230,.34)}
.btn-primary{background:linear-gradient(135deg,var(--key),var(--key-d));color:#03171d;
  box-shadow:0 0 0 1px rgba(143,212,230,.25),0 14px 40px -18px rgba(143,212,230,.8)}
.btn-ghost{border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--key)}

/* ---------- sezioni: ognuna ha la sua luce ---------- */
section[data-luce]{position:relative}
section[data-luce] > .wrap{position:relative;z-index:2}

/* i blocchi entrano quando la sezione entra, come nella home */
html.js section[data-luce] .rv{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s var(--ez),transform .8s var(--ez),filter .8s var(--ez)}
html.js section[data-luce].on .rv{opacity:1;transform:none;filter:none}

@media(prefers-reduced-motion:reduce){
  .slate .rec{animation:none}
  html.js section[data-luce] .rv{opacity:1;transform:none;filter:none;transition:none}
  #atmo,#dust{opacity:.7}
}


/* ---------------------------------------------------------------
   Stessa correzione delle pagine di regia: il testo non deve
   rimpicciolirsi quando si ingrandisce la pagina col browser, e la
   colonna deve occupare lo schermo invece di lasciare due fasce vuote.
   --------------------------------------------------------------- */
.wrap{width:min(1460px, 94%)}
.phero h1{font-size:clamp(3.2rem,5.4vw,6rem)}
h2{font-size:clamp(2.3rem,3.6vw,3.9rem)}
.lead{font-size:clamp(1.25rem,1.35vw,1.66rem)}
body{font-size:clamp(1.12rem,1.05vw,1.36rem)}
@media(max-width:1150px){.menu,.nav-cta{display:none}.burger{display:block}}

.eyebrow,.crumb{font-size:clamp(.78rem,.62vw,.92rem)}