@import url('/fonts/fonts.css');

:root {
    --bg-0: #080711;
    --bg-1: #10162f;
    --card: rgba(255, 255, 255, 0.08);
    --stroke: rgba(255, 255, 255, 0.14);
    --text: #eef2ff;
    --muted: #b5bdd8;
    --accent: #9d5cff;
    --accent-2: #22d3ee;
    --accent-3: #ff4ecd;
}

html, body {
    /* Le tendine, le barre di scorrimento e i selettori di data li disegna il
       sistema, non noi: senza questa riga li disegna chiari, e su una pagina
       scura le voci di una tendina venivano bianche su bianco — leggibili solo
       quella corrente, che il sistema evidenzia. Dichiarare il tema fa scegliere
       al browser i colori giusti per tutti i controlli nativi, che è meglio che
       ridipingerli uno per uno. */
    color-scheme: dark;
    font-family: 'Inter', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(157, 92, 255, 0.25), transparent 30%),
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.18), transparent 24%),
        linear-gradient(160deg, var(--bg-0), var(--bg-1));
    color: var(--text);
    min-height: 100%;
}

a, .btn-link {
    color: #b9f3ff;
}

.top-row-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.top-row-links a {
    text-decoration: none;
}

/* Respiro sotto la riga di servizio: senza, il titolo della pagina parte
   appiccicato al bordo — si vedeva su Accedi e Registrati, che non hanno un
   involucro tutto loro. La pagina d'ingresso è esclusa più sotto: porta la
   propria impaginazione a tutto campo. */
article.content {
    padding-top: 1.9rem;
    padding-bottom: 2.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-3));
    border: 0;
    border-radius: 999px;
    padding: 0.9rem 1.4rem;
    box-shadow: 0 12px 30px rgba(157, 92, 255, 0.28);
}

.btn-outline-light {
    border-radius: 999px;
}

/* «Regala» accanto a «Compra con» (pagina /pricing), tema di casa: senza il
   sistema-tasti di Ti Canto, l'outline non ridefiniva nemmeno il padding, così era
   davvero più piccolo, senza ombra e senza hover. Gli diamo la stessa statura del
   principale — misura piena, un'ombra, e un salto al passaggio del mouse — pur
   restando col bordo, così i due si distinguono ma pesano uguale. Sotto Ti Canto
   una regola più specifica prende il sopravvento (vedi «.btn.btn.btn-regalo»). */
.btn.btn-regalo {
    padding: 0.9rem 1.4rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
}
.btn.btn-regalo:is(:hover, :focus-visible):not(:disabled, .disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.glass-card {
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: 24px;
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.hero-shell {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem 0 1rem;
}

.hero-copy h1 {
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1.05;
    font-weight: 800;
    max-width: 11ch;
}

.hero-copy p,
.hero-list,
.feature-grid p,
.studio-shell p,
.songs-shell p,
.admin-shell p {
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-panel {
    padding: 1.6rem;
}

.hero-badge {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    color: #b7fbff;
    margin-bottom: 1rem;
}

.hero-list,
.feature-grid {
    display: grid;
    gap: 1rem;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.feature-grid article,
.pricing-card,
.song-card,
.studio-form,
.admin-panel {
    padding: 1.3rem;
}

/* L'anteprima di un'email: un foglio chiaro, così l'amministratore vede il
   corpo come arriverà, a prescindere dal tema scuro della console. */
.email-anteprima {
    background: #fff;
    color: #1b1b1f;
    border: 1px solid var(--bordo, rgba(0, 0, 0, .12));
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    max-height: 60vh;
    overflow: auto;
}

.email-anteprima a {
    color: #6E3BEF;
}

/* I filtri del pannello utenti: una griglia che si adatta, i campi si
   affiancano su schermo largo e si impilano sul telefono. */
.admin-filtri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.admin-filtri-azione {
    display: flex;
    align-items: flex-end;
}

/* minmax(0, 1fr) e non il «1fr» sottinteso: le celle di una griglia non scendono
   sotto il loro contenuto minimo, e in queste pagine il contenuto minimo e' roba
   che non si spezza — il token pubblico di un brano, un lettore audio. Su tablet
   ci stava lo stesso e non si notava; su un telefono da 390px la pagina usciva
   dallo schermo. Stessa correzione gia' fatta per le pagine legali. */
.studio-shell,
.songs-shell,
.pricing-shell,
.admin-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0 2rem;
}

.studio-grid,
.pricing-grid,
.songs-grid,
.admin-grid {
    display: grid;
    gap: 1rem;
}

.studio-grid {
    grid-template-columns: 1.35fr 0.85fr;
}

.pricing-grid,
.songs-grid,
.admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Gli ultimi acquisti, nella pagina dei prezzi: una riga per acquisto — cosa e
   quanto in alto, quando, come e com'e' andata sotto. Lo stato ha il colore
   dell'esito, ma e' scritto: il colore da solo non dice niente a chi non lo vede. */
/* «Offerta da Ti Canto»: la canzone nata da un codice dell'amministrazione. Non
   e' un avviso, e' un riconoscimento — tono del verde degli esiti, non del rosso. */
.brano-omaggio {
  display: inline-block; margin-top: .35rem; padding: .12rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  background: color-mix(in srgb, var(--f-mint, #2FBF9E) 22%, transparent);
  color: var(--f-mint-ink, var(--f-ink, inherit));
  border: 1px solid var(--f-mint, #2FBF9E);
}
.pricing-omaggio { margin-top: .25rem; }

.acquisti-elenco { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; }
.acquisto { display: grid; gap: .2rem; padding: .7rem 0; border-top: 1px solid var(--f-rule, rgba(255, 255, 255, .12)); }
.acquisto:first-child { border-top: 0; padding-top: .15rem; }
.acquisto-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.acquisto-testa b { font-weight: 700; }
.acquisto-importo { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.acquisto-regalo { font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; background: var(--f-surface-2, rgba(255, 255, 255, .08)); }
.acquisto-dettagli { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .75rem; font-size: .9rem; color: var(--f-ink-2, var(--muted)); }
.acquisto-stato { font-size: .85rem; font-weight: 600; }
.acquisto-stato.stato-confermato { color: var(--f-esito-ok, #7BD99B); }
.acquisto-stato.stato-inattesa { color: var(--f-warn-ink, #FFD27A); }
.acquisto-stato.stato-fallito { color: var(--f-esito-ko, #f97066); }
.acquisto-stato.stato-rimborsato { color: var(--f-ink-2, var(--muted)); }

/* ----------------------------------------------------------------------
   La pagina del riscatto (/codice).

   E' la prima pagina che vede chi ha in mano la cartolina di uno sponsor e non
   ci conosce. Una cosa sola da fare, grande e larga: prima era un riquadro
   stretto con dentro un campo, un errore e un tasto appiccicati.

   Il campo del codice e' grande e spaziato perche' si ricopia da una stampa,
   guardando avanti e indietro; accanto c'e' la fotocamera, per non ricopiare
   affatto. I tre passi dicono cosa succede dopo: chi arriva qui non lo sa.
   ---------------------------------------------------------------------- */
.codice-shell { display: grid; gap: 1.75rem; max-width: 52rem; padding: 1.5rem 0 3rem; }
.codice-testa { display: grid; gap: .6rem; }
.codice-testa h1 { margin: 0; }
.codice-spiega { margin: 0; max-width: 48ch; font-size: 1.1rem; color: var(--f-ink-2, var(--muted)); }

.codice-carta { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 4vw, 2.25rem); }
.codice-campo-riga { display: grid; gap: .5rem; }
.codice-etichetta { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--f-ink-2, var(--muted)); }
.codice-campo {
  width: 100%;
  min-height: 4.25rem;
  padding: 0 1rem;
  border-radius: 16px;
  border: 2px solid var(--f-rule, rgba(255, 255, 255, .2));
  background: var(--f-surface-2, rgba(255, 255, 255, .06));
  color: var(--f-ink, inherit);
  font-family: "Bricolage Grotesque", ui-monospace, monospace;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
.codice-campo::placeholder { font-size: .8em; font-weight: 600; letter-spacing: .12em; opacity: .5; text-transform: none; }
.codice-campo:focus-visible { outline: 3px solid var(--f-focus, #9d5cff); outline-offset: 3px; border-color: transparent; }

.codice-esito { margin: 0; min-height: 1.6rem; font-weight: 600; text-align: center; }
.codice-esito-ok { color: var(--f-esito-ok, #1E7A38); }
.codice-esito-no { color: var(--f-esito-ko, #B3221F); }
.codice-esito-attesa { color: var(--f-ink-2, var(--muted)); font-weight: 400; }

.codice-azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; }
.codice-riscatta { min-width: 15rem; }
.codice-oppure { font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--f-ink-2, var(--muted)); }
.codice-icona { width: 1.15em; height: 1.15em; }

/* Il mirino: il video grande, una cornice sopra che dice dove mettere il QR. */
.codice-mirino { display: grid; justify-items: center; gap: .6rem; position: relative; }
.codice-video { width: min(100%, 28rem); aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: #000; }
.codice-mirino-cornice {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(70%, 19rem); aspect-ratio: 1; margin-top: min(15%, 4.5rem);
  border: 3px dashed rgba(255, 255, 255, .85); border-radius: 18px; pointer-events: none;
}
.codice-mirino-aiuto { margin: 0; color: var(--f-ink-2, var(--muted)); text-align: center; }

.codice-aiuto { margin: 0; text-align: center; font-size: .95rem; color: var(--f-ink-2, var(--muted)); }
.codice-aiuto-sinistra { text-align: left; }
.codice-email {
  width: 100%; min-height: 3.25rem; padding: 0 1rem; border-radius: 14px;
  border: 2px solid var(--f-rule, rgba(255, 255, 255, .2)); background: var(--f-surface-2, rgba(255, 255, 255, .06));
  color: var(--f-ink, inherit); font-size: 1.05rem;
}
.codice-email:focus-visible { outline: 3px solid var(--f-focus, #9d5cff); outline-offset: 3px; border-color: transparent; }

/* Preso: quello che conta e' che il credito e' suo e che cosa puo' farci. */
.codice-preso {
  display: grid; gap: .6rem; justify-items: start; padding: 1.1rem 1.25rem; border-radius: 16px;
  background: var(--f-surface-2, rgba(255, 255, 255, .06)); border: 2px solid var(--f-esito-ok, #1E7A38);
}
.codice-preso p { margin: 0; }
.codice-preso-titolo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; }

/* I tre passi: quadrati numerati, non un elenco puntato in mezzo alla pagina. */
.codice-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.codice-passi li {
  display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 18px;
  background: var(--f-surface, rgba(255, 255, 255, .04)); border: 2px solid var(--f-rule, rgba(255, 255, 255, .12));
}
.codice-passo-n {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--f-yellow, #FFC53D); color: var(--f-on-yellow, #2A2340);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
}
.codice-senza { margin: 0; color: var(--f-ink-2, var(--muted)); }

/* I rimandi sparsi: stessa voce ovunque, in tono minore. */
.pricing-codice, .account-codice, .brani-vuoto-codice { margin: 0 0 .5rem; color: var(--f-ink-2, var(--muted)); }
.account-codice { margin-bottom: 1rem; }

/* L'invito a mettere una password, per chi entra solo con l'email. Testo a
   sinistra e tasto a destra: in colonna, con tre righe di spiegazione appiccicate,
   sembrava un avviso di errore. */
.brani-ospite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.75rem; padding: 1.35rem 1.5rem;
}
.brani-ospite-testo { display: grid; gap: .35rem; max-width: 54ch; }
.brani-ospite-titolo { margin: 0; font-weight: 700; font-size: 1.1rem; }
.brani-ospite-spiega { margin: 0; color: var(--f-ink-2, var(--muted)); }

/* Il QR del codice, in amministrazione: si guarda e si scarica. */
.admin-omaggio-nuovo { display: grid; gap: .5rem; justify-items: start; }
.admin-omaggio-qr { margin: 0; display: grid; gap: .25rem; justify-items: center; }
.admin-omaggio-qr img { background: #fff; padding: .75rem; border-radius: 14px; width: min(320px, 70vw); height: auto; }

/* «Vedi QR» / «Nascondi QR»: un <details> travestito da tasto. Niente script,
   cosi' funziona anche su queste pagine servite dal server. L'etichetta cambia da
   sola quando si apre. */
.admin-omaggio-vedi { margin: .5rem 0; }
.admin-omaggio-vedi > summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
  min-height: var(--tb-h-piccola, 36px); padding: 0 1rem; border-radius: var(--tb-raggio, 999px);
  border: 2px solid var(--tb-secondario-bordo, var(--f-ink, currentColor));
  background: var(--tb-secondario-fondo, transparent); color: var(--tb-secondario-testo, inherit);
  font-family: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif; font-weight: 700; font-size: .9rem;
}
.admin-omaggio-vedi > summary::-webkit-details-marker { display: none; }
.admin-omaggio-vedi > summary:focus-visible { outline: 3px solid var(--f-focus, #9d5cff); outline-offset: 3px; }
.admin-omaggio-vedi > summary .chiudi { display: none; }
.admin-omaggio-vedi[open] > summary .apri { display: none; }
.admin-omaggio-vedi[open] > summary .chiudi { display: inline; }
.admin-omaggio-qr-link { font-size: .8rem; font-weight: 700; text-decoration: none; border: 1px solid var(--f-rule, rgba(255,255,255,.2)); border-radius: 999px; padding: .05rem .5rem; }

.field-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid .full {
    grid-column: 1 / -1;
}

.form-label {
    color: #e8e8ff;
    font-weight: 600;
}

.form-control,
.form-select,
textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: white !important;
}

/* Le voci della tendina aperta: color-scheme sopra basta su Chrome e Firefox,
   ma non ovunque, e il fondo semitrasparente del controllo non vale per la
   lista — che il sistema disegna a parte. Qui si dicono colori pieni, così la
   lista è leggibile anche dove il tema dichiarato viene ignorato. */
.form-select option,
select option,
.form-select optgroup,
select optgroup {
    background-color: #10162f;
    color: #eef2ff;
}

.song-meta,
.plan-price {
    color: #dfe4ff;
    font-weight: 600;
}

.status-chip {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}

.admin-shell .admin-grid .admin-panel:first-child {
    background: linear-gradient(135deg, color-mix(in srgb, var(--f-brand, var(--accent)) 15%, transparent), color-mix(in srgb, var(--f-mint, var(--accent-2)) 8%, transparent));
}

@media (max-width: 960px) {
    .hero-shell,
    .studio-grid,
    .feature-grid,
    .pricing-grid,
    .songs-grid,
    .admin-grid,
    .field-grid {
        /* minmax(0, ...) e non «1fr» secco, per lo stesso motivo di sopra. */
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Il tasto per scegliere un file e' quello di serie del browser: grigio, anonimo
   e — cosa che si nota subito — senza la manina del cursore, perche' per il
   browser non e' un link ma un controllo di modulo. Qui prende l'aspetto degli
   altri pulsanti secondari del sito, e la manina. */
input[type="file"] {
    cursor: pointer;
    max-width: 100%;
}

input[type="file"]::file-selector-button {
    cursor: pointer;
    margin-right: .75rem;
    padding: .45rem 1.1rem;
    border: 2px solid var(--f-ink, var(--stroke));
    border-radius: 999px;
    background: var(--f-surface, rgba(255, 255, 255, .08));
    color: var(--f-ink, var(--text));
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    transition: background-color .12s ease, color .12s ease;
}

input[type="file"]::file-selector-button:hover {
    background: var(--f-ink, var(--text));
    color: var(--f-surface, var(--bg-0));
}

/* Il lettore audio di serie del browser ha una larghezza minima sua (intorno ai
   300px su Chrome) e non si stringe da solo: su un telefono, tolti i margini
   della pagina e del riquadro, non ci stava. */
audio {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Il token pubblico e' una sequenza unica senza spazi: senza questo allarga la
   colonna quanto e' lungo lui. */
.songs-shell code,
.studio-shell code,
.song-card code {
    overflow-wrap: anywhere;
}

/* Il campo col link da condividere: dentro una riga flessibile un <input> non
   scende sotto la propria misura naturale. Cosi' invece si adatta, e la riga va
   a capo quando serve. */
.brani-condividi-link {
    flex: 1 1 12rem;
    min-width: 0;
}

.site-legal-footer {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.site-legal-company {
    display: grid;
    gap: 0.25rem;
}

.site-legal-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.site-legal-links a {
    text-decoration: none;
}

.site-legal-meta {
    color: var(--muted);
    font-size: 0.95rem;
}

/* minmax(0, 1fr) invece del «1fr» sottinteso: le celle di una griglia non
   scendono sotto il loro contenuto minimo, e basta una parola che non si spezza
   a sfondare. Qui era l'indirizzo di posta della ditta —
   amministrazione@dealoegrecoinformatica.biz, 42 caratteri tutti attaccati — che
   su telefono portava la colonna a 403px dentro uno schermo da 390: la pagina
   della privacy scorreva di lato e sembrava piu' larga delle altre. */
.legal-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0 2rem;
}

.legal-page-card {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* E le parole lunghe che restano (indirizzi di posta, indirizzi web) vanno a
   capo invece di sporgere. «anywhere», non «break-word»: solo il primo conta
   anche nel calcolo della larghezza minima, che e' il punto. */
.legal-page-shell p,
.legal-page-shell li,
.legal-page-shell td,
.site-legal-footer {
    overflow-wrap: anywhere;
}

.legal-page-card h2 {
    margin-top: 0.5rem;
}

.legal-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    display: grid;
    gap: 0.45rem;
}


.admin-metrics,
.admin-module-grid,
.admin-list {
    display: grid;
    gap: 1rem;
}

.admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-metric,
.admin-module,
.admin-record {
    padding: 1.2rem;
}

.admin-metric span {
    display: block;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.admin-metric strong {
    font-size: 1.8rem;
}

.admin-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-module {
    text-decoration: none;
    color: inherit;
}

.admin-record {
    display: grid;
    gap: 0.85rem;
}

.governance-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.governance-checkbox {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.governance-check-card {
    padding: 1rem 1.2rem;
}

.admin-record-header,
.admin-actions,
.admin-badges,
.admin-stats-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-record-header {
    justify-content: space-between;
}

.admin-actions {
    margin-top: 0.35rem;
}

.admin-stats-row {
    color: var(--muted);
    font-size: 0.95rem;
}

.app-alert {
    padding: 1rem 1.2rem;
    color: #fff6d6;
    border: 1px solid rgba(255, 206, 84, 0.35);
    background: rgba(255, 206, 84, 0.08);
}

@media (max-width: 960px) {
    .admin-metrics,
    .admin-module-grid,
    .governance-form-grid {
        grid-template-columns: 1fr;
    }
}


.authenticator-qr-shell {
    margin: 1rem 0;
    display: inline-flex;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--f-surface-2, rgba(255,255,255,0.08));
}

.authenticator-qr-image {
    width: 220px;
    height: 220px;
    border-radius: 0.75rem;
    background: white;
}

.cookie-banner-shell {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1200;
    width: min(30rem, calc(100vw - 2rem));
}

.cookie-banner-card {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
}

.cookie-preferences-grid {
    display: grid;
    gap: 0.75rem;
}

.cookie-toggle {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.cookie-toggle label {
    margin: 0;
}

.form-check-input {
    margin-right: 0.6rem;
}

.form-check-label {
    color: #f5f7ff;
}

/* La spunta del consenso alle email: quadratino e testo affiancati, con il
   quadratino all'altezza della prima riga. La spunta di Bootstrap galleggia con
   uno scarto fisso e prende la misura dal testo intorno: accanto a un testo piu'
   piccolo, che va a capo e porta un collegamento sotto, finiva disallineata. */
.spunta-consenso {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding-left: 0;
    min-height: 0;
}

.spunta-consenso .form-check-input {
    float: none;
    flex: none;
    margin: 0.15em 0 0;
    width: 1.1em;
    height: 1.1em;
}

.spunta-consenso .form-check-label {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Avvisi nelle pagine di amministrazione e di account.
   Due livelli e non tre: "nota" per lo stato normale, "avvertenza" per quando
   una scelta comporta conseguenze che l'utente deve leggere prima di agire.
   Il colore non e' l'unico segnale — il bordo laterale resta visibile anche a
   chi non distingue i toni. */
.admin-note,
.admin-warning {
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-radius: 0.35rem;
    border-left: 3px solid;
    font-size: 0.95rem;
    line-height: 1.55;
}

.admin-note {
    background: color-mix(in srgb, var(--f-brand, var(--accent-2)) 8%, transparent);
    border-left-color: var(--f-brand, var(--accent-2));
    color: var(--f-ink-2, var(--muted));
}

.admin-warning {
    background: color-mix(in srgb, var(--f-raspberry, var(--accent-3)) 10%, transparent);
    border-left-color: var(--f-raspberry, var(--accent-3));
    color: var(--f-ink, #ffe3f6);
}

.admin-note a,
.admin-warning a {
    color: inherit;
    text-decoration: underline;
}

/* Le tabelle scorrono dentro il proprio contenitore: senza questo, una tabella
   larga fa scorrere di lato la pagina intera. */
.scorri {
    overflow-x: auto;
    border-radius: 0.35rem;
}

.scorri table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 32rem;
}

.scorri th {
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--f-rule, rgba(181, 189, 216, 0.25));
    white-space: nowrap;
}

.scorri td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--f-rule, rgba(181, 189, 216, 0.12));
    color: var(--muted);
    vertical-align: top;
}

.scorri tr:last-child td {
    border-bottom: none;
}

.scorri td.nome {
    color: #eef1fb;
    font-weight: 500;
}

.scorri td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.scorri th.num {
    text-align: right;
}

/* Registro: linguette, filtri e passi di pagina. Sobri come il resto
   dell'amministrazione — nessuno stato, solo collegamenti e una form GET. */
.admin-tablinks {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0.75rem;
}

.admin-tablink {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.2));
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.admin-tablink.attivo {
    background: color-mix(in srgb, var(--f-brand, var(--accent-2)) 16%, transparent);
    border-color: var(--f-brand, var(--accent-2));
    color: #eef1fb;
}

.admin-filtri {
    display: flex;
    gap: 0.9rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.admin-filtri label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.admin-filtri input,
.admin-filtri select {
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.2));
    background: rgba(0, 0, 0, 0.15);
    color: #eef1fb;
    min-width: 11rem;
}

.admin-filtri .admin-filtro-check {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.admin-filtri .admin-filtro-check input {
    min-width: 0;
}

.admin-pag {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.admin-pag a {
    color: inherit;
    text-decoration: underline;
}

/* Un testo recuperato, mostrato così com'è scritto: a capo rispettati, parole
   che non escono dal riquadro, selezionabile a mano anche dove la clipboard è
   bloccata. */
.testo-recuperato {
    margin: 0.85rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.14));
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #eef1fb;
    max-height: 22rem;
    overflow-y: auto;
}

/* Grafico delle visite: linguette di zoom e tooltip al passaggio del cursore. */
.grafico-visite { margin-top: 0.5rem; }

.grafico-zoom {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.grafico-zoom button {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.2));
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.grafico-zoom button.attivo {
    background: color-mix(in srgb, var(--f-brand, var(--accent-2)) 16%, transparent);
    border-color: var(--f-brand, var(--accent-2));
    color: #eef1fb;
}

/* La scelta del periodo nelle tabelle delle statistiche: collegamenti con la
   stessa veste dei tasti dello zoom del grafico. */
.stat-periodi {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.2rem 0 0.8rem;
}

.stat-periodi a {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.2));
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.stat-periodi a.attivo {
    background: color-mix(in srgb, var(--f-brand, var(--accent-2)) 16%, transparent);
    border-color: var(--f-brand, var(--accent-2));
    color: #eef1fb;
}

/* Generatore di link tracciati (/admin-statistiche): campi su griglia che si
   impila sul telefono, e l'anteprima della fonte in evidenza. */
.gen-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.gen-griglia label,
.gen-risultato label {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}

.gen-griglia label input,
.gen-griglia label select {
    margin-top: 0.25rem;
}

.gen-risultato .d-flex {
    margin-top: 0.25rem;
}

.gen-risultato code#gl-fonte {
    font-weight: 600;
}

.grafico-legenda {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.grafico-voce {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.2));
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    cursor: pointer;
}

.grafico-voce i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.grafico-voce.spenta { opacity: 0.4; text-decoration: line-through; }

.grafico-tela {
    position: relative;
}

.grafico-tip {
    position: absolute;
    transform: translate(-50%, 0);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    border-radius: 0.35rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 5;
}

.grafico-tip-data { display: block; font-weight: 600; margin-bottom: 0.15rem; }

.grafico-tip-riga { display: flex; align-items: center; gap: 0.35rem; }

.grafico-tip-riga i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

/* Statistiche: il funnel a colonne (oggi / 7 / 30 giorni). */
.stat-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.stat-colonna {
    border: 1px solid var(--f-rule, rgba(181, 189, 216, 0.18));
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
}

.stat-colonna h3 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.stat-riga {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.28rem 0;
    font-size: 0.95rem;
}

.stat-riga span {
    color: var(--muted);
}

.stat-riga b {
    font-variant-numeric: tabular-nums;
}

/* Elenco dei recapiti nella scheda di un brano: righe brevi, nessun pallino,
   perche' sono fatti e non elenco puntato di argomenti. */
.recapito {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recapito li {
    font-size: .92rem;
    opacity: .85;
    padding: .15rem 0;
}

/* Avvisi in cima alla libreria: devono farsi vedere senza gridare. */
.avvisi {
    border-left: 3px solid var(--f-yellow, rgba(255, 255, 255, .5));
}

/* La cartolina. Misure in millimetri perche' esiste per essere stampata, e in
   stampa i pixel non vogliono dire niente. */
.cartolina-foglio {
    max-width: 190mm;
    margin: 2rem auto;
    padding: 0 1rem;
}

.cartolina {
    display: flex;
    gap: 8mm;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 148mm;
    min-height: 105mm;
    padding: 10mm;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 2mm;
    background: var(--f-carta, #fffdf8);
    color: var(--f-carta-ink, #201a14);
}

.cartolina-occhiello {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .7rem;
    opacity: .65;
    margin: 0 0 .4rem;
}

.cartolina h1 {
    font-size: 1.5rem;
    margin: 0 0 .6rem;
    text-wrap: balance;
}

.cartolina-dedica {
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 .8rem;
    white-space: pre-line;
}

.cartolina-firma {
    font-size: .85rem;
    opacity: .7;
    margin: 0;
}

.cartolina-codice {
    text-align: center;
    flex: 0 0 auto;
}

.cartolina-codice img {
    width: 32mm;
    height: 32mm;
    display: block;
}

.cartolina-codice p {
    font-size: .7rem;
    margin: .4rem 0 0;
    opacity: .7;
}

/* Piu' piccolo del resto ma non sbiadito: e' una dichiarazione dovuta, e in
   stampa il grigio chiaro sparisce. La regola sta dopo quella generica dei
   paragrafi del riquadro, cosi' vince sull'opacita' senza alzare la specificita'. */
.cartolina-codice p.cartolina-avviso {
    font-size: .62rem;
    line-height: 1.35;
    margin: .5rem auto 0;
    opacity: .95;
    max-width: 36mm;
}

.cartolina-istruzioni {
    font-size: .85rem;
    opacity: .7;
    margin-top: 1rem;
}

/* Biglietto A4 da piegare in quattro (quarter-fold -> A6). Misure in mm: esiste
   per essere stampato. I due riquadri in alto sono capovolti, cosi' dopo le
   pieghe (a meta' e ancora a meta') leggono dritti. */
/* La barra dei comandi sopra il foglio. In stampa sparisce da se': la regola
   @media print lascia visibile il solo biglietto. */
.biglietto-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin: 1rem auto .75rem;
    padding: 0 1rem;
}

/* Il banco di lavoro del biglietto: sta sopra il foglio, e il foglio qui sotto
   e' il risultato. Solo per chi il regalo l'ha fatto. */
/* Il ritorno: un filo all'indietro, in alto a sinistra e discreto. */
.biglietto-indietro {
  width: min(720px, 100%);
  margin: 1rem auto .75rem;
  padding: 0;
  font-size: .9rem;
}

/* Una pastiglia discreta, come un tasto secondario: il link nudo con la freccia
   sembrava un avanzo di pagina. */
.biglietto-indietro a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .95rem .4rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--f-rule, rgba(127,127,127,.35));
  background: var(--f-surface, transparent);
  font-weight: 600;
  text-decoration: none;
}
.biglietto-indietro a:hover { border-color: var(--f-brand, currentColor); }
.biglietto-indietro a span { font-size: 1.25rem; line-height: 1; margin-top: -2px; }

/* «Come funziona»: la risposta alla prima domanda, prima del foglio. */
.biglietto-spiega {
  width: min(720px, 100%);
  margin: 0 auto 1rem;
  padding: 1rem 1.25rem;
}

.biglietto-spiega h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.biglietto-spiega p { margin: 0; }

.biglietto-comandi {
  width: min(720px, 100%);
  margin: 0 auto 1.25rem;
  padding: 1.1rem 1.25rem;
}

.biglietto-comandi h2 { margin: 0 0 .3rem; font-size: 1.05rem; }

.biglietto-modulo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin-top: .8rem;
}

.biglietto-campo {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .85rem;
  font-weight: 600;
}

.biglietto-modulo .admin-actions { grid-column: 1 / -1; }

/* La finestra dentro cui sta il foglio. Serve a due cose: dare allo script la
   larghezza davvero disponibile, e riprendersi lo spazio che il foglio non
   occupa piu' una volta rimpicciolito — un ingrandimento con transform non
   cambia l'ingombro, e sotto resterebbe il vuoto di un A4 intero. */
.biglietto-scena {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.biglietto-foglio {
    width: 210mm;
    height: 297mm;
    /* Fuori dal flusso, appeso alla sua finestra. Non e' un vezzo: da dentro il
       flusso questi 210mm allargavano la colonna della pagina — che e' una
       cella di griglia, e una cella si allarga per far stare il contenuto — e
       la colonna finiva 850px dentro uno schermo da 820, barra laterale esclusa.
       Il biglietto stava nei suoi bordi e sfondava la pagina attorno.
       Cosi' invece non spinge niente: la finestra la misura lo schermo. */
    position: absolute;
    top: 0;
    left: 0;
    /* Il foglio resta un A4: si rimpicciolisce tutto intero invece di
       ridisegnarsi piu' stretto, perche' e' fatto per finire su carta e le
       misure sono quelle delle pieghe. La scala la calcola lo script della
       pagina; senza JS resta 1, e il foglio si vede come prima. */
    transform: scale(var(--biglietto-scala, 1));
    /* Dall'angolo, non dal centro. Il foglio e' piu' largo del suo contenitore,
       quindi il suo centro cade fuori dallo schermo: rimpicciolendo attorno a
       quel punto si finiva a vedere la meta' destra del biglietto e basta.
       Dall'angolo in alto a sinistra il risultato parte da zero, e a centrarlo
       ci pensa lo spazio che lo script mette a sinistra. */
    transform-origin: top left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background: var(--f-carta, #fff);
    color: var(--f-carta-ink, #2A2340);
    font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.biglietto-quad {
    position: relative;
    padding: 12mm;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4mm;
    border: 0.2mm dashed var(--f-carta-rule, #d7d0ea);   /* le linee al centro segnano le pieghe */
}

.biglietto-quad.capovolto { transform: rotate(180deg); }

.biglietto-onda { width: 16mm; height: 16mm; }

.biglietto-marchio {
    font-family: "Bricolage Grotesque", "Work Sans", sans-serif;
    font-weight: 800;
    font-size: 20pt;
    margin: 2mm 0 0;
}

.biglietto-piccolo { color: var(--f-carta-ink-2, #5A5273); font-size: 10pt; margin: 0; }

.biglietto-foto {
    width: 100%;
    height: 64mm;
    border-radius: 4mm;
    background-size: cover;
    background-position: center;
}

.biglietto-foto-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--f-onda-da, #5B2BE0), var(--f-onda-a, #F0338A));
}

.biglietto-foto-vuota .biglietto-onda { width: 34mm; height: 34mm; }

.biglietto-scritta {
    font-family: "Bricolage Grotesque", "Work Sans", sans-serif;
    font-weight: 800;
    font-size: 18pt;
    margin: 3mm 0 0;
    line-height: 1.1;
}

.biglietto-interna h1 {
    font-family: "Bricolage Grotesque", "Work Sans", sans-serif;
    font-weight: 800;
    font-size: 19pt;
    margin: 0;
    line-height: 1.1;
}

.biglietto-dedica { font-style: italic; font-size: 11pt; margin: 0; white-space: pre-line; }
.biglietto-qr { width: 42mm; height: 42mm; }
.biglietto-inquadra { font-size: 9pt; color: var(--f-carta-ink-2, #5A5273); margin: 0; }
.biglietto-credito { font-size: 8pt; color: var(--f-carta-ink-2, #5A5273); margin: 2mm 0 0; max-width: 80mm; }

.biglietto-istruzioni {
    max-width: 200mm;
    margin: 6mm auto;
    text-align: center;
    font-size: .9rem;
    color: var(--f-carta-ink-2, #5A5273);
}

@media print {
    /* In stampa resta solo la cartolina: intestazioni, menu e istruzioni
       finirebbero sulla carta che poi si regala. */
    body * {
        visibility: hidden;
    }

    .cartolina, .cartolina *,
    .biglietto-foglio, .biglietto-foglio * {
        visibility: visible;
    }

    .cartolina,
    .biglietto-foglio {
        position: absolute;
        top: 0;
        left: 0;
        border: none;
    }

    /* Sulla carta il foglio torna grande com'e': la riduzione serviva solo a
       farlo stare in uno schermo. E la finestra non lo taglia. Gli !important
       servono contro lo stile in riga che scrive lo script: sullo schermo
       comanda lui, sulla carta no. */
    .biglietto-foglio {
        transform: none;
        left: 0 !important;
    }

    .biglietto-scena {
        overflow: visible;
        height: auto !important;
        /* E smette di essere il riferimento del foglio. Sullo schermo lo e' —
           serve ad appenderlo e a centrarlo — ma sulla carta il foglio deve
           partire dall'angolo della PAGINA: restando appeso alla finestra
           usciva spostato di quanto la finestra era lontana dal bordo (86px in
           basso, 282 a destra sul computer), e il biglietto finiva tagliato. */
        position: static !important;
    }

    .cartolina-istruzioni,
    .biglietto-barra,
    .biglietto-indietro,
    .biglietto-spiega,
    .biglietto-comandi,
    .biglietto-istruzioni,
    .biglietto-foglio-stampa,
    .crea-progresso {
        display: none;
    }

    @page { size: A4 portrait; margin: 0; }
}


/* ---------------------------------------------------------------- il percorso
   Una domanda per schermata, e la successiva quando la precedente ha una
   risposta. Le schede compaiono in fila: la pagina cresce verso il basso invece
   di sostituirsi, cosi' si vede quello che si e' gia' risposto senza tornare
   indietro. */

.crea-shell {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 46rem;
  margin: 0 auto;
  /* Sopra il respiro lo dà article.content, uguale per tutte le pagine. */
  padding: .25rem 1rem 4rem;
  /* Per la banda «omaggio» in alto a destra, ancorata all'angolo. */
  position: relative;
}

/* Banda obliqua «questo brano è un omaggio»: un triangolo in alto a destra con la
   scritta ruotata a 45°. overflow:hidden taglia la banda al triangolo dell'angolo. */
.crea-omaggio-nastro {
  position: absolute;
  top: 0;
  right: 0;
  width: 170px;
  height: 170px;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}
.crea-omaggio-nastro span {
  position: absolute;
  top: 34px;
  right: -52px;
  width: 220px;
  transform: rotate(45deg);
  background: var(--f-onda-da, #5B2BE0);
  color: #fff;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

.crea-passi,
.crea-versioni {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ----------------------------------------------------------------------
   Sbirciare la password, e sapere se le due coincidono.

   Il pulsante lo mette password.js dentro il contenitore che c'e' gia'
   (.form-floating, che e' gia' posizionato): qui si fa solo spazio al campo
   perche' il testo non finisca sotto l'occhio.
   ---------------------------------------------------------------------- */
.form-floating.con-occhio > .form-control {
  padding-right: 3rem;
}

.occhio-password {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Quarantaquattro pixel: la misura sotto la quale un dito sbaglia. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  opacity: .65;
  cursor: pointer;
  z-index: 3;
}

.occhio-password:hover,
.occhio-password[aria-pressed="true"] { opacity: 1; }
.occhio-password:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.occhio-password svg { width: 21px; height: 21px; }

.password-esito {
  margin: .35rem 0 0;
  font-size: .85rem;
  line-height: 1.35;
}

/* Il colore aiuta chi lo vede; la frase la legge chiunque. I toni cambiano col
   tema: nessun verde e nessun rosso si legge bene su tutti e due i fondi. */
.password-esito.va { color: var(--f-esito-ok, #1E7A38); }
.password-esito.guaio { color: var(--f-esito-ko, #B3221F); font-weight: 600; }

/* Quando si riporta una scheda sotto gli occhi, il suo bordo di sopra non deve
   finire incollato al bordo dello schermo: si vuole vedere che li' comincia una
   scheda. Lo spazio lo tiene il browser da se', senza conti nel programma. */
.song-card { scroll-margin-top: 1.25rem; }

/* Da 641px in su la barra in alto diventa appiccicata (MainLayout.razor.css) e
   resta li' mentre la pagina scorre: 56px che coprono il bordo di sopra della
   scheda. Lo spazio da lasciare e' quello della barra piu' l'aria di prima. Sul
   telefono la barra scorre via con tutto il resto, e la regola sopra basta. */
@media (min-width: 641px) {
  .song-card { scroll-margin-top: calc(56px + 1.25rem); }
}

/* «Versione aggiornata»: la conferma di quello che si e' appena scelto, attaccata
   alla versione scelta. Ha il suo colore perche' e' una notizia buona, e il peso
   di una riga piccola perche' non e' un avviso. */
.brani-scelta-fatta {
  margin-top: .15rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--f-esito-ok, #1E7A38);
}

/* Una versione fra cui scegliere: il nome e la sua scelta su una riga, l'audio
   sotto. In fila con l'audio — largo quanto un telefono intero — il tasto
   «Scegli questa» andava a capo da solo, lontano dalla versione che sceglieva. */
.brani-versione {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.brani-versione audio { max-width: 100%; }

/* Le due versioni sono due riquadri uguali, e quella scelta si riconosce a colpo
   d'occhio: prima la scelta si capiva solo da una pastiglia piccola, e in cima
   c'era un terzo lettore con la stessa canzone. */
.brani-versione {
  padding: .6rem .75rem;
  border: 1px solid color-mix(in srgb, var(--f-brand, #6E3BEF) 25%, transparent);
  border-radius: 12px;
}

/* «Vuoi cambiare qualcosa?» e il suo tasto: una sezione piccola, la stessa per
   l'anteprima e per il brano comprato. La frase sopra, il tasto sotto. */
.brani-rifai {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--f-brand, #6E3BEF) 18%, transparent);
}

.brani-rifai .crea-aiuto { margin: 0; }

.brani-versione.scelta {
  border: 2px solid var(--f-brand, #6E3BEF);
  background: color-mix(in srgb, var(--f-brand, #6E3BEF) 8%, transparent);
}

/* L'avviso sotto il collegamento del regalo: e' la cosa che non si disfa, e va
   letta prima di premere «copia». Discreto ma non sbiadito. */
.brani-avviso {
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--f-ink-2, inherit);
}

/* «Altro»: quello che si fa di rado, chiuso. Il triangolo di serie basta a dire
   che si apre; qui si rende solo premibile con comodo. */
.brani-altro > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 40px;
  padding: 0 .25rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  opacity: .8;
}

.brani-altro > summary:hover { opacity: 1; }
.brani-altro > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* «Hai gia' N brani pagati»: piccolo, e la prima cosa che si legge. Serve a una
   domanda sola, che uno si fa prima di cominciare: devo pagare, o e' gia' fatto?
   Il numero grande a sinistra e' tutta la risposta; il resto e' contorno. */
.credito-pronto {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem;
  margin-bottom: .9rem;
  border-radius: 14px;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .14));
  background: var(--f-surface-2, rgba(255, 255, 255, .05));
}

.credito-numero {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  flex: none;
}

.credito-parole {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .9rem;
}

/* ----------------------------------------------------------------------
   Riscattare un codice in cima a /crea.

   Due facce: il campo per digitarlo, e la conferma con quante canzoni si
   possono fare. Il campo è sobrio (una domanda come le altre); la conferma
   invece si vede, perché è un buon momento e va festeggiato quel tanto.
   ---------------------------------------------------------------------- */
.crea-codice-riscatto {
  gap: .5rem;
}

.crea-codice-riga {
  display: flex;
  gap: .6rem;
  align-items: stretch;
  flex-wrap: wrap;
}

.crea-codice-campo {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Il segnaposto non è un codice da leggere: torni al testo normale. */
.crea-codice-campo::placeholder {
  letter-spacing: normal;
  text-transform: none;
  opacity: .55;
}

.crea-codice-azione {
  flex: 0 0 auto;
  white-space: nowrap;
}

.crea-errore-codice {
  margin: 0;
  font-size: .9rem;
  color: var(--f-esito-ko, #f97066);
}

/* La conferma: bordo tenue color «è andata bene», la spunta in un tondo, e
   accanto le parole con quante canzoni restano. */
.crea-codice-fatto {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--f-esito-ok, #7BD99B);
}

.crea-codice-spunta {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: #06301a;
  background: var(--f-esito-ok, #7BD99B);
}

.crea-codice-testo {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.crea-codice-testo strong {
  font-size: 1.05rem;
}
/* L'aiuto qui non è un sussurro: è il numero di canzoni, la cosa da leggere. */
.crea-codice-testo .crea-aiuto {
  opacity: .9;
}

/* Il velo dell'attesa mentre si traduce. Copre tutto per un motivo pratico: le
   domande stanno per essere riscritte, e rispondere adesso vuol dire rispondere
   a una domanda che fra un secondo ne dice un'altra. */
.crea-velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

.crea-velo-scheda {
  width: min(420px, 100%);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
}

/* Dentro il velo il tasto della via d'uscita non e' un dettaglio in un angolo:
   e' l'unica cosa premibile, e si vede. */
.crea-velo-scheda .crea-parla-sito {
  position: static;
  opacity: 1;
  border-color: currentColor;
  padding: .5rem .8rem;
}

.crea-passo {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem;
}

.crea-domanda {
  font-size: 1.15rem;
  font-weight: 600;
  text-wrap: balance;
}

.crea-aiuto,
.crea-contatore {
  margin: 0;
  font-size: .9rem;
  opacity: .72;
}

.crea-contatore {
  align-self: flex-end;
  font-variant-numeric: tabular-nums;
}

.crea-scelte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .6rem;
}

/* Ogni scelta e' una scheda e non una pillola: il nome da solo non basta a
   scegliere, e la riga che spiega e' meta' del lavoro. */
.crea-scelta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 .6rem;
  padding: .8rem .95rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .9rem;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.crea-segno {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.5rem;
  line-height: 1;
}

.crea-nome {
  font-weight: 600;
}

.crea-spiegazione {
  font-size: .85rem;
  line-height: 1.35;
  opacity: .72;
}

/* «Provala»: piccola pastiglia dentro la card della voce scelta. */
.crea-prova-voce {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: .5rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  opacity: .9;
}
.crea-prova-voce:hover { opacity: 1; }

/* NOVITA': l'emoji della voce e' anche il suo «Prova». Il cerchio c'e' su tutte
   le voci, cosi' la scheda scelta non cambia misura. */
.crea-segno-voce { position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border-radius: 999px; font-size: 1.45rem; border: 2px solid transparent; }
.crea-segno-voce.prova { cursor: pointer; border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.crea-segno-voce.prova:hover, .crea-segno-voce.prova:focus-visible { background: color-mix(in srgb, currentColor 22%, transparent); }
.crea-segno-voce-tasto { position: absolute; right: -4px; bottom: -4px; width: 1.35rem; height: 1.35rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .65rem; line-height: 1;
  background: var(--f-brand, var(--bs-primary)); color: var(--f-on-brand, #fff); }
.crea-segno-voce.in-ascolto { animation: crea-voce-pulsa 1.2s ease-in-out infinite; }
@keyframes crea-voce-pulsa { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .crea-segno-voce.in-ascolto { animation: none; } }

.crea-scelta:hover {
  border-color: rgba(255, 255, 255, .5);
}

.crea-scelta.scelta {
  border-color: transparent;
  background: #4f46e5;
  color: #fff;
}

/* Il pulsante lingua: nome a sinistra, segno a destra (bandierina per le lingue,
   il luogo del dialetto per i dialetti). Una riga sola, non una scheda a due
   righe come le altre scelte. */
.crea-scelta.lingua {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.crea-segno-img {
  height: 16px;
  width: auto;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
/* Il luogo del dialetto (il Vesuvio, la Trinacria…): una sagoma, non
   un'immagine. Il disegno fa da maschera e il colore lo mette currentColor,
   cioè il colore del testo del pulsante: crema sulla scheda scura, blu notte
   sul bianco, scuro sul giallo della scelta attiva. Così il segno sta bene su
   qualunque fondo capiti — che era il problema dei disegni a colori, che
   sbiadivano ora sul giallo ora sul marrone.
   Il riquadro è 34x26 e non un quadrato: il Vesuvio è largo e bassissimo, e
   con un quadrato sarebbe rimasto alto sei pixel. Quanto è grande ogni
   soggetto dentro la tela lo decide scripts/icone-luoghi.sh. */
.crea-segno-luogo {
  width: 34px;
  height: 26px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--luogo) center / contain no-repeat;
  mask: var(--luogo) center / contain no-repeat;
}
/* «Altre lingue…»: un invito discreto, non un altro bottone-scheda. */
.crea-altre-lingue {
  margin-top: .55rem;
  padding: .2rem .1rem;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .72;
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
  cursor: pointer;
}
.crea-altre-lingue:hover { opacity: 1; }

/* «Per favore parla in Italiano»: bandierina piccola in alto a destra del primo
   riquadro (l'evento). Attiva = interfaccia in italiano scelta a mano. */
.crea-passo { position: relative; }
/* Il tasto che riporta le domande nella lingua del SITO quando la canzone e' in
   un'altra lingua. Si chiamava «crea-parla-italiano»: il nome diceva il vero
   finche' il rifugio era l'italiano scritto a mano, ma adesso segue la lingua
   dell'interfaccia (bandiera compresa), quindi per un sito in inglese porta
   all'inglese. */
.crea-parla-sito {
  position: absolute; top: .6rem; right: .6rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .4rem; border-radius: 8px;
  background: transparent; border: 2px solid transparent; cursor: pointer;
  color: inherit; opacity: .68; transition: opacity .12s ease, border-color .12s ease;
}
.crea-parla-sito:hover { opacity: 1; }
.crea-parla-sito.attivo { opacity: 1; border-color: currentColor; }
.crea-parla-testo { font-size: .72rem; line-height: 1.1; text-align: right; max-width: 9.5rem; opacity: .92; }
.crea-parla-sito img { display: block; width: 23px; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* Da telefono e da tablet il tasto smette di stare nell'angolo e si mette in
   riga sopra la domanda. Appeso in alto a destra si sovrapponeva al titolo — su
   uno schermo stretto «Per cosa e' il regalo?» occupa due righe e passava sotto
   la bandiera — e due scritte una sull'altra non si leggono ne' l'una ne'
   l'altra. In riga occupa il suo spazio e spinge giu' il resto, che e' quello
   che deve fare. */
@media (max-width: 900px) {
  .crea-parla-sito {
    position: static;
    align-self: flex-end;
    padding: .3rem .45rem;
  }

  .crea-parla-testo { max-width: none; }
}

/* «Capiscila nella tua lingua»: sotto il testo di una versione, offre la
   traduzione nella lingua del sito. Un invito discreto, non un bottone-scheda. */
.crea-capiscila {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: .2rem 0 .5rem; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  color: inherit; opacity: .78; font: inherit; font-size: .92rem;
  text-decoration: underline;
}
.crea-capiscila:hover { opacity: 1; }
.crea-capiscila .crea-segno { font-size: 1rem; }
.crea-testo-tradotto {
  width: 100%;
  margin-top: .3rem;
  font-size: .95rem;
  line-height: 1.5;
}
/* L'anteprima del testo «riportato» nella lingua della canzone, prima di sostituire. */
.crea-riporta {
  margin-top: .7rem;
  border-left: 3px solid var(--f-yellow, #FFC53D);
}

.crea-versione {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
}

/* La versione scelta si riconosce da una riga di colore sul fianco, non da un
   riquadro colorato: il testo resta la cosa da leggere. */
.crea-versione.scelta {
  border-left: 3px solid #4f46e5;
}

.crea-versione header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.crea-etichetta {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

/* Le strofe vanno a capo dove le ha mandate chi le ha scritte, ma il carattere
   resta quello del testo: un testo di canzone non e' codice. */
.crea-testo {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.6;
  overflow-x: auto;
}

.crea-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.crea-residuo {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: .4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.crea-errore {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--f-esito-ko, #f97066);
}

/* Il codice sotto il brano che aspetta di essere comprato: e' un'offerta, non
   un passaggio obbligato — quindi separato da una riga e non da un riquadro,
   che sembrerebbe un altro modulo da riempire. */
.brani-codice {
  border-top: 1px solid var(--f-stroke, rgba(255, 255, 255, .12));
  padding-top: .75rem;
}

/* Con che profilo si sta creando: una riga discreta sopra le domande, non un
   avviso — ma leggibile, perche' dice dove andra' a finire il regalo. */
.crea-chi-sei {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin-bottom: .75rem;
}

.crea-chi-sei .btn-link { padding: 0; }

/* Il riquadro per entrare, dentro la pagina del regalo: stretto come una
   scheda, mai a tutto schermo — deve restare chiaro che sotto c'e' il lavoro
   di prima e che non e' andato da nessuna parte. */
.crea-accesso {
  max-width: 26rem;
  text-align: left;
}

.crea-accesso h2 { margin: 0 0 .35rem; font-size: 1.15rem; }

/* «Codice giusto»: grande abbastanza da vedersi mentre si guarda la tastiera. */
.crea-accesso-ok {
  margin: 0 0 .6rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--f-esito-ok, #1E7A38);
}

/* Sei cifre si leggono a colpo d'occhio se sono larghe e distanziate: qui si
   ricopia da un messaggio, e un carattere stretto fa sbagliare la riga. */
.crea-codice {
  font-size: 1.5rem;
  letter-spacing: .3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.crea-errore-riga { color: var(--f-esito-ko, #f97066); }

/* Il dubbio su una parola. Non e' un errore — il bordo non e' rosso — ed e' la
   stessa scheda degli altri riquadri, perche' e' un aiuto e non un richiamo. */
.crea-refusi {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--f-esito-attesa, #f5a524);
}

.crea-refusi ul {
  list-style: none;
  margin: .6rem 0 .75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.crea-refusi li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  justify-content: space-between;
}

.crea-refusi-tasti {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.crea-esito {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  padding: 2rem;
}

.crea-attesa {
  opacity: .7;
}


/* I numeri di serie di un blocco: una griglia fitta, perche' servono a
   riconciliare con quello che si e' venduto e si guardano tutti insieme. */
.negozio-serie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: .35rem;
  margin-top: .75rem;
}

.negozio-serie-voce {
  padding: .3rem .2rem;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .16));
  border-radius: .4rem;
  font-family: ui-monospace, monospace;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: .6;
}

/* Usata: piena, perche' quello che si cerca a colpo d'occhio e' quante ne
   restano, non quante ne sono andate. */
.negozio-serie-voce.usata {
  border-color: transparent;
  background: color-mix(in srgb, var(--f-brand, #4f46e5) 28%, transparent);
  opacity: 1;
}


/* L'esempio suggerito: si distingue dal campo perche' non e' il suo racconto —
   e' la forma da copiare, non le parole. */
.crea-suggerimento {
  margin-top: .8rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid rgba(255, 209, 102, .7);
  border-radius: 0 .5rem .5rem 0;
  background: rgba(255, 255, 255, .05);
}

.crea-esempio {
  margin: .4rem 0 0;
  font-style: italic;
  line-height: 1.55;
}


/* L'invito a farsi suggerire un esempio.
   Prende il colore caldo del riquadro che produce, cosi' il gesto e il suo
   risultato si riconoscono come una cosa sola — e soprattutto si vede: chi e'
   bloccato davanti al campo vuoto e' esattamente la persona che non andrebbe a
   cercarlo. Resta pero' un invito e non un comando: bordo tratteggiato e non
   pieno, per non competere con «adesso fai la canzone». */
.crea-suggerisci {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .7rem;
  padding: .6rem 1rem;
  border: 1px dashed rgba(255, 209, 102, .6);
  border-radius: .7rem;
  background: rgba(255, 209, 102, .09);
  color: #ffd166;
  font-size: .96rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.crea-suggerisci:hover:not(:disabled),
.crea-suggerisci:focus-visible {
  border-color: color-mix(in srgb, var(--f-yellow, #ffd166) 95%, transparent);
  background: color-mix(in srgb, var(--f-yellow, #ffd166) 16%, transparent);
}

.crea-suggerisci:disabled {
  opacity: .45;
  cursor: default;
}

.crea-suggerisci .crea-segno {
  font-size: 1.1rem;
  margin: 0;
}

.crea-suggerisci .crea-residuo {
  background: color-mix(in srgb, var(--f-yellow, #ffd166) 22%, transparent);
  color: inherit;
}

/* L'invito a registrarsi al passo dell'email: staccato dal campo da una riga
   sottile, cosi' e' un'offerta e non un obbligo. */
.crea-registrati {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--f-rule, rgba(128, 128, 128, .28));
}
.crea-registrati .crea-azioni {
  margin-top: .6rem;
}


/* ======================================================================
   TI CANTO — pagina d'ingresso (strada 05 "Festa" + stemma 02 "Onda").
   Tutto sotto .tc-landing, cosi' non tocca il resto dell'app (che resta
   scuro). Attiva solo per il marchio ticanto: vedi Home.razor.
   ====================================================================== */

/* La landing e' a tutto campo: nasconde la barra laterale, la riga di
   servizio e il pie' legale dell'app (ha i propri), e toglie i margini del
   contenitore. Solo quando in pagina c'e' una .tc-landing. */
.page:has(.tc-landing) .sidebar,
.page:has(.tc-landing) .top-row,
.page:has(.tc-landing) .site-legal-footer { display: none !important; }
.page:has(.tc-landing) article.content { padding: 0 !important; max-width: none !important; }

/* I colori della pagina d'ingresso sono quelli del marchio, e qui non si
   scrivono: arrivano dalla tavolozza (TavolozzaSito), che il server stampa
   nell'<head> come variabili --f-* per il chiaro e per lo scuro. Qui restano
   solo i nomi brevi con cui questo foglio li chiama. Prima i valori erano copiati
   qui, nel resto dell'app, nel lettore e nella pagina di manutenzione: cinque
   copie da tenere uguali a mano, e il bruno del tema scuro in tutte e cinque. */
.tc-landing {
  --tc-ground: var(--f-ground); --tc-surface: var(--f-surface); --tc-surface-2: var(--f-surface-2);
  --tc-ink: var(--f-ink); --tc-ink-2: var(--f-ink-2); --tc-rule: var(--f-rule);
  --tc-brand: var(--f-brand); --tc-on-brand: var(--f-on-brand);
  --tc-raspberry: var(--f-raspberry); --tc-raspberry-ink: var(--f-raspberry-ink); --tc-on-raspberry: var(--f-on-raspberry);
  --tc-yellow: var(--f-yellow); --tc-on-yellow: var(--f-on-yellow);
  --tc-mint: var(--f-mint); --tc-mint-ink: var(--f-mint-ink);
  --tc-shadow: var(--f-shadow); --tc-shadow-strong: var(--f-shadow-strong); --tc-focus: var(--f-focus);

  background: var(--tc-ground); color: var(--tc-ink);
  font-family: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.tc-landing h1, .tc-landing h2, .tc-landing h3 {
  font-family: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance; margin: 0; color: var(--tc-ink);
}
.tc-landing p { margin: 0; }
/* I collegamenti della pagina d'ingresso prendono il colore di chi li contiene,
   ma i pulsanti no: hanno il loro. Senza l'esclusione, "Crea la tua canzone" e
   "Crea cinque brani" — che sono collegamenti travestiti da pulsante —
   ereditavano il colore del testo intorno e finivano chiari su fondo giallo:
   col tema scuro dappertutto, e col tema chiaro dentro il riquadro scuro in
   fondo alla pagina. */
.tc-landing a:not(.tc-btn) { color: inherit; }
.tc-landing a { text-decoration: none; }
.tc-landing svg { max-width: 100%; }
.tc-landing :where(a, button):focus-visible { outline: 3px solid var(--tc-focus); outline-offset: 3px; border-radius: 6px; }

.tc-wrap { width: min(1140px, 100% - 40px); margin-inline: auto; }
.tc-eyebrow { font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tc-raspberry-ink); margin: 0 0 14px; }

.tc-btn { display: inline-flex; align-items: center; gap: .55em; justify-content: center; min-height: var(--tb-h-grande, 52px); padding: 0 26px; border-radius: var(--tb-raggio, 999px); font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.02rem; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease; }
.tc-btn svg { width: 22px; height: 22px; flex: none; }
/* I colori, il rilievo e il passaggio del mouse dei tasti stanno nella famiglia dei
   tasti di Ti Canto, piu' sotto: .tc-btn-primary e' il livello principale,
   .tc-btn-ghost il secondario. */

.tc-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--tc-ground) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--tc-rule); }
/* La barra puo' essere piu' larga del resto. I 1140px del contenitore servono al
   testo — oltre quella misura una riga diventa faticosa da leggere — ma una fila
   di voci e pulsanti non ha quel problema, e stretta li' dentro mandava tutto a
   capo. Le sezioni sotto restano a 1140. */
.tc-header .tc-wrap { width: min(1480px, 100% - 40px); }
/* 1480 e non piu' 1280 (8 ottobre 2026): la fila a misura piena e' larga circa
   1320px, e in 1280 sforava di una quarantina di pixel — il tasto grande usciva
   dal margine e lingua e tema sembravano spostati. */
/* Le misure della barra sono contate. Il contenitore si ferma a 1140px e
   dentro devono starci marchio, cinque voci e quattro comandi: con gli spazi di
   prima non ci stavano, e le voci andavano a capo — «I miei brani» occupava tre
   righe e alzava l'intestazione a ogni larghezza, non solo sugli schermi
   stretti. Stretti i vuoti, ci sta tutto su una riga sola. */
.tc-bar { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.tc-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.tc-crest { width: 40px; height: 40px; flex: none; filter: drop-shadow(3px 3px 0 var(--tc-shadow)); }
/* Il marchio non si spezza mai. In italiano le voci del menu sono piu' lunghe,
   la barra si stringeva e «Ti Canto» finiva su due righe — alzando l'intera
   intestazione rispetto alla versione inglese. flex:none perche' un elemento
   flessibile, di suo, si lascia stringere sotto la propria misura naturale. */
.tc-brand { flex: none; }
.tc-wordmark { display: flex; flex-direction: column; line-height: 1; }
.tc-wordmark b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; white-space: nowrap; }
.tc-wordmark small { font-size: .72rem; color: var(--tc-ink-2); letter-spacing: .04em; margin-top: 3px; }
.tc-menu { display: flex; align-items: center; gap: 18px; }
.tc-menu a { font-weight: 500; color: var(--tc-ink); padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tc-menu a:hover { border-bottom-color: var(--tc-raspberry); color: var(--tc-raspberry-ink); }
.tc-header-cta { display: flex; align-items: center; gap: 10px; }
/* Solo i due pulsanti della barra: altrove .tc-btn tiene il suo respiro. */
.tc-header-cta > .tc-btn { padding: 0 18px; }
/* Sul desktop il pannello e i suoi gruppi non esistono come contenitori: le
   loro voci tornano in fila nella barra, esattamente come prima. Il burger e il
   separatore del pannello restano invisibili finché non si scende su telefono. */
.tc-nav { display: contents; }
.tc-quick { display: contents; }
.tc-burger { display: none; }
.tc-nav-sep { display: none; }
/* Voci riservate al menu a panino: nella barra orizzontale non si vedono. */
.tc-menu a.tc-solo-burger { display: none; }

/* Fra il menu a tendina (820px) e i 1200px la barra resta stretta: qui il
   sottotitolo del marchio esce di scena e i vuoti si stringono ancora, cosi'
   anche su un portatile piccolo le voci restano su una riga invece di andare a
   capo o uscire dallo schermo. */
@media (min-width: 821px) and (max-width: 1199.98px) {
  .tc-wordmark small { display: none; }
  .tc-wordmark b { font-size: 1.15rem; }
  .tc-crest { width: 34px; height: 34px; }
  .tc-menu { gap: 12px; font-size: .95rem; }
  .tc-header-cta { gap: 8px; }
  .tc-header-cta > .tc-btn { padding: 0 12px; font-size: .92rem; min-height: 44px; }
  .tc-landing .stato-switch { min-height: 40px; font-size: .82rem; }
}

.tc-hero { padding: 74px 0 40px; }
/* Sul computer resta com'era: testo a sinistra, miniatura a destra. I due
   blocchi di testo occupano la stessa colonna, uno sopra l'altro, e la miniatura
   sta di fianco a tutti e due. */
.tc-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "testa  mini"
    "resto  mini";
  grid-template-rows: auto auto;
  column-gap: 56px;
  align-items: center;
}

.tc-hero-testa { grid-area: testa; }
.tc-hero-resto { grid-area: resto; }
.tc-hero-grid > .tc-anteprima { grid-area: mini; }
.tc-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }
/* Tre stacchi uguali, dall'occhiello alle rassicurazioni: riga-riga, riga-tasti,
   tasti-rassicurazioni. I 76px di prima erano troppi e spezzavano il blocco in
   due pezzi che non si parlavano.
   I numeri non sono identici di proposito: una riga di testo si porta dietro
   l'interlinea (font 1.28rem su 1.6 = una decina di pixel di aria sopra e
   sotto), un pulsante no. Per far SEMBRARE uguali i tre spazi, quelli attorno ai
   tasti vanno un po' piu' larghi di margine. Misurati a schermo: 26px l'uno.
   Il margine sotto le righe e' 0 perche' fra fratelli i margini si accorpano
   invece di sommarsi: comanda sempre quello sopra dell'elemento seguente. */
.tc-lede { font-size: 1.28rem; color: var(--tc-ink-2); margin: 22px 0 0; max-width: 30ch; }
.tc-lede + .tc-lede { margin-top: 14px; }
.tc-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.tc-reassure { margin-top: 14px; font-size: .95rem; color: var(--tc-ink-2); display: flex; align-items: center; gap: 8px; }
/* La prima rassicurazione stacca dai pulsanti; fra loro due basta poco. */
.tc-cta-row + .tc-reassure { margin-top: 20px; }
.tc-reassure svg { width: 19px; height: 19px; color: var(--tc-mint-ink); flex: none; }

.tc-gift { background: var(--tc-surface); border: 2px solid var(--tc-ink); border-radius: 24px; padding: 26px; box-shadow: 10px 10px 0 var(--tc-shadow-strong); position: relative; }
.tc-gift::before { content: ""; position: absolute; top: -14px; right: 34px; width: 16px; height: 16px; border-radius: 4px; background: var(--tc-mint); transform: rotate(18deg); box-shadow: -46px 6px 0 -1px var(--tc-raspberry), -22px 34px 0 -3px var(--tc-yellow); }
.tc-gift-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tc-who { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tc-gift-top .tc-who svg { width: 30px; height: 30px; }
.tc-chip { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tc-mint) 26%, var(--tc-surface)); color: var(--tc-ink); border: 1.5px solid var(--tc-mint); }
.tc-gift h3 { font-size: 1.7rem; margin-bottom: 4px; }
.tc-meta { color: var(--tc-ink-2); font-size: .98rem; margin-bottom: 18px; }
.tc-wave { display: flex; align-items: flex-end; gap: 5px; height: 76px; margin-bottom: 20px; }
.tc-wave i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--f-onda-da), var(--f-onda-a)); animation: tc-eq 1.1s ease-in-out infinite; transform-origin: bottom; }
@keyframes tc-eq { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
.tc-gift-act { display: flex; gap: 12px; flex-wrap: wrap; }
.tc-gift-act .tc-btn, .tc-song-azioni .tc-btn { min-height: 48px; font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .tc-wave i { animation: none; } }

/* ----------------------------------------------------------------------
   La miniatura del lettore, in prima pagina.

   Si ridipinge dentro la sua cornice e non tocca la pagina attorno: i colori
   della veste stanno su variabili di QUESTO riquadro, messe da miniatura.js.
   Fuori resta il marchio di casa — una homepage che cambia colore tutta insieme
   sarebbe un difetto, non una dimostrazione.
   ---------------------------------------------------------------------- */
/* NON «.tc-mini»: quel nome era gia' preso da un piccolo equalizzatore piu'
   avanti in questo foglio (display:flex, alto 44px), che vinceva perche' viene
   dopo — e la scheda usciva schiacciata in una striscia, con tutto il contenuto
   in fila su una riga sola. */
.tc-anteprima {
  background: var(--mini-carta, var(--tc-surface));
  color: var(--mini-testo, var(--tc-ink));
  /* Il fondo della veste si vede come alone dietro il riquadro: e' il modo di
     mostrare due colori della tavolozza invece di uno. */
  box-shadow: 10px 10px 0 var(--mini-fondo, var(--tc-shadow-strong));
  transition: background-color .28s ease, color .28s ease, box-shadow .28s ease;
}

/* Lo sfondo psichedelico, dentro la scheda e sotto a tutto. Compare sfumando
   quando la veste lo chiede; il resto del contenuto gli sta sopra. Il raggio e'
   quello interno della scheda (24px meno il bordo), cosi' non sborda agli angoli. */
.tc-mini-psy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0;
}
.tc-anteprima.psichedelica .tc-mini-psy { opacity: 1; }
.tc-anteprima > :not(.tc-mini-psy) { position: relative; z-index: 1; }

/* Il titolo segue la veste, non il tema del sito. «.tc-landing h3» gli impone
   var(--tc-ink): col tema scuro e' crema, e sulla veste chiara — che e' crema
   anche lei — «Per Giulia» spariva. Questa regola sta piu' in basso nel foglio e
   a parita' di peso vince. */
.tc-anteprima h3 { margin-bottom: 2px; color: var(--mini-testo, var(--tc-ink)); }

/* Anche la pastiglia «Pronto»: aveva i colori del marchio addosso a una scheda
   che si ridipinge, e su certe vesti era una macchia che non c'entrava niente. */
.tc-anteprima .tc-chip {
  background: transparent;
  color: var(--mini-testo, var(--tc-ink));
  border-color: var(--mini-accento, var(--tc-mint));
}

.tc-mini-dedica {
  margin: 0 0 14px;
  font-size: .95rem;
  color: var(--mini-spento, var(--tc-ink-2));
}

/* Il testo a tempo: una riga accesa, le altre leggibili ma spente. E' il modo
   vero del lettore, in piccolo. */
.tc-mini-testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 108px;
  margin-bottom: 12px;
}

.tc-mini-riga {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--mini-spento, var(--tc-ink-2));
  transition: color .3s ease, text-shadow .3s ease;
}

.tc-mini-riga.accesa {
  color: var(--mini-testo, var(--tc-ink));
  text-shadow: 0 0 16px var(--mini-alone, transparent);
}

.tc-mini-avanzamento {
  height: 4px;
  border-radius: 999px;
  background: var(--mini-bordo, var(--tc-rule));
  overflow: hidden;
  margin-bottom: 16px;
}

.tc-mini-avanzamento i {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: 999px;
  background: var(--mini-accento, var(--tc-brand));
  transition: width 1s linear;
}

/* Il giro dimostrativo: una sola corsa continua, lineare, che si ripete. La
   larghezza torna al 100% e a muoversi e' la scala, cosi' il browser non
   ricalcola il riquadro a ogni fotogramma. La transizione qui si toglie: e'
   fatta per i salti, e sopra un'animazione continua non avrebbe senso. */
.tc-mini-avanzamento.dimostrativa i {
  width: 100%;
  transform-origin: left center;
  transition: none;
  animation: tc-mini-corsa 8.8s linear infinite;
}

@keyframes tc-mini-corsa {
  from { transform: scaleX(0.08); }
  to { transform: scaleX(1); }
}

/* Mentre suona il brano vero la barra si puo' spostare. Si ingrossa e prende il
   cursore della mano: un comando deve sembrare un comando, e soprattutto non
   deve sembrarlo quando non lo e'. */
.tc-mini-avanzamento.attiva {
  height: 10px;
  cursor: pointer;
  /* Il dito non e' preciso come il puntatore: si allarga la zona sensibile
     sopra e sotto senza spostare niente di quello che si vede. */
  padding: 3px 0;
  margin-top: -3px;
  background-clip: content-box;
}

.tc-mini-avanzamento.attiva i {
  /* Nessuna animazione mentre suona il brano vero: la larghezza la riscrive il
     programma a ogni fotogramma, e un'animazione le correrebbe dietro invece di
     aiutarla — era proprio quella a far vedere gli scatti. */
  transition: none;
}

.tc-mini-avanzamento.attiva:focus-visible {
  outline: 2px solid var(--mini-testo, var(--tc-ink));
  outline-offset: 3px;
}

.tc-mini-etichetta {
  margin: 0 0 6px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mini-spento, var(--tc-ink-2));
}

.tc-mini-vesti {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

/* I colori li mette il programma, pastiglia per pastiglia. */
.tc-mini-veste {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .18s ease, outline-color .18s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.tc-mini-veste.scelta { outline-color: var(--mini-testo, var(--tc-ink)); }
.tc-mini-veste.premuta { transform: scale(.86); }
.tc-mini-veste:focus-visible { outline-color: var(--mini-testo, var(--tc-ink)); }

/* Il cursore finto: e' quello che racconta «bastano due click». Non intercetta
   il dito di nessuno. */
.tc-mini-cursore {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -4px 0 0 -4px;
  pointer-events: none;
  color: var(--mini-testo, var(--tc-ink));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.tc-mini-cursore svg { width: 100%; height: 100%; }

/* Chi ha chiesto meno movimento tiene la miniatura ferma: c'e' tutto, solo che
   non si muove da sola. */
@media (prefers-reduced-motion: reduce) {
  .tc-mini-cursore { display: none; }
  .tc-mini-riga, .tc-mini-avanzamento i, .tc-anteprima { transition: none; }

  /* Ferma anche la corsa della barra: resta visibile, a un terzo, ma non corre. */
  .tc-mini-avanzamento.dimostrativa i { animation: none; transform: scaleX(0.33); }
}

.tc-band { padding: 72px 0; }

/* La promessa in tre tempi, fra l'hero e il biglietto. Larga e centrata, con un
   corpo a metà strada fra il testo corrente (1.28rem) e i titoli di sezione
   (fino a 2.9rem): pesa quanto una dichiarazione, senza rubare la scena ai titoli. */
.tc-claim { padding: 14px 0 6px; text-align: center; }
.tc-claim p {
  margin: 0 auto;
  max-width: 30ch;
  font-family: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.22;
  color: var(--tc-ink);
  text-wrap: balance;
}

.tc-section-head { max-width: 38ch; margin-bottom: 44px; }
.tc-section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.tc-section-head p { color: var(--tc-ink-2); font-size: 1.12rem; margin-top: 14px; }

.tc-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tc-step { background: var(--tc-surface); border: 2px solid var(--tc-rule); border-radius: 22px; padding: 26px; box-shadow: 6px 6px 0 var(--tc-shadow); }
.tc-step .tc-n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--tc-raspberry-ink); letter-spacing: .05em; }
.tc-step h3 { font-size: 1.4rem; margin: 12px 0 8px; }
.tc-step p { color: var(--tc-ink-2); }

.tc-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.tc-benefit { background: var(--tc-surface-2); border-radius: 20px; padding: 24px; }
.tc-ic { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
/* L'icona prende il colore che le mette accanto chi disegna la piastrella (il
   colore da scrivere sopra quel fondo): bianca fissa, sul giallo e sulla menta
   non si vedeva. */
.tc-ic { color: var(--tc-on-brand); }
.tc-ic svg { width: 24px; height: 24px; }
.tc-benefit h3 { font-size: 1.18rem; margin-bottom: 6px; }
.tc-benefit p { color: var(--tc-ink-2); font-size: .98rem; }

.tc-dialetto { background: var(--tc-surface); border: 2px solid var(--tc-ink); border-radius: 26px; padding: 44px; box-shadow: 10px 10px 0 var(--tc-raspberry); position: relative; overflow: hidden; }
.tc-dialetto::before { content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--f-onda-da) 16%, transparent), color-mix(in srgb, var(--f-onda-a) 10%, transparent) 60%, transparent 72%); pointer-events: none; }
.tc-dialetto h2 { font-size: clamp(2rem,4vw,2.9rem); max-width: 20ch; }
.tc-dialetto p { color: var(--tc-ink-2); font-size: 1.14rem; margin-top: 16px; max-width: 52ch; }
.tc-dialetti-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; position: relative; z-index: 1; }
.tc-d { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.02rem; padding: 10px 18px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--f-onda-da), var(--f-onda-a)); }
.tc-d.piu { background: var(--tc-surface-2); color: var(--tc-ink-2); border: 2px dashed var(--tc-rule); }

.tc-formats { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; align-items: stretch; max-width: 760px; margin-inline: auto; }
.tc-format { background: var(--tc-surface); border: 2px solid var(--tc-ink); border-radius: 24px; padding: 28px; box-shadow: 6px 6px 0 var(--tc-shadow); display: flex; flex-direction: column; }
.tc-format.star { box-shadow: 8px 8px 0 var(--tc-raspberry); }
.tc-tag { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-raspberry-ink); }
.tc-format h3 { font-size: 1.5rem; margin: 10px 0 4px; }
.tc-price { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.4rem; margin: 6px 0 2px; }
.tc-price span { font-size: 1rem; color: var(--tc-ink-2); font-weight: 600; }
.tc-format ul { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.tc-format li { display: flex; gap: 10px; align-items: flex-start; color: var(--tc-ink-2); }
.tc-format li svg { width: 20px; height: 20px; flex: none; color: var(--tc-mint-ink); margin-top: 3px; }
.tc-format .tc-btn { margin-top: auto; }

/* Il prezzo promozionale in vetrina.
   Lo sbarrato non e' un vezzo grafico: e' l'unico modo di far vedere in un colpo
   d'occhio che 3 non e' il prezzo, ma lo sconto sul prezzo. Perche' regga, il
   numero vecchio dev'essere leggibile (sbarrato, non spento) e quello nuovo
   dev'essere il piu' grande della scheda.
   La pastiglia dice che e' una cosa di adesso: senza, uno sconto sembra il
   listino, e il giorno che lo togliamo sembra un rincaro. */
.tc-format.tc-promo { border-color: var(--tc-raspberry); box-shadow: 8px 8px 0 var(--tc-yellow); }
.tc-nastro {
  align-self: flex-start; display: inline-block; margin-bottom: 12px;
  background: var(--tc-yellow); color: var(--tc-on-yellow);
  border: 2px solid var(--tc-ink); border-radius: 999px;
  padding: 5px 14px; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--tc-shadow-strong);
}
.tc-price-promo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.tc-price-promo s {
  font-size: 1.35rem; font-weight: 600; color: var(--tc-ink-2);
  text-decoration-line: line-through; text-decoration-color: var(--tc-raspberry);
  text-decoration-thickness: 3px;
}
.tc-price-promo s span { font-size: .85rem; }
.tc-price-promo strong { font-size: 2.9rem; font-weight: 800; line-height: 1; color: var(--tc-raspberry); }
.tc-price-promo strong span { font-size: 1rem; color: var(--tc-ink-2); font-weight: 600; }
.tc-promo-nota { font-size: .9rem; color: var(--tc-ink-2); margin: 6px 0 0; }
.tc-risparmio {
  /* L'inchiostro dei fondi vivi, non quello del testo: --tc-ink nella veste
     scura e' la crema, e crema su verde acqua stava a 1,64 — si vedeva la
     pastiglia e non quello che c'era scritto sopra. */
  align-self: flex-start; display: inline-block; margin: 10px 0 0;
  background: var(--tc-mint); color: var(--tc-on-yellow);
  border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .tc-nastro { animation: tc-battito 2.6s ease-in-out infinite; }
  @keyframes tc-battito {
    0%, 88%, 100% { transform: none; }
    92% { transform: scale(1.06) rotate(-1.5deg); }
    96% { transform: scale(1.03) rotate(1deg); }
  }
}

.tc-songs { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.tc-song { background: var(--tc-surface); border: 2px solid var(--tc-rule); border-radius: 22px; padding: 22px; box-shadow: 6px 6px 0 var(--tc-shadow); }
.tc-song .tc-who { font-weight: 600; margin-bottom: 2px; }
.tc-song .tc-meta { color: var(--tc-ink-2); font-size: .9rem; margin-bottom: 14px; }
.tc-mini { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-bottom: 14px; }
.tc-mini i { flex: 1; border-radius: 4px; background: linear-gradient(180deg, var(--f-onda-da), var(--f-onda-a)); opacity: .9; }
/* Mentre suona le barrette diventano l'avanzamento: spente quelle non ancora
   raggiunte, accese le altre. Prima del primo ascolto restano tutte come prima. */
.tc-song.tc-avviato .tc-mini i { opacity: .28; transition: opacity .25s ease; }
.tc-song.tc-avviato .tc-mini i.accesa { opacity: .95; }
.tc-song-azioni { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----------------------------------------------------------------------
   Le schede degli esempi come piccoli manifesti.

   Prima erano titolo, genere e due tasti: descrivevano un modulo, non un
   regalo. Adesso ogni scheda porta la foto di quel regalo e una riga vera
   della sua canzone — le uniche due cose che la rendono diversa dalle altre.

   Il velo sopra la foto non e' un vezzo: e' la stessa regola del lettore. Le
   parole devono restare leggibili su qualunque fotografia, anche una tutta
   bianca, e quella garanzia non la puo' dare chi carica la foto.
   ---------------------------------------------------------------------- */
.tc-song-foto {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  color: #fff;
  overflow: hidden;
}

.tc-song-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--tc-esempio-foto);
  background-size: cover;
  background-position: center;
}

.tc-song-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 6, 24, .84) 0%, rgba(10, 6, 24, .72) 55%, rgba(10, 6, 24, .8) 100%);
}

/* Il titolo e' la cosa piu' grande della scheda; sotto, piu' piccoli, il verso
   (un assaggio della canzone) e i dettagli. */
.tc-song .tc-who {
  font-size: clamp(1.22rem, 1.5vw, 1.42rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  text-wrap: balance;
}
.tc-song-foto .tc-who { color: #fff; }
.tc-song-foto .tc-meta { color: rgba(255, 255, 255, .72); font-size: .84rem; }

/* Il verso: corsivo e piu' piccolo del titolo, perche' si capisca che e' una riga
   della canzone e non un altro titolo. Tre righe al massimo: oltre, in una fila
   di schede, diventa un muro. */
.tc-song-verso {
  margin: 0 0 12px;
  font-size: 1rem;
  font-style: italic;
  font-weight: 600;
  opacity: .9;
  line-height: 1.35;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le barrette prendono il colore di quel regalo, quando ce l'ha. */
.tc-song[style*="--tc-esempio-accento"] .tc-mini i {
  background: linear-gradient(180deg, var(--tc-esempio-accento), color-mix(in srgb, var(--tc-esempio-accento) 45%, transparent));
}

/* Sulla foto i tasti sono chiari: un contorno scuro su un fondo scuro sparisce. */
.tc-song-foto .tc-btn-ghost {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.tc-song-foto .tc-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { .tc-song.tc-avviato .tc-mini i { transition: none; } }
.tc-play { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--tc-ink); }
/* Il play degli esempi è un <button> (suona in place): niente chrome da bottone. */
button.tc-play { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.tc-disc { width: 40px; height: 40px; border-radius: 999px; background: var(--tc-yellow); color: var(--tc-on-yellow); display: inline-flex; align-items: center; justify-content: center; }
.tc-disc svg { width: 18px; height: 18px; }

.tc-final { background: var(--tc-ink); color: var(--tc-ground); border-radius: 28px; padding: 56px 40px; text-align: center; }
.tc-final h2 { color: var(--tc-ground); font-size: clamp(2rem,4vw,3rem); }
.tc-final p { color: color-mix(in srgb, var(--tc-ground) 78%, transparent); margin: 14px auto 28px; max-width: 44ch; font-size: 1.12rem; }
/* Sul fondo scuro del riquadro finale l'ombra del tasto e' il lampone: quella
   solita, del colore del testo, sparirebbe nel fondo. */
body[data-marchio="ticanto"] .tc-final .tc-btn.tc-btn-primary { --tbl-ombra: var(--tc-raspberry); }

.tc-foot { padding: 52px 0 40px; border-top: 2px solid var(--tc-rule); color: var(--tc-ink-2); font-size: .92rem; }
.tc-foot-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.tc-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.tc-foot-links a:hover { color: var(--tc-raspberry-ink); }
.tc-legal { margin-top: 22px; max-width: 60ch; line-height: 1.55; }
.tc-legal.tc-legal-ditta { margin-top: 6px; font-size: .85rem; opacity: .85; max-width: none; }

@media (max-width: 900px) {
  /* Una colonna sola, e la miniatura subito sotto la promessa: e' la cosa che
     fa venire voglia di guardare, e prima arrivava dopo tutto il testo. */
  .tc-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "testa" "mini" "resto";
    gap: 28px;
  }
  .tc-steps, .tc-formats, .tc-songs { grid-template-columns: 1fr; }
  .tc-benefits { grid-template-columns: 1fr 1fr; }
}
/* Le soglie sono misurate (8 ottobre 2026), non stimate. A misura piena, col
   sottotitolo, la fila ci sta dai 1366px in su: li' resta com'e' sempre stata.
   Sotto si stringono distanze e caratteri, ma il sottotitolo resta fino ai
   1240px; solo fra 1160 e 1240 esce di scena. Sotto i 1160, il menu a panino.
   (Una prima versione compattava gia' sotto i 1520: troppo presto, si vedeva
   la barra rimpicciolita su quasi tutti i portatili.) */
@media (max-width: 1365.98px) {
  .tc-menu { gap: 9px; font-size: .93rem; }
  .tc-header-cta { gap: 8px; }
  .tc-header-cta .tc-btn { padding: 0 14px; font-size: .92rem; }
  .tc-quick { gap: 6px; }
}
@media (max-width: 1239.98px) {
  .tc-wordmark small { display: none; }
}


/* Il menu a tre righe comincia a 1160 (prima 1140, prima ancora 820): con la
   barra compatta qui sopra la fila ci sta da 1160 in su, misurato l'8/10/2026.
   Fra i due valori la barra non ci stava — sei voci, lingua, tema, «Accedi» e il
   tasto grande — e sforava a destra: la pagina intera scorreva di lato su un
   portatile da 1280, che e' la finestra piu' comune che ci sia. */
@media (max-width: 1159.98px) {
  .tc-bar { position: relative; gap: 12px; }

  /* Il pulsante a tre righe che apre il menu. */
  .tc-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    flex: none;
    border-radius: 14px;
    border: 2px solid var(--tc-ink);
    background: var(--tc-surface);
    box-shadow: 3px 3px 0 var(--tc-shadow);
    cursor: pointer;
  }
  .tc-burger-lines { position: relative; width: 22px; height: 16px; }
  .tc-burger-lines i {
    position: absolute; left: 0; right: 0; height: 2.4px; border-radius: 2px;
    background: var(--tc-ink);
    transition: transform .2s ease, opacity .15s ease, top .2s ease;
  }
  .tc-burger-lines i:nth-child(1) { top: 0; }
  .tc-burger-lines i:nth-child(2) { top: 7px; }
  .tc-burger-lines i:nth-child(3) { top: 14px; }
  /* Aperto: le tre righe diventano una X. */
  .tc-burger-chk:checked ~ .tc-burger .tc-burger-lines i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .tc-burger-chk:checked ~ .tc-burger .tc-burger-lines i:nth-child(2) { opacity: 0; }
  .tc-burger-chk:checked ~ .tc-burger .tc-burger-lines i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* La tendina: chiusa di norma, scende sotto la barra quando si apre. */
  .tc-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: 20px;
    box-shadow: 8px 8px 0 var(--tc-shadow);
  }
  .tc-burger-chk:checked ~ .tc-nav { display: flex; }

  .tc-menu { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
  .tc-menu a { padding: 12px; border-radius: 12px; border-bottom: 0; font-weight: 600; }
  /* Nel panino le voci riservate tornano visibili. */
  .tc-menu a.tc-solo-burger { display: block; }
  .tc-menu a:hover { background: var(--tc-surface-2); color: var(--tc-raspberry-ink); border-bottom-color: transparent; }

  .tc-nav-sep { display: block; height: 2px; border: 0; margin: 6px 2px; border-radius: 2px; background: var(--tc-rule); }

  .tc-header-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  /* Lingua e aspetto affiancati, a metà ciascuno; le altre voci a tutta
     larghezza. */
  .tc-quick { display: flex; gap: 10px; }
  .tc-quick .stato-switch { flex: 1; }
  .tc-header-cta > .tc-btn { width: 100%; }
}
@media (max-width: 520px) {
  .tc-benefits { grid-template-columns: 1fr; }
  .tc-lede { max-width: none; }
}


/* ======================================================================
   TI CANTO — la veste Festa anche nel RESTO dell'app (studio, crea, prezzi,
   pagine legali, banner cookie), non solo nella landing. Tutto sotto
   body[data-marchio="ticanto"], cosi' gli altri marchi e la console restano
   scuri. Il contenuto diventa chiaro; la barra laterale resta scura ma tinta
   Ti Canto (le sue icone sono SVG bianche, e su chiaro sparirebbero).
   ====================================================================== */
/* I colori (--f-*) non stanno qui: li stampa il server nell'<head> dalla
   tavolozza del marchio (TavolozzaSito), chiaro e scuro. Questo foglio li usa
   soltanto. */


/* Fondo e testo dell'app. Escluso quando in pagina c'e' la landing, che porta
   la propria veste a tutto campo. */
body[data-marchio="ticanto"]:not(:has(.tc-landing)) {
  color-scheme: light;
  background: var(--f-ground);
  color: var(--f-ink);
  min-height: 100vh;
}
/* Nella veste scura i controlli nativi (tendine, caselle) devono seguire: le
   variabili --f-* sopra si ribaltano da sole, qui allineo il color-scheme. */
@media (prefers-color-scheme: dark) {
  html:not([data-tema="chiaro"]) body[data-marchio="ticanto"]:not(:has(.tc-landing)) { color-scheme: dark; }
}
html[data-tema="scuro"] body[data-marchio="ticanto"]:not(:has(.tc-landing)) { color-scheme: dark; }
body[data-marchio="ticanto"]:not(:has(.tc-landing)) a,
body[data-marchio="ticanto"]:not(:has(.tc-landing)) .btn-link { color: var(--f-brand); }

body[data-marchio="ticanto"] h1,
body[data-marchio="ticanto"] h2,
body[data-marchio="ticanto"] h3 { font-family: "Bricolage Grotesque", "Inter", sans-serif; }

body[data-marchio="ticanto"] .hero-copy p,
body[data-marchio="ticanto"] .hero-list,
body[data-marchio="ticanto"] .feature-grid p,
body[data-marchio="ticanto"] .studio-shell p,
body[data-marchio="ticanto"] .songs-shell p,
body[data-marchio="ticanto"] .pricing-shell p,
body[data-marchio="ticanto"] .admin-shell p { color: var(--f-ink-2); }

/* Card: da vetro-su-scuro a superficie chiara con bordo e ombra adesivo.
   Copre anche le pagine legali e il banner cookie, che sono glass-card. */
body[data-marchio="ticanto"] .glass-card {
  background: var(--f-surface); border: 2px solid var(--f-rule);
  border-radius: 22px; backdrop-filter: none; box-shadow: 6px 6px 0 var(--f-shadow);
  color: var(--f-ink);
}

/* ======================================================================
   I tasti di Ti Canto: una famiglia sola, quattro livelli.

   Prima c'erano tre forme, quattro altezze, due caratteri e i colori di serie di
   Bootstrap — grigio, verde, rosso — uguali nel chiaro e nello scuro. Adesso il
   livello dice quanto conta l'azione, e il colore arriva dal tema:
     principale  l'azione che si fa qui (giallo, con rilievo) — .btn-primary
     secondario  l'alternativa (riquadro col bordo) — .btn-outline-light, .btn-secondary
     discreto    il contorno: torna, annulla, altro — .btn-link
     attenzione  quello che non si disfa (lampone) — .btn-danger, .btn-outline-secondary
     attenzione piena  la conferma definitiva — .btn-attenzione-piena
   I nomi nuovi (.btn-principale, .btn-secondario, …) valgono come quelli di
   Bootstrap: le pagine non si sono dovute riscrivere.

   Forma, altezze, rilievo e colori di ogni livello sono variabili --tb-* scritte
   dal server insieme alla tavolozza (StileTasti), per il chiaro e per lo scuro:
   il pannello «Estetica» li cambia senza toccare questo foglio.

   Il doppio nome di classe (.btn.btn) non e' un errore: serve a battere la regola
   dei collegamenti di Ti Canto, che pesa (0,2,2), senza ricorrere a !important.
   ====================================================================== */
body[data-marchio="ticanto"] :is(.btn.btn, .tc-btn.tc-btn) {
  /* Un tasto senza livello e' un secondario. */
  --tbl-fondo: var(--tb-secondario-fondo);
  --tbl-testo: var(--tb-secondario-testo);
  --tbl-bordo: var(--tb-secondario-bordo);
  --tbl-fondo-passaggio: var(--tb-secondario-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-secondario-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-secondario-bordo-passaggio);
  --tbl-rilievo: var(--tb-secondario-rilievo);
  --tbl-ombra: var(--tb-secondario-ombra);
  --tb-sporge: var(--tb-rilievo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border: 2px solid var(--tbl-bordo);
  border-radius: var(--tb-raggio);
  background: var(--tbl-fondo);
  color: var(--tbl-testo);
  font-family: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: calc(var(--tb-sporge) * var(--tbl-rilievo) * 1px) calc(var(--tb-sporge) * var(--tbl-rilievo) * 1px) 0 var(--tbl-ombra);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}

/* Le tre misure. La pagina d'ingresso ha le sue spaziature, e prende solo l'altezza
   grande (nella sua regola .tc-btn) e l'ombra della misura grande. */
body[data-marchio="ticanto"] .btn.btn { min-height: var(--tb-h-normale); padding: .4rem 1.25rem; font-size: .95rem; }
body[data-marchio="ticanto"] .btn.btn.btn-lg { min-height: var(--tb-h-grande); padding: .5rem 1.6rem; font-size: 1.02rem; --tb-sporge: calc(var(--tb-rilievo) + 1); }
body[data-marchio="ticanto"] .btn.btn.btn-sm { min-height: var(--tb-h-piccola); padding: .3rem .9rem; font-size: .85rem; --tb-sporge: max(calc(var(--tb-rilievo) - 1), 0); }
body[data-marchio="ticanto"] .tc-btn.tc-btn { --tb-sporge: calc(var(--tb-rilievo) + 1); }

/* I livelli: cambiano solo le variabili, il disegno e' uno. */
body[data-marchio="ticanto"] :is(.btn.btn-primary, .btn.btn-principale, .tc-btn.tc-btn-primary) {
  --tbl-fondo: var(--tb-principale-fondo);
  --tbl-testo: var(--tb-principale-testo);
  --tbl-bordo: var(--tb-principale-bordo);
  --tbl-fondo-passaggio: var(--tb-principale-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-principale-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-principale-bordo-passaggio);
  --tbl-rilievo: var(--tb-principale-rilievo);
  --tbl-ombra: var(--tb-principale-ombra);
}
body[data-marchio="ticanto"] :is(.btn.btn-outline-light, .btn.btn-secondary, .btn.btn-secondario, .tc-btn.tc-btn-ghost) {
  --tbl-fondo: var(--tb-secondario-fondo);
  --tbl-testo: var(--tb-secondario-testo);
  --tbl-bordo: var(--tb-secondario-bordo);
  --tbl-fondo-passaggio: var(--tb-secondario-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-secondario-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-secondario-bordo-passaggio);
  --tbl-rilievo: var(--tb-secondario-rilievo);
  --tbl-ombra: var(--tb-secondario-ombra);
}
/* «Regala» su /pricing è pari a «Compra con»: una canzone per te, una in dono.
   Restava il secondario piatto — poco rilievo, quindi niente ombra e nessun salto
   all'hover — e accanto al principale sembrava più piccolo. Gli diamo il rilievo
   (e l'ombra) del principale, tenendo il colore del secondario: resta col bordo,
   ma con lo stesso volume e la stessa risposta al passaggio del mouse. */
body[data-marchio="ticanto"] .btn.btn.btn-regalo {
  --tbl-rilievo: var(--tb-principale-rilievo);
  --tbl-ombra: var(--tb-principale-ombra);
}

body[data-marchio="ticanto"] :is(.btn.btn-link, .btn.btn-discreto) {
  --tbl-fondo: var(--tb-discreto-fondo);
  --tbl-testo: var(--tb-discreto-testo);
  --tbl-bordo: var(--tb-discreto-bordo);
  --tbl-fondo-passaggio: var(--tb-discreto-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-discreto-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-discreto-bordo-passaggio);
  --tbl-rilievo: var(--tb-discreto-rilievo);
  --tbl-ombra: var(--tb-discreto-ombra);
  padding-inline: .5rem;
  text-underline-offset: 3px;
}
body[data-marchio="ticanto"] :is(.btn.btn-danger, .btn.btn-outline-secondary, .btn.btn-attenzione) {
  --tbl-fondo: var(--tb-attenzione-fondo);
  --tbl-testo: var(--tb-attenzione-testo);
  --tbl-bordo: var(--tb-attenzione-bordo);
  --tbl-fondo-passaggio: var(--tb-attenzione-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-attenzione-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-attenzione-bordo-passaggio);
  --tbl-rilievo: var(--tb-attenzione-rilievo);
  --tbl-ombra: var(--tb-attenzione-ombra);
}
body[data-marchio="ticanto"] :is(.btn.btn-attenzione-piena) {
  --tbl-fondo: var(--tb-attenzione-piena-fondo);
  --tbl-testo: var(--tb-attenzione-piena-testo);
  --tbl-bordo: var(--tb-attenzione-piena-bordo);
  --tbl-fondo-passaggio: var(--tb-attenzione-piena-fondo-passaggio);
  --tbl-testo-passaggio: var(--tb-attenzione-piena-testo-passaggio);
  --tbl-bordo-passaggio: var(--tb-attenzione-piena-bordo-passaggio);
  --tbl-rilievo: var(--tb-attenzione-piena-rilievo);
  --tbl-ombra: var(--tb-attenzione-piena-ombra);
}
/* I marchi degli altri (WhatsApp) tengono il loro colore: prendono forma e misura. */
body[data-marchio="ticanto"] :is(.btn.btn-success) {
  --tbl-fondo: #25D366;
  --tbl-testo: #06361B;
  --tbl-bordo: #25D366;
  --tbl-fondo-passaggio: #1FBF5B;
  --tbl-testo-passaggio: #06361B;
  --tbl-bordo-passaggio: #1FBF5B;
  --tbl-rilievo: 0;
}

/* Gli stati. Il passaggio del mouse e il fuoco da tastiera cambiano fondo, scritta
   e bordo del livello, e — per chi ha il rilievo — alzano il tasto. */
/* .tb-passaggio: lo stato finto dell'anteprima nel pannello «Estetica», per vedere il
   passaggio del mouse senza il mouse. */
body[data-marchio="ticanto"] :is(.btn.btn, .tc-btn.tc-btn):is(:hover, :focus-visible, .tb-passaggio):not(:disabled, .disabled) {
  background: var(--tbl-fondo-passaggio);
  color: var(--tbl-testo-passaggio);
  border-color: var(--tbl-bordo-passaggio);
  transform: translate(calc(-2px * var(--tbl-rilievo)), calc(-2px * var(--tbl-rilievo)));
  box-shadow: calc((var(--tb-sporge) + 2) * var(--tbl-rilievo) * 1px) calc((var(--tb-sporge) + 2) * var(--tbl-rilievo) * 1px) 0 var(--tbl-ombra);
}
body[data-marchio="ticanto"] :is(.btn.btn-link, .btn.btn-discreto):is(:hover, :focus-visible, .tb-passaggio):not(:disabled, .disabled) { text-decoration: underline; }
body[data-marchio="ticanto"] :is(.btn.btn, .tc-btn.tc-btn):active:not(:disabled, .disabled) {
  transform: translate(calc(2px * var(--tbl-rilievo)), calc(2px * var(--tbl-rilievo)));
  box-shadow: calc(var(--tbl-rilievo) * 1px) calc(var(--tbl-rilievo) * 1px) 0 var(--tbl-ombra);
}
body[data-marchio="ticanto"] :is(.btn.btn, .tc-btn.tc-btn):focus-visible { outline: 3px solid var(--f-focus); outline-offset: 3px; }
body[data-marchio="ticanto"] :is(.btn.btn, .tc-btn.tc-btn):is(:disabled, .disabled) {
  opacity: .45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Occhiello. */
body[data-marchio="ticanto"] .eyebrow {
  background: transparent; color: var(--f-raspberry-ink);
  padding: 0; border-radius: 0; font-weight: 600; letter-spacing: .16em;
}

/* Campi. */
body[data-marchio="ticanto"] .form-control,
body[data-marchio="ticanto"] .form-select,
body[data-marchio="ticanto"] textarea {
  background: var(--f-surface) !important; border: 2px solid var(--f-rule) !important; color: var(--f-ink) !important;
}
body[data-marchio="ticanto"] .form-select option,
body[data-marchio="ticanto"] select option { background-color: var(--f-surface); color: var(--f-ink); }
body[data-marchio="ticanto"] .form-label,
body[data-marchio="ticanto"] .form-check-label { color: var(--f-ink); }

/* Percorso /crea. */
body[data-marchio="ticanto"] .crea-scelta { border: 2px solid var(--f-rule); background: var(--f-surface); color: var(--f-ink); }
body[data-marchio="ticanto"] .crea-scelta:hover { border-color: var(--f-ink); }
body[data-marchio="ticanto"] .crea-scelta.scelta { background: var(--f-yellow); color: var(--f-on-yellow); border-color: transparent; }
body[data-marchio="ticanto"] .crea-versione.scelta { border-left: 3px solid var(--f-raspberry); }
body[data-marchio="ticanto"] .crea-suggerimento { background: var(--f-surface-2); border-left-color: var(--f-yellow); }
body[data-marchio="ticanto"] .crea-suggerisci { color: var(--f-warn-ink); border-color: color-mix(in srgb, var(--f-yellow) 85%, transparent); background: color-mix(in srgb, var(--f-yellow) 16%, transparent); }
body[data-marchio="ticanto"] .crea-residuo { background: var(--f-residuo-bg); }

/* Pastiglie, meta, avvisi. */
body[data-marchio="ticanto"] .status-chip { background: var(--f-surface-2); color: var(--f-ink); }
body[data-marchio="ticanto"] .song-meta,
body[data-marchio="ticanto"] .plan-price { color: var(--f-ink); }

/* Prezzo promozionale e vantaggio del pacchetto, sulla pagina dei piani.
   Stessa idea della vetrina: il prezzo vecchio resta leggibile e sbarrato, il
   nuovo e' il numero piu' grande della scheda. I colori passano per le
   variabili del marchio, con un ripiego per i marchi che non le definiscono. */
.promo-nastro {
  display: inline-block; margin: 0 0 .5rem;
  background: var(--f-yellow, #FFC53D); color: var(--f-on-yellow, #2A2340);
  border-radius: 999px; padding: .25rem .75rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.plan-price-promo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.plan-price-promo s {
  font-size: 1.05rem; font-weight: 600; opacity: .85;
  text-decoration-line: line-through;
  text-decoration-color: var(--f-raspberry, #E23E6B);
  text-decoration-thickness: 2px;
}
.plan-price-promo strong { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--f-raspberry, #E23E6B); }
.promo-nota { font-size: .88rem; color: var(--f-ink-2, inherit); margin: .35rem 0 0; }
.promo-risparmio {
  display: inline-block; margin: .45rem 0 0;
  background: var(--f-mint, #2FBF9E); color: var(--f-on-yellow, #2A2340);
  border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; font-weight: 700;
}
/* Il colore va ripetuto piu' stretto perche' «body[data-marchio] .pricing-shell p»
   vale piu' di «.promo-risparmio» e vinceva lui: nella veste scura la pastiglia
   si ritrovava il grigio-crema del testo normale sopra il verde acqua — 1,55 di
   contrasto, cioe' illeggibile — mentre il valore scritto qui sopra non arrivava
   mai a destinazione. Non e' una ripetizione per sicurezza: e' la regola che
   serve a batterne un'altra. */
body[data-marchio="ticanto"] .pricing-shell p.promo-risparmio,
.pricing-shell p.promo-risparmio { color: var(--f-on-yellow, #2A2340); }
body[data-marchio="ticanto"] .app-alert { color: var(--f-warn-ink); border-color: color-mix(in srgb, var(--f-yellow) 50%, transparent); background: color-mix(in srgb, var(--f-yellow) 12%, transparent); }

/* Pagine legali (privacy, cookie, termini) e pie' legale. */
body[data-marchio="ticanto"] .legal-list,
body[data-marchio="ticanto"] .site-legal-meta { color: var(--f-ink-2); }

/* Tabelle. */
body[data-marchio="ticanto"] .scorri th,
body[data-marchio="ticanto"] .scorri td { color: var(--f-ink-2); }
body[data-marchio="ticanto"] .scorri td.nome { color: var(--f-ink); }

/* Barra laterale: resta scura in tutti e due i temi (testo e icone sono chiari),
   con la sfumatura della tavolozza — quella del chiaro o quella dello scuro. */
body[data-marchio="ticanto"] .sidebar {
  background-image: linear-gradient(180deg, var(--f-laterale-alto) 0%, var(--f-laterale-basso) 100%) !important;
}

/* Il nome del marchio in cima alla colonna di sinistra. Quella colonna resta
   scura in tutte e due le vesti, ma il nome e' un collegamento e con la veste
   chiara prendeva il viola dei link (--f-brand, #6E3BEF): viola scuro su fondo
   viola scuro, praticamente illeggibile. Qui il testo e' chiaro sempre, come
   tutte le altre voci della colonna, e il fondo resta quello di prima.
   Il selettore e' piu' pesante della regola generale dei link — che vale (0,2,2)
   per via di :not(:has(...)) — altrimenti non passerebbe. */
body[data-marchio="ticanto"] .sidebar .navbar-brand,
body[data-marchio="ticanto"] .sidebar .navbar-brand span {
  color: var(--f-laterale-testo);
}

/* La voce aperta del menu: il velo bianco del modello faceva una macchia
   slavata. Un filo di giallo Festa e una barretta a sinistra, come i richiami
   della pagina d'ingresso. */
body[data-marchio="ticanto"] .sidebar .nav-item a.active {
  background-color: color-mix(in srgb, var(--f-yellow) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--f-yellow);
  color: var(--f-laterale-testo);
}

/* La riga di servizio (Privacy, Cookie, Termini, Contatti, lingua, tema).
   Seguiva il tema solo sulla carta: la regola stava nel CSS isolato del layout
   scritta come :global(...), sintassi di webpack che Blazor non traduce — il
   browser la scartava e la barra restava bianca anche col tema scuro. Qui è
   globale per davvero. */
/* «main >» non e' un vezzo: di .top-row ce ne sono DUE, e questa regola le
   prendeva tutte e due. L'altra e' la barra col nome del marchio in cima alla
   colonna di sinistra (NavMenu), che deve restare scura perche' ci sta sopra
   l'hamburger, disegnato in bianco: con la veste chiara diventava bianco su
   bianco, cioe' invisibile, ed era proprio quello che si vedeva su telefono
   andando in /crea. */
body[data-marchio="ticanto"] main > .top-row {
  background-color: var(--f-surface);
  border-bottom: 1px solid var(--f-rule);
}
body[data-marchio="ticanto"] main > .top-row a { color: var(--f-brand); }
body[data-marchio="ticanto"] main > .top-row .song-meta { color: var(--f-ink-2); }

/* ----------------------------------------------------------------------
   Aspetto (chiaro/scuro) e lingua (italiano/inglese): due tasti, uno per cosa.

   Ognuno mostra SOLO lo stato in corso e al tocco passa all'altro. Le parole di
   tutti e due gli stati stanno pero' nel markup, impilate nella stessa cella di
   griglia: se ne vede una, ma il riquadro e' largo quanto la piu' lunga. Per
   questo il tasto non cambia misura quando si commuta — prima passando da
   «Italiano» a «English» la barra in alto si allargava e le voci accanto
   ballavano.

   Quale voce si veda lo decide QUESTO foglio, non il JavaScript: l'aspetto
   dall'attributo data-tema sulla radice (che l'<head> mette prima di dipingere;
   quando non c'e' comanda il sistema operativo), la lingua dall'attributo lang,
   che il server scrive sempre. Cosi' e' giusto gia' al primo fotogramma anche
   dove lo script arriva tardi. tema.js e lingua.js ci mettono solo il click.
   ---------------------------------------------------------------------- */
.stato-switch {
    /* I colori arrivano dalla veste Ti Canto quando c'e' (--f-*), altrimenti si
       ripiega sui toni scuri di casa. */
    --st-bordo: var(--f-rule, rgba(255, 255, 255, .25));
    --st-fondo: var(--f-surface-2, rgba(255, 255, 255, .07));
    --st-testo: var(--f-ink, var(--text, #eef2ff));
    display: inline-grid;
    align-items: center;
    justify-items: center;
    /* Non e' un tasto d'azione ma un interruttore: resta fuori dai livelli, e
       prende solo l'altezza piccola della famiglia, per stare in riga coi tasti. */
    min-height: var(--tb-h-piccola, 38px);
    /* Stretto: la pastiglia dell'aspetto e' larga quanto «Chiaro» anche quando
       mostra «Scuro», e con un fianco largo il testo sembrava perso dentro. */
    padding: 0 .8em;
    border: 1px solid var(--st-bordo);
    border-radius: 999px;
    background: var(--st-fondo);
    color: var(--st-testo);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.stato-switch:hover {
    border-color: var(--st-testo);
}

.stato-switch:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Tutte le voci nella stessa cella: e' questo a tenere ferma la larghezza. */
.stato-switch .stato-voce {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    white-space: nowrap;
    /* visibility, non display: quella nascosta deve continuare a occupare
       spazio, o la misura tornerebbe a ballare. Sparisce comunque anche per la
       sintesi vocale, che e' quello che si vuole. */
    visibility: hidden;
}

.stato-switch .stato-ic {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

/* La voce da mostrare: quella dello stato in corso. Le stesse due righe tornano
   sotto per il caso «nessuna scelta salvata», dove a decidere e' il sistema
   operativo e serve una @media. */
html[data-tema="chiaro"] .tema-switch .voce-chiaro,
html[data-tema="scuro"] .tema-switch .voce-scuro,
html[lang="it"] .lingua-switch .voce-it,
html[lang="en"] .lingua-switch .voce-en {
    visibility: visible;
}

@media (prefers-color-scheme: light) {
    html:not([data-tema]) .tema-switch .voce-chiaro { visibility: visible; }
}

@media (prefers-color-scheme: dark) {
    html:not([data-tema]) .tema-switch .voce-scuro { visibility: visible; }
}

/* Nella colonna di sinistra (dove i comandi finiscono su telefono) il fondo
   resta scuro anche con la veste chiara: li' --f-ink e' inchiostro scuro e si
   leggerebbe nero su nero. */
.sidebar .stato-switch {
    --st-bordo: color-mix(in srgb, var(--f-laterale-testo, #fff) 30%, transparent);
    --st-fondo: color-mix(in srgb, var(--f-laterale-testo, #fff) 9%, transparent);
    --st-testo: var(--f-laterale-testo, #e9e4f5);
}

/* Nella pagina d'ingresso seguono la veste della landing e si alzano un po',
   per stare in riga con i pulsanti che hanno accanto. */
.tc-landing .stato-switch {
    --st-bordo: var(--tc-rule);
    --st-fondo: var(--tc-surface-2);
    --st-testo: var(--tc-ink);
    min-height: var(--tb-h-normale, 44px);
    font-size: .9rem;
}


/* ======================================================================
   Indicatore d'attesa a onde (componente Onde). Le barre battono come
   l'equalizzatore dello stemma: dice «sto lavorando» dove prima c'era solo
   un pulsante spento. Generico — bello su fondo chiaro e scuro.
   ====================================================================== */
.onde {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  vertical-align: middle;
  line-height: 1;
}
/* Le barre stanno DENTRO lo stemma: quadrato arrotondato col gradiente Onda, così
   l'attesa non è un dettaglio ma un piccolo marchio che lavora. Ogni 3s fa una
   rapida rotazione di 360°, per dire chiaramente «sto aspettando». */
.onde-stemma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: .34em .42em;
  border-radius: .42em;
  background: linear-gradient(135deg, var(--f-onda-da, #5B2BE0), var(--f-onda-a, #F0338A));
  box-shadow: 0 2px 9px color-mix(in srgb, var(--f-onda-da, #5B2BE0) 38%, transparent);
  transform-origin: center;
  animation: onde-giro 3s ease-in-out infinite;
}
.onde-stemma i {
  width: 3px;
  height: 1.05em;
  border-radius: 2px;
  background: #fff;
  transform-origin: center;
  animation: onde-batti .95s ease-in-out infinite;
}
.onde-stemma i:nth-child(1) { animation-delay: 0s; }
.onde-stemma i:nth-child(2) { animation-delay: .12s; }
.onde-stemma i:nth-child(3) { animation-delay: .24s; }
.onde-stemma i:nth-child(4) { animation-delay: .12s; }
.onde-stemma i:nth-child(5) { animation-delay: 0s; }

@keyframes onde-batti {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
/* Ferma per ~2,4s, poi un giro rapido: 360°==0°, quindi il ciclo è continuo. */
@keyframes onde-giro {
  0%, 78%   { transform: rotate(0deg); }
  93%, 100% { transform: rotate(360deg); }
}

.onde-testo {
  font-weight: 600;
  font-size: .96em;
}

/* Grande, per le schermate d'attesa piene. */
.onde-lg { gap: .8em; }
.onde-lg .onde-stemma { padding: .5em .6em; border-radius: .6em; gap: 3px; }
.onde-lg .onde-stemma i { width: 6px; height: 2.2rem; border-radius: 3px; }
.onde-lg .onde-testo { font-size: 1.05rem; }

/* Dove il movimento e' spento per scelta di sistema: niente rotazione, e le barre
   pulsano piano invece di battere — un segnale di vita senza animazione forte. */
@media (prefers-reduced-motion: reduce) {
  .onde-stemma { animation: none; }
  .onde-stemma i { animation: onde-pulsa 1.5s ease-in-out infinite; transform: none; }
  @keyframes onde-pulsa { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
}

/* Avviso cookie: un riquadro scuro in basso, leggibile su ogni veste. Scuro come
   la colonna del menu, e con gli stessi colori: se il marchio li cambia, cambia
   anche lui. Compare finché non lo si chiude. */
.cookie-avviso {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2000;
  width: min(680px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--f-laterale-alto, #17132a);
  color: var(--f-laterale-testo, #eef1fb);
  border: 1px solid color-mix(in srgb, var(--f-laterale-testo, #b5bdd8) 22%, transparent);
  border-radius: .8rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  font-size: .9rem;
  line-height: 1.5;
}

.cookie-avviso p { margin: 0; }

/* Il selettore porta anche body[data-marchio]: la regola dei collegamenti di Ti
   Canto pesa (0,2,2) e dipingeva «Dettagli» col viola del marchio, scuro sul
   riquadro scuro. A pari peso vince questa, che viene dopo. */
body[data-marchio] .cookie-avviso a,
.cookie-avviso a { color: var(--f-laterale-testo, #cbb6ff); text-decoration: underline; }

.cookie-avviso button {
  flex: 0 0 auto;
  border: 0;
  border-radius: .55rem;
  padding: .55rem 1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  /* Il tasto del riquadro dei cookie e' un principale piccolo della famiglia. */
  background: var(--tb-principale-fondo, var(--f-yellow, #6E3BEF));
  color: var(--tb-principale-testo, var(--f-on-yellow, #fff));
  border-radius: var(--tb-raggio, .55rem);
  font-family: "Bricolage Grotesque", "Work Sans", system-ui, sans-serif;
}

.cookie-avviso button:hover {
  background: var(--tb-principale-fondo-passaggio, color-mix(in srgb, var(--f-yellow, #6E3BEF) 88%, #000));
  color: var(--tb-principale-testo-passaggio, var(--f-on-yellow, #fff));
}

@media (max-width: 520px) {
  .cookie-avviso {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-avviso button { width: 100%; }
}

/* I due riquadri "Versione 1/2" mentre il brano si compone. */
.song-attesa-versione {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-start;
}

/* Quando l'anteprima si ferma, l'invito all'acquisto si accende un istante. */
.anteprima-evidenza {
  outline: 2px solid var(--f-brand, #6E3BEF);
  outline-offset: 2px;
  animation: anteprima-accendi 1.2s ease-out;
}

@keyframes anteprima-accendi {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--f-brand, #6E3BEF) 45%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .anteprima-evidenza { animation: none; }
}


/* Il titolo riceve il fuoco quando si cambia pagina (navigazione.js), ma e' un
   fuoco messo dal programma, non chiesto da chi naviga: l'alone attorno al
   titolo sembrerebbe un errore. Chi arriva col tabulatore o dalla tastiera vede
   comunque i propri contorni, che stanno sugli elementi interattivi. */
h1[tabindex="-1"]:focus {
    outline: none;
}


/* ======================================================================
   Pagina «Accedi». I quattro collegamenti sotto il tasto stavano attaccati
   al tasto e attaccati fra loro, tutti dello stesso peso: un muretto di
   parole in cui l'occhio non trovava un ordine. Qui prendono aria, e la via
   senza password — quella di chi ha comprato un regalo e non ha mai scelto
   una password — esce dal mucchio e diventa un ingresso vero.
   ====================================================================== */
.login-entra {
    margin-top: .5rem;
}

/* Lo stacco fra le due vie d'ingresso. La parolina in mezzo dice che sono
   alternative, non passaggi da fare in fila. */
/* Bootstrap dipinge .text-info con un azzurro acceso (#0dcaf0) e lo impone con
   !important: sulla veste chiara da' 1,96:1 contro il bianco, cioe' illeggibile
   (sulla scura invece va bene, 8:1 — per questo si notava solo col tema chiaro).
   Qui segue l'inchiostro tenue della veste, che si legge in tutte e due. Perde
   la tinta azzurra, ma erano note e messaggi, non semafori.
   L'!important non e' un vezzo: e' l'unico modo di battere quello di Bootstrap. */
body[data-marchio="ticanto"] .text-info {
    color: var(--f-ink-2) !important;
}

/* Una nota esplicativa sopra un modulo: inchiostro tenue della veste, che si
   legge in tutte e due. */
.manage-nota {
    color: var(--f-ink-2, var(--muted));
    max-width: 60ch;
}

/* Lo sconto del primo brano, sotto l'invito all'acquisto. Era un verde scritto
   dentro la pagina (#2bb673): su bianco stava a 2,6, e il messaggio che doveva
   convincere non si leggeva. Il selettore e' lungo perche' deve battere il colore
   dei paragrafi della libreria. */
body[data-marchio] .songs-shell p.brani-sconto {
    color: var(--f-esito-ok, #2bb673);
    font-weight: 600;
}

/* Il saluto a chi torna: un momento di cortesia, non un avviso. */
.brani-bentornato {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--f-brand, var(--accent-2));
}

/* Le tabelle di Bootstrap arrivano con «color: #212529» scritto dentro, cioe'
   quasi nero: sulla veste scura era nero su bruno, e l'elenco degli accessi
   esterni non si leggeva. Qui seguono la veste, righe comprese. */
body[data-marchio="ticanto"] .table {
    color: var(--f-ink);
    border-color: var(--f-rule);
}

body[data-marchio="ticanto"] .table > :not(caption) > * > * {
    border-bottom-color: var(--f-rule);
    background-color: transparent;
}

/* La libreria vuota non e' un vicolo cieco: chi e' appena entrato e non ha
   ancora niente trova qui l'invito a cominciare, invece di dover cercare la
   voce nel menu di sinistra. */
.brani-vuoto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
}

.brani-vuoto-titolo {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.brani-vuoto-invito {
    margin: 0;
    max-width: 52ch;
    opacity: .85;
}

.brani-vuoto .btn {
    margin-top: .5rem;
}

/* Il ritorno alle impostazioni dalla pagina «La tua voce», che sta fuori dal
   menu dell'account. */
.voce-torna {
    margin: .35rem 0 0;
    font-size: .95rem;
}

.voce-torna a {
    text-decoration: none;
}

.voce-torna a:hover {
    text-decoration: underline;
}

/* «Scarica i dati» e «Elimina account»: due comandi molto diversi — uno ti dà
   una copia, l'altro cancella l'account per sempre — e stavano attaccati, con
   il rischio di prendere l'uno per l'altro. Qui c'e' spazio fra loro, e la
   cancellazione va a capo su schermo stretto invece di stringersi accanto. */
.dati-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1.25rem 0 0;
}

/* I due titoli di colonna delle pagine Accedi e Registrati.

   Sono sezioni di pari livello, quindi stessa grandezza. E sul computer si
   riserva l'altezza di due righe: a sinistra il titolo va a capo («Accedi con
   account locale» nella colonna stretta), a destra no, e senza questo le due
   righe orizzontali sotto — e tutto quello che segue — finivano a quote diverse.
   Il testo si appoggia in basso, cosi' i titoli di una riga sola restano
   allineati con l'ultima riga di quelli lunghi. */
.account-col-titolo {
    font-size: 1.55rem;
    line-height: 1.25;
    margin: 0 0 .5rem;
}

@media (min-width: 768px) {
    .account-col-titolo {
        min-height: calc(2 * 1.25em);
        display: flex;
        align-items: flex-end;
    }
}

/* Impilate su telefono e tablet stretto, la colonna degli altri servizi finiva
   appiccicata al tasto «Registrati». */
@media (max-width: 767.98px) {
    .account-altri {
        display: block;
        margin-top: 2rem;
    }
}

/* «Password dimenticata?» appena sotto il campo, allineato a destra come si usa
   per le note di un modulo: piccolo, discreto, ma li' dove viene il dubbio. */
.login-scordata {
    margin: .45rem 0 1rem;
    text-align: right;
    font-size: .88rem;
}

.login-scordata a {
    text-decoration: none;
}

.login-scordata a:hover {
    text-decoration: underline;
}

/* La colonna di destra: due blocchi il cui ORDINE cambia con la larghezza.
   Sul computer resta com'era — prima gli altri servizi, poi la via senza
   password. Sotto i 768px (dove Bootstrap impila le colonne) si scambiano:
   li' la via senza password finiva in fondo a tutto, dopo il modulo e dopo
   Google, e chi non ha una password doveva scorrere fino in fondo per
   scoprire che poteva entrare lo stesso. */
.login-altri {
    display: flex;
    flex-direction: column;
}

.login-servizi { order: 1; }
.login-senza { order: 2; }

@media (max-width: 767.98px) {
    .login-senza { order: 1; }
    .login-servizi { order: 2; }

    /* Impilate, le due colonne si toccano: qui ci vuole uno stacco. */
    .login-altri { margin-top: 2rem; }
    .login-servizi { margin-top: 1.5rem; }
}

.login-oppure {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1.5rem 0 1.2rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .65;
}

.login-oppure::before,
.login-oppure::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

/* La stessa misura del tasto «Accedi», ma in second'ordine: contorno invece
   che pieno. Si vede che e' un ingresso, non una nota a pie' pagina, e si
   capisce lo stesso qual e' la via principale.

   Il selettore e' lungo per necessita', non per vezzo. Sotto Ti Canto c'e'
   body[data-marchio="ticanto"]:not(:has(.tc-landing)) a { color: var(--f-brand) }:
   :not() e :has() pesano quanto il loro argomento piu' specifico, quindi quella
   regola vale (0,2,2) e batteva sia «.login-senza-password» (0,2,0) sia
   «a.login-senza-password:hover» (0,2,1). Risultato: al passaggio del cursore il
   fondo diventava --f-brand e il testo restava --f-brand — la scritta spariva
   dentro il suo stesso colore, in tutte e due le vesti. Con
   «body[data-marchio] a.login-senza-password:hover» si arriva a (0,3,2) e passa
   questa, senza ricorrere a !important. */
body[data-marchio] a.login-senza-password {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .75rem 1.25rem;
    border: 2px solid var(--f-brand, var(--accent, #9d5cff));
    border-radius: 999px;
    background: transparent;
    color: var(--f-brand, var(--accent-2, #b9f3ff));
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

body[data-marchio] a.login-senza-password:hover,
body[data-marchio] a.login-senza-password:focus-visible {
    background: var(--f-brand, var(--accent, #9d5cff));
    /* Il colore della pagina sotto: bianco con la veste chiara, viola scuro con
       quella scura. In tutti e due i casi stacca dal fondo acceso. */
    color: var(--f-surface, #12101d);
    text-decoration: none;
}

body[data-marchio] a.login-senza-password svg {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
}

.login-aiuto {
    margin: .7rem 0 0;
    font-size: .92rem;
    text-align: center;
    opacity: .78;
}

/* Le tre vie di servizio: servono solo a chi un account ce l'ha gia', quindi
   restano collegamenti. Staccate dal blocco di sopra e con del respiro fra
   loro, cosi' si leggono una per una invece che come un paragrafo solo. */
.login-minori {
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--f-rule, rgba(128, 128, 128, .28));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: .95rem;
}

.login-minori a {
    text-decoration: none;
}

.login-minori a:hover {
    text-decoration: underline;
}

/* Le pastiglie dei temi non stanno piu' qui: la scelta dell'aspetto e' andata
   dentro l'anteprima, dove si vede quello che si sceglie. Questo foglio non ha
   piu' una pagina che le disegni. */



/* ======================================================================
   Pannello «Estetica»: i colori del tema chiaro e del tema scuro di un marchio.
   Il pannello stesso segue la veste del sito (variabili --f-*, con i toni di
   casa come ripiego); l'anteprima invece e' dipinta coi colori che si stanno
   scegliendo (variabili --e-*, messe dalla pagina e da estetica.js).
   ====================================================================== */
.estetica-marchi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.estetica-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: 1rem; }
.estetica-testa h2 { margin: 0; }
.estetica-griglia { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.75rem; align-items: start; }
.estetica-lato { position: sticky; top: 4.5rem; display: grid; gap: .75rem; }
@media (max-width: 960px) {
  .estetica-griglia { grid-template-columns: minmax(0, 1fr); }
  .estetica-lato { position: static; }
}
.estetica-gruppo { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.estetica-gruppo legend {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--f-ink-2, var(--muted)); margin-bottom: .25rem;
}
.estetica-campo {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid var(--f-rule, rgba(255, 255, 255, .12)); cursor: pointer; margin: 0;
}
.estetica-campo input[type="color"] {
  width: 46px; height: 34px; padding: 2px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .2)); background: var(--f-surface, transparent);
}
.estetica-campo input[type="color"]:focus-visible { outline: 3px solid var(--f-focus, #9d5cff); outline-offset: 2px; }
.estetica-nome { display: grid; line-height: 1.3; }
.estetica-nome b { font-weight: 600; }
.estetica-nome small { font-size: .8rem; color: var(--f-ink-2, var(--muted)); }
.estetica-esa { font-size: .8rem; color: var(--f-ink-2, var(--muted)); font-variant-numeric: tabular-nums; background: transparent; }
.estetica-problemi { margin: .25rem 0 .75rem; font-size: .92rem; }
.estetica-problemi ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.estetica-ok { color: var(--f-esito-ok, #7BD99B); font-weight: 600; }
.estetica-guaio { color: var(--f-esito-ko, #f97066); font-weight: 600; }
.estetica-salva:disabled { opacity: .55; cursor: not-allowed; }

.estetica-anteprima {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); overflow: hidden;
  border-radius: 16px; border: 1px solid var(--f-rule, rgba(255, 255, 255, .14));
  font-family: "Work Sans", system-ui, sans-serif; font-size: .82rem; line-height: 1.35;
}
.estetica-anteprima .ea-menu {
  display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px;
  background: linear-gradient(180deg, var(--e-LateraleAlto), var(--e-LateraleBasso)); color: var(--e-LateraleTesto);
}
.estetica-anteprima .ea-marchio {
  display: flex; align-items: center; gap: 6px; padding: 10px; margin-bottom: 4px;
  background: rgba(0, 0, 0, .4); font-weight: 700; font-family: "Bricolage Grotesque", sans-serif;
}
.estetica-anteprima .ea-stemma { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--e-OndaDa), var(--e-OndaA)); flex: none; }
.estetica-anteprima .ea-voce { padding: 6px 10px; margin: 0 6px; border-radius: 6px; }
.estetica-anteprima .ea-attiva { background: color-mix(in srgb, var(--e-Giallo) 18%, transparent); box-shadow: inset 3px 0 0 var(--e-Giallo); }
.estetica-anteprima .ea-pagina { background: var(--e-Fondo); color: var(--e-Testo); padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.estetica-anteprima .ea-occhiello { color: var(--e-LamponeTesto); font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.estetica-anteprima .ea-titolo { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--e-Testo); }
.estetica-anteprima .ea-testo2 { color: var(--e-Testo2); }
.estetica-anteprima .ea-riquadro {
  align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  background: var(--e-Riquadro); color: var(--e-Testo); border: 2px solid var(--e-Bordo);
  border-radius: 14px; padding: 10px 12px; box-shadow: 4px 4px 0 var(--e-Ombra); margin: 4px 0 6px;
}
.estetica-anteprima .ea-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.estetica-anteprima .ea-chip { background: var(--e-Riquadro2); color: var(--e-Testo); border-radius: 999px; padding: 2px 9px; font-size: .74rem; }
.estetica-anteprima .ea-link { color: var(--e-Marchio); text-decoration: underline; text-underline-offset: 2px; }
.estetica-anteprima .ea-tasto {
  background: var(--e-Giallo); color: var(--e-SuGiallo); border-radius: 999px; padding: 5px 13px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; box-shadow: 3px 3px 0 var(--e-OmbraForte);
}
.estetica-anteprima .ea-pastiglia { background: var(--e-Menta); color: var(--e-SuGiallo); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .74rem; }
.estetica-anteprima .ea-ok { color: var(--e-EsitoOk); font-weight: 600; }
.estetica-anteprima .ea-ko { color: var(--e-EsitoKo); font-weight: 600; }
.estetica-anteprima .ea-avviso { color: var(--e-AvvisoTesto); }
.estetica-anteprima .ea-icona { color: var(--e-MentaTesto); font-weight: 600; }
.estetica-anteprima .ea-fuoco { outline: 3px solid var(--e-Fuoco); outline-offset: 3px; margin-top: 6px; }

/* La sezione «Tasti»: forma e misure in fila, i colori in una tabella (livelli per
   proprieta'), e le anteprime coi tasti veri. Le anteprime ridefiniscono le
   variabili --tb-* per quello che contengono: i tasti dentro sono gli stessi del
   sito, e si ridipingono da soli. */
.et-forma { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.et-forma label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; margin: 0; }
.et-forma select, .et-forma input {
  width: 9.5rem; min-height: 38px; padding: .3rem .55rem; border-radius: 9px;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .2)); background: var(--f-surface, transparent); color: var(--f-ink, inherit);
}
.et-tabella-scorre { overflow-x: auto; margin-bottom: 1.25rem; }
.et-tabella { border-collapse: collapse; min-width: 58rem; font-size: .85rem; }
.et-tabella th, .et-tabella td { padding: .45rem .5rem; border-bottom: 1px solid var(--f-rule, rgba(255, 255, 255, .12)); text-align: left; vertical-align: middle; }
.et-tabella thead th { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--f-ink-2, var(--muted)); }
.et-tabella tbody th { min-width: 11rem; }
.et-tabella tbody th b, .et-tabella tbody th small { display: block; }
.et-tabella tbody th small { font-weight: 400; color: var(--f-ink-2, var(--muted)); }
.et-tabella select {
  width: 100%; min-width: 8.5rem; min-height: 34px; padding: .2rem .35rem; border-radius: 8px;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .2)); background: var(--f-surface, transparent); color: var(--f-ink, inherit);
}
.et-tabella input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--f-brand, #9d5cff); }
.et-anteprime { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.et-anteprima { display: grid; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--f-rule, rgba(255, 255, 255, .14)); }
.et-anteprima .et-nome { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.et-riquadro { display: grid; gap: 14px; padding: 12px; border: 2px solid; border-radius: 14px; }
.et-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.et-riga .et-etichetta { flex-basis: 100%; font-size: .74rem; font-weight: 600; opacity: .8; }
.et-riga .btn { pointer-events: none; }

.estetica-stemma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; max-width: 42rem; }
.estetica-anteprima-stemma {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, var(--e-OndaDa), var(--e-OndaA));
}
.estetica-anteprima-stemma i { width: 6px; border-radius: 3px; background: #fff; }
.estetica-anteprima-stemma i:nth-child(1) { height: 18px; }
.estetica-anteprima-stemma i:nth-child(2) { height: 34px; }
.estetica-anteprima-stemma i:nth-child(3) { height: 46px; }
.estetica-anteprima-stemma i:nth-child(4) { height: 26px; }
@media (max-width: 520px) {
  .estetica-anteprima { grid-template-columns: 1fr; }
  .estetica-anteprima .ea-menu { flex-direction: row; flex-wrap: wrap; padding: 0; }
  .estetica-stemma { grid-template-columns: 1fr; }
}

/* L'identificativo di un brano nel registro: si seleziona tutto con un clic, per
   incollarlo altrove, e va a capo invece di allargare la scheda. */
.admin-brano-id { user-select: all; overflow-wrap: anywhere; font-size: .85em; }


/* ======================================================================
   Il biglietto, in prima pagina: si prepara, si consegna, si ascolta.

   Un giro solo di venti secondi, con una linea del tempo per tutti: ogni pezzo
   ha la sua animazione ma nessuno ha un ritardo suo, cosi' le tappe restano
   allineate e si possono leggere qui come percentuali.
     0–40%   il cursore sceglie copertina (9%), scritta (19%) e firma (29%)
     42–48%  le scelte spariscono e il biglietto si sposta a sinistra
     50–58%  il biglietto si apre: dentro il QR
     56–62%  arriva il telefono; 64–74% inquadra; dal 76% suona
     94–100% tutto torna com'era, e si ricomincia
   Il biglietto e' di carta: chiaro in tutti e due i temi, come quello stampato.
   ====================================================================== */
.tc-biglietto-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.tc-biglietto-testo { display: grid; gap: 16px; justify-items: start; }
.tc-biglietto-testo h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.tc-biglietto-testo p { color: var(--tc-ink-2); font-size: 1.12rem; max-width: 42ch; }
.tc-biglietto-testo .tc-eyebrow { margin: 0; }
.tc-biglietto-capo { display: grid; gap: 16px; justify-items: start; }
/* Da telefono: titolo, poi la scena, poi la spiegazione e il tasto. Il contenitore
   del testo si scioglie (display: contents) e i pezzi prendono il loro turno nella
   griglia; l'ordine per chi legge con la voce resta quello della pagina, e la
   scena e' decorativa (aria-hidden). */
@media (max-width: 900px) {
  .tc-biglietto-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tc-biglietto-testo { display: contents; }
  .tc-biglietto-capo { order: 1; }
  .tc-biglietto-grid > .tcb-palco { order: 2; }
  .tc-biglietto-testo > p { order: 3; margin: 0; }
  .tc-biglietto-testo > .tc-btn { order: 4; justify-self: start; }
}

.tcb-palco {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  border-radius: 26px; background: var(--tc-surface-2); border: 2px solid var(--tc-rule);
  perspective: 1100px; container-type: inline-size;
}
.tcb-palco * { animation-duration: 20s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

/* Fuori dallo schermo il biglietto si ferma. Gira per venti secondi senza mai
   finire, e anima colore, ombra del testo e rotazioni: lavoro di disegno che
   continuerebbe anche quando nessuno lo guarda, rubando fotogrammi alla tela
   psichedelica della miniatura qui sopra — che si muove a mano ed e' la prima
   a risentirne. La classe la mette miniatura.js guardando chi e' in vista. */
.tcb-palco.tcb-in-pausa * { animation-play-state: paused; }

.tcb-libro { position: absolute; left: 33%; top: 11%; width: 34%; aspect-ratio: 105 / 148; transform-style: preserve-3d; animation-name: tcb-sposta; }
@keyframes tcb-sposta { 0%, 42% { transform: translateX(0); } 48%, 94% { transform: translateX(-56%); } 100% { transform: translateX(0); } }

.tcb-interno, .tcb-copertina { position: absolute; inset: 0; border-radius: 1.4cqw; box-shadow: 0 1.6cqw 4cqw rgba(20, 12, 40, .28); }
.tcb-interno {
  background: #fff; color: #2A2340; display: grid; justify-items: center; align-content: center; gap: 1.6cqw;
  padding: 2.6cqw; text-align: center;
}
.tcb-interno b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.6cqw; line-height: 1.1; }
.tcb-interno small { font-size: 1.35cqw; line-height: 1.3; color: #5A5273; }
.tcb-qr {
  display: block; width: 56%; aspect-ratio: 1; position: relative;
  background: conic-gradient(#2A2340 25%, transparent 0 50%, #2A2340 0 75%, transparent 0) 0 0 / 22% 22%, #fff;
  box-shadow: inset 0 0 0 .7cqw #2A2340;
}
.tcb-qr::before, .tcb-qr::after {
  content: ""; position: absolute; width: 30%; aspect-ratio: 1; background: #fff;
  box-shadow: inset 0 0 0 .8cqw #2A2340, inset 0 0 0 1.5cqw #fff, inset 0 0 0 9cqw #2A2340;
}
.tcb-qr::before { top: 0; left: 0; }
.tcb-qr::after { bottom: 0; right: 0; }

.tcb-copertina {
  transform-origin: left center; backface-visibility: hidden; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--f-onda-da, #5B2BE0), var(--f-onda-a, #F0338A));
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2.8cqw; animation-name: tcb-apri;
}
@keyframes tcb-apri { 0%, 50% { transform: rotateY(0); } 58%, 92% { transform: rotateY(-172deg); } 98%, 100% { transform: rotateY(0); } }
.tcb-fondo-2 { position: absolute; inset: 0; background: radial-gradient(circle at 30% 28%, #FFD27A, #E23E6B 62%, #7B2BE0 120%); opacity: 0; animation-name: tcb-fondo; }
@keyframes tcb-fondo { 0%, 9% { opacity: 0; } 11%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.tcb-stemma { position: absolute; top: 2.6cqw; left: 2.6cqw; width: 5cqw; aspect-ratio: 1; border-radius: 1.2cqw; background: rgba(255, 255, 255, .25); }
.tcb-scritta { position: absolute; left: 2.8cqw; right: 2.8cqw; bottom: 6cqw; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 3cqw; line-height: 1.05; }
.tcb-scritta-1 { animation-name: tcb-via-a-19; }
.tcb-scritta-2 { opacity: 0; animation-name: tcb-dentro-a-19; }
.tcb-firma { position: absolute; left: 2.8cqw; bottom: 2.6cqw; font-size: 1.6cqw; opacity: 0; animation-name: tcb-dentro-a-29; }
@keyframes tcb-via-a-19 { 0%, 18% { opacity: 1; } 20%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tcb-dentro-a-19 { 0%, 18% { opacity: 0; } 20%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes tcb-dentro-a-29 { 0%, 28% { opacity: 0; } 30%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

.tcb-scelta {
  position: absolute; bottom: 6%; transform: translateX(-50%);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.9cqw; white-space: nowrap;
  padding: .9cqw 1.9cqw; border-radius: 999px; background: #fff; color: #2A2340; border: 2px solid #2A2340;
}
.tcb-scelta-1 { left: 32%; animation-name: tcb-premi-9; }
.tcb-scelta-2 { left: 50%; animation-name: tcb-premi-19; }
.tcb-scelta-3 { left: 68%; animation-name: tcb-premi-29; }
@keyframes tcb-premi-9 { 0%, 8% { background: #fff; opacity: 1; transform: translateX(-50%) scale(1); } 9% { background: #FFC53D; transform: translateX(-50%) scale(.9); } 10%, 40% { background: #FFC53D; opacity: 1; transform: translateX(-50%) scale(1); } 44%, 96% { opacity: 0; } 100% { background: #fff; opacity: 1; } }
@keyframes tcb-premi-19 { 0%, 18% { background: #fff; opacity: 1; transform: translateX(-50%) scale(1); } 19% { background: #FFC53D; transform: translateX(-50%) scale(.9); } 20%, 40% { background: #FFC53D; opacity: 1; transform: translateX(-50%) scale(1); } 44%, 96% { opacity: 0; } 100% { background: #fff; opacity: 1; } }
@keyframes tcb-premi-29 { 0%, 28% { background: #fff; opacity: 1; transform: translateX(-50%) scale(1); } 29% { background: #FFC53D; transform: translateX(-50%) scale(.9); } 30%, 40% { background: #FFC53D; opacity: 1; transform: translateX(-50%) scale(1); } 44%, 96% { opacity: 0; } 100% { background: #fff; opacity: 1; } }

.tcb-cursore { position: absolute; width: 3.4cqw; height: 3.4cqw; margin: -.5cqw 0 0 -.8cqw; left: 78%; top: 62%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); animation-name: tcb-cursore; }
@keyframes tcb-cursore {
  0% { left: 78%; top: 62%; opacity: 0; }
  3% { opacity: 1; }
  7% { left: 32%; top: 91%; transform: scale(1); }
  9% { left: 32%; top: 91%; transform: scale(.82); }
  11% { left: 32%; top: 91%; transform: scale(1); }
  17% { left: 50%; top: 91%; transform: scale(1); }
  19% { left: 50%; top: 91%; transform: scale(.82); }
  21% { left: 50%; top: 91%; transform: scale(1); }
  27% { left: 68%; top: 91%; transform: scale(1); }
  29% { left: 68%; top: 91%; transform: scale(.82); }
  31% { left: 68%; top: 91%; transform: scale(1); opacity: 1; }
  38%, 100% { left: 80%; top: 70%; opacity: 0; }
}

.tcb-telefono {
  position: absolute; right: 11%; top: 8%; width: 25%; aspect-ratio: 9 / 18; border-radius: 3cqw;
  background: #1A1433; padding: 1.2cqw; box-shadow: 0 2cqw 5cqw rgba(20, 12, 40, .32); opacity: 0; animation-name: tcb-telefono;
}
/* Mentre suona il telefono si raddrizza e si avvicina: le righe che si accendono
   sono la cosa da vedere, e storte e piccole non si leggevano. */
@keyframes tcb-telefono {
  0%, 55% { transform: translateX(60%) rotate(8deg); opacity: 0; }
  62%, 69% { transform: translate(-8%, 6%) rotate(-6deg); opacity: 1; }
  73%, 94% { transform: translate(-10%, 4%) rotate(-2deg) scale(1.22); opacity: 1; }
  98%, 100% { transform: translateX(60%) rotate(8deg); opacity: 0; }
}
.tcb-schermo { position: relative; width: 100%; height: 100%; border-radius: 2cqw; background: #0C0818; overflow: hidden; }
.tcb-mirino { position: absolute; inset: 24% 14%; border: 2px dashed rgba(255, 255, 255, .55); border-radius: 1.4cqw; animation-name: tcb-mirino; }
@keyframes tcb-mirino { 0%, 68% { opacity: 1; } 70%, 100% { opacity: 0; } }
.tcb-scansione { position: absolute; left: 14%; right: 14%; top: 24%; height: 2px; background: #62D8BA; box-shadow: 0 0 1.6cqw #62D8BA; opacity: 0; animation-name: tcb-scansione; }
@keyframes tcb-scansione { 0%, 61% { top: 24%; opacity: 0; } 62% { opacity: 1; } 66% { top: 74%; } 69% { top: 24%; opacity: 1; } 70%, 100% { opacity: 0; } }

/* Il lettore nel telefono: la veste «viola» del lettore vero, con i colori di
   miniatura.js — fondo, scheda velata, testo, accento. Sono i colori della
   veste, non del sito: restano uguali col tema chiaro e con lo scuro, come nel
   lettore. */
.tcb-lettore {
  position: absolute; inset: 0; display: grid; align-content: center; padding: .9cqw;
  background: radial-gradient(circle at 20% 10%, rgba(179, 107, 255, .28), transparent 60%), #0C041C;
  opacity: 0; animation-name: tcb-lettore;
}
@keyframes tcb-lettore { 0%, 69% { opacity: 0; } 71%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
.tcb-scheda {
  display: grid; gap: .8cqw; padding: 1.6cqw 1.3cqw; border-radius: 1.6cqw;
  background: rgba(32, 13, 70, .74); border: 1px solid rgba(241, 233, 255, .16); color: #F1E9FF;
  box-shadow: .8cqw .8cqw 0 #0C041C;
}
.tcb-alto { display: flex; align-items: center; justify-content: space-between; gap: .4cqw; font-size: 1.05cqw; font-weight: 600; }
.tcb-marchio { display: inline-flex; align-items: center; gap: .35cqw; }
.tcb-marchio i { width: 1.6cqw; height: 1.6cqw; border-radius: .4cqw; background: linear-gradient(135deg, #5B2BE0, #F0338A); }
.tcb-pronto { padding: .1cqw .5cqw; border-radius: 999px; border: 1px solid #B36BFF; font-size: .85cqw; letter-spacing: .06em; text-transform: uppercase; }
.tcb-scheda b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.5cqw; line-height: 1.05; margin-top: .3cqw; }
.tcb-scheda small { font-size: 1.1cqw; line-height: 1.25; color: rgba(241, 233, 255, .62); }
.tcb-righe { display: grid; gap: .5cqw; margin-block: .6cqw; }
.tcb-riga { font-size: 1.45cqw; font-weight: 700; line-height: 1.28; color: rgba(241, 233, 255, .62); }
/* Le righe si accendono una dopo l'altra, come nella miniatura: una accesa, le
   altre spente ma leggibili. Ognuna ha la sua finestra nella scena di 20 secondi. */
.tcb-riga-1 { color: #F1E9FF; text-shadow: 0 0 1.4cqw rgba(179, 107, 255, .35); animation-name: tcb-riga-1; }
.tcb-riga-2 { animation-name: tcb-riga-2; }
.tcb-riga-3 { animation-name: tcb-riga-3; }
.tcb-riga-4 { animation-name: tcb-riga-4; }
@keyframes tcb-riga-1 { 0%, 76% { color: #F1E9FF; text-shadow: 0 0 1.4cqw rgba(179, 107, 255, .35); } 77%, 100% { color: rgba(241, 233, 255, .62); text-shadow: none; } }
@keyframes tcb-riga-2 { 0%, 76% { color: rgba(241, 233, 255, .62); text-shadow: none; } 77%, 82% { color: #F1E9FF; text-shadow: 0 0 1.4cqw rgba(179, 107, 255, .35); } 83%, 100% { color: rgba(241, 233, 255, .62); text-shadow: none; } }
@keyframes tcb-riga-3 { 0%, 82% { color: rgba(241, 233, 255, .62); text-shadow: none; } 83%, 88% { color: #F1E9FF; text-shadow: 0 0 1.4cqw rgba(179, 107, 255, .35); } 89%, 100% { color: rgba(241, 233, 255, .62); text-shadow: none; } }
@keyframes tcb-riga-4 { 0%, 88% { color: rgba(241, 233, 255, .62); text-shadow: none; } 89%, 100% { color: #F1E9FF; text-shadow: 0 0 1.4cqw rgba(179, 107, 255, .35); } }
.tcb-barra { display: block; height: .45cqw; border-radius: 999px; background: rgba(241, 233, 255, .16); overflow: hidden; }
.tcb-barra i { display: block; height: 100%; width: 40%; border-radius: 999px; background: #B36BFF; animation-name: tcb-barra; }
.tcb-palco .tcb-barra i { animation-timing-function: linear; }
@keyframes tcb-barra { 0%, 71% { width: 6%; } 95%, 100% { width: 72%; } }
.tcb-vesti { display: flex; gap: .6cqw; margin-top: .4cqw; }
.tcb-vesti i { width: 2.1cqw; height: 2.1cqw; border-radius: 999px; border: 1.5px solid #B36BFF; }
.tcb-vesti i:nth-child(1) { background: #0C041C; outline: 1.5px solid #F1E9FF; outline-offset: 1.5px; }
.tcb-vesti i:nth-child(2) { background: #F0E4CE; border-color: #A8481A; }
.tcb-vesti i:nth-child(3) { background: #041514; border-color: #2BE0C6; }
.tcb-vesti i:nth-child(4) { background: #2B0F2E; border-color: #FF8A3D; }
.tcb-vesti i:nth-child(5) { background: conic-gradient(from 200deg, #B36BFF, #34E0F0, #43D673, #FFD52E, #FF6FB0, #B36BFF); }

/* Meno movimento: la scena finale, ferma — il biglietto fatto, aperto, che suona. */
@media (prefers-reduced-motion: reduce) {
  .tcb-palco * { animation: none !important; }
  .tcb-libro { transform: translateX(-56%); }
  .tcb-copertina { transform: rotateY(-172deg); }
  .tcb-fondo-2, .tcb-scritta-2, .tcb-firma, .tcb-telefono, .tcb-lettore { opacity: 1; }
  .tcb-telefono { transform: translate(-10%, 4%) rotate(-2deg) scale(1.22); }
  .tcb-scritta-1, .tcb-scelta, .tcb-cursore, .tcb-mirino, .tcb-scansione { opacity: 0; }
}

/* ------------------------------------------------------------ le domande
   Una pagina che si legge, e un riquadro in fondo alla home.

   Sono <details>: si aprono anche senza programma, si trovano col «cerca nella
   pagina» del browser e chi legge con la sintesi vocale ci si muove come si
   aspetta. Costa una riga di stile in piu' per il triangolino, e vale. */
.faq-shell { max-width: 46rem; }

.faq-testata { margin-bottom: 28px; }

.faq-elenco {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faq-voce {
  border-top: 1px solid var(--tc-rule);
  padding: 2px 0;
}

.faq-voce:last-of-type { border-bottom: 1px solid var(--tc-rule); }

.faq-voce > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 2px;
  position: relative;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

.faq-voce > summary::-webkit-details-marker { display: none; }

/* Il segno di «si apre»: una crocetta che diventa un meno. Ruotare una riga
   sola e' piu' leggibile di una freccia, e non dipende da un carattere. */
.faq-voce > summary::after,
.faq-voce > summary::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--tc-brand);
  transition: transform .2s ease;
}

.faq-voce > summary::before { transform: translateY(-50%); }
.faq-voce > summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-voce[open] > summary::after { transform: translateY(-50%) rotate(0deg); }

.faq-voce > summary:focus-visible {
  outline: 2px solid var(--tc-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq-risposta {
  padding: 0 40px 20px 2px;
  line-height: 1.6;
  white-space: pre-line; /* chi scrive la risposta puo' andare a capo */
}

.faq-coda { margin-top: 24px; }

/* In fondo alla home: stesso corpo, un titolo suo e un po' d'aria sopra. */
.tc-domande { max-width: 46rem; }
.tc-domande > h2 { margin-bottom: 20px; text-wrap: balance; }
.tc-domande .faq-tutte { margin-top: 20px; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .faq-voce > summary::after,
  .faq-voce > summary::before { transition: none; }
}

/* ------------------------------------------------------- le recensioni
   Poche, larghe, leggibili. Non una griglia di mattonelle: sono parole di
   persone, e stanno meglio in colonna come si legge una lettera. */
.tc-recensioni { max-width: 46rem; }
.tc-recensioni > h2 { margin-bottom: 12px; text-wrap: balance; }

.recensioni-elenco {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}

.recensione-voce {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--tc-rule);
  border-radius: 14px;
}

.recensione-stelle { display: flex; gap: 2px; line-height: 1; }
.recensione-stelle .stella { opacity: .28; }
.recensione-stelle .stella.accesa { opacity: 1; color: var(--tc-brand); }

.recensione-voce blockquote {
  margin: 10px 0 8px;
  line-height: 1.6;
  white-space: pre-line;
}

.recensione-voce figcaption { font-size: .92em; opacity: .75; }
.recensione-occasione { font-style: italic; }

/* ------------------------------------------------ l'editor dei tempi del testo
   Una colonna di righe, ognuna col suo inizio. Si vede a colpo d'occhio quale
   riga si sta per segnare, quale e' selezionata e quale sta suonando. */
.tt-editor { display: flex; flex-direction: column; gap: 14px; }
.tt-comandi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tt-tempo { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5.5em; }
.tt-velocita { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tt-velocita select { padding: 6px 8px; border-radius: 8px; font: inherit; }
.tt-posizione { display: flex; align-items: center; gap: 12px; }
.tt-posizione input[type="range"] { flex: 1; min-width: 0; accent-color: currentColor; height: 28px; }
.tt-durata { text-align: right; opacity: .7; }
.tt-righe { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.tt-righe li { display: grid; grid-template-columns: 5.5em 1fr; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.tt-inizio { font-variant-numeric: tabular-nums; opacity: .55; }
.tt-righe li.tt-segnata .tt-inizio { opacity: 1; font-weight: 600; }
.tt-righe li.tt-prossima { border-color: currentColor; }
.tt-righe li.tt-selezionata { background: color-mix(in srgb, currentColor 10%, transparent); }
.tt-righe li.tt-in-corso .tt-testo { font-weight: 700; }
.tt-esito { font-weight: 600; min-height: 1.4em; }

/* ---- Le comparse della homepage (comparse.js) ----
   Il nascosto esiste solo con la classe «comparse» sulla pagina e l'attributo
   messo dallo script: senza script non si nasconde niente. A lavoro finito lo
   script toglie l'attributo, e l'elemento torna al suo foglio di stile. */
@media (prefers-reduced-motion: no-preference) {
  html.comparse [data-comparsa] {
    transition: opacity .65s cubic-bezier(.22, .72, .2, 1), transform .65s cubic-bezier(.22, .72, .2, 1), filter .65s cubic-bezier(.22, .72, .2, 1);
    transition-delay: var(--comparsa-ritardo, 0ms);
  }
  html.comparse [data-comparsa]:not(.comparsa-vista) { opacity: 0; transform: translateY(16px); }
  html.comparse [data-comparsa="riquadro"]:not(.comparsa-vista) { transform: translateY(20px); filter: blur(4px); }
  html.comparse [data-comparsa="piccolo"]:not(.comparsa-vista) { transform: translateY(10px); }
  html.comparse [data-comparsa="piccolo"] { transition-duration: .45s; }

  /* I passaggi numerati: il numero arriva appena prima del suo testo. */
  html.comparse .tc-step[data-comparsa] .tc-n { display: inline-block; }
  html.comparse .tc-step.comparsa-vista .tc-n { animation: tc-comparsa-numero .5s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: var(--comparsa-ritardo, 0ms); }

  /* L'offerta in evidenza: l'ombra piena si accende quando e' gia' al suo posto. */
  html.comparse .tc-format.comparsa-vista:is(.star, .tc-promo) { animation: tc-comparsa-ombra .7s cubic-bezier(.22, .72, .2, 1) both; animation-delay: calc(var(--comparsa-ritardo, 0ms) + 350ms); }
}
@keyframes tc-comparsa-numero { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tc-comparsa-ombra { from { box-shadow: 0 0 0 transparent; } }
@media print { html.comparse [data-comparsa] { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---- Home riorganizzata (settembre 2026) ----
   Tutto sugli stessi gettoni di colore della pagina: vale per il tema chiaro e
   per quello scuro senza regole a parte. */

/* Il prezzo nella prima schermata, sotto i pulsanti. */
.tc-hero-prezzo { margin: 18px 0 0; font-size: 1.05rem; color: var(--tc-ink-2); }
.tc-hero-prezzo strong { color: var(--tc-ink); font-size: 1.2rem; }
.tc-hero-prezzo + .tc-reassure { margin-top: 10px; }

/* Quattro passi: in fila sul computer largo, due per riga sul medio, uno sul telefono. */
.tc-steps.tc-steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .tc-steps.tc-steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tc-steps.tc-steps-4 { grid-template-columns: 1fr; } }

/* Lo spot accanto ai quattro passi: un telefono a sinistra, i passi a destra (in
   due colonne); su schermo stretto il video sta sopra, centrato. */
.tc-come-griglia { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 32px; align-items: start; }
.tc-come-griglia .tc-steps.tc-steps-4 { grid-template-columns: repeat(2, 1fr); }
.tc-spot { margin: 0; display: grid; gap: 10px; justify-items: center; }
.tc-spot figcaption { font-size: .9rem; font-weight: 600; color: var(--tc-ink-2, inherit); text-align: center; }
.tc-spot-avvia, .tc-spot-video { width: 100%; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  border: 6px solid var(--tc-ink, #1a1a1a); box-shadow: 0 18px 40px var(--tc-shadow, rgba(0,0,0,.25)); background: #000; }
.tc-spot-avvia { position: relative; padding: 0; cursor: pointer; display: block; }
.tc-spot-avvia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-spot-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%);
  border-radius: 999px; display: grid; place-items: center; background: var(--tc-brand, #6E3BEF); color: var(--tc-on-brand, #fff);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .2s ease; }
.tc-spot-play svg { width: 30px; height: 30px; margin-left: 4px; }
.tc-spot-avvia:hover .tc-spot-play, .tc-spot-avvia:focus-visible .tc-spot-play { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 900px) {
  .tc-come-griglia { grid-template-columns: 1fr; }
  .tc-spot { width: min(300px, 78vw); justify-self: center; }
}
@media (max-width: 640px) { .tc-come-griglia .tc-steps.tc-steps-4 { grid-template-columns: 1fr; } }
.tc-nota-ia { margin: 22px 0 0; font-size: .95rem; color: var(--tc-ink-2); }

/* Il regalo completo: le due parti, e le tre note in fondo. */
.tc-regalo-parte { display: grid; gap: 10px; justify-items: start; }
.tc-regalo-parte h3 { font-size: 1.3rem; margin: 6px 0 0; }
.tc-regalo-parte p { margin: 0; }
.tc-regalo-note { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.tc-regalo-note li { display: flex; gap: 8px; align-items: flex-start; color: var(--tc-ink-2); font-size: .98rem; }
.tc-regalo-note svg { width: 19px; height: 19px; color: var(--tc-mint-ink); flex: none; margin-top: 3px; }
@media (max-width: 900px) {
  .tc-biglietto-testo > .tc-regalo-parte { order: 3; }
  .tc-biglietto-testo > .tc-regalo-note { order: 4; }
}

/* Gli indirizzi vecchi (#dentro, #unica, #prezzi) restano validi, e il titolo
   non finisce sotto l'intestazione fissa. */
.tc-ancora { display: block; position: relative; top: -90px; visibility: hidden; height: 0; }
.tc-landing .tc-band[id] { scroll-margin-top: 80px; }

/* Il codice regalo: un altro modo di regalare, sotto le offerte e piu' leggero. */
.tc-codice-regalo {
  max-width: 760px; margin: 26px auto 0; padding: 24px 28px;
  display: flex; gap: 20px 32px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--tc-surface-2); border-radius: 22px;
}
.tc-codice-regalo h3 { font-size: 1.25rem; margin: 0 0 6px; }
.tc-codice-regalo p { margin: 0; color: var(--tc-ink-2); max-width: 46ch; }
.tc-codice-regalo .tc-cta-row { margin-top: 0; align-items: center; }
/* Un collegamento, non un tasto: sottolineato, come tutti i collegamenti del
   sito. La regola «.tc-landing a { text-decoration: none }» e' piu' specifica di
   una classe sola, e vinceva: qui si dice dentro .tc-landing. */
.tc-landing .tc-link {
  color: var(--tc-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tc-landing .tc-link:hover { color: var(--tc-raspberry-ink); }
.tc-dialetto .tc-cta-row { position: relative; z-index: 1; margin-top: 26px; }

/* I titoli di sezione andavano a capo ogni due parole (38ch comprendeva il corpo
   grande del titolo): piu' larghi, e con le righe bilanciate. */
.tc-landing .tc-section-head { max-width: 46rem; }
.tc-landing .tc-section-head h2, .tc-landing .tc-biglietto-testo h2, .tc-landing .tc-dialetto h2 { text-wrap: balance; max-width: 24ch; }
.tc-hero-prezzo { margin-top: 20px; }

/* La casella della consegna immediata e della rinuncia al recesso, sopra i tasti per pagare. */
.pricing-recesso { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.pricing-recesso input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--f-brand, #5B2BE0); }
.pricing-recesso-aiuto { margin: 6px 0 0; font-size: .85rem; }

/* ---- Gli esempi: fila al computer, mazzo al telefono (esempi-mazzo.js) ---- */
.tc-esempi-comandi { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.tc-esempi-comandi[hidden] { display: none; }
.tc-esempi-freccia {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--tc-ink);
  background: var(--tc-surface); color: var(--tc-ink); display: grid; place-items: center; cursor: pointer;
}
.tc-esempi-freccia:disabled { opacity: .35; cursor: default; }
.tc-esempi-freccia svg { width: 20px; height: 20px; }
.tc-esempi-punti { display: flex; gap: 8px; align-items: center; }
.tc-esempi-punti[hidden] { display: none; }
.tc-esempi-punto { width: 10px; height: 10px; border-radius: 6px; border: 0; padding: 0; background: var(--tc-rule); cursor: pointer; transition: width .2s ease, background .2s ease; }
.tc-esempi-punto[aria-current="true"] { width: 24px; background: var(--tc-raspberry); }

/* La fila non deve dare la sua larghezza alla pagina. Il browser, per misurare la
   pagina, sommava comunque le schede anche se la fila scorre dentro la sua cornice:
   con 7 esempi (12/10/2026) la somma superava lo schermo, e tutta la home si
   allargava a 1532px — la barra in alto usciva a destra anche su un Mac da 1440.
   «contain: inline-size» la fa misurare dal contenitore, non dal contenuto; e il
   main dell'app non si allarga piu' per un figlio troppo largo. */
.tc-esempi { contain: inline-size; min-width: 0; }
.page > main { min-width: 0; }

/* Al computer: in fila; se non entrano, la fila scorre (senza barra, con le frecce). */
.tc-esempi.fila .tc-songs {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* spazio per l'ombra delle schede, che altrimenti la fila taglierebbe */
  padding: 4px 10px 14px 4px; margin: -4px -10px -14px -4px;
}
.tc-esempi.fila .tc-songs::-webkit-scrollbar { display: none; }
.tc-esempi.fila .tc-song { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }
@media (max-width: 1000px) { .tc-esempi.fila .tc-song { flex-basis: calc((100% - 22px) / 2); } }

/* Al telefono: il mazzo. In cima la scheda viva; dietro, un po' piu' in basso, piu'
   piccole e appena ruotate, le prossime due. */
.tc-esempi.mazzo .tc-songs { display: block; position: relative; margin-inline: 6px; }
/* L'altezza la fissa lo script solo per il mazzo: fuori dal mazzo non vale mai,
   anche se e' rimasta scritta (vedi esempi-mazzo.js, «ripristini»). */
.tc-esempi:not(.mazzo) .tc-songs { height: auto !important; }
.tc-esempi.mazzo .tc-song {
  position: absolute; inset: 0 0 auto 0;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--pos, 0) * 13px)) scale(calc(1 - var(--pos, 0) * .045)) rotate(calc(var(--pos, 0) * var(--verso, 1) * 1.8deg));
  transition: transform .32s cubic-bezier(.22, .72, .2, 1), opacity .32s ease;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.tc-esempi.mazzo .tc-song:not(.in-cima) { pointer-events: none; }
.tc-esempi.mazzo .tc-song.in-cima { cursor: grab; }
@media (prefers-reduced-motion: reduce) { .tc-esempi.mazzo .tc-song { transition: none; } }

/* ---- Il riquadro del lettore ---- */
.tc-regalo-finestra {
  width: min(560px, calc(100vw - 24px)); height: min(860px, calc(100dvh - 24px));
  max-width: none; max-height: none; padding: 0; overflow: hidden;
  border: 2px solid var(--tc-ink); border-radius: 22px;
  background: var(--tc-ground); color: var(--tc-ink);
}
.tc-regalo-finestra[open] { display: flex; flex-direction: column; }
.tc-regalo-finestra::backdrop { background: rgba(10, 8, 20, .68); }
.tc-regalo-finestra-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--tc-rule); font-weight: 600;
}
.tc-regalo-chiudi {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--tc-ink);
  background: var(--tc-surface); color: var(--tc-ink); display: grid; place-items: center; cursor: pointer;
}
.tc-regalo-chiudi svg { width: 18px; height: 18px; }
.tc-regalo-finestra iframe { flex: 1; width: 100%; border: 0; background: #0E0B1A; }
html.tc-finestra-aperta { overflow: hidden; }

/* Il riquadro dei dialetti al telefono: margini piu' stretti, e il tasto va a capo
   invece di uscire dal bordo («Ascolta un esempio in dialetto» e' lungo). */
@media (max-width: 700px) {
  .tc-dialetto { padding: 28px 22px; }
  .tc-dialetti-chips { gap: 10px; }
  .tc-dialetto .tc-btn { white-space: normal; max-width: 100%; text-align: left; padding-block: 10px; }
}

/* Il riquadro del lettore prende quasi tutto lo schermo in altezza, su ogni
   dispositivo: il lettore dentro si adatta (vedi il lettore, .incorniciato). */
.tc-regalo-finestra { height: calc(100dvh - 24px); max-height: 940px; }
@supports not (height: 100dvh) { .tc-regalo-finestra { height: calc(100vh - 24px); } }

/* Meno aria sopra l'apertura dove lo schermo è stretto: i 74px del computer, su
   telefono e tablet, erano una schermata sprecata prima della prima parola. */
@media (max-width: 1100px) { .tc-landing .tc-hero { padding-top: 34px; } }
@media (max-width: 700px) { .tc-landing .tc-hero { padding-top: 18px; padding-bottom: 26px; } }

/* ---- L'anteprima digitale del biglietto (Biglietto.razor) ----
   Il biglietto piegato: la copertina sul lembo destro, che si apre verso sinistra
   e scopre le due pagine interne. Le pagine sono le stesse del foglio A4, copiate
   dallo script e rimpicciolite: una pagina piegata e' 105 x 148,5 mm. */
.biglietto-anteprima {
  /* Come le altre schede della pagina: il testo non tocca il bordo. */
  width: min(720px, 100%);
  margin: 0 auto 18px;
  padding: 1.1rem 1.25rem 1.25rem;
}
.biglietto-anteprima h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.biglietto-anteprima > .crea-aiuto { margin: 0; }

/* Dentro il riquadro di un'altra pagina: resta la sola anteprima, e la pagina
   non porta la barra laterale ne' i margini dell'app. */
.page:has(.biglietto-solo) .sidebar,
.page:has(.biglietto-solo) .top-row,
.page:has(.biglietto-solo) .site-legal-footer { display: none !important; }
.page:has(.biglietto-solo) article.content { padding: 8px !important; max-width: none !important; }
/* Nel riquadro la scheda resta (fa da cornice al biglietto), ma il testo ha il suo
   margine: con 4px stava attaccato al bordo. La regola e' scritta col marchio
   davanti perche' altrimenti perde contro lo stile delle schede del marchio. */
body[data-marchio="ticanto"] .biglietto-anteprima.biglietto-solo,
.biglietto-anteprima.biglietto-solo { padding: 16px 18px 18px; }

/* Il foglio A4 resta in pagina ma fuori vista: e' da lui che l'anteprima copia le
   pagine, e con display:none non si potrebbe piu' misurarlo. Alto zero e ritagliato,
   altrimenti i suoi 297mm allungano la pagina e dentro il riquadro si scorre a vuoto
   (l'!important e' contro l'altezza che lo script scrive in riga). */
.biglietto-scena-nascosta {
  position: absolute; left: -20000px; top: 0; width: 210mm;
  height: 0 !important; overflow: hidden;
}
.biglietto-foglio-titolo { font-size: 1.3rem; margin: 26px 0 10px; }

/* La finestra da cui si guarda: il biglietto puo' essere piu' largo di lei
   (aperto e ingrandito), e allora si sposta da una pagina all'altra. */
.bg-vista {
  position: relative;
  width: 100%;
  margin: 18px auto 6px;
  overflow: hidden;
  touch-action: none;
}

.bg-libro {
  --pagina: min(320px, 74vw);
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pagina);
  height: calc(var(--pagina) * 148.5 / 105);
  perspective: 1800px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  /* Centrato nella finestra, spostato sulla pagina che si guarda, e ingrandito
     quanto dice la vista. Lo decide lo script: qui c'e' solo come si compone. */
  transform: translateX(calc(-50% + var(--tx, 0px))) scale(var(--z, 1));
  cursor: pointer;
  transition: width .5s cubic-bezier(.3, .7, .2, 1), transform .45s cubic-bezier(.3, .7, .2, 1);
}
.bg-libro:focus-visible { outline: 3px solid var(--tc-focus, #9d5cff); outline-offset: 6px; }
/* Aperto: due pagine affiancate, come un biglietto vero aperto in mano. */
.bg-libro[data-aperto="true"] { width: calc(var(--pagina) * 2); }
/* Il retro si guarda girando il biglietto chiuso. */
.bg-libro[data-retro="true"] { transform: translateX(calc(-50% + var(--tx, 0px))) scale(var(--z, 1)) rotateY(180deg); }

/* Le pagine, quando il biglietto non entra tutto nella finestra. */
.bg-pagine { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; }
.bg-pagine[hidden] { display: none; }

.bg-faccia {
  position: absolute; top: 0; right: 0;
  width: var(--pagina); height: 100%;
  transform-style: preserve-3d;
}
/* Il lembo sta davanti alla pagina ferma, e gira attorno alla sua piega. */
.bg-lembo { transform: translateZ(1px); transform-origin: left center; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.bg-libro[data-aperto="true"] .bg-lembo { transform: translateZ(1px) rotateY(-180deg); }

.bg-lato {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--f-carta, #fff);
  box-shadow: 0 10px 30px rgba(10, 8, 20, .35);
  backface-visibility: hidden;
}
.bg-lato.bg-dietro { transform: rotateY(180deg); }

.bg-scala { position: absolute; top: 0; left: 0; transform-origin: top left; transform: scale(var(--s, 1)); }
.bg-scala > .biglietto-quad {
  width: 105mm; height: 148.5mm;
  background: var(--f-carta, #fff); color: var(--f-carta-ink, #2A2340);
  border: 0;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bg-comandi { justify-content: center; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .bg-libro, .bg-lembo { transition: none; }
}

/* ---- La copertina del biglietto, ritagliabile ----
   L'immagine sta dentro la cornice; il punto (object-position) e l'ingrandimento
   (scale) li scegle chi fa il biglietto, e valgono anche in stampa. */
.biglietto-foto { overflow: hidden; }
.biglietto-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La finestrella con cui si ritaglia: stessa forma della copertina sul foglio. */
.biglietto-ritaglio {
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 81 / 64;   /* come la copertina: 81mm di larghezza utile, 64mm di altezza */
  margin: .4rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--f-surface-2, rgba(255, 255, 255, .06));
  cursor: grab;
  touch-action: none;
}
.biglietto-ritaglio:active { cursor: grabbing; }
.biglietto-ritaglio img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.biglietto-ritaglio-campo { grid-column: 1 / -1; }
.biglietto-ritaglio-zoom { display: grid; gap: .2rem; max-width: 280px; }
.biglietto-ritaglio-zoom input[type="range"] { width: 100%; accent-color: var(--f-brand, #5B2BE0); }

/* Le frecce fra le due pagine: tonde e contrastate come quelle degli esempi in
   home. Prima erano due tasti piccoli e quasi invisibili. */
.bg-freccia {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 2px solid var(--f-ink, #EFEAFF); background: var(--f-surface-2, rgba(255,255,255,.08));
  color: var(--f-ink, #EFEAFF); display: grid; place-items: center; cursor: pointer;
}
.bg-freccia:disabled { opacity: .3; cursor: default; }
.bg-freccia svg { width: 18px; height: 18px; }
.bg-pagine .small { min-width: 9ch; text-align: center; }

/* Il suggerimento del pizzico, col suo segno. */
.bg-pizzico {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 0 0; font-size: .85rem; color: var(--f-ink-2, #B9B2D6);
}
.bg-pizzico[hidden] { display: none; }
.bg-pizzico svg { width: 20px; height: 20px; flex: none; }

/* Nel riquadro tutto entra senza scorrere: la scheda e' una colonna, e il
   biglietto prende l'altezza che resta dopo postilla, comandi e suggerimento. */
/* Nel riquadro la pagina non scorre: sta tutta dentro. L'altezza arriva dalla
   catena (documento, pagina, colonna), cosi' i margini dell'app non spingono
   qualche pixel fuori — ed erano quei pixel a far comparire la barra. */
html:has(.biglietto-solo), html:has(.biglietto-solo) body { height: 100%; overflow: hidden; }
.page:has(.biglietto-solo) { height: 100%; min-height: 0; }
.page:has(.biglietto-solo) article.content { height: 100%; overflow: hidden; }
.biglietto-anteprima.biglietto-solo {
  display: flex; flex-direction: column;
  height: 100%; margin-bottom: 0;
}
.biglietto-anteprima.biglietto-solo .bg-vista { flex: 1; min-height: 140px; margin-block: 12px; }
.biglietto-anteprima.biglietto-solo .bg-comandi { margin-top: 10px; flex-wrap: wrap; }

/* La copertina del lettore, mentre si scegle in «I miei brani». */
.brani-copertina { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.brani-copertina-cornice {
  width: 180px; height: 180px; flex: none;
  border-radius: 18px; overflow: hidden;
  background: var(--f-surface-2, rgba(255, 255, 255, .06));
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .14));
  cursor: grab; touch-action: none;
}
.brani-copertina-cornice:active { cursor: grabbing; }
.brani-copertina-cornice img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.brani-copertina-comandi { display: grid; gap: .2rem; min-width: 220px; flex: 1; }
.brani-copertina-comandi input[type="range"] { width: 100%; max-width: 260px; accent-color: var(--f-brand, #5B2BE0); }
.brani-copertina-piccola {
  width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: inline-block;
  border: 1px solid var(--f-rule, rgba(255, 255, 255, .14));
}
.brani-copertina-piccola img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pagine d'occasione e indice delle idee regalo (OccasionePagina, IdeeRegalo):
   pagine da leggere, colonna stretta, i colori del marchio. */
.occasione { max-width: 46rem; padding: 40px 0 72px; }
.occasione-briciole { font-size: .9rem; color: var(--f-ink-2, currentColor); margin-bottom: 22px; }
.occasione-briciole a { color: inherit; }
.occasione-testata h1 { margin: 0 0 18px; }
.occasione-intro { font-size: 1.08rem; line-height: 1.65; }
.occasione-azione, .occasione-chiusura { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.occasione-azione .btn, .occasione-chiusura .btn { white-space: normal; text-align: center; }
.occasione .tc-eyebrow { color: var(--f-raspberry-ink, var(--f-brand, var(--accent))); }
.occasione-passi span { opacity: .85; }
.occasione-blocco { margin-top: 48px; }
.occasione-blocco h2, .occasione-chiusura h2 { font-size: 1.45rem; margin: 0 0 16px; }
.occasione-passi { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: 14px; }
.occasione-passi li { counter-increment: passo; display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 12px; align-items: baseline; }
.occasione-passi li::before { content: counter(passo); grid-row: span 2; display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--f-brand, var(--accent)); color: var(--f-on-brand, #fff); font-weight: 700; }
.occasione-passi span { color: var(--f-ink-2, currentColor); }
.occasione-spunti { padding-left: 1.2rem; display: grid; gap: 10px; line-height: 1.55; }
.occasione-esempi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.occasione-esempio { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--f-rule, rgba(127,127,127,.28)); border-radius: 16px; background: var(--f-surface, rgba(127,127,127,.06)); color: inherit; text-decoration: none; }
.occasione-esempio:hover { box-shadow: var(--f-shadow, 0 6px 22px rgba(0,0,0,.18)); }
.occasione-esempio em { font-size: .95rem; }
.occasione-ascolta { margin-top: auto; font-weight: 600; color: var(--f-raspberry-ink, var(--f-brand, var(--accent))); }
.occasione-chiusura { margin-top: 56px; padding: 28px; border-radius: 20px; background: var(--f-surface, rgba(127,127,127,.06)); border: 1px solid var(--f-rule, rgba(127,127,127,.28)); }
.occasione-correlate { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.occasione-correlate a { display: inline-block; padding: 8px 14px; border: 1px solid var(--f-rule, rgba(127,127,127,.28)); border-radius: 999px; text-decoration: none; color: inherit; }
.idee-elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.idee-elenco a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; padding: 14px 16px; border: 1px solid var(--f-rule, rgba(127,127,127,.28)); border-radius: 16px; background: var(--f-surface, rgba(127,127,127,.06)); color: inherit; text-decoration: none; height: 100%; }
.idee-elenco a:hover { box-shadow: var(--f-shadow, 0 6px 22px rgba(0,0,0,.18)); }
.idee-emoji { grid-row: span 2; font-size: 1.5rem; }
.idee-ricerca { margin: 8px 0 28px; max-width: 560px; }
.idee-ricerca [data-idee-vuoto] { margin-top: 10px; }
.idee-elenco li[hidden], .occasione-blocco[hidden] { display: none; }

/* L'esempio in primo piano di una pagina d'occasione (/admin-vetrina, «In evidenza su»). */
/* I due tasti sotto il titolo: affiancati anche sul telefono, a uguale larghezza;
   il testo va a capo dentro il tasto invece di spingerlo fuori. */
.occasione-subito { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; max-width: 560px; }
.occasione-subito .tc-btn { white-space: normal; text-align: center; line-height: 1.2; padding: 8px 14px; font-size: .98rem; }
.occasione-evidenza { margin-top: 36px; display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; padding: 20px; border-radius: 20px; border: 1px solid var(--f-rule, rgba(127,127,127,.28)); background: var(--f-surface, rgba(127,127,127,.06)); }
.occasione-evidenza > img { width: 160px; height: 160px; object-fit: cover; border-radius: 16px; }
.occasione-evidenza h2 { font-size: 1.4rem; margin: 0 0 6px; }
.occasione-evidenza .tc-eyebrow { margin-bottom: 6px; }
.occasione-evidenza-verso { font-style: italic; margin: 6px 0 14px; }
@media (max-width: 560px) {
  .occasione-evidenza { grid-template-columns: 1fr; }
  .occasione-evidenza > img { width: 100%; height: auto; aspect-ratio: 1; }
}
/* I tasti degli esempi nelle pagine d'occasione: gli stessi della home. */
.occasione-tasti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.occasione-tasti .tc-btn { min-height: 44px; padding: 0 16px; font-size: .95rem; }
.occasione-tasti .tc-btn svg { width: 18px; height: 18px; }
.occasione-esempio .occasione-tasti { margin-top: auto; padding-top: 6px; }

/* Le icone dei profili ufficiali (ProfiliSocial.razor), nei due piè di pagina. */
.profili-social { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 12px 0 0; }
.profili-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: inherit; border: 1px solid var(--f-rule, rgba(127,127,127,.35)); opacity: .85; transition: opacity .15s, transform .15s; }
.profili-social a:hover, .profili-social a:focus-visible { opacity: 1; transform: translateY(-1px); }
.profili-social svg { width: 18px; height: 18px; }

/* /admin-reel: il taglio del pezzo (admin-reel.js). */
.reel-taglio { border: 1px solid var(--f-rule, rgba(127,127,127,.3)); border-radius: 14px; padding: 12px 14px; }
.reel-taglio-righe { display: grid; gap: 8px; }
.reel-linea { position: relative; height: 34px; margin-bottom: 10px; border-radius: 8px; background: rgba(127,127,127,.12); overflow: hidden; }
.reel-verso { position: absolute; top: 9px; height: 16px; border-radius: 4px; background: rgba(127,127,127,.45); }
.reel-verso.dentro { background: var(--f-accent, #8b5cf6); }
.reel-pezzo { position: absolute; top: 0; bottom: 0; border: 2px solid var(--f-accent-2, #f0338a); border-radius: 8px; background: rgba(240,51,138,.08); }
.reel-testina { position: absolute; top: 0; bottom: 0; width: 2px; background: currentColor; }

/* /admin-reel: le scene da approvare o rifare. */
.reel-scene-elenco { display: grid; gap: 14px; }
.reel-scena { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; padding-top: 10px; border-top: 1px solid var(--f-rule, rgba(127,127,127,.2)); }
.reel-scena-img img { width: 120px; border-radius: 10px; display: block; }
.reel-scena-vuota { width: 120px; height: 213px; border: 1px dashed rgba(127,127,127,.5); border-radius: 10px; display: grid; place-items: center; }
.reel-scena-versi { margin: 4px 0 8px; padding-left: 10px; border-left: 3px solid var(--f-accent, #8b5cf6); font-style: italic; }
.reel-prompt { white-space: pre-wrap; font-size: .78rem; max-height: 220px; overflow: auto; border: 1px solid rgba(127,127,127,.3); border-radius: 8px; padding: 8px; }
.reel-scene-azioni { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--f-rule, rgba(127,127,127,.3)); }
@media (max-width: 560px) { .reel-scena { grid-template-columns: 1fr; } }

/* Pagine d'occasione: l'esempio subito dopo il primo paragrafo, poi il resto. */
.occasione-testata + .occasione-evidenza { margin-top: 20px; }

/* Il video su YouTube dell'esempio in evidenza: tutta la larghezza del riquadro,
   sotto i tasti. Prima del click e' solo un'immagine (vedi VideoYouTube). */
.occasione-video { grid-column: 1 / -1; }
.occasione-video-avvia { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.occasione-video-avvia img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; opacity: .92; transition: opacity .2s; }
.occasione-video-avvia:hover img { opacity: 1; }
.occasione-video-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 54px; border-radius: 14px; background: rgba(0, 0, 0, .72); color: #fff; display: grid; place-items: center; }
.occasione-video-play svg { width: 30px; height: 30px; }
.occasione-video-avvia:hover .occasione-video-play { background: #e62117; }
.occasione-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
.occasione-video .song-meta { margin: 8px 0 0; }
.occasione-seguito { margin-top: 24px; }

/* L'esempio dentro un articolo del blog (Components/Blog/EsempioInArticolo):
   lo stesso riquadro delle pagine d'occasione, con un po' d'aria intorno. */
.blog-corpo .blog-esempio { margin: 28px 0; }
.blog-esempio-titolo { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }

/* Il contatore dei caratteri del testo (Menestrello.Web.Client/ContatoreTesto):
   piccolo e quieto sotto il campo, si fa notare solo quando serve. I colori
   restano quelli della pagina: il testo eredita, la barra usa il colore del testo
   velato; giallo e lampone solo per l'avviso e per il troppo. */
.contatore-testo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 6px;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.contatore-barra {
  flex: 1 1 120px;
  max-width: 200px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  overflow: hidden;
}
.contatore-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, currentColor 55%, transparent);
  transition: width .15s ease, background-color .2s ease;
}
.contatore-numeri { opacity: .7; }
.contatore-nota { font-weight: 600; }
.contatore-testo.lungo .contatore-barra i { background: var(--tc-yellow, #f5b301); }
.contatore-testo.lungo .contatore-numeri { opacity: .9; }
.contatore-testo.oltre .contatore-barra i { background: var(--tc-raspberry, #e0245e); }
.contatore-testo.oltre .contatore-numeri,
.contatore-testo.oltre .contatore-nota { color: var(--tc-raspberry, #e0245e); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .contatore-barra i { transition: none; } }

/* Il codice sconto applicato nella scheda del brano: il prezzo pieno sbarrato, il
   prezzo che si paga in evidenza, e il modo di togliere il codice. */
.brani-sconto-applicato { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 6px 0 10px; }
.brani-prezzo-pieno { opacity: .6; margin: 0 6px; }
.brani-prezzo-scontato { font-size: 1.1em; }

/* ===== NOVITA' in prova (ottobre 2026), per ora solo per gli amministratori ===== */
/* /crea: quanto manca e le scelte fatte */
/* Pieno, non velato: fuori dalla landing --tc-surface non c'e', e il ripiego
   trasparente lasciava vedere sotto i tasti di tema e lingua. Sul computer si
   ferma sotto la riga di quei tasti (alta 3,5rem, anche lei appiccicata). */
.crea-progresso { position: sticky; top: 8px; z-index: 20; display: grid; gap: 8px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 14px; background: var(--f-surface, var(--bs-body-bg, #fff)); color: var(--f-ink, inherit);
  border: 1px solid var(--f-rule, rgba(127,127,127,.25)); box-shadow: 0 8px 22px var(--f-shadow, rgba(0,0,0,.14)); }
@media (min-width: 641px) { .crea-progresso { top: calc(3.5rem + 8px); } }
.crea-progresso-riga { display: flex; align-items: center; gap: 10px; }
.crea-progresso-testo { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.crea-progresso-numero { font-size: .8rem; font-weight: 600; color: var(--f-ink-2, inherit); }
.crea-progresso-titolo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crea-progresso-freccia { flex: none; width: 40px; height: 40px; border-radius: 999px; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; padding: 0 0 3px; cursor: pointer;
  border: 1px solid var(--f-rule, rgba(127,127,127,.3)); background: transparent; color: inherit; }
.crea-progresso-freccia.avanti { background: var(--f-brand, var(--bs-primary)); border-color: var(--f-brand, var(--bs-primary)); color: var(--f-on-brand, #fff); }
/* L'ultimo «avanti»: la spunta delle email e il tasto finale si accendono un momento. */
.evidenziato { animation: tc-evidenzia 1.3s ease-in-out 2; border-radius: 12px; }
@keyframes tc-evidenzia {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--f-brand, var(--bs-primary)) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .evidenziato { animation: none; outline: 3px solid var(--f-brand, var(--bs-primary)); outline-offset: 3px; } }
.crea-progresso-freccia:disabled { opacity: .35; cursor: default; }
.crea-progresso-barra { display: block; height: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.crea-progresso-barra i { display: block; height: 100%; border-radius: inherit; background: var(--f-brand, var(--bs-primary)); transition: width .3s ease; }
.crea-prezzo-chiaro { margin: 10px 0; font-weight: 600; }
.crea-attesa-frase { font-weight: 700; font-size: 1.05rem; min-height: 1.6em; margin: 10px 0 4px; }
/* /studio: sezioni e campi obbligatori */
.studio-sezione { margin: 18px 0 2px; font-size: 1.05rem; padding-bottom: 6px; border-bottom: 1px solid var(--f-rule, rgba(127,127,127,.3)); }
.studio-sezione:first-child { margin-top: 0; }
.studio-nota-sezione { margin: 0; font-size: .9rem; opacity: .8; }
.studio-obbligatorio { color: var(--f-raspberry, var(--bs-danger)); font-weight: 700; }
/* «I miei brani»: il prossimo passo in cima, il resto raccolto */
.brani-consegna-opzioni { display: flex; flex-wrap: wrap; gap: 8px; }
/* Come le altre schede della pagina: stessa colonna, e il titolo dentro il bordo. */
.biglietto-foglio-stampa { display: grid; gap: 10px; justify-items: start; width: min(720px, 100%); margin: 0 auto 18px; padding: 1.1rem 1.25rem 1.25rem; }
.biglietto-foglio-stampa h2 { margin: 0; font-size: 1.05rem; }
.biglietto-foglio-stampa .brani-consegna-avviso { margin: 0; }
.biglietto-appena-salvato { margin: .2rem 0 .6rem; padding: 8px 12px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--f-mint, var(--bs-success)); background: color-mix(in srgb, var(--f-mint, var(--bs-success)) 18%, transparent); }
[data-passi-da-solo].crea-progresso { width: min(720px, 100%); margin: 0 auto 1rem; }
/* I tasti del prossimo passo, larghi uguali: un tasto piu' corto sembrava meno importante. */
.brani-prossimo-azioni > .btn { flex: 1 1 13rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.brani-consegna-avviso { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; font-weight: 600;
  border: 1px solid var(--f-yellow, var(--bs-warning)); background: color-mix(in srgb, var(--f-yellow, var(--bs-warning)) 18%, transparent); }
.icona-scarica { vertical-align: -3px; margin-right: 2px; }
.brani-altro-snello { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.brani-prossimo { padding: 14px 16px; border-radius: 16px; border: 2px solid var(--f-brand, var(--bs-primary));
  background: color-mix(in srgb, var(--f-brand, var(--bs-primary)) 8%, transparent); }
.brani-prossimo-titolo { font-weight: 800; font-size: 1.2rem; margin: 0 0 4px; }
/* L'invito del riquadro (all'acquisto, alla consegna) si legge pieno: niente grigio
   dei paragrafi della pagina, niente trasparenza delle note. */
.songs-shell .brani-prossimo p,
body[data-marchio] .songs-shell .brani-prossimo p { color: var(--f-ink, var(--text, inherit)); }
.songs-shell .brani-prossimo .crea-aiuto { opacity: 1; font-size: .98rem; }
.brani-prossimo-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-accento { background: var(--f-raspberry, var(--bs-danger)); border-color: var(--f-raspberry, var(--bs-danger)); color: var(--f-on-brand, #fff); font-weight: 700; }
.btn-accento:hover { filter: brightness(1.06); color: var(--f-on-brand, #fff); }
.brani-corpo.chiuso { display: none; }
.brani-esito-pagamento { font-weight: 600; }