/* ═══════════════════════════════════════════════════════════════
   ZENITLABS — /candida-la-tua-attivita/ · IL CASTING (11/10/2026)
   Si appoggia a style.css (variabili, bottoni, dialogo, footer).
   Firma della pagina: LA VOLTA, dieci stelle dall'orizzonte allo zenit,
   una per posto del mese. Stessa metafora dell'altimetro della home.
   REGOLA COLORE rispettata: blu = azione; ORO solo su numeri e posti
   assegnati (sono risultati). Niente box-shadow; radius 0 o 999px.
   ═══════════════════════════════════════════════════════════════ */

body.casting{background:var(--ink);overflow-x:clip}

/* ── testata: stato «candidature aperte» ─────────────────────────── */
.cst-nav{z-index:120}
.cst-nav-stato{
  display:flex;align-items:center;gap:.55rem;margin-left:auto;
  color:var(--velo);font-size:.62rem;letter-spacing:.22em;
}
.cst-nav-stato i{
  width:7px;height:7px;border-radius:999px;background:var(--blu-chiaro);
  animation:respiro 2.6s ease-in-out infinite;
}
.cst-nav .doc-nav-cta{margin-left:1.2rem}
@media (max-width:560px){.cst-nav-stato{display:none}.cst-nav .doc-nav-cta{margin-left:auto}}

/* ── HERO · il titolo monumentale e la volta ─────────────────────── */
.cst-hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(3.4rem,7vh,5.5rem) clamp(1.2rem,4vw,3rem) clamp(3rem,6vh,4.5rem);
}
.cst-eyebrow .tick:last-child{margin-left:.2rem}
.cst-titolo{
  margin-top:1.6rem;
  font-family:'Syne',var(--f-body);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.35rem,6vw,5.8rem);
  line-height:.96;letter-spacing:-.035em;
}
.cst-titolo .ht-line{padding-bottom:.04em}
.cst-accento{
  margin-top:clamp(.8rem,2vh,1.4rem);
  font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3.2vw,2.6rem);line-height:1.15;
  color:var(--blu-chiaro);
}
.cst-accento em{font-style:italic}

/* la volta: dieci stelle su un arco, lo zenit in cima */
.volta{
  position:relative;width:min(1100px,100%);margin:clamp(1.2rem,3.5vh,2.6rem) auto 0;
}
.volta-svg{display:block;width:100%;height:auto;overflow:visible}
.volta-orizzonte{fill:none;stroke:var(--hair);stroke-width:1}
.volta-arco{
  fill:none;stroke:rgba(143,176,255,.32);stroke-width:1;
  stroke-dasharray:1;stroke-dashoffset:0;
}
.volta-stella{cursor:default}
.volta-stella use{
  fill:transparent;stroke:rgba(238,242,248,.62);stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  transition:fill .6s var(--ease-zenit),stroke .6s var(--ease-zenit);
}
.volta-stella .volta-num{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;
  fill:rgba(238,242,248,.42);text-anchor:middle;
}
.volta-stella.presa use{fill:var(--oro);stroke:var(--oro)}
.volta-stella.presa .volta-num{fill:var(--oro)}
.volta-stella .volta-alone{fill:var(--oro);opacity:0}
.volta-stella.presa .volta-alone{opacity:.16}
.volta-zenit-stella{fill:var(--panna)}
.volta-zenit-alone{fill:rgba(1,69,242,.22);animation:zenitRespiro 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes zenitRespiro{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.18);opacity:1}}
.volta-dida{
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:var(--velo);white-space:nowrap;
}
.volta-mese{color:var(--blu-chiaro);letter-spacing:.3em}
.volta-conta b{font-family:var(--f-display);font-size:1.5rem;font-weight:400;letter-spacing:0;vertical-align:-.12em}

.cst-sub{
  max-width:62ch;margin:clamp(1.2rem,3vh,2rem) auto 0;
  font-size:clamp(1rem,1.25vw,1.12rem);color:rgba(238,242,248,.85);
}
.cst-sub strong{color:var(--panna)}
.cst-cta{margin-top:1.6rem}

@media (max-width:640px){
  .volta{margin-top:1.4rem}
  .volta-dida{position:static;transform:none;margin-top:.9rem}
  .volta-stella .volta-num{font-size:17px}
}

/* ── COME FUNZIONA · tre tappe, numeri d'oro ─────────────────────── */
.tappe{
  list-style:none;max-width:var(--largo);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);
}
.tappa{border-top:1px solid var(--hair-forte);padding-top:1.6rem}
.tappa-n{
  display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(3.4rem,6vw,5.4rem);line-height:.9;letter-spacing:-.03em;
}
.tappa h3{
  margin-top:1.2rem;font-family:'Syne',var(--f-body);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.15rem;line-height:1.15;
}
.tappa p{margin-top:.8rem;color:var(--velo);max-width:38ch}
@media (max-width:820px){.tappe{grid-template-columns:1fr}}

/* ── LE REGOLE ───────────────────────────────────────────────────── */
.regole{
  list-style:none;max-width:var(--largo);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6.5rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(1.4rem,4vw,3.6rem);
}
.regole li{
  display:flex;gap:1.2rem;align-items:flex-start;
  padding:1.4rem 0;border-top:1px solid var(--hair);
}
.regola-n{
  flex:none;width:2.4rem;height:2.4rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(224,179,79,.5);color:var(--oro);
  font-family:var(--f-display);font-size:1.05rem;
}
.regole p{color:var(--velo);max-width:52ch}
.regole b{color:var(--panna);font-weight:600}
.regole a{color:var(--blu-chiaro)}
@media (max-width:820px){.regole{grid-template-columns:1fr}}

/* ── GIÀ ONLINE · le vetrine dei clienti veri ────────────────────── */
.vetrine{
  max-width:var(--largo);margin:0 auto;
  padding:0 clamp(1.2rem,4vw,3rem) clamp(4rem,8vw,6.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.4rem);
}
.vetrina{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:var(--surf-1);border:1px solid var(--hair);
  transition:border-color .4s;
}
.vetrina:hover,.vetrina:focus-visible{border-color:var(--hair-forte)}
.vetrina-foto{display:block;overflow:clip;aspect-ratio:16/10;background:var(--surf-2)}
.vetrina img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease-zenit),filter .6s;
  filter:saturate(.92) brightness(.9);
}
.vetrina:hover img,.vetrina:focus-visible img{transform:scale(1.045);filter:none}
.vetrina-dida{
  display:flex;flex-direction:column;gap:.25rem;
  padding:1rem 1.1rem 1.15rem;border-top:1px solid var(--hair);
}
.vetrina-dida .mono{color:var(--blu-chiaro);font-size:.6rem}
.vetrina-dida b{font-family:'Stardom',var(--f-display);font-weight:400;font-size:1.45rem;line-height:1.05;color:var(--panna)}
.vetrina-dida i{font-style:normal;font-size:.82rem;color:var(--velo);transition:color .3s}
.vetrina:hover .vetrina-dida i{color:var(--panna)}
@media (max-width:820px){.vetrine{grid-template-columns:1fr}}

/* ── LA CANDIDATURA ──────────────────────────────────────────────── */
.cst-candidatura{border-top:1px solid var(--hair)}
.cst-link{margin-top:1.1rem}

/* ── DOMANDE · la .faq della home vive su carta chiara: qui è notte ─ */
.cst-faq{padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,4vw,3rem) clamp(3rem,6vw,4.5rem)}
.cst-faq .faq{max-width:820px;margin:0 auto}
.cst-faq .faq-titolo{
  font-family:'Syne',var(--f-body);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--panna);
}
.cst-faq .faq details{border-top:1px solid var(--hair)}
.cst-faq .faq details:last-child{border-bottom:1px solid var(--hair)}
.cst-faq .faq summary{color:var(--panna)}
.cst-faq .faq details p{color:var(--velo)}
.cst-faq .faq details a{color:var(--blu-chiaro)}

.cst-fine{
  max-width:820px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem) 3rem;
  text-align:center;color:var(--velo);font-size:.9rem;
}
.cst-fine a{color:var(--blu-chiaro)}

/* ── movimento: con riposo tutto fermo e leggibile ───────────────── */
html.riposo .volta-zenit-alone,html.riposo .cst-nav-stato i{animation:none}