/* Palette e caratteri sono quelli del sito (DESIGN.md): un solo accento, il corallo.
   Versione scura: stessi nomi di variabile, ruoli invertiti — il corallo si schiarisce,
   perché lo stesso #D97757 su fondo navy perde contrasto e diventa fango. */
:root{
  --navy:#EEF0F5;          /* ora è il colore dei titoli: chiaro su fondo scuro */
  --navy-deep:#FFFFFF;
  --text:#AFB6C6;          /* corpo */
  --muted:#7E879B;         /* meta, note */
  --cream:#10141C;         /* il fondo della pagina */
  --soft:#1B2130;          /* pieni tenui: numeri dei passi */
  --white:#171D28;         /* le schede */
  --line:#2A3242;          /* filetti */
  --coral:#E68B67;         /* accento, schiarito per il fondo scuro */
  --coral-deep:#F0A183;
  --rust:#C9613A;          /* il bottone forte */
  --rust-hover:#DA6E44;
  --scelto-bg:#241C18;     /* il pieno tenue dietro una scheda scelta */
  --ok:#7FBF9A; --ok-bg:#16281F; --stop:#E58B84; --stop-bg:#2A1A19;
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--text);font:16px/1.55 var(--sans);-webkit-text-size-adjust:100%}
.wrap{max-width:640px;margin:0 auto;padding:28px 18px 80px}
h1{font:400 1.6rem/1.3 var(--serif);color:var(--navy);margin:0 0 6px}
.sotto{color:var(--muted);font-size:.95rem;margin:0 0 26px}

.passo{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
/* `hidden` deve vincere sempre: una regola di classe come .scelte{display:grid} batte
   il display:none del browser, e l'elemento resta visibile. È la trappola classica. */
[hidden]{display:none!important}
.passo[hidden]{display:none}
.passo-testa{display:flex;gap:10px;align-items:baseline;margin-bottom:12px}
.num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--navy);
     font-size:.78rem;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.passo.fatto .num{background:var(--ok-bg);color:var(--ok)}
.passo-testa h2{font:400 1.05rem/1.35 var(--serif);color:var(--navy);margin:0}
.passo-testa .scelto{margin-left:auto;font-size:.82rem;color:var(--coral-deep);text-align:right}

.scelte{display:grid;gap:8px}
.scelte.due{grid-template-columns:1fr 1fr}
.scelta{border:1px solid var(--line);background:var(--white);border-radius:10px;padding:13px 14px;
        text-align:left;font:inherit;color:var(--text);cursor:pointer;min-height:48px;transition:border-color .15s,background .15s}
.scelta:hover{border-color:var(--coral)}
.scelta[aria-pressed="true"]{border-color:var(--coral);background:var(--scelto-bg);box-shadow:inset 3px 0 0 var(--coral)}
.scelta b{display:block;color:var(--navy);font-weight:600}
.scelta span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}

.cal-testa{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-testa b{font:400 1rem var(--serif);color:var(--navy)}
.frecce button{border:1px solid var(--line);background:var(--white);color:var(--navy);width:36px;height:36px;
               border-radius:8px;cursor:pointer;font-size:1rem;line-height:1}
.frecce button:disabled{opacity:.35;cursor:default}
.griglia{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gg{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding-bottom:4px}
.giorno{aspect-ratio:1;border:1px solid transparent;background:transparent;border-radius:8px;font:inherit;
        font-size:.92rem;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums}
.giorno.libero{background:var(--white);border-color:var(--line);color:var(--navy)}
.giorno.libero:hover{border-color:var(--coral)}
.giorno.chiuso{color:#3C4457;cursor:default}
.giorno[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#10141C;font-weight:600}
.legenda{font-size:.76rem;color:var(--muted);margin-top:10px}

.orari{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px;margin-top:16px}
.ora{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:11px 6px;font:inherit;
     font-size:.92rem;color:var(--navy);cursor:pointer;min-height:44px;font-variant-numeric:tabular-nums}
.ora:hover{border-color:var(--coral)}
.ora[aria-pressed="true"]{background:var(--coral);border-color:var(--coral);color:#10141C;font-weight:600}

label{display:block;font-size:.86rem;color:var(--navy);margin:14px 0 5px;font-weight:600}
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--text)}
input:focus,textarea:focus,.scelta:focus-visible,.ora:focus-visible,.giorno:focus-visible,button:focus-visible{
  outline:2px solid var(--coral);outline-offset:2px}
textarea{min-height:80px;resize:vertical}
.errore{color:var(--stop);font-size:.82rem;margin-top:5px}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consenso{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;font-size:.84rem;line-height:1.5;color:var(--muted)}
.consenso input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--coral)}
.consenso a{color:var(--coral-deep)}

.invia{width:100%;margin-top:18px;background:var(--rust);border:1px solid var(--rust);color:#fff;
       border-radius:10px;padding:15px;font:inherit;font-size:1rem;font-weight:600;cursor:pointer;min-height:52px}
.invia:hover{background:var(--rust-hover)}
.invia:disabled{opacity:.55;cursor:default}

.esito{text-align:center;padding:40px 10px}
.esito .segno{width:56px;height:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok);
              display:grid;place-items:center;margin:0 auto 18px;font-size:1.7rem}
.esito h2{font:400 1.35rem var(--serif);color:var(--navy);margin:0 0 8px}
.esito p{margin:0 0 6px}
.esito .quando{font-size:1.05rem;color:var(--navy);font-weight:600}
.ancora{margin-top:24px;background:transparent;border:1px solid var(--line);color:var(--navy);
        border-radius:8px;padding:11px 18px;font:inherit;cursor:pointer}

.pie{border-top:1px solid var(--line);margin-top:40px;padding-top:16px;font-size:.78rem;color:var(--muted)}
.pie b{color:var(--navy);font-weight:600}
.caricamento{color:var(--muted);font-size:.86rem;padding:10px 0}
/* Quando il tema è presunto dal sito di provenienza non si mostra una lista: si dice
   qual è, e si lascia una via d'uscita. Una lista è un'occasione di sbagliare bersaglio. */
.deciso{border:1px solid var(--coral);background:var(--scelto-bg);border-left:3px solid var(--coral);
        border-radius:10px;padding:13px 14px}
.deciso b{display:block;color:var(--navy)}
.deciso span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.cambia{background:none;border:0;padding:8px 0 0;font:inherit;font-size:.84rem;
        color:var(--coral-deep);text-decoration:underline;cursor:pointer}
@media (max-width:420px){ .scelte.due{grid-template-columns:1fr} }

/* Classi al posto degli attributi style="…": la CSP di aiact24 (`style-src 'self'`, senza
   unsafe-inline) blocca anche gli stili in linea, non solo i blocchi <style>. Aggiunte 12/9. */
.passo--attaccato{border-top:0;padding-top:0;margin-top:0}
.facoltativo{font-weight:400;color:var(--muted)}
.tutta-riga{grid-column:1/-1}
.staccato{margin-top:18px}
.consenso label{margin:0;font-weight:400;color:var(--muted)}


/* La testata: chi è l'azienda, e quali sistemi le appartengono. Sta in cima perché è la prima
   cosa che deve essere chiara a chi arriva da uno degli altri siti — il logo è servito dal
   nostro stesso indirizzo, altrimenti la CSP di aiact24 lo bloccherebbe. */
.marchio{text-align:center;padding:6px 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.marchio img{display:block;margin:0 auto 14px;width:min(230px,62%);height:auto}
.marchio__famiglia{margin:0;font-size:.86rem;line-height:1.65;color:var(--muted)}
.marchio__famiglia b{color:var(--navy);font-weight:600}
.marchio__famiglia span{white-space:nowrap}
/* il sito da cui si arriva si accende: dice «sei nel posto giusto» senza scriverlo */
.marchio__famiglia span.qui{color:var(--coral-deep);font-weight:600}
.marchio__dadove{margin:12px 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral)}
@media (max-width:420px){ .marchio__famiglia{font-size:.82rem} }


/* Il ritorno al sito da cui si è arrivati: visibile, ma non in competizione con «Prenota».
   Bordo invece di pieno — chi è venuto per fissare un incontro non deve trovarsi sotto il naso
   un pulsante che lo porta via più evidente di quello che lo fa restare. */
.torna{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 22px;
       width:100%;min-height:52px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;
       background:var(--white);color:var(--navy);font-size:.95rem;font-weight:600;text-decoration:none;
       transition:border-color .15s,color .15s}
.torna:hover,.torna:focus-visible{border-color:var(--coral);color:var(--coral-deep)}
.torna--forte{border-color:var(--coral);color:var(--coral-deep)}
.dopo-esito{display:grid;gap:10px;margin-top:26px}
.dopo-esito .ancora{margin-top:0}
.marchio__link{display:block}

.dopo-esito .torna{margin:0}