/* ============================================================================
   tema.css — i colori e il carattere del sito TnT, dal kit del marchio
   («TnT Digital Agency Logo.pdf», variante A2 «Scatto», ottobre 2026)
   ----------------------------------------------------------------------------
   Si carica dopo tnt.css ed extra.css.

   Il kit:   Carta      #F5F3EE  fondo chiaro, al posto del bianco      ~50%
             Inchiostro #0F1222  testi e fondi scuri                    ~30%
             Blu Tito   #3B5BFF  pulsanti, link, titoli in evidenza     ~13%
             Corallo    #FF6B4A  accento con misura: una parola, un dettaglio
                                 (sopra si scrive in Inchiostro, mai in bianco)
             Sora 800 / 600 / 400, titoli ExtraBold con spaziatura −3%.

   Leggibilità (contrasto WCAG, misurato): Blu su Carta 4,6 — va bene anche per
   il testo piccolo; Corallo su Carta 2,5 — solo per dettagli, mai per il testo;
   Corallo su Inchiostro 6,6 — sì; Blu su Inchiostro 3,6 — solo pulsanti e
   titoli grandi: per il testo piccolo sul fondo scuro si usa un blu più chiaro.

   Il trucco dei due temi: le classi del sito dicono «fondo ink, testo bone».
   Nel tema chiaro ink è la Carta e bone l'Inchiostro; dentro .tema-scuro i
   valori si scambiano. Una sezione diventa scura con una classe sola.
   ========================================================================== */

/* --- Sora, servito dal sito (licenza OFL in assets/media/OFL-sora.txt) ---------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --carta: #f5f3ee;
  --inchiostro: #0f1222;
  --blu: #3b5bff;
  --blu-scuro: #2a44d6;
  --blu-chiaro: #6f86ff;
  --corallo: #ff6b4a;

  --color-ink: var(--carta);     /* il fondo */
  --color-coal: #ece9e1;         /* le fasce alterne */
  --color-soot: #ffffff;         /* riquadri e cornici: bianchi come le schede del kit */
  --color-bone: var(--inchiostro); /* il testo */
  --color-sand: #5d6175;         /* testo secondario */
  --color-ember: var(--blu);     /* pulsanti, link, parole in evidenza */
  --color-amber: var(--corallo); /* i dettagli */
  --color-white: var(--inchiostro); /* le linee sottili del vecchio tema scuro */

  /* tutto in Sora: titoli, testo e le etichette maiuscole */
  --font-display: "Sora", system-ui, sans-serif;
  --font-mono: "Sora", system-ui, sans-serif;
  --font-instrument: "Sora", system-ui, sans-serif;

  --pulsante: var(--blu);
  --pulsante-testo: var(--carta);
  --pulsante-sopra: var(--blu-scuro);
  --ombra-pulsante: rgba(59, 91, 255, 0.35);
  color-scheme: light;
}

.tema-scuro {
  --color-ink: var(--inchiostro);
  --color-coal: #161a2e;
  --color-soot: #1d2238;
  --color-bone: var(--carta);
  --color-sand: #a2a6b8;
  --color-ember: var(--blu-chiaro); /* il blu pieno sul nero non basta per il testo piccolo */
  --color-amber: var(--corallo);
  --color-white: var(--carta);
  --pulsante-sopra: #4f6dff;
  --ombra-pulsante: rgba(59, 91, 255, 0.55);
  color: var(--color-bone);
  color-scheme: dark;
}

/* --- Tipografia del kit -------------------------------------------------------- */
body { font-family: var(--font-display); }
h1, h2, h3, h4 { letter-spacing: -0.03em; }
.font-extrabold { font-weight: 800; }
.eyebrow { font-weight: 600; letter-spacing: 0.2em; }
.chip { font-weight: 600; letter-spacing: 0.12em; }
.font-mono { font-weight: 600; }
/* niente corsivo con le grazie: le parole in evidenza sono Sora ExtraBold in blu */
.serif-accent { font-family: var(--font-display); font-style: normal; font-weight: 800; letter-spacing: -0.03em; }
.text-gradient-ember { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--color-ember); }
.tema-scuro .text-gradient-ember.corallo, .text-corallo { color: var(--corallo); }

/* --- Pulsanti: sempre Blu Tito con la scritta Carta, anche sul fondo scuro ---- */
.btn-primary { background: var(--pulsante); color: var(--pulsante-testo); box-shadow: none; }
.btn-primary:hover { background: var(--pulsante-sopra); color: var(--pulsante-testo); box-shadow: 0 12px 36px -10px var(--ombra-pulsante); }
.btn-ghost { border: 1.5px solid color-mix(in srgb, var(--color-bone) 28%, transparent); }
.btn-ghost:hover { border-color: var(--color-ember); color: var(--color-ember); }
.btn-light { background: var(--color-ink); color: var(--color-bone); }
.btn-light:hover { background: var(--pulsante); color: var(--pulsante-testo); box-shadow: 0 12px 36px -10px var(--ombra-pulsante); }

/* --- Colori che il CSS compilato aveva scritti a mano -------------------------- */
.to-\[\#ff7a1a\] { --tw-gradient-to: var(--blu-scuro); }
.shadow-\[0_30px_80px_-30px_rgba\(255\,77\,0\,0\.45\)\],
.shadow-\[0_30px_90px_-30px_rgba\(255\,77\,0\,0\.55\)\] { --tw-shadow: 0 30px 80px -30px var(--ombra-pulsante); }
.shadow-\[0_-18px_60px_-30px_rgba\(0\,0\,0\,0\.9\)\] { --tw-shadow: 0 -18px 50px -30px rgba(15, 18, 34, 0.5); }
.border-ember\/40 { border-color: color-mix(in srgb, var(--color-ember) 40%, transparent); }
input[type=range].tnt-range { background: linear-gradient(to right, var(--color-ember) var(--fill, 50%), color-mix(in srgb, var(--color-bone) 16%, transparent) var(--fill, 50%)); }
input[type=range].tnt-range::-webkit-slider-thumb { background: var(--color-ember); border-color: var(--color-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ember) 60%, transparent), 0 4px 14px var(--ombra-pulsante); }
input[type=range].tnt-range::-moz-range-thumb { background: var(--color-ember); border-color: var(--color-ink); box-shadow: 0 2px 10px var(--ombra-pulsante); }
::-webkit-scrollbar-thumb { background: #cfcbc1; }
::selection { background: var(--blu); color: var(--carta); }
.case-chrome { background: color-mix(in srgb, var(--color-coal) 70%, var(--color-soot)); border-bottom: 1px solid color-mix(in srgb, var(--color-bone) 10%, transparent); }
.grain:before { opacity: 0.03; }
.cursor-flair-inner { background: var(--blu); color: var(--carta); }

/* --- La testata ---------------------------------------------------------------------
   Sulle pagine che aprono con una fascia Inchiostro (home e richiesta demo) la
   testata, finché è trasparente in cima, prende i colori scuri. Scorrendo ha il
   suo fondo Carta; col menu aperto anche. */
html:not([data-scorso]):not([data-menu-aperto]) body.eroe-scuro [data-testata] {
  --color-ink: var(--inchiostro);
  --color-bone: var(--carta);
  --color-sand: #a2a6b8;
  --color-ember: var(--blu-chiaro);
  --color-white: var(--carta);
  --logo-n: var(--carta);
}
html[data-scorso] [data-testata-fondo] { border-color: color-mix(in srgb, var(--inchiostro) 8%, transparent); }

/* --- Il logo: marchio + «TnT» (T Blu, n Inchiostro, T Corallo) inclinato di 12° ----- */
.logo { display: inline-flex; align-items: center; gap: 0.65rem; color: inherit; }
.logo svg { height: 2.1rem; width: auto; flex: none; }
.logo-testo { display: flex; flex-direction: column; line-height: 1; transform: skewX(-12deg); transform-origin: left bottom; }
.logo-tnt { font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; }
.logo-tnt .t1 { color: var(--blu); }
.logo-tnt .n { color: var(--logo-n, var(--color-bone)); }
.logo-tnt .t2 { color: var(--corallo); }
.logo-sotto { margin-top: 0.22rem; font-weight: 800; font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-bone); }
.tema-scuro .logo-tnt .n, .tema-scuro .logo-sotto { color: var(--carta); }
@media (max-width: 380px) { .logo-sotto { display: none; } }

/* --- Le fasce che nel vecchio sito erano chiare («bg-bone text-ink») ----------------
   Col tema chiaro diventano Inchiostro da sole (bone ↔ ink si sono scambiati). Lì il
   Blu Tito pieno e il grigio non bastano per il testo piccolo: si usano le versioni
   per il fondo scuro. Una carta chiara dentro una fascia scura torna ai colori chiari. */
.bg-bone { --color-ember: var(--blu-chiaro); --color-sand: #a2a6b8; }
.bg-bone .bg-ink { --color-ember: var(--blu); --color-sand: #5d6175; }

.text-blu { color: var(--blu); }

/* --- Il marchio grande nell'apertura (home e richiesta demo) ------------------------
   Come nella copertina LinkedIn del kit: grande, a destra, tagliato dal bordo. */
/* in home sta sopra la fascia dei numeri (alta circa 5 rem): sotto il corallo non ci va scritto niente */
.eroe-marchio { position: absolute; right: -2vw; bottom: 6.5rem; height: 64%; aspect-ratio: 50.06 / 55; pointer-events: none; }
.eroe-marchio svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Sul telefono e sul tablet il testo occupa tutta la larghezza: il marchio grande
   finirebbe sotto le parole, e il marchio c'è già nel logo in alto. */
@media (max-width: 1023px) {
  .eroe-marchio { display: none; }
}
.eroe-marchio--richiesta { bottom: 0; height: 62%; right: -6vw; opacity: 0.16; }

/* --- La richiesta della demo (pagina /demo-gratuita/) --------------------------------
   Una scheda Carta sopra la fascia Inchiostro: dentro valgono i colori chiari. */
.richiesta {
  --color-ink: var(--carta); --color-bone: var(--inchiostro); --color-ember: var(--blu);
  --color-sand: #5d6175; --color-white: var(--inchiostro);
  color-scheme: light; color: var(--inchiostro); background: var(--carta);
  border-radius: 28px; padding: clamp(1.3rem, 3vw, 2.4rem);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
}
.richiesta fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; min-width: 0; }
.richiesta legend, .richiesta-campo label { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; padding: 0; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.richiesta legend span, .richiesta-campo label span { display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--inchiostro); color: var(--carta); font-size: 0.8rem; letter-spacing: 0; }
.richiesta-tipi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.richiesta-scelta input, .richiesta-sito input { position: absolute; opacity: 0; pointer-events: none; }
.richiesta-scelta span { display: flex; align-items: center; height: 100%; min-height: 3.1rem; padding: 0.65rem 0.9rem; border: 1.5px solid rgba(15, 18, 34, 0.14); border-radius: 14px; background: #fff; font-weight: 600; font-size: 0.92rem; line-height: 1.25; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.richiesta-scelta span:hover { border-color: var(--blu); }
.richiesta-scelta input:checked + span { border-color: var(--blu); background: var(--blu); color: var(--carta); }
.richiesta-scelta input:focus-visible + span, .richiesta-sito input:focus-visible + span { outline: 3px solid var(--blu); outline-offset: 2px; }
.richiesta-campo { margin: 0 0 1.6rem; }
.richiesta-campo input { width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; border: 1.5px solid rgba(15, 18, 34, 0.18); border-radius: 14px; background: #fff; color: var(--inchiostro); font: 400 16px/1.3 var(--font-display); }
.richiesta-campo input::placeholder { color: #85899a; }
.richiesta-campo input:focus { border-color: var(--blu); outline: 2px solid var(--blu); outline-offset: 1px; }
.richiesta-siti { display: grid; gap: 0.5rem; }
.richiesta-sito span { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem 0.8rem 2.8rem; border: 1.5px solid rgba(15, 18, 34, 0.14); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.richiesta-sito span::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.1rem; height: 1.1rem; border: 2px solid rgba(15, 18, 34, 0.35); border-radius: 999px; }
.richiesta-sito span:hover { border-color: var(--blu); }
.richiesta-sito input:checked + span { border-color: var(--blu); box-shadow: inset 0 0 0 1px var(--blu); }
.richiesta-sito input:checked + span::before { border-color: var(--blu); background: radial-gradient(circle, var(--blu) 0 42%, transparent 46%); }
.richiesta-sito strong { font-weight: 800; }
.richiesta-sito small { color: #5d6175; font-size: 0.85rem; line-height: 1.4; }
.richiesta-invia { width: 100%; justify-content: center; padding: 1.15rem 1.5rem; font-size: 1.02rem; white-space: normal; text-align: center; }
.richiesta-nota { margin-top: 0.9rem; color: #5d6175; font-size: 0.8rem; line-height: 1.5; text-align: center; }
.richiesta-nota a { text-decoration: underline; text-underline-offset: 3px; }
.richiesta-errore { margin-top: 0.55rem; color: #b8281a; font-size: 0.86rem; font-weight: 600; }
.richiesta-fatto { margin-top: 1rem; padding: 1rem 1.1rem; border: 1.5px solid rgba(59, 91, 255, 0.35); border-radius: 14px; background: rgba(59, 91, 255, 0.08); font-size: 0.92rem; line-height: 1.5; }
.richiesta-fatto:focus { outline: none; }
.richiesta-fatto a { color: var(--blu); font-weight: 700; text-decoration: underline; }
.richiesta-fatto p + p { margin-top: 0.5rem; }
/* La richiesta da ricopiare a mano, se gli appunti non funzionano */
.richiesta-testo { padding: 0.7rem 0.85rem; border-radius: 10px; background: color-mix(in srgb, var(--color-bone) 8%, transparent); white-space: pre-line; font-size: 0.88rem; user-select: all; }
.modulo-fatto { padding: 0.9rem 1rem; border: 1.5px solid rgba(59, 91, 255, 0.35); border-radius: 14px; background: rgba(59, 91, 255, 0.08); font-size: 0.92rem; line-height: 1.5; text-align: center; }
.modulo-fatto:focus { outline: none; }
.richiesta-garanzie { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.richiesta-garanzie li { display: flex; align-items: baseline; gap: 0.7rem; color: color-mix(in srgb, var(--color-bone) 85%, transparent); }
.richiesta-garanzie li::before { content: "✓"; color: var(--corallo); font-weight: 800; }
[data-demo-carta][hidden] { display: none !important; }

/* I pulsanti larghi quanto la scheda vanno a capo: «Voglio la demo del Sito Premium»
   su una riga sola allargava la pagina oltre lo schermo del telefono. */
.btn.w-full { white-space: normal; text-align: center; line-height: 1.25; }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
}
/* Le celle di una griglia non si allargano oltre la colonna (sul telefono la pagina
   Demo era più larga dello schermo per colpa delle immagini nelle schede). */
.grid > * { min-width: 0; }