/* =============================================================================
   Pagina Cinetica Pro — nello stile di cineticapro.it

   Il corpo della pagina riprende il sistema visivo del sito del software
   (colori, Inter, raggi, ombre, fondi sfumati); intestazione e piè di pagina
   restano quelli di Lil Films. Tutto è racchiuso sotto .cp, così nessuna regola
   di qui tocca il resto del sito, e questo file si carica solo su questa pagina.

   Valori ricavati da cineticapro.it il 24/09/2026. Se il sito del software
   cambia palette, si aggiornano le variabili qui sotto e basta.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../font/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../font/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../font/inter-800.woff2") format("woff2"); }

.cp {
  --cp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cp-blue: #2563EB;
  --cp-blue-dark: #1D4ED8;
  --cp-violet: #6D28D9;
  --cp-violet-tint: #F5F3FF;
  --cp-ink: #0F172A;
  --cp-text: #334155;
  --cp-muted: #64748B;
  --cp-line: #E2E8F0;
  --cp-card-line: #E0E7FF;
  --cp-surface: #F8FAFC;
  --cp-green: #059669;
  --cp-radius: 16px;
  --cp-wrap: 1160px;
  --cp-gutter: 24px;

  font-family: var(--cp-font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cp-text);
  background: #fff;
}
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }

.cp-wrap { max-width: var(--cp-wrap); margin-inline: auto; padding-inline: var(--cp-gutter); }

/* L'intestazione di Lil Films è trasparente in cima alla pagina e diventa scura
   scorrendo. Su un'apertura chiara il menu bianco sparirebbe: qui la teniamo
   scura fin dall'inizio. */
body.stile-cinetica .site-header {
  background: rgba(22,22,26,.94);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

/* ---------------------------------------------------------------- apertura */
.cp-hero {
  position: relative; overflow: hidden; text-align: center;
  padding-block: calc(84px + clamp(3.5rem, 8vw, 6rem)) clamp(4rem, 9vw, 7rem);
  background:
    radial-gradient(1050px 800px at 6% 8%, rgba(109,40,217,.14), rgba(0,0,0,0) 64%),
    radial-gradient(1200px 950px at 96% 46%, rgba(37,99,235,.14), rgba(0,0,0,0) 64%),
    #fff;
}
/* Il logo è il titolo della pagina (h1): niente testo sfumato sopra, il marchio basta. */
.cp-hero__titolo { margin: 0; line-height: 0; }
.cp-hero__logo { display: block; width: min(32rem, 88%); height: auto; margin: 0 auto 1.9rem; }

.cp-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 13px; font-weight: 600; color: var(--cp-ink);
  background: rgba(255,255,255,.8); border: 1px solid var(--cp-line);
  border-radius: 999px; padding: .38rem .85rem .38rem .75rem;
}
.cp-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cp-green);
  box-shadow: 0 0 0 3px rgba(5,150,105,.14);
}

.cp h1, .cp h2, .cp h3 { font-family: var(--cp-font); color: var(--cp-ink); margin: 0; text-wrap: balance; }

.cp-hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--cp-text);
  max-width: 40rem; margin: 1.5rem auto 0;
}
.cp-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.1rem; }
.cp-nota { font-size: 13.5px; color: var(--cp-muted); margin-top: .9rem; }

/* ---------------------------------------------------------------- pulsanti */
.cp-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cp-font); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; border-radius: 10px; padding: 12px 20px;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, transform .2s;
}
.cp-btn--pieno { background: var(--cp-blue); color: #fff; }
.cp-btn--pieno:hover { background: var(--cp-blue-dark); }
.cp-btn--vuoto { background: #fff; color: var(--cp-ink); border-color: var(--cp-line); }
.cp-btn--vuoto:hover { border-color: #CBD5E1; }
.cp-btn--bianco { background: #fff; color: var(--cp-violet); }
.cp-btn--bianco:hover { transform: translateY(-1px); }
.cp-btn:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
.cp-btn .arrow { transition: transform .2s; }
.cp-btn:hover .arrow { transform: translateX(3px); }

/* ----------------------------------------------------------------- sezioni */
.cp-sezione { padding-block: clamp(4.5rem, 9vw, 6.5rem); }
.cp-sezione--fascia { background: var(--cp-surface); border-block: 1px solid var(--cp-line); }

.cp-occhiello {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cp-violet); margin: 0 0 .9rem;
}
.cp h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; max-width: 18ch;
}
.cp-testo { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 42rem; margin: 1.25rem 0 0; }
.cp-testo + .cp-testo { margin-top: 1rem; }

/* ------------------------------------------------------------------ riquadri */
.cp-griglia {
  display: grid; gap: 18px; margin-top: 2.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.cp-riquadro {
  background: #fff; border: 1px solid var(--cp-card-line); border-radius: var(--cp-radius);
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -24px rgba(15,23,42,.18);
}
.cp-riquadro h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.cp-riquadro p { font-size: 15.5px; line-height: 1.55; color: var(--cp-text); margin: .5rem 0 0; }


/* --------------------------------------------------------- chiusura a colori */
.cp-finale {
  background: linear-gradient(170deg, #6D28D9 0%, #2563EB 100%);
  color: rgba(255,255,255,.86);
  padding-block: clamp(4.5rem, 9vw, 6.5rem);
}
.cp-finale .cp-occhiello { color: rgba(255,255,255,.78); }
.cp-finale h2 { color: #fff; }
.cp-finale .cp-testo { color: rgba(255,255,255,.86); }
.cp-finale .cp-azioni { justify-content: flex-start; }
.cp-finale .cp-nota { color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce) {
  .cp-btn, .cp-btn .arrow { transition: none; }
}