/* ==================================================================
   SAPERE AI · pagina /demo · aggiunte a style.css
   Solo cio' che la landing non ha: bottone come link, schede video,
   passi numerati, form a piu' campi. Token e tipografia vengono da
   style.css e qui non si ridefiniscono.
   ================================================================== */

/* ------------------------------------------------------------------
   Bottone pieno: stesso arancio e stesso testo #1C0E07 del bottone
   nella pillola (7,4:1), qui usato da solo.
   ------------------------------------------------------------------ */

.bottone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 30px;
  border:0;
  border-radius:999px;
  background:var(--accento);
  color:var(--fondo);
  font-family:var(--corpo);
  font-size:17px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}

.bottone:hover{ filter:brightness(1.08); }
.bottone:active{ transform:translateY(1px); }
.bottone:focus-visible{ outline:3px solid var(--testo); outline-offset:3px; }
.bottone:disabled{ cursor:progress; filter:saturate(.7); }

.nota-hero{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.45;
  color:var(--testo-62);
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ------------------------------------------------------------------
   Prova: due schede, video sopra e testo sotto su telefono; da
   900px in su video e testo affiancati, il video piu' largo.
   ------------------------------------------------------------------ */

.intro-prova{
  margin:-8px 0 36px;
  max-width:52ch;
  color:var(--testo-88);
}

.demo-schede{ display:grid; gap:40px; }

.demo-scheda{ display:grid; gap:20px; }

.demo-scheda__video{
  overflow:hidden;
  border:3px solid var(--bordo);
  border-radius:18px;
  background:#efeeec;
  aspect-ratio:16 / 10;
}

.video-demo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.demo-scheda__settore{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accento);
}

.demo-scheda__titolo{
  margin:0 0 12px;
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(1.75rem, 7.4vw, 2.4rem);
  line-height:1;
  text-transform:uppercase;
  color:var(--testo);
}

.demo-scheda__testo p{ margin:0 0 12px; max-width:52ch; }
.demo-scheda__testo p:last-child{ margin-bottom:0; }

.demo-scheda__dati{
  font-size:15px;
  color:var(--testo-62);
}

.didascalia-prova{
  margin:36px 0 0;
  font-size:14px;
  color:var(--testo-50);
}

@media (min-width:900px){
  .demo-schede{ gap:64px; }
  .demo-scheda{
    grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
    align-items:center;
    gap:40px;
  }
}

/* ------------------------------------------------------------------
   Cosa ricevi: l'elenco della landing con la prima parola in bianco
   pieno, cosi' le quattro righe si leggono anche solo in grassetto.
   ------------------------------------------------------------------ */

.elenco--forte strong{ color:var(--testo); }

/* ------------------------------------------------------------------
   Passi numerati
   ------------------------------------------------------------------ */

.passi{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.12);
}

.passi__voce{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:6px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.passi__n{
  font-family:var(--titoli);
  font-size:28px;
  line-height:1;
  color:var(--accento);
}

.passi__titolo{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  color:var(--testo);
}

.passi__voce p{ margin:0; }

.passi__uscita{
  margin:28px 0 0;
  max-width:60ch;
  font-weight:600;
  color:var(--testo);
}

/* ------------------------------------------------------------------
   Richiesta: form a piu' campi
   ------------------------------------------------------------------ */

.testo-richiesta{ margin:-8px 0 32px; color:var(--testo-88); }

.modulo--richiesta{ max-width:640px; }

.campi{
  display:grid;
  gap:18px;
  margin-bottom:24px;
}

.campo{ display:grid; gap:8px; }

.campo__etichetta{
  font-size:15px;
  font-weight:600;
  color:var(--testo);
}

.campo__facoltativo{
  font-weight:400;
  color:var(--testo-62);
}

.campo__input{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border:2px solid rgba(255,255,255,.26);
  border-radius:14px;
  background:rgba(0,0,0,.32);
  color:var(--testo);
  font-family:var(--corpo);
  font-size:16px;             /* sotto i 16px iOS zooma al focus */
  line-height:1.4;
  transition:border-color .15s ease;
}

.campo__input--lungo{ min-height:140px; resize:vertical; }

.campo__input::placeholder{ color:var(--testo-50); opacity:1; }
.campo__input:focus{ outline:none; border-color:rgba(255,255,255,.62); }
.campo__input[aria-invalid="true"]{ border-color:var(--testo); }

.campo__errore{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--testo);
}

.campo__errore::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin-right:8px;
  border-radius:50%;
  background:var(--testo);
  vertical-align:.1em;
}

.bottone--form{ width:100%; }

/* Campo trappola per i robot: fuori schermo, non display:none, perche'
   alcuni robot saltano i campi nascosti in quel modo. */
.trappola{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.alternativa{
  margin:40px 0 0;
  font-size:15px;
  color:var(--testo-62);
}

.alternativa__link{
  color:var(--testo);
  font-weight:600;
  text-underline-offset:3px;
}

@media (min-width:640px){
  .campi{ grid-template-columns:1fr 1fr; }
  .campo--pieno{ grid-column:1 / -1; }
  .bottone--form{ width:auto; }
}

@media (min-width:768px){
  .bottone{ min-height:60px; padding:0 36px; font-size:18px; }
  .nota-hero{ font-size:16px; }

  /* La landing tiene la prima schermata a tutta altezza. Qui no: la
     prova e' l'argomento, e a 1440 x 900 l'occhiello e il titolo
     del blocco 1 devono spuntare sotto la piega. */
  .blocco--hero{
    min-height:0;
    padding:96px 0 72px;
  }
  .blocco--hero + main > .blocco:first-child{ padding-top:56px; }
}