/*
  Nuova grafica del sito (pagine Django), rifatta una pagina alla volta.
  - Caratteri e forme: quelli della nuova EquiAssistant, variante «carta» (frontend-vite/src/nuova/carta.css):
    titoli Fraunces leggeri con una parola in corsivo Instrument Serif, etichette JetBrains Mono, angoli vivi e bordi sottili.
  - Colori: dal marchio nuovo del 23/10/2026 (static/marchio/, DEC-88): blu #2563EB, azzurro #0EA5E9, fondo #F8FAFF,
    inchiostro blu notte #0F172A; la parola in corsivo dei titoli in sfumatura blu→azzurro come «Insegnanti» del logo.
    Solo variabili: nessun colore scritto a mano fuori dal blocco dei token qui sotto.
  - Movimento e scorrimenti: dal mix delle pagine A3-B-C del sito di riferimento del titolare
    (C:/Users/Utente/Documents/SITO_SILVAGGIO): titoli che salgono da una maschera, comparse allo scorrimento,
    filo di avanzamento, numero a rullo, card che si sollevano, costellazione su canvas.
  Tutto sotto la classe radice .oi-sito (templates/sito/base.html). Caratteri ospitati sul sito (SIL OFL 1.1,
  fonts/sito/), nessuna libreria esterna; il movimento (static/js/sito.js) solo senza «movimento ridotto».
*/

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/sito/fraunces-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sito/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sito/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sito/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sito/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/sito/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sito/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/sito/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

/* Token del marchio. Contrasto (WCAG 2.1, verificato a numeri il 23/10/2026): --ink 17,1:1 su --bg, 16,0 su --surface;
   --muted 7,3 su --bg, 6,8 su --surface; --accent 4,95 su --bg, 4,64 su --surface, testo bianco su --accent 5,2;
   --cielo-testo 5,1 su --bg, 4,8 su --surface; --teal 5,1 su --bg; --brick 6,3 su --bg, 5,9 su --surface;
   --su-notte-tenue 10,7 su --notte. --cielo (2,65 su --bg) e --cielo-chiaro sono solo decorativi: mai per il testo. */
.oi-sito {
  --bg: #f8faff; /* fondo del marchio */
  --surface: #eef3fc; /* card: un velo di blu più scuro del fondo */
  --campo: #ffffff; /* campi dei moduli */
  --ink: #0f172a; /* inchiostro, blu notte della scritta «Orizzonte» */
  --muted: #475569;
  --accent: #2563eb; /* blu del marchio */
  --cielo: #0ea5e9; /* azzurro del marchio (orbita del monogramma): decorativo */
  --cielo-chiaro: #7dd3fc; /* luce dell'orbita: decorativo */
  --cielo-testo: #0270ae; /* azzurro scurito per il testo (AA su --bg e --surface) */
  --notte: #0b1f4d; /* blu notte del contorno del logo: fondi scuri (piede) */
  --terra: var(--cielo); /* era l'arancio della carta: ora il filo azzurro */
  --line: #1e3a8a33;
  --brick: #b42318; /* errori */
  --teal: #0e7490; /* conferme */
  --su-accento: #ffffff; /* testo su --accent e su --sfumatura-notte */
  --su-accento-tenue: rgb(255 255 255 / 0.92);
  --su-notte: #f8faff;
  --su-notte-tenue: #cbd5e1;
  --bg-velo: rgb(248 250 255 / 0.9); /* testata semitrasparente */
  --sfumatura: linear-gradient(100deg, #2563eb 0%, #0ea5e9 100%); /* come «Insegnanti»: filetti e riempimenti */
  --sfumatura-testo: linear-gradient(100deg, #2563eb 0%, #0270ae 100%); /* stessa sfumatura, AA per il testo */
  --sfumatura-notte: linear-gradient(135deg, #2563eb 0%, #1d4ed8 45%, #0b1f4d 100%); /* tessere piene */
  --ombra: 0 5px 20px #1e3a8a0f;
  --ombra-su: 0 24px 48px -24px #1e3a8a47;
}
.oi-sito {
  --uscita: cubic-bezier(0.16, 1, 0.3, 1); /* come expo.out */
  --morbido: cubic-bezier(0.2, 0.8, 0.2, 1);

  --f-titolo: "Fraunces", Georgia, "Times New Roman", serif;
  --f-corsivo: "Instrument Serif", Georgia, serif;
  --f-testo: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --margine: clamp(1rem, 4vw, 2.5rem);
  --alto-controllo: 2.75rem; /* 44px */

  color-scheme: light;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-testo);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.oi-sito *,
.oi-sito *::before,
.oi-sito *::after {
  box-sizing: border-box;
  border-radius: 0;
}
.oi-sito h1,
.oi-sito h2,
.oi-sito h3,
.oi-sito h4,
.oi-sito p,
.oi-sito ul,
.oi-sito ol {
  margin: 0;
  padding: 0;
}
.oi-sito ul,
.oi-sito ol {
  list-style: none;
}
.oi-sito button,
.oi-sito input {
  font: inherit;
  color: inherit;
}
.oi-sito a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
.oi-sito a:hover {
  color: var(--ink);
}
.oi-sito :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.oi-sito .oi-bottone--primario:focus-visible {
  outline-color: var(--ink);
}
.oi-sito ::selection {
  background: var(--accent);
  color: var(--su-accento);
  -webkit-text-fill-color: var(--su-accento); /* anche sul testo in sfumatura */
}
.oi-sito h1,
.oi-sito h2,
.oi-sito h3 {
  text-wrap: balance;
}

.oi-salta {
  position: absolute;
  left: var(--margine);
  top: 0;
  z-index: 60;
  transform: translateY(-120%);
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-controllo);
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--bg) !important;
  font-weight: 500;
}
.oi-salta:focus {
  transform: translateY(0);
}

/* ---------- Testata: carta, filo di avanzamento ---------- */
.oi-testata {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--bg-velo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.oi-avanzamento {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  background-image: var(--sfumatura);
  transform-origin: 0 50%;
  transform: scaleX(var(--avanzamento, 0));
}
.oi-testata__dentro,
.oi-main,
.oi-piede__dentro {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--margine);
}
.oi-testata__dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.5rem;
}
.oi-marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--alto-controllo);
  color: var(--ink) !important;
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.oi-marchio em {
  font-family: var(--f-corsivo);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.oi-marchio img {
  width: auto;
  height: 3.25rem; /* logo compatto del 23/10/2026 (oi-logo-compatto.png): sotto i 52px il nome non si legge */
}
@media (max-width: 40rem) {
  .oi-marchio img {
    height: var(--alto-controllo);
  }
}
.oi-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
}
.oi-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alto-controllo);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.oi-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--uscita);
}
.oi-nav a:hover,
.oi-nav a[aria-current="page"] {
  color: var(--ink);
}
.oi-nav a:hover::after,
.oi-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.oi-nav a {
  white-space: nowrap;
}
/* «Inizia gratis» per chi non ha fatto l'accesso: pulsante principale, senza il filo sotto delle voci */
.oi-nav .oi-nav__inizia {
  padding-inline: 1rem;
  color: var(--su-accento);
}
.oi-nav .oi-nav__inizia::after {
  content: none;
}
.oi-nav .oi-nav__inizia:hover {
  color: var(--su-accento);
}
/* Telefono: «Inizia gratis» sulla riga del logo, a destra; le voci sulla riga sotto (due righe invece di tre) */
@media (max-width: 48rem) {
  .oi-testata__dentro {
    position: relative;
  }
  .oi-nav--ospite {
    flex-basis: 100%;
  }
  .oi-nav .oi-nav__inizia {
    position: absolute;
    top: 0.5rem;
    right: var(--margine);
  }
}
@media (max-width: 40rem) {
  .oi-nav {
    gap: 0 1rem;
  }
}
.oi-saldo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--alto-controllo);
}
.oi-saldo__valore {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Struttura e tipografia ---------- */
.oi-main {
  flex: 1 0 auto;
  overflow-x: clip; /* la costellazione può uscire a destra */
  display: grid;
  gap: clamp(3.5rem, 10vh, 6.5rem);
  align-content: start;
  padding-top: clamp(1.5rem, 6vh, 4rem);
  padding-bottom: clamp(4rem, 12vh, 7rem);
}
.oi-main:focus {
  outline: none;
}
.oi-etichetta {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.oi-etichetta b {
  color: var(--accent);
  font-weight: 500;
}
/* Apertura: testo a sinistra, iniziali «OI» di puntini (js/sito.js) a destra, senza sovrapporsi */
.oi-apertura {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 30rem);
  align-items: end;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  min-height: clamp(18rem, 40vh, 28rem);
}
.oi-apertura__testo {
  display: grid;
  gap: 1.25rem;
  align-content: end;
}
.oi-cosmo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  pointer-events: none;
}
.oi-titolo {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.oi-titolo em,
.oi-titolo-2 em,
.oi-strumento__nome em {
  font-family: var(--f-corsivo);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
/* Testo in sfumatura blu→azzurro come «Insegnanti» del logo: la parola in corsivo dei titoli, il grassetto delle
   etichette e gli accenti importanti (.oi-sfumato, da usare su poche parole). Senza background-clip:text resta --accent. */
.oi-titolo em,
.oi-titolo-2 em,
.oi-titolo-3 em,
.oi-strumento__nome em,
.oi-pacchetto__nome em,
.oi-etichetta b,
.oi-sfumato {
  color: var(--accent);
}
.oi-tessera :is(em, b, .oi-sfumato) {
  color: inherit; /* su fondo blu (tessera) niente sfumatura: testo chiaro */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .oi-titolo em,
  .oi-titolo-2 em,
  .oi-titolo-3 em,
  .oi-strumento__nome em,
  .oi-pacchetto__nome em,
  .oi-etichetta b,
  .oi-sfumato {
    /* il corsivo sporge dalla sua scatola: un po' di spazio perché la sfumatura non tagli le lettere */
    padding-inline: 0.06em 0.12em;
    margin-inline: -0.06em -0.12em;
    background-image: var(--sfumatura-testo);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .oi-tessera :is(em, b, .oi-sfumato) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}
@media (forced-colors: active) {
  .oi-sito em,
  .oi-etichetta b,
  .oi-sfumato {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}
.oi-titolo-2 {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.oi-titolo-3 {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.oi-testo {
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}
.oi-piccolo {
  max-width: 62ch;
  font-size: 0.875rem;
  color: var(--muted);
}
.oi-capitolo {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.oi-capitolo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
}
.oi-capitolo__titoli {
  display: grid;
  gap: 0.6rem;
}

/* Titolo che sale da una maschera (A3): una riga per .oi-maschera */
.oi-maschera {
  display: inline-block;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  clip-path: inset(-0.4em -0.3em 0 -0.3em);
}
.oi-maschera > span {
  display: inline-block;
}

/* ---------- Pulsanti (come carta.css) ---------- */
.oi-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--alto-controllo);
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink) !important;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--morbido), border-color 0.3s var(--morbido), color 0.3s var(--morbido);
}
.oi-bottone:hover {
  background: var(--ink);
  color: var(--bg) !important;
}
.oi-bottone--primario {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--su-accento) !important;
}
.oi-bottone--primario:hover {
  border-color: var(--notte);
  background: var(--notte);
  color: var(--su-accento) !important;
}
.oi-bottone__freccia {
  display: inline-block;
  transition: transform 0.4s var(--uscita);
}
.oi-bottone:hover .oi-bottone__freccia,
a:hover .oi-bottone__freccia {
  transform: translateX(4px);
}
.oi-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ---------- Strumenti: card di carta che si sollevano (B), numero a contorno (A3) ---------- */
.oi-strumenti {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.oi-strumento {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 2rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
  transition: transform 0.4s var(--morbido), border-color 0.4s var(--morbido), box-shadow 0.4s var(--morbido);
}
.oi-strumento:hover,
.oi-strumento:focus-within {
  border-color: var(--ink);
  box-shadow: var(--ombra-su);
}
.oi-strumento__numero {
  position: absolute;
  top: 0.25rem;
  right: 1rem;
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
}
.oi-strumento__testa {
  position: relative;
  display: grid;
  gap: 1rem;
}
.oi-strumento__nome {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.oi-strumento__descrizione {
  max-width: 46ch;
  color: var(--muted);
}
.oi-strumento__punti {
  display: grid;
  border-top: 1px solid var(--line);
  counter-reset: punto;
}
.oi-strumento__punti li {
  counter-increment: punto;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.oi-strumento__punti li::before {
  content: counter(punto, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.5rem;
  color: var(--accent);
}

/* ---------- Riprendi: elenchi a righe (A3) ---------- */
.oi-colonne {
  display: grid;
  gap: 2.5rem clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.oi-colonna {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
.oi-colonna__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.oi-colonna__testa a {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.oi-righe {
  border-top: 1px solid var(--line);
}
.oi-riga {
  border-bottom: 1px solid var(--line);
}
.oi-riga a {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 4rem;
  padding: 0.75rem 0.25rem;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.3s var(--morbido);
}
.oi-riga a:hover {
  background: var(--campo);
}
.oi-riga a:hover .oi-riga__titolo {
  color: var(--accent);
}
.oi-riga__indice {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--accent);
}
.oi-riga__corpo {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.oi-riga__titolo {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--morbido);
}
.oi-riga__meta {
  font-size: 0.875rem;
  color: var(--muted);
}
.oi-riga .oi-bottone__freccia {
  color: var(--muted);
}
.oi-riga a:hover .oi-bottone__freccia {
  color: var(--accent);
}
.oi-vuoto {
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--f-corsivo);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* ---------- Crediti: tessera blu piena (B) col numero a rullo (A3) ---------- */
.oi-crediti {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
}
.oi-tessera {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: space-between;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  overflow: hidden;
  background: var(--accent);
  background-image: var(--sfumatura-notte); /* dal blu del marchio al blu notte del contorno */
  color: var(--su-accento);
  box-shadow: var(--ombra-su);
}
.oi-tessera::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--terra);
  background-image: linear-gradient(90deg, var(--cielo), var(--cielo-chiaro)); /* la scia azzurra del logo */
}
.oi-tessera .oi-etichetta,
.oi-tessera .oi-etichetta b,
.oi-tessera .oi-piccolo {
  color: var(--su-accento-tenue);
}
.oi-tessera .oi-bottone {
  border-color: var(--su-accento);
  color: var(--su-accento) !important;
}
.oi-tessera .oi-bottone:hover {
  background: var(--su-accento);
  color: var(--accent) !important;
}
.oi-tessera :focus-visible {
  outline-color: var(--su-accento);
}
.oi-numero-grande {
  display: inline-flex;
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.oi-rullo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}
.oi-rullo__colonna {
  display: block;
  transform: translateY(0);
  transition: transform 1.4s var(--uscita);
}
.oi-rullo__colonna span {
  display: block;
  height: 1em;
}
.oi-pannello {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
}
.oi-campo {
  display: grid;
  gap: 0.6rem;
}
.oi-campo label {
  font-weight: 500;
}
.oi-campo-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.oi-input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: var(--alto-controllo);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink);
  background: var(--campo);
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}
.oi-input::placeholder {
  color: var(--muted);
}
.oi-messaggi {
  display: grid;
  gap: 0.5rem;
  max-width: 40rem;
}
.oi-messaggio {
  padding: 0.75rem 1rem;
  border: 1px solid var(--teal);
  border-left-width: 4px;
  background: var(--campo);
  color: var(--teal);
}
.oi-messaggio[data-tipo="errore"] {
  border-color: var(--brick);
  color: var(--brick);
}

/* ---------- Piede: blu notte del contorno del logo, logo nella versione per fondi scuri, filo azzurro in alto ---------- */
.oi-piede {
  position: relative;
  flex-shrink: 0;
  background: var(--notte);
  color: var(--su-notte-tenue);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.oi-piede::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  background-image: var(--sfumatura);
}
.oi-piede__dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.75rem 2.25rem;
}
.oi-piede__marchio {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
.oi-piede__marchio img {
  display: block;
  width: auto;
  height: 2.75rem;
}
.oi-piede nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.oi-piede a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--su-notte-tenue);
  text-decoration: none;
}
.oi-piede a:hover {
  color: var(--su-notte);
  text-decoration: underline;
  text-decoration-color: var(--cielo);
}
.oi-piede :focus-visible {
  outline-color: var(--cielo-chiaro);
}

/* ---------- Pagine di accesso, registrazione e password (templates/sito/base_accesso.html) ---------- */
.oi-accesso {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  align-items: center;
  gap: 2rem clamp(1.5rem, 5vw, 4rem);
}
.oi-accesso__colonna {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.oi-accesso__intestazione {
  display: grid;
  gap: 1rem;
}
.oi-accesso .oi-cosmo {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 4 / 3;
  pointer-events: none;
}
.oi-accesso__card {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
}
.oi-accesso__piede {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Moduli: campi a tutta larghezza, testo normale (non mono come il codice promozionale) */
.oi-modulo {
  display: grid;
  gap: 1.1rem;
}
.oi-modulo .oi-campo {
  gap: 0.4rem;
}
.oi-modulo .oi-input {
  width: 100%;
  flex: none;
  font-family: var(--f-testo);
  letter-spacing: 0;
}
.oi-modulo .oi-input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 0;
}
.oi-modulo .oi-input[aria-invalid="true"] {
  border-color: var(--brick);
}
.oi-campi-affiancati {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.oi-aiuto {
  font-size: 0.875rem;
  color: var(--muted);
}
.oi-errori {
  display: grid;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--brick);
}
.oi-spunta {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.oi-spunta input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
}
.oi-bottone--pieno {
  width: 100%;
}
.oi-nascosto {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.oi-separatore {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* Video della conferma di registrazione: anteprima e lettore a tutta larghezza, in 16:9 */
.oi-video {
  display: grid;
  gap: 0.75rem;
}
.oi-video__cornice {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.oi-video__cornice a,
.oi-video__cornice img,
.oi-video__cornice iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.oi-video__cornice img {
  object-fit: cover;
}

/* Scintille dell'ingresso delle card (js/sito-carte.js): sopra il contenuto, sotto la testata */
.oi-scintille {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
}

/* Telefono: testata non fissa (su due righe coprirebbe troppo), iniziali sopra il titolo */
@media (max-width: 899px) {
  .oi-testata {
    position: relative;
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .oi-apertura {
    min-height: 0;
    padding-top: 1rem;
  }
  .oi-accesso {
    grid-template-columns: minmax(0, 1fr);
  }
  .oi-accesso .oi-cosmo {
    grid-column: 1;
    max-width: 15rem; /* sul telefono il logo è piccolo: prima viene il modulo */
  }
  /* Sul telefono le iniziali stanno sopra il titolo: ben visibili e testo leggibile. */
  .oi-apertura {
    grid-template-columns: minmax(0, 1fr);
  }
  .oi-cosmo {
    grid-column: 1;
    max-width: 24rem;
    justify-self: center;
  }
}

/* ---------- Movimento: solo se l'utente non chiede di ridurlo ---------- */
@media (prefers-reduced-motion: no-preference) {
  .oi-strumento:hover {
    transform: translateY(-6px);
  }
  /* Comparsa all'ingresso: .oi-movimento su <html> la mette lo script in testa a base.html (solo senza
     «movimento ridotto»); sito.js poi aggiunge .oi-visibile. Senza JS tutto è visibile. */
  .oi-movimento [data-rivela] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--uscita), transform 0.9s var(--uscita);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .oi-movimento [data-rivela].oi-visibile {
    opacity: 1;
    transform: none;
  }
  /* Karaoke (js/sito-testo.js): il blocco resta pieno, si accendono le sue lettere o parole. */
  .oi-movimento [data-rivela].oi-karaoke {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .oi-k-parola {
    display: inline-block;
    white-space: nowrap;
  }
  .oi-k-lettera,
  .oi-k-luce {
    will-change: opacity;
  }
  .oi-movimento .oi-maschera > span {
    transform: translateY(115%);
    animation: oi-sale 1.1s var(--uscita) forwards;
    animation-delay: calc(0.15s + var(--i, 0) * 90ms);
  }
  /* Card: nascoste finché js/sito-carte.js non le fa entrare (GSAP e canvas), poi .oi-entrata. */
  .oi-movimento [data-carta] {
    opacity: 0;
  }
  .oi-movimento [data-carta].oi-entrata {
    opacity: 1;
  }
  /* Rete di sicurezza: se il JS si ferma a metà, i contenuti compaiono comunque dopo 2,5 s. */
  html.oi-movimento:not(.oi-pronto) [data-rivela],
  html.oi-movimento:not(.oi-carte-pronte) [data-carta] {
    animation: oi-senza-modulo 0.01s 2.5s forwards;
  }
}
@keyframes oi-sale {
  to {
    transform: translateY(0);
  }
}
@keyframes oi-senza-modulo {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Pagina prezzi (templates/sito/prezzi.html) ---------- */
/* Pacchetti: una colonna sul telefono, tre da 900px; il modulo del checkout sta in fondo a ogni card */
.oi-pacchetti {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 900px) {
  .oi-pacchetti {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Nomi fino a due righe: prezzo e crediti restano allineati tra le card */
  .oi-pacchetto__nome {
    min-height: 2.1em;
  }
}
.oi-pacchetto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
  transition: border-color 0.4s var(--morbido), box-shadow 0.4s var(--morbido);
}
.oi-pacchetto:hover,
.oi-pacchetto:focus-within {
  border-color: var(--ink);
  box-shadow: var(--ombra-su);
}
/* Pacchetto intermedio: bordo e filo in alto in blu */
.oi-pacchetto--evidenza,
.oi-pacchetto--evidenza:hover,
.oi-pacchetto--evidenza:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ombra-su);
}
.oi-pacchetto--evidenza::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--accent);
  background-image: var(--sfumatura);
}
.oi-pacchetto__testa {
  display: grid;
  gap: 0.75rem;
}
.oi-pacchetto__nome {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.oi-pacchetto__prezzo {
  font-family: var(--f-titolo);
  font-weight: 300;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.oi-pacchetto__crediti {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}
.oi-pacchetto .oi-numero-grande {
  font-size: clamp(3rem, 5.5vw, 4.25rem);
}
.oi-pacchetto__omaggio {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--teal);
  background: var(--campo);
  color: var(--teal);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.oi-pacchetto__descrizione {
  flex: 1 0 auto;
  color: var(--muted);
}
.oi-pacchetto__consensi {
  display: grid;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.oi-pacchetto .oi-modulo {
  margin-top: auto;
}
.oi-sito .checkout-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* Le tre ragioni: card con numero a contorno, come gli strumenti */
.oi-ragioni {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.oi-ragione {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 2.6vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--ombra);
}
.oi-ragione .oi-strumento__numero {
  font-size: clamp(3.5rem, 6vw, 5rem);
}