/* Lavora con noi, area installatori e guide: tutto il resto viene da site.css, prodotti.css e contatti.css. */

/* ------------------------------------------------------------ candidatura a gruppi */
#candidatura .modulo { max-width: 920px; }
.gruppo { border: 0; margin: 0 0 30px; padding: 0; }
.gruppo legend {
  padding: 0; margin-bottom: 18px; color: var(--testo);
  font: 600 20px/1.3 var(--display); letter-spacing: -0.01em;
}
.gruppo + .gruppo { padding-top: 28px; border-top: 1px solid var(--bordo); }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelta { position: relative; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scelta span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 100px;
  background: rgba(5, 10, 20, 0.6); border: 1px solid var(--bordo); color: var(--acciaio); font-size: 15px;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.scelta input:checked + span { color: #fff; border-color: var(--blu); background: rgba(63, 169, 255, 0.14); box-shadow: 0 0 18px rgba(63, 169, 255, 0.18); }
.scelta input:focus-visible + span { outline: 1px solid var(--blu); outline-offset: 3px; }
.messaggio { margin-top: 18px; }

/* ------------------------------------------------------------ accesso all'area */
.accesso {
  min-height: 100svh; display: grid; place-items: center;
  padding: 120px var(--gutter) 80px !important;
}
.accesso-doppio { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 560px); gap: 14px; align-items: start; justify-content: center; width: 100%; }
.accesso-scheda { width: min(460px, 100%); padding: clamp(26px, 4vw, 40px); }
.accesso-doppio .accesso-scheda { width: 100%; }
.accesso-scheda h2 { margin: 0 0 10px; color: var(--testo); font: 600 clamp(26px, 3.2vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; }
.accesso-scheda .campi .campo { margin-bottom: 0; }
.accesso-scheda .nota-campo { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }
@media (max-width: 900px) { .accesso-doppio { grid-template-columns: minmax(0, 560px); } }
.accesso-scheda h1 { margin: 0 0 10px; color: var(--testo); font: 600 clamp(30px, 4vw, 40px)/1.1 var(--display); letter-spacing: -0.03em; }
.accesso-scheda p { margin: 0 0 26px; }
.accesso-scheda .campo { margin-bottom: 14px; }
.accesso-scheda .azioni { margin-top: 20px; }
.accesso-nota { margin-top: 22px; font-size: 14px; color: var(--tenue); }

/* ------------------------------------------------------------ area guide */
.area-testata { padding-top: 140px !important; }
.area-testata .stato { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 400 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: #7ee2a8; }
.area-testata .stato::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.cerca { margin-top: 30px; max-width: 560px; }
.guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.guida { padding: 24px 24px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.guida .nome { font: 400 12px/1.3 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--blu); margin-bottom: 14px; }
.guida h3 { margin: 0 0 8px; color: var(--testo); font: 600 21px/1.25 var(--display); letter-spacing: -0.02em; }
.guida ul { list-style: none; margin: 14px 0 18px; padding: 0; }
.guida li { padding: 8px 0 8px 16px; border-top: 1px solid var(--bordo); font-size: 14px; position: relative; }
.guida li::before { content: ''; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 1px; background: var(--blu); }
.guida .in-arrivo { margin-top: auto; font: 400 11px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); }
.guida.nascosta { display: none; }

@media (max-width: 960px) { .guide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .guide { grid-template-columns: 1fr; } }

/* globo della rete installatori, dietro il titolo */
.globo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 70% 50%;
  opacity: 0; transition: opacity 1.8s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.globo.pronto { opacity: 1; }
@media (max-width: 860px) {
  .globo { top: 40px; height: 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 70%, transparent 100%); }
}

/* ------------------------------------------------------------ passi accanto alla foto dell'officina */
.passi-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; align-items: start; }
.foto-lavoro { margin: 0; }
.foto-lavoro img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--bordo); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) {
  .passi-griglia { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foto-lavoro img { max-width: 420px; }
}