/* ═══════════════════════════════════════════════════════════════════════════
   ceers — sistema visivo delle pagine pubbliche
   ═══════════════════════════════════════════════════════════════════════════

   TEMA CHIARO, E BASTA. È una scelta dichiarata, non una dimenticanza: ogni
   colore è dipinto esplicitamente, quindi la pagina regge anche se il sistema
   dell'utente è in scuro. Un prodotto B2B si presenta con una faccia sola.

   TRE TECNICHE PRESE DAI SISTEMI CHE REGGONO (Vercel, Linear, Stripe):

   1. IL BORDO È UN'OMBRA, non un `border`.
      `box-shadow: 0 0 0 1px …` disegna la linea senza entrare nel box model:
      niente 1px che sposta il layout, angoli arrotondati senza tagli, e il
      bordo può cambiare con una transizione morbida invece che a scatti.

   2. LE OMBRE SONO A STRATI, e ogni strato ha un mestiere:
      il bordo · un alone vicino · una profondità lontana. Sommandole si ottiene
      una superficie che sembra appoggiata, non disegnata.

   3. LA TAVOLOZZA È QUASI VUOTA: una rampa di grigi e UN accento.
      Il verde non è decorativo — in una sala «verde» vuol dire «c'è posto», ed
      è la cosa che questo prodotto dice tutto il giorno. Compare solo dove
      qualcosa è disponibile, confermato o da fare.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── I COLORI DEL MARCHIO ────────────────────────────────────────────────
     Misurati sui pixel del file consegnato (`bin/marchio-originale.png`), non
     scelti a occhio: sono i colori del segno, non un'interpretazione. */
  --marca-ciano: #06C0FD;
  --marca-blu:   #2E5CED;
  --marca-viola: #A95BF6;
  --marca-notte: #000D3C;   /* il colore della parola */
  --marca-sfuma: linear-gradient(118deg, #06C0FD 0%, #2E5CED 48%, #A95BF6 100%);

  /* ⚠️ CIANO E VIOLA NON SCRIVONO, e non stanno sotto una scritta bianca:
     fanno 2,05:1 e 3,71:1 sul fondo, contro i 4,5 della norma. Vivono nel
     segno e nelle sfumature. Il blu invece regge — 5,43:1 col bianco sopra,
     misurato — ed è per questo che l'accento è lui e non gli altri due. */

  /* ── L'ACCENTO DELL'INTERFACCIA È IL BLU DEL MARCHIO ─────────────────────
     E il verde NON è più il colore dei bottoni. La separazione è voluta:
     in una sala «verde» vuol dire c'è posto, è confermato, è fatto. Se il
     verde diventa ANCHE il colore del marchio, del bottone e del link, smette
     di voler dire quella cosa — e quella cosa è ciò che il prodotto dice tutto
     il giorno. Da qui in poi: il blu si clicca, il verde è andata bene. */
  --accento:       #2E5CED;   /* bianco sopra 5,43:1 · come testo 5,29:1 */
  --accento-scuro: #2449D6;   /* 7,00:1 — lo stato premuto e il testo su velo */
  --accento-velo:  #EDF1FE;

  /* Il verde resta, e resta un significato: compare SOLO dove qualcosa è
     confermato, incluso o fatto — la spunta del prezzo, la conferma del
     tavolo. Se comparisse anche altrove non direbbe più niente. */
  --verde:       #0E6B4C;
  --verde-scuro: #0A5239;
  --verde-velo:  #E9F3EE;

  /* ── LA RAMPA NEUTRA ─────────────────────────────────────────────────────
     Era virata al verde («un grigio puro sembra non scelto»). Ora è virata al
     blu del marchio, che è la stessa idea con la tinta giusta.
     ⚠️ Il cambio è A LUMINANZA COSTANTE: ogni grigio è stato ricalcolato
     cercando il valore che, con la tinta nuova, rende la stessa luminanza
     relativa di prima. Quindi TUTTI i rapporti di contrasto già misurati sono
     rimasti quelli certificati, e non c'è niente da rimisurare. */
  --bianco:      #FFFFFF;
  --sfondo:      #FBFCFF;
  --nebbia:      #F4F6FA;
  --nebbia-2:    #EDEEF4;
  --inchiostro:  #0E1016;
  --testo:       #3D414D;
  --tenue:       #6D717D;
  /* ⚠️ #98A19D fino al 29/08/2026, e non passava: 2,58:1 sullo sfondo contro i
     4,5:1 che la norma chiede (WCAG 1.4.3). È il colore degli aiuti sotto i
     campi, dei tempi accanto ai passi e della riga in fondo — cioè proprio il
     testo piccolo che qualcuno legge col telefono in mano. Misurato, non
     stimato: fa 4,88 sul bianco, 4,76 sullo sfondo, 4,51 sulla nebbia — gli
     stessi tre numeri di prima del cambio di tinta, perché la luminanza non è
     cambiata. */
  --debole:      #6D717C;

  /* usato solo dove serve attenzione, mai per decorare */
  --attenzione:       #A85B18;
  --attenzione-scuro: #6E3A0E;
  --attenzione-velo:  #FCF1E6;
  --errore:      #8E2A1C;
  --errore-velo: #FDF0EE;

  /* il bordo vive nello strato ombra */
  --bordo:       0 0 0 1px rgba(14, 16, 22, .07);
  --bordo-forte: 0 0 0 1px rgba(14, 16, 22, .12);

  /* ombre a strati: bordo + alone + profondità */
  --alza-1: 0 0 0 1px rgba(14,16,22,.06), 0 1px 2px rgba(14,16,22,.04);
  --alza-2: 0 0 0 1px rgba(14,16,22,.06), 0 2px 4px rgba(14,16,22,.04),
            0 12px 24px -12px rgba(14,16,22,.12);
  --alza-3: 0 0 0 1px rgba(14,16,22,.07), 0 4px 8px rgba(14,16,22,.04),
            0 24px 48px -20px rgba(14,16,22,.18);

  --raggio:    10px;
  --raggio-lg: 16px;
  --raggio-xl: 22px;

  /* ── LA SCALA TIPOGRAFICA — otto misure, e ognuna ha un mestiere ─────────
     Prima erano VENTI misure diverse fra 0,68 e 1,3 rem, decise una pagina per
     volta (due erano scritte dentro l'attributo `style` di un paragrafo). Venti
     misure non sono una scala: sono rumore, e chi scrive la pagina dopo ne
     inventa la ventunesima.

     ⛔ SOTTO --t-nota NON SI SCENDE. Chi legge questa pagina ha cinquant'anni,
     è in piedi fra due servizi e tiene il telefono con una mano sola. L'unica
     eccezione è --t-eti, che è un'etichetta maiuscola: si scansiona, non si
     legge. Il testo che si legge davvero sta a --t-corpo, che è 17 px e non 16:
     i 15 px di prima erano più piccoli del corpo dichiarato dal foglio. */
  --t-eti:   .75rem;                          /* ETICHETTE MAIUSCOLE */
  --t-nota:  .9375rem;                        /* note, tempi, fonti — il minimo */
  --t-ui:    1rem;                            /* navigazione, bottoni, campi */
  --t-corpo: 1.0625rem;                       /* tutto quello che si legge */
  --t-3:     1.18rem;                          /* titolo di scheda */
  --t-guida: clamp(1.1rem, 1.8vw, 1.3rem);    /* il paragrafo che spiega */
  --t-2:     clamp(1.7rem, 3.4vw, 2.4rem);    /* titolo di sezione */
  --t-1:     clamp(2.3rem, 5.4vw, 3.7rem);    /* titolo di pagina */
  --t-cifra: clamp(3rem, 8vw, 4.6rem);        /* il numero che deve fermare */

  /* ── LA TIPOGRAFIA VIENE DAL MARCHIO ─────────────────────────────────────
     Il display era Fraunces, una serif: davanti a un segno geometrico non ci
     stava più. Urbanist è il carattere libero più vicino alla scritta del
     marchio fra i 79 tagli misurati (0,78 di sovrapposizione sulle quattro
     lettere) — non è quello, e non lo diventerà: per questo la parola del
     marchio è ricalcata e non scritta. Qui serve a far sembrare i titoli
     PARENTI del logo, non a imitarlo. */
  --display: 'Urbanist', 'Inter', system-ui, sans-serif;
  --corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* una curva sola per tutto: il movimento deve sembrare una mano, non un motore */
  --molla: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: var(--t-corpo)/1.6 var(--corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── testa ─────────────────────────────────────────────────────────────── */
.v-testa {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .85rem 1.5rem;
  background: rgba(251, 252, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(14, 16, 22,.06);
}
/* Il marchio è il componente <Marca/>: segno + parola, dal file consegnato.
   Era una scritta in Fraunces, cioè il nome del prodotto scritto con lettere
   che non erano le sue. */
.v-nav { display: flex; gap: .3rem; margin-right: auto; }
.v-nav a {
  color: var(--tenue); text-decoration: none; font-size: var(--t-ui); font-weight: 500;
  padding: .45rem .7rem; border-radius: 7px;
  transition: color .18s var(--molla), background .18s var(--molla);
}
.v-nav a:hover { color: var(--inchiostro); background: var(--nebbia); }
.v-nav a.attiva { color: var(--inchiostro); background: var(--nebbia-2); }
.v-azioni { display: flex; gap: .6rem; align-items: center; }
.v-entra {
  color: var(--tenue); text-decoration: none; font-size: var(--t-ui); font-weight: 500;
  padding: .45rem .7rem; border-radius: 7px; transition: color .18s var(--molla);
}
.v-entra:hover { color: var(--inchiostro); }

/* ── bottoni ───────────────────────────────────────────────────────────── */
.btn, .v-cta {
  --spinta: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 600 var(--t-ui)/1 var(--corpo);
  padding: .68rem 1.15rem; border-radius: 9px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  background: var(--accento); color: #fff;
  box-shadow: 0 0 0 1px rgba(14, 16, 22,.1), 0 1px 2px rgba(14, 16, 22,.14);
  transform: translateY(var(--spinta));
  transition: background .2s var(--molla), transform .2s var(--molla),
              box-shadow .2s var(--molla);
}
.btn:hover, .v-cta:hover {
  background: var(--accento-scuro); --spinta: -1px;
  box-shadow: 0 0 0 1px rgba(14, 16, 22,.12), 0 4px 12px -2px rgba(46,92,237,.35);
}
/* Lo scatto in giù al clic: è il dettaglio che fa sembrare un bottone premuto
   invece che cliccato. Costa una riga e si sente. */
.btn:active, .v-cta:active { --spinta: 1px; transition-duration: .06s; }

.btn-vuoto {
  background: var(--bianco); color: var(--inchiostro);
  box-shadow: var(--alza-1);
}
.btn-vuoto:hover {
  background: var(--bianco); --spinta: -1px;
  box-shadow: 0 0 0 1px rgba(14, 16, 22,.14), 0 6px 16px -6px rgba(14, 16, 22,.18);
}
.btn-grande { padding: .9rem 1.6rem; font-size: var(--t-corpo); border-radius: 11px; }

/* La freccia che scivola: si muove solo al passaggio, e di tre pixel. */
.btn .frec { transition: transform .22s var(--molla); }
.btn:hover .frec, .v-cta:hover .frec { transform: translateX(3px); }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 2px;
}

/* ── impaginazione e tipografia ────────────────────────────────────────── */
.sez { padding: 5.5rem 1.5rem; }
.sez-fitta { padding: 3.5rem 1.5rem; }
.dentro { max-width: 1080px; margin: 0 auto; }
.stretto { max-width: 680px; margin: 0 auto; }

h1 {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-1); line-height: 1.03;
  letter-spacing: -.032em; margin: 0 0 1.1rem; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-2); line-height: 1.12;
  letter-spacing: -.022em; margin: 0 0 .9rem; text-wrap: balance;
}
h3 { font-size: var(--t-3); font-weight: 600; margin: 0 0 .4rem; letter-spacing: -.006em; }
p { margin: 0 0 1rem; max-width: 64ch; color: var(--testo); }
.guida { font-size: var(--t-guida); color: var(--tenue); max-width: 54ch; line-height: 1.5; }

.occhiello {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 var(--t-eti)/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accento); background: var(--accento-velo);
  padding: .42rem .7rem; border-radius: 999px; margin: 0 0 1.3rem;
}
.occhiello::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}

/* ── apertura, col velo di colore appena percettibile ──────────────────── */
.apre { position: relative; padding: 5rem 1.5rem 4rem; overflow: hidden; }
.apre::before {
  content: ''; position: absolute; inset: -30% 20% auto -10%; height: 620px;
  background:
    /* I due poli della sfumatura del segno, tenuti bassissimi: l'apertura
       deve SAPERE di ceers, non essere colorata. */
    radial-gradient(46% 52% at 22% 30%, rgba(6,192,253,.13), transparent 70%),
    radial-gradient(38% 46% at 74% 18%, rgba(169,91,246,.10), transparent 72%);
  pointer-events: none; z-index: 0;
}
.apre > * { position: relative; z-index: 1; }
.apre .azioni { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.2rem; }
.apre .sotto {
  font-size: var(--t-nota); color: var(--debole); margin-top: 1.2rem;
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: center;
}
.apre .sotto span { display: inline-flex; align-items: center; gap: .4rem; }
.apre .sotto .pallino { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

/* ── l'anteprima del prodotto ──────────────────────────────────────────── */
/* Non una schermata finta: è la forma vera del modulo di prenotazione, con i
   suoi stati. Chi guarda capisce cosa compra prima di registrarsi. */
.finestra {
  background: var(--bianco); border-radius: var(--raggio-xl);
  box-shadow: var(--alza-3); overflow: hidden; max-width: 460px;
}
.finestra-barra {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem .9rem; background: var(--nebbia);
  box-shadow: inset 0 -1px 0 rgba(14, 16, 22,.06);
}
.finestra-punto { width: 9px; height: 9px; border-radius: 50%; background: rgba(14, 16, 22,.13); }
.finestra-url {
  margin-left: .5rem; font: 500 .78rem/1 var(--mono); color: var(--debole);  /* browser finto, non testo */
  background: var(--bianco); padding: .34rem .6rem; border-radius: 6px;
  box-shadow: var(--bordo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finestra-corpo { padding: 1.5rem 1.4rem 1.7rem; }
.ap-eti {
  font: 600 var(--t-eti)/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--debole); margin: 0 0 .6rem;
}
.ap-giorni, .ap-ore { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.ap-g, .ap-o {
  font: 500 var(--t-nota)/1 var(--corpo); padding: .55rem .7rem; border-radius: 8px;
  background: var(--bianco); color: var(--testo); box-shadow: var(--bordo);
  transition: box-shadow .18s var(--molla), transform .18s var(--molla);
}
.ap-g strong { display: block; font-size: var(--t-ui); margin-top: .18rem; color: var(--inchiostro); }
.ap-g.scelto, .ap-o.scelto {
  background: var(--accento); color: #fff; box-shadow: 0 2px 8px -2px rgba(46,92,237,.45);
}
.ap-g.scelto strong { color: #fff; }
.ap-o.pieno { color: var(--debole); text-decoration: line-through; box-shadow: none; background: var(--nebbia); }
.ap-esito {
  display: flex; align-items: center; gap: .6rem;
  /* Verde, non blu: qui non c'è niente da cliccare — c'è una cosa andata bene. */
  background: var(--verde-velo); color: var(--verde-scuro);
  padding: .8rem .95rem; border-radius: 10px; font-weight: 600; font-size: var(--t-nota);
}
.ap-spunta {
  width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff;
  display: grid; place-items: center; font-size: .7rem; flex: none;  /* è un segno, non testo */
}

/* ── bento ─────────────────────────────────────────────────────────────── */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
.cella {
  grid-column: span 2;
  background: var(--bianco); border-radius: var(--raggio-lg); padding: 1.5rem;
  box-shadow: var(--alza-1);
  transition: box-shadow .25s var(--molla), transform .25s var(--molla);
}
.cella:hover { box-shadow: var(--alza-2); transform: translateY(-2px); }
.cella-larga { grid-column: span 3; }
.cella p { margin: 0; color: var(--tenue); font-size: var(--t-corpo); }
.cella-icona {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: .9rem;
  background: var(--accento-velo); color: var(--accento);
  display: grid; place-items: center;
}
.cella-icona svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .cella, .cella-larga { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

/* ── il confronto con lo zero ──────────────────────────────────────────────
   Due colonne, e la sinistra è deliberatamente più smorta: è la situazione di
   adesso, che non va derisa — sta funzionando. La destra porta l'accento solo
   sul filo di sinistra, non sul fondo: se le sei righe fossero sei riquadri
   colorati sembrerebbe una tabella comparativa da brochure, che è esattamente
   il tono che qui non serve. */
.confronto { margin-top: 2rem; }
.conf-testa {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  font: 600 var(--t-eti)/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--debole); padding-bottom: .8rem;
  box-shadow: 0 1px 0 var(--nebbia-2);
}
.conf-testa span:last-child { color: var(--accento); }
.conf-riga {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  padding: 1.1rem 0; box-shadow: 0 1px 0 var(--nebbia-2);
}
.conf-riga p { margin: 0; max-width: 42ch; }
.conf-oggi { color: var(--tenue); }
.conf-dopo { color: var(--inchiostro); font-weight: 500; }

@media (max-width: 720px) {
  /* Sul telefono le due colonne diventano due righe: la seconda rientra e
     porta il filo dell'accento, perché senza le intestazioni in cima serve
     qualcosa che dica «questa è l'altra metà» senza doverlo scrivere. */
  .conf-testa { display: none; }
  .conf-riga { grid-template-columns: 1fr; gap: .55rem; padding: 1.1rem 0; }
  .conf-dopo {
    padding-left: .9rem; box-shadow: inset 2px 0 0 var(--accento);
  }
}

/* ── passi ─────────────────────────────────────────────────────────────── */
.passi { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.passo-n {
  font-family: var(--display); font-size: var(--t-3); font-weight: 600; color: var(--accento);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accento-velo); margin-bottom: .9rem;
}
.passo-testo { color: var(--tenue); }
.passo-tempo { font-size: var(--t-nota); color: var(--debole); margin: .4rem 0 0; }

/* ── la prova ──────────────────────────────────────────────────────────── */
.prova {
  background: var(--inchiostro); color: #fff; border-radius: var(--raggio-xl);
  padding: 3rem 2.4rem; position: relative; overflow: hidden;
}
.prova::after {
  content: ''; position: absolute; inset: auto -10% -60% 40%; height: 340px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(46,92,237,.5), transparent 70%);
  pointer-events: none;
}
.prova > * { position: relative; z-index: 1; }
.prova h2 { color: #fff; }
.prova p { color: rgba(255,255,255,.76); }
/* Sul pannello scuro l'accento è il CIANO del segno, non il blu: il blu su
   quasi-nero non stacca abbastanza, il ciano fa 9,02:1 contro i 3,50 del blu. È l'unico posto dove
   il ciano scrive, ed è legittimo perché il fondo è scuro — la regola «ciano
   e viola non scrivono» vale sul chiaro, dove fa 2,05:1.
   ⚠️ Erano due letterali verde menta (#8FD9BB) rimasti dall'accento di prima. */
.prova .occhiello { color: var(--marca-ciano); background: rgba(6,192,253,.14); }
.prova-numero {
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: var(--t-cifra); line-height: 1; margin: .6rem 0 .8rem;
  letter-spacing: -.03em;
}
.prova-numero small { font-size: .3em; color: rgba(255,255,255,.5); font-family: var(--corpo); font-weight: 400; }
.prova-domanda {
  background: rgba(255,255,255,.07); box-shadow: inset 3px 0 0 var(--marca-ciano);
  padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; margin: 1.8rem 0 1.2rem;
  font-style: italic; color: rgba(255,255,255,.9);
}
.prova .fonte { font-size: var(--t-nota); color: rgba(255,255,255,.6); margin: 0; }

/* ── prezzo ────────────────────────────────────────────────────────────── */
/* ⚠️ Il doppio selettore non è pedanteria: la cifra vive dentro una `.scheda`,
   e `.scheda p` (0,2,0) batteva `.prezzo-cifra` (0,1,0). Senza, il numero più
   importante della pagina veniva reso come un paragrafo qualsiasi. */
.scheda .prezzo-cifra, .prezzo-cifra {
  font-family: var(--display); font-weight: 600; color: var(--inchiostro);
  font-size: var(--t-cifra); line-height: 1; margin: .3rem 0 0;
  letter-spacing: -.03em;
}
.prezzo-cifra small {
  /* `letter-spacing: normal` non è pignoleria: la cifra sopra ha -0,03em per
     stringere «89€», e la riga sotto lo ereditava — «al mese, IVA esclusa»
     usciva con le lettere appiccicate. */
  display: block; margin-top: .6rem; letter-spacing: normal;
  font: 400 var(--t-corpo)/1.4 var(--corpo); color: var(--tenue);
}
.scheda .prezzo-riga, .prezzo-riga {
  display: flex; align-items: flex-start; gap: .6rem; margin: .6rem 0;
  color: var(--testo); font-size: var(--t-corpo);
}
.prezzo-riga::before {
  content: ''; flex: none; width: 16px; height: 16px; margin-top: .18rem; border-radius: 50%;
  /* La spunta di quello che è incluso: verde, come ogni «sì» del prodotto. */
  background: var(--verde-velo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6B4C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ── superfici ─────────────────────────────────────────────────────────── */
.scheda {
  background: var(--bianco); border-radius: var(--raggio-lg); padding: 1.7rem;
  box-shadow: var(--alza-2);
}
.scheda p { margin: 0 0 .6rem; color: var(--tenue); font-size: var(--t-corpo); }
.scheda p:last-child { margin-bottom: 0; }

.avviso {
  background: var(--attenzione-velo); color: var(--attenzione-scuro);
  box-shadow: 0 0 0 1px rgba(168,91,24,.18);
  border-radius: var(--raggio); padding: 1.1rem 1.3rem; font-size: var(--t-corpo);
}
.avviso p { color: inherit; }
.avviso p:last-child { margin-bottom: 0; }

.franco { border-left: 2px solid var(--nebbia-2); padding-left: 1.3rem; color: var(--tenue); margin: 0; }
.franco li { margin-bottom: .8rem; max-width: 62ch; }

.fatto {
  background: var(--verde-velo); color: var(--verde-scuro);
  box-shadow: 0 0 0 1px rgba(14,107,76,.16);
  padding: 1.1rem 1.3rem; border-radius: var(--raggio); font-weight: 500;
}

code {
  font: .88em/1.4 var(--mono); background: var(--nebbia);
  padding: .16rem .42rem; border-radius: 5px; color: var(--inchiostro);
}

/* ── domande ───────────────────────────────────────────────────────────── */
.dom { box-shadow: 0 1px 0 rgba(14, 16, 22,.07); padding: 1.15rem 0; }
.dom summary {
  cursor: pointer; font-weight: 600; font-size: var(--t-corpo); list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.dom summary::-webkit-details-marker { display: none; }
.dom summary::after {
  content: '+'; font-size: 1.3rem; color: var(--debole); font-weight: 400;  /* è un segno, non testo */
  transition: transform .25s var(--molla);
}
.dom[open] summary::after { transform: rotate(45deg); }
.dom p { margin: .8rem 0 0; color: var(--tenue); font-size: var(--t-corpo); }

/* ── moduli ────────────────────────────────────────────────────────────── */
form.modulo { display: grid; gap: 1.15rem; max-width: 25rem; }
label { display: grid; gap: .4rem; font-size: var(--t-nota); font-weight: 600; color: var(--inchiostro); }
input {
  font: 400 var(--t-corpo)/1.4 var(--corpo); padding: .78rem .85rem;
  border: 0; border-radius: 9px; background: var(--bianco); color: var(--inchiostro);
  box-shadow: var(--bordo-forte); transition: box-shadow .18s var(--molla);
}
input::placeholder { color: var(--debole); }
input:hover { box-shadow: 0 0 0 1px rgba(14, 16, 22,.2); }
input:focus { outline: 0; box-shadow: 0 0 0 1px var(--accento), 0 0 0 4px var(--accento-velo); }
.aiuto { font-size: var(--t-nota); color: var(--debole); font-weight: 400; }
.errore {
  background: var(--errore-velo); color: var(--errore); box-shadow: 0 0 0 1px rgba(142,42,28,.18);
  padding: .85rem 1.05rem; border-radius: 9px; margin: 0 0 1.3rem; font-size: var(--t-corpo);
}

ul.elenco { padding-left: 1.15rem; color: var(--testo); }
ul.elenco li { margin-bottom: .5rem; }

/* ── piede ─────────────────────────────────────────────────────────────── */
.v-piede { padding: 3rem 1.5rem; margin-top: 2rem; box-shadow: 0 -1px 0 rgba(14, 16, 22,.07); }
.v-piede-riga { max-width: 1080px; margin: 0 auto; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.v-piede nav { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-left: auto; }
.v-piede a { color: var(--tenue); text-decoration: none; font-size: var(--t-ui); transition: color .18s var(--molla); }
.v-piede a:hover { color: var(--inchiostro); }
.v-nota { max-width: 1080px; margin: 1.4rem auto 0; color: var(--debole); font-size: var(--t-nota); }

/* ── comparsa allo scorrimento ─────────────────────────────────────────── */
/* Piccola: 10px e un'opacità. Un'entrata che si nota è un'entrata sbagliata. */
[data-entra] {
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--molla), transform .55s var(--molla);
}
[data-entra].dentro-vista { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-entra] { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .v-testa { flex-wrap: wrap; gap: .8rem; padding: .8rem 1.1rem; }
  .v-nav { order: 3; width: 100%; margin-right: 0; overflow-x: auto; }
  .v-azioni { margin-left: auto; }
  .sez { padding: 3.5rem 1.15rem; }
  .apre { padding: 3rem 1.15rem 2.5rem; }
  .prova { padding: 2.2rem 1.4rem; }
}

/* ── griglia dell'apertura ─────────────────────────────────────────────── */
.apre-griglia {
  display: grid; gap: 3.5rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 900px) {
  .apre-griglia { grid-template-columns: 1fr; gap: 2.5rem; }
  .apre-griglia .finestra { max-width: 100%; }
}