/* ═══════════════════════════════════════════════════════════════════════
   CALMAMENTE — SISTEMA DI DESIGN
   Estratto dalla creative di riferimento approvata da Marco il 18/08/2026.
   È il contratto visivo di TUTTO il funnel: ogni pagina carica questo file
   e usa questi token. Nessuna pagina reintroduce colori o font propri.

   Carattere del brand: elegante, sobrio, zen. Molta aria, poche righe,
   niente ombre pesanti, niente gradienti sgargianti. Il colore caldo
   (corallo) si usa col contagocce: bottoni, spunte, un accento per volta.

   Da NON fare, perché rompe il registro:
     - ombre morbide diffuse sotto ogni riquadro (era il vecchio stile)
     - gradienti su bottoni e riquadri
     - più di un accento corallo nello stesso blocco
     - emoji (le icone sono Lucide, tratto sottile)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colori ──────────────────────────────────────────────────────────
     Navy: struttura, titoli, fondi pieni. Crema: superficie di riposo.
     Corallo: una sola azione per schermata. */
  --navy:        #1F3358;   /* blu profondo dei titoli e dei fondi */
  --navy-scuro:  #162643;   /* per i fondi pieni a tutta pagina */
  --navy-medio:  #35507D;   /* linee e stati intermedi */
  --azzurro:     #7D93B0;   /* le montagne chiare dell'illustrazione */
  --corallo:     #E4633C;   /* accento unico: bottoni, spunte, sole */
  --corallo-cupo:#CE5330;   /* stato premuto del bottone */
  --crema:       #F5EFE3;   /* fondo pagina */
  --crema-2:     #EDE5D5;   /* fondo delle sezioni alternate */
  --crema-3:     #E2D8C6;   /* linee sul crema */
  --bianco:      #FFFFFF;
  --inchiostro:  #16233C;   /* testo dei titoli */
  --testo:       #2C3A52;   /* testo corrente: scuro, mai grigio slavato */
  --tenue:       #5D6B82;   /* didascalie e note, mai per il testo lungo */
  --linea:       #DED4C2;

  /* ── Caratteri ───────────────────────────────────────────────────────
     Un solo carattere geometrico per tutto, come nella creative: cambia
     il peso, non la famiglia. Le etichette vanno in maiuscolo spaziato. */
  --font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ── Raggi e spazi ───────────────────────────────────────────────── */
  --r-bottone: 14px;
  --r-scheda: 18px;
  --r-grande: 26px;
  --spazio-sezione: 96px;
  --spazio-sezione-mobile: 56px;

  /* Rilievo: appena accennato. Il brand non ha ombre morbide. */
  --rilievo: 0 1px 2px rgba(22,38,67,.05), 0 8px 24px rgba(22,38,67,.06);
  --rilievo-forte: 0 2px 6px rgba(22,38,67,.08), 0 18px 48px rgba(22,38,67,.12);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.7;
  color: var(--testo);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Titoli ────────────────────────────────────────────────────────────
   Peso alto, interlinea stretta, lettere appena ravvicinate: è la firma
   della creative. Il titolo grande va sempre spezzato in poche parole
   per riga, non in righe lunghe. */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--inchiostro);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(38px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4vw, 44px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }

p { margin-bottom: 16px; }
strong, b { color: var(--inchiostro); font-weight: 600; }

/* ── Etichetta in maiuscolo (il "GUIDA + AUDIO" della creative) ──────── */
.etichetta {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--corallo);
  margin-bottom: 18px;
}
.etichetta-chiara { color: var(--corallo); }
.etichetta-su-navy { color: #F0A184; }

/* ── Marchio ─────────────────────────────────────────────────────────── */
.marchio { display: inline-flex; align-items: center; gap: 12px; }
.marchio .segno { width: 34px; height: 34px; flex-shrink: 0; }
.marchio .nome {
  font-size: 19px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--navy);
}
.marchio-chiaro .nome { color: var(--crema); }

/* ── Bottone ──────────────────────────────────────────────────────────
   Pieno corallo, angoli morbidi, nessun gradiente e nessuna ombra colorata.
   Una sola azione per schermata. */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--corallo); color: #fff;
  font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  padding: 20px 34px; border: none; border-radius: var(--r-bottone);
  cursor: pointer; transition: background .18s ease, transform .18s ease;
  min-height: 60px; text-align: center;
}
.bottone:hover { background: var(--corallo-cupo); transform: translateY(-1px); }
.bottone:active { transform: translateY(0); }
.bottone svg, .bottone i { width: 22px; height: 22px; flex-shrink: 0; }
.bottone-largo { width: 100%; }
.bottone-chiaro {
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy-medio);
}
.bottone-chiaro:hover { background: rgba(31,51,88,.06); }

/* ── Elenco con spunte cerchiate (dalla creative) ─────────────────────── */
.spunte { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; }
.spunte li { display: flex; align-items: flex-start; gap: 16px; font-size: 19px; color: var(--inchiostro); font-weight: 500; }
.spunte .cerchio {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--corallo); color: var(--corallo);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.spunte .cerchio svg, .spunte .cerchio i { width: 16px; height: 16px; }

/* ── Fascia dei tre pilastri in fondo alla creative ───────────────────── */
.pilastri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pilastro { display: flex; gap: 16px; align-items: flex-start; padding: 0 28px; }
.pilastro + .pilastro { border-left: 1px solid var(--linea); }
.pilastro .icona { color: var(--corallo); flex-shrink: 0; }
.pilastro .icona svg, .pilastro .icona i { width: 34px; height: 34px; stroke-width: 1.5; }
.pilastro b { display: block; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--inchiostro); margin-bottom: 4px; }
.pilastro span { font-size: 16px; color: var(--tenue); line-height: 1.5; }

/* ── Superfici ────────────────────────────────────────────────────────── */
.sezione { padding: var(--spazio-sezione) 0; }
.sezione-crema { background: var(--crema-2); }
.sezione-navy { background: var(--navy); color: var(--crema); }
.sezione-navy h1, .sezione-navy h2, .sezione-navy h3 { color: #fff; }
.sezione-navy p { color: rgba(245,239,227,.86); }

.contenitore { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.stretto { max-width: 760px; }

.scheda {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--r-scheda);
  padding: 32px;
}
.scheda-piena { background: var(--navy); border-color: var(--navy); color: var(--crema); }

/* ── Divisorio a due colori (il taglio crema/navy della creative) ─────── */
.taglio { position: relative; background: var(--crema); }
.taglio::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 38%; background: var(--navy); z-index: 0;
}
.taglio > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .taglio::after { display: none; } }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { font-size: 17px; line-height: 1.68; }
  .sezione { padding: var(--spazio-sezione-mobile) 0; }
  .contenitore { padding: 0 20px; }
  .bottone { width: 100%; font-size: 17px; padding: 18px 20px; }
  .spunte li { font-size: 17px; }
  .pilastri { grid-template-columns: 1fr; gap: 24px; }
  .pilastro { padding: 0; }
  .pilastro + .pilastro { border-left: none; border-top: 1px solid var(--linea); padding-top: 24px; }
  .scheda { padding: 24px 20px; }
}