/*
 * La soglia e le due aree (lotto 2, 11/09/2026; la soglia in tre momenti, 12/09).
 *
 * Colori e proporzioni sono quelli dell'anteprima approvata il 10/09
 * (BRAINSTORMING_GRAFICA/anteprima_ingressi.html): l'arancione del sito
 * #fd5a37 e il suo cupo #e33812, l'inchiostro, la grafite, la carta. I
 * caratteri NON si scaricano da nessun servizio esterno: si nominano quelli
 * del sito (Playfair Display per i titoli, Montserrat per il corpo) e, se il
 * tema non li ha già caricati, si ripiega su Georgia e sul carattere di
 * sistema. Tutto ciò che qui è misurato in pixel viene dall'anteprima.
 *
 * Due soli stati, perché il vocabolario visivo unico (lotto zero) non è
 * ancora depositato: attivo, e «in costruzione» con bordo tratteggiato e
 * pastiglia — gli stessi due segni dell'anteprima.
 */

.saq-soglia, .saq-area {
  --sg-arancio: #fd5a37; --sg-arancio-cupo: #e33812; --sg-inchiostro: #030306; --sg-grafite: #70707e;
  --sg-carta: #FBFBFB; --sg-carta-2: #F1F1F3; --sg-linea: #DFDFE2; --sg-bianco: #ffffff;
  --sg-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sg-corpo: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-family: var(--sg-corpo); color: var(--sg-inchiostro); line-height: 1.5;
  max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  box-sizing: border-box;
}
.saq-soglia *, .saq-area * { box-sizing: border-box; }

/* ---------- il logo-pulsante: in rilievo da fermo, piatto al passaggio, mostra i tre ingressi al clic ---------- */
.saq-soglia-porta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 4px; perspective: 1200px; }
.saq-logo-porta { display: block; padding: 18px 28px; border-radius: 14px; background: var(--sg-bianco);
  border: 0; box-shadow: 0 5px 0 var(--sg-linea), 0 9px 18px rgba(3,3,6,.10);
  transition: transform .16s ease, box-shadow .16s ease; text-decoration: none; cursor: pointer; font: inherit; color: inherit; }
.saq-logo-porta img, .saq-logo-svg { display: block; width: min(300px, 64vw); height: auto; }
.saq-logo-porta:hover, .saq-logo-porta:focus-visible { transform: translateY(5px); box-shadow: 0 0 0 var(--sg-linea), 0 0 0 rgba(3,3,6,0); }
.saq-logo-porta:focus-visible { outline: 2px solid var(--sg-arancio); outline-offset: 4px; }
.saq-sotto-logo { margin: 0; font-size: .8rem; color: var(--sg-grafite); text-align: center; max-width: 52ch; }

/* ---------- la soglia in tre momenti (12/09, decisa da Dario alle 17:55): i gesti li accende lo script, lo stile li descrive ---------- */
/* 1. apertura: il logo arriva con un mezzo giro, una volta, la curva del video (scheda 1 del vocabolario del movimento) */
.saq-logo-svg { transform-origin: 50% 50%; }
.saq-logo-svg.saq-apertura { animation: saq-apertura 4s cubic-bezier(.215,.61,.355,1) 1; }
@keyframes saq-apertura { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
/* 2. invito: il marchio fa un giro che si posa (stessa curva, 4 s), la scritta resta ferma; riarmato dallo script all'ingresso successivo */
.saq-logo-svg #marchio { transform-box: fill-box; transform-origin: center; }
.saq-logo-svg #marchio.saq-invito { animation: saq-invito 4s cubic-bezier(.215,.61,.355,1) 1; }
@keyframes saq-invito { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
/* 3. i tre ingressi: sempre nel DOM; in attesa solo durante l'apertura, poi in dissolvenza (0,6 s) */
.saq-ingressi { transition: opacity .6s ease, transform .6s ease; }
.saq-ingressi.saq-attesa { opacity: 0; transform: translateY(8px); pointer-events: none; }
.saq-ingressi.saq-visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .saq-logo-svg, .saq-logo-svg #marchio { animation: none !important; transform: none !important; }
  .saq-ingressi.saq-attesa { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- i tre ingressi: pari fra loro, non gerarchici ---------- */
.saq-ingressi { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .saq-ingressi { grid-template-columns: repeat(3, 1fr); } }
.saq-ing { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit;
  background: var(--sg-carta-2); border: 1px solid var(--sg-linea); border-radius: 10px; padding: 16px 16px 17px;
  text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
a.saq-ing:hover, a.saq-ing:focus-visible { transform: translateY(2px); background: var(--sg-bianco); border-color: var(--sg-grafite); color: inherit; }
a.saq-ing:focus-visible { outline: 2px solid var(--sg-arancio); outline-offset: 3px; }
.saq-ing-etichetta { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--sg-arancio-cupo); }
.saq-ing b { font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--sg-inchiostro); }
.saq-ing-testo { font-size: .79rem; color: var(--sg-grafite); line-height: 1.4; }
.saq-ing-testo strong { color: var(--sg-inchiostro); }

/* ---------- in costruzione: bordo tratteggiato e pastiglia ---------- */
.saq-cantiere { border-style: dashed !important; box-shadow: none !important; cursor: default; }
.saq-cantiere b { color: var(--sg-grafite); }
.saq-cantiere-pastiglia { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--sg-grafite);
  border: 1px solid var(--sg-linea); border-radius: 999px; padding: 2px 9px; background: var(--sg-bianco); margin-top: 4px; }
.saq-cantiere-pastiglia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sg-grafite); }

/* ---------- i tre passaggi del Quadro ---------- */
.saq-passi { border: 1px solid var(--sg-linea); border-left: 3px solid var(--sg-arancio); border-radius: 0 10px 10px 0;
  background: var(--sg-carta-2); padding: 15px 17px; display: flex; flex-direction: column; gap: 9px; }
.saq-passi-etichetta { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--sg-arancio-cupo); margin: 0; }
.saq-passi ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: saq-passo; }
.saq-passi li { position: relative; padding-left: 26px; font-size: .83rem; line-height: 1.42; color: var(--sg-inchiostro); counter-increment: saq-passo; margin: 0; }
.saq-passi li::before { content: counter(saq-passo); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sg-bianco); border: 1px solid var(--sg-arancio); color: var(--sg-arancio-cupo);
  font-size: .68rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ---------- la riga sull'accesso ---------- */
.saq-riga-accesso { margin: 0; font-size: .8rem; color: var(--sg-grafite); line-height: 1.45; border-top: 1px solid var(--sg-linea); padding-top: 14px; }
.saq-riga-accesso strong { color: var(--sg-inchiostro); }

/* ---------- la firma a tre: in fondo, su cartoncini bianchi ---------- */
.saq-firma { border-top: 1px solid var(--sg-linea); padding-top: 18px; display: flex; flex-direction: column; gap: 11px; align-items: center; }
.saq-firma-formula { margin: 0; font-size: .72rem; letter-spacing: .05em; color: var(--sg-grafite); text-align: center; }
.saq-marchi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.saq-marchio { background: #ffffff; border: 1px solid var(--sg-linea); border-radius: 8px; padding: 9px 13px; display: flex; align-items: center; }
.saq-marchio img { display: block; height: 38px; width: auto; }
.saq-marchio.saq-marchio-alto img { height: 64px; }   /* lo stemma è alto e stretto: a 52 px (anteprima) sembrava piccolo, rilievo 6 */

/* ---------- le aree: intestazione comune ---------- */
.saq-area-etichetta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0;
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--sg-grafite); }
.saq-area-etichetta a { color: var(--sg-arancio-cupo); text-decoration: none; }
.saq-area-etichetta a:hover { text-decoration: underline; }
.saq-area h1 { font-family: var(--sg-display); font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0; line-height: 1.15; color: var(--sg-inchiostro); }
.saq-area-intro { margin: 0; color: var(--sg-grafite); font-size: .92rem; max-width: 64ch; }

/* ---------- area docenti: le due porte, con pesi diversi ---------- */
.saq-area-docenti .saq-occhiello { font-size: .92rem; color: var(--sg-inchiostro); margin: 0; }
.saq-due-porte { margin-top: 6px; gap: 14px; }
.saq-due-porte .saq-porta { background: var(--sg-bianco); border: 1px solid var(--sg-linea); border-radius: 10px; padding: 16px; box-shadow: 0 2px 0 var(--sg-linea); }
.saq-due-porte .saq-porta p { color: var(--sg-grafite); }
.saq-due-porte .saq-bottone { font-size: 1rem; padding: 12px 18px; border-radius: 8px; }
.saq-due-porte .saq-porta-prova .saq-bottone { background: var(--sg-carta-2); color: var(--sg-inchiostro); border-color: var(--sg-linea); }
.saq-due-porte .saq-porta-prova .saq-bottone:hover, .saq-due-porte .saq-porta-prova .saq-bottone:focus { background: var(--sg-linea); color: var(--sg-inchiostro); }
.saq-due-porte .saq-porta-istituto .saq-bottone { background: var(--sg-arancio); border-color: var(--sg-arancio); color: #fff; box-shadow: 0 3px 0 var(--sg-arancio-cupo); }
.saq-due-porte .saq-porta-istituto .saq-bottone:hover, .saq-due-porte .saq-porta-istituto .saq-bottone:focus { background: var(--sg-arancio-cupo); color: #fff; transform: translateY(3px); box-shadow: 0 0 0 var(--sg-arancio-cupo); }
.saq-visita-invito { margin: 0; font-size: .85rem; color: var(--sg-grafite); }
.saq-visita-invito a { color: var(--sg-arancio-cupo); }

/* ---------- area ex studenti: il campo in cima, poi i tre atterraggi ---------- */
.saq-campo-posta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; background: var(--sg-carta-2);
  border: 1px solid var(--sg-linea); border-radius: 10px; padding: 13px 15px; }
.saq-campo-posta label { font-size: .82rem; font-weight: 600; }
.saq-campo-posta input[type=email] { flex: 1; min-width: 180px; background: var(--sg-bianco); border: 1px solid var(--sg-linea);
  border-radius: 7px; padding: 9px 11px; font: inherit; font-size: .9rem; color: var(--sg-inchiostro); }
.saq-campo-posta input[type=email]:focus-visible { outline: 2px solid var(--sg-arancio); outline-offset: 2px; }
.saq-campo-posta .saq-vai { background: var(--sg-arancio); color: #fff; border: 0; border-radius: 7px; padding: 10px 16px; font: inherit;
  font-weight: 600; font-size: .84rem; cursor: pointer; box-shadow: 0 3px 0 var(--sg-arancio-cupo); transition: transform .15s ease, box-shadow .15s ease; }
.saq-campo-posta .saq-vai:hover { transform: translateY(3px); box-shadow: 0 0 0 var(--sg-arancio-cupo); }
.saq-campo-posta .saq-vai:focus-visible { outline: 2px solid var(--sg-inchiostro); outline-offset: 3px; }
.saq-atterraggi { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .saq-atterraggi { grid-template-columns: repeat(3, 1fr); } }
.saq-atterraggio { display: flex; flex-direction: column; gap: 7px; text-align: left; background: var(--sg-bianco);
  border: 1px solid var(--sg-linea); border-radius: 10px; padding: 17px 16px; box-shadow: 0 2px 0 var(--sg-linea); }
.saq-atterraggio.saq-cantiere { background: var(--sg-carta-2); }
.saq-atterraggio.saq-primo { border-color: var(--sg-arancio); box-shadow: 0 2px 0 rgba(253,90,55,.4); }
.saq-att-etichetta { font-size: .71rem; color: var(--sg-arancio-cupo); font-weight: 600; }
.saq-cantiere .saq-att-etichetta { color: var(--sg-grafite); }
.saq-atterraggio b { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.saq-att-testo { font-size: .79rem; color: var(--sg-grafite); line-height: 1.42; }

@media (prefers-reduced-motion: reduce) { .saq-soglia *, .saq-area * { transition: none !important; } }