/* ============================================================================
   GUIDE AI — il guscio delle pagine editoriali (/guide-ai e /guide-ai/<slug>)
   ----------------------------------------------------------------------------
   Pagine fatte per essere LETTE, non per vendere: una colonna di testo comoda,
   tabelle che non escono dallo schermo, prompt copiabili. Per questo non
   caricano styles.min.css (111 KB pensati per le landing): qui ci sono solo i
   token del sito e quello che serve a un articolo.

   Regola di colore ereditata da /multilink e /ai-tools: il LIME e' dei nostri
   prodotti, il CIANO e' degli strumenti di altri. Un link verso Kling o HeyGen
   e' ciano; il riquadro del corso e' lime. Chi legge capisce senza leggere
   cosa e' nostro e cosa no.

   Generato insieme alle pagine da tools/build-guide-ai.mjs: se lo tocchi,
   bumpa TOKEN_CSS in tools/guide-ai/template.mjs e rigenera, altrimenti chi
   ha gia' visitato resta col foglio vecchio per un anno (vercel.json serve i
   .css immutable).
   ========================================================================== */

:root {
  --bg: #050713;
  --surface-1: #0B1020;
  --surface-2: #11172A;
  --text: #FFFFFF;
  --text-soft: #C9D2E8;
  --text-muted: #AAB1C8;
  --lime: #DFFF00;
  --cyan: #24E8FF;
  --blue: #3D7BFF;
  --purple: #8B5CFF;
  --hairline: rgba(255, 255, 255, 0.10);
  --border: rgba(96, 202, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.045);
  --col: 46rem;
  --radius: 18px;
  --pill: 50px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(110% 60% at 50% -12%, rgba(36, 232, 255, 0.09), transparent 55%),
    radial-gradient(80% 50% at 92% 4%, rgba(139, 92, 255, 0.12), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
}

::selection { background: var(--lime); color: #000; }

a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(36, 232, 255, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--cyan); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }

/* ─────────────────────────── BARRA IN ALTO ─────────────────────────── */
.g-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  background: rgba(5, 7, 19, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.g-nav-logo { display: flex; align-items: center; text-decoration: none; }
.g-nav-logo img { height: 30px; width: auto; display: block; }
.g-nav-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; }
.g-nav-links a { color: var(--text-soft); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.g-nav-links a:hover { color: var(--text); }
.g-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  border-radius: var(--pill);
  background: var(--lime);
  color: #050713 !important;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none !important;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .g-nav-links li.g-nav-secondario { display: none; }
}

/* ─────────────────────────── IMPAGINAZIONE ─────────────────────────── */
.g-main { width: min(var(--col), 100% - 2rem); margin: 0 auto; padding: 1.5rem 0 4rem; }
.g-main--largo { width: min(72rem, 100% - 2rem); }

.g-briciole { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.g-briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.g-briciole li:not(:last-child)::after { content: '›'; margin-left: 0.35rem; opacity: 0.6; }
.g-briciole a { color: var(--text-muted); text-decoration: none; }
.g-briciole a:hover { color: var(--text); }

.g-occhiello {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.6rem;
}

h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5.2vw, 2.85rem); font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.75rem); margin: 2.6rem 0 0.9rem; }
h3 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; color: var(--text); }

.g-lead { font-size: 1.12rem; color: var(--text-soft); margin-bottom: 1rem; }
.g-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.8rem; }

.g-corpo p, .g-corpo li { color: var(--text-soft); font-size: 1.02rem; }
.g-corpo p { margin-bottom: 1rem; }
.g-corpo ul, .g-corpo ol { margin: 0 0 1.1rem 1.3rem; }
.g-corpo li { margin-bottom: 0.45rem; }
.g-corpo strong { color: var(--text); }

/* ─────────────────────────── IN BREVE ─────────────────────────── */
.g-breve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.75rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(36, 232, 255, 0.06), rgba(139, 92, 255, 0.05));
  margin-bottom: 1.6rem;
}
.g-breve div { padding: 0.35rem 0.4rem; }
.g-breve dt { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; margin-bottom: 0.2rem; }
.g-breve dd { font-size: 0.97rem; color: var(--text); }

/* ─────────────────────────── INDICE ─────────────────────────── */
.g-indice {
  border-left: 3px solid var(--purple);
  padding: 0.4rem 0 0.4rem 1rem;
  margin-bottom: 1.5rem;
}
.g-indice p { font-weight: 700; margin-bottom: 0.4rem; font-size: 0.92rem; }
.g-indice ol { margin-left: 1.1rem; }
.g-indice li { font-size: 0.93rem; margin-bottom: 0.2rem; }
.g-indice a { color: var(--text-soft); text-decoration: none; }
.g-indice a:hover { color: var(--cyan); }

/* ─────────────────────────── TABELLE ───────────────────────────
   Il contenitore scorre in orizzontale, la pagina no: su un telefono una
   tabella prezzi a 4 colonne e' piu' larga dello schermo, e se a scorrere
   fosse il body si sposterebbe tutto il resto. */
.g-tabella { overflow-x: auto; margin: 0 0 1.3rem; border: 1px solid var(--hairline); border-radius: 14px; }
.g-tabella table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 0.93rem; }
.g-tabella th, .g-tabella td { padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); color: var(--text-soft); }
.g-tabella th { background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 0.85rem; }
.g-tabella tr:last-child td { border-bottom: 0; }

/* ─────────────────────────── PROMPT ─────────────────────────── */
.g-prompt {
  position: relative;
  margin: 0 0 1.2rem;
  padding: 1rem 1rem 1rem 1.1rem;
  border-radius: 14px;
  background: #0A0F1E;
  border: 1px solid rgba(36, 232, 255, 0.22);
}
.g-prompt pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #E6F7FF;
  padding-right: 4.5rem;
}
.g-copia {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  border: 1px solid rgba(36, 232, 255, 0.35);
  background: rgba(36, 232, 255, 0.08);
  color: var(--cyan);
  font: 600 0.75rem 'Inter', sans-serif;
  cursor: pointer;
}
.g-copia[data-copiato] { color: var(--lime); border-color: rgba(223, 255, 0, 0.45); }

/* ─────────────────────────── PRO E CONTRO ─────────────────────────── */
.g-procontro { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 0 0 1.4rem; }
@media (max-width: 640px) { .g-procontro { grid-template-columns: 1fr; } }
.g-procontro > div { padding: 1rem 1.1rem; border-radius: 14px; background: var(--glass); border: 1px solid var(--hairline); }
.g-procontro h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.g-procontro ul { margin: 0; list-style: none; }
.g-procontro li { padding-left: 1.4rem; position: relative; margin-bottom: 0.45rem; font-size: 0.95rem; color: var(--text-soft); }
.g-pro li::before { content: '+'; position: absolute; left: 0; color: var(--lime); font-weight: 800; }
.g-contro li::before { content: '–'; position: absolute; left: 0; color: #FF7A90; font-weight: 800; }

/* ─────────────────────────── RIQUADRI ─────────────────────────── */
.g-nota {
  margin: 0 0 1.3rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(36, 232, 255, 0.22);
  background: rgba(36, 232, 255, 0.05);
  font-size: 0.92rem;
  color: var(--text-soft);
}
.g-nota strong { color: var(--text); }

.g-strumento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(36, 232, 255, 0.28);
  background: rgba(36, 232, 255, 0.06);
}
.g-strumento p { margin: 0; font-size: 0.93rem; color: var(--text-soft); flex: 1 1 18rem; }
.g-strumento a.g-btn-ciano {
  display: inline-flex;
  padding: 0.6rem 1.15rem;
  border-radius: var(--pill);
  background: var(--cyan);
  color: #04111A;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.g-cta {
  margin: 2.6rem 0 1rem;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid rgba(223, 255, 0, 0.35);
  background: linear-gradient(150deg, rgba(223, 255, 0, 0.08), rgba(36, 232, 255, 0.04));
  box-shadow: 0 0 60px rgba(223, 255, 0, 0.06);
}
.g-cta h2 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.g-cta p { color: var(--text-soft); margin-bottom: 1rem; }
.g-btn-lime {
  display: inline-flex;
  padding: 0.8rem 1.4rem;
  border-radius: var(--pill);
  background: var(--lime);
  color: #050713;
  font-weight: 800;
  text-decoration: none;
}

/* ─────────────────────────── FAQ ───────────────────────────
   <details> nativo: si apre senza JavaScript, e la risposta resta nel DOM
   (quindi leggibile anche da chi non esegue script). */
.g-faq details { border-bottom: 1px solid var(--hairline); padding: 0.85rem 0; }
.g-faq summary { cursor: pointer; font-weight: 700; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: '+'; color: var(--cyan); font-weight: 800; }
.g-faq details[open] summary::after { content: '–'; }
.g-faq details > div { padding-top: 0.6rem; }
.g-faq details p { color: var(--text-soft); margin-bottom: 0.6rem; }

/* ─────────────────────────── FONTI ─────────────────────────── */
.g-fonti { margin-top: 2.2rem; font-size: 0.85rem; color: var(--text-muted); }
.g-fonti h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.g-fonti ul { margin-left: 1.1rem; }
.g-fonti a { color: var(--text-muted); }

/* ─────────────────────────── SCHEDE (hub e correlate) ─────────────────────────── */
.g-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; margin: 0 0 1.5rem; }
.g-scheda {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.g-scheda:hover { border-color: rgba(36, 232, 255, 0.45); transform: translateY(-2px); }
.g-scheda span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--cyan); font-weight: 700; }
.g-scheda strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; line-height: 1.3; }
.g-scheda em { font-style: normal; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .g-scheda { transition: none; } .g-scheda:hover { transform: none; } }

.g-gruppo h2 { margin-top: 2.2rem; }

/* ─────────────────────────── PIEDE ─────────────────────────── */
.g-piede { background: #0b0b0b; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 2.5rem 1.25rem; color: rgba(255, 255, 255, 0.62); }
.g-piede-in { max-width: 760px; margin: 0 auto; text-align: center; line-height: 1.6; }
.g-piede-link { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.4rem; margin-bottom: 1.1rem; font-size: 0.9rem; }
.g-piede-link a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.g-piede-link a:hover { color: #fff; }
.g-piede p { font-size: 0.82rem; margin: 0 0 0.8rem; }
.g-piede strong { color: rgba(255, 255, 255, 0.9); }