/* ============================================================
   Workshop Company Brain — Train Your Business
   Un solo foglio di stile per tutte le pagine. Mobile-first.
   Brand letto da pages.trainyourbusiness.ai (08/10/2026):
   azzurro #188bf6 / #0066ff, nero #000 / #1a1a1a, bianco.
   Font: di sistema (niente richieste a server esterni).
   ============================================================ */

:root {
  --blu: #188bf6;        /* accento sul nero */
  --blu-forte: #0066ff;  /* pulsanti su bianco */
  --blu-testo: #0b63c9;  /* link su bianco (contrasto AA) */
  --blu-chiaro: #eaf4ff;
  --nero: #0a0a0a;
  --nero-2: #161616;
  --bianco: #ffffff;
  --testo: #111827;
  --testo-2: #4b5563;
  --grigio-1: #f5f7fa;
  --grigio-2: #e5e7eb;
  --grigio-3: #9ca3af;
  --ok: #15803d;
  --ok-sfondo: #ecfdf3;
  --errore: #b91c1c;
  --errore-sfondo: #fef2f2;
  --avviso: #b45309;
  --avviso-sfondo: #fffbeb;
  --whatsapp: #1b8f4e;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raggio: 14px;
  --raggio-s: 8px;
  --max: 1040px;
  --max-testo: 680px;
  --ombra: 0 10px 30px rgba(0, 0, 0, 0.08);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--bianco);
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blu-testo); }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
small { font-size: 0.875em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.4em; }

:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }

.skip {
  position: absolute; left: -999px; top: 8px; background: var(--bianco); color: var(--testo);
  padding: 8px 12px; border-radius: var(--raggio-s); z-index: 100;
}
.skip:focus { left: 8px; }

.contenitore { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.stretto { max-width: var(--max-testo); }

/* ---------- Header ---------- */
.testata {
  background: var(--nero); color: var(--bianco);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.testata .contenitore {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bianco); }
.logo img { height: 32px; width: auto; }
.testata .cta-testata { display: none; }
@media (min-width: 600px) { .testata .cta-testata { display: inline-flex; } }
.etichetta-testata { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--blu-forte); color: var(--bianco); }
.btn-primario:hover { background: #0052cc; }
.btn-chiaro { background: var(--blu); color: var(--nero); }
.btn-chiaro:hover { background: #3b9cf8; }
.btn-contorno { background: transparent; color: var(--bianco); border-color: rgba(255, 255, 255, 0.5); }
.btn-contorno:hover { border-color: var(--bianco); }
.btn-contorno-scuro { background: transparent; color: var(--testo); border-color: var(--grigio-2); }
.btn-whatsapp { background: var(--whatsapp); color: var(--bianco); }
.btn-whatsapp:hover { background: #157a41; }
.btn-grande { width: 100%; padding: 18px 24px; font-size: 1.15rem; text-align: center; }
@media (min-width: 600px) { .btn-grande { width: auto; min-width: 320px; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: wait; }
.btn-icona { width: 22px; height: 22px; flex: none; }

/* ---------- Sezioni ---------- */
.sezione { padding: 56px 0; }
@media (min-width: 800px) { .sezione { padding: 80px 0; } }
.sezione-grigia { background: var(--grigio-1); }
.sezione-nera { background: var(--nero); color: var(--bianco); }
.sezione-nera a { color: var(--blu); }
.sezione-nera h2 { color: var(--bianco); }
.sopratitolo {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blu-testo); margin-bottom: 12px;
}
.sezione-nera .sopratitolo, .eroe .sopratitolo { color: var(--blu); }
.intro-sezione { font-size: 1.15rem; color: var(--testo-2); max-width: var(--max-testo); }
.sezione-nera .intro-sezione { color: rgba(255, 255, 255, 0.8); }

/* ---------- Eroe ---------- */
.eroe {
  background: radial-gradient(1200px 500px at 85% -10%, rgba(24, 139, 246, 0.35), transparent 60%), var(--nero);
  color: var(--bianco); padding: 56px 0 48px;
}
@media (min-width: 800px) { .eroe { padding: 88px 0 72px; } }
.eroe h1 { max-width: 16ch; }
.eroe .intro { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); max-width: 60ch; }
.eroe .azioni { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
@media (min-width: 600px) { .eroe .azioni { flex-direction: row; align-items: center; } }
.eroe .nota { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; margin-top: 16px; }

.riquadro-date {
  display: grid; gap: 10px; margin: 24px 0 0;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raggio); padding: 16px 18px;
}
@media (min-width: 600px) { .riquadro-date { grid-template-columns: repeat(3, 1fr); } }
.riquadro-date div { display: flex; flex-direction: column; }
.riquadro-date .giorno { font-weight: 800; font-size: 1.05rem; }
.riquadro-date .ora { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; }
.riquadro-date .tema { color: var(--blu); font-weight: 700; font-size: 0.95rem; }

.fiducia { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; padding: 0; list-style: none; }
.fiducia li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.fiducia li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blu); flex: none; }

/* ---------- Storia ---------- */
.storia p { font-size: 1.12rem; }
.citazione {
  margin: 28px 0 0; padding: 20px 22px; border-left: 4px solid var(--blu);
  background: var(--blu-chiaro); border-radius: 0 var(--raggio) var(--raggio) 0; font-size: 1.15rem; font-weight: 600;
}
.citazione p { margin: 0; }

/* ---------- Schede ---------- */
.griglia { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 760px) { .griglia-3 { grid-template-columns: repeat(3, 1fr); } .griglia-2 { grid-template-columns: repeat(2, 1fr); } }
.scheda {
  background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio);
  padding: 22px 22px 20px; box-shadow: var(--ombra);
}
.sezione-nera .scheda { background: var(--nero-2); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.scheda .numero {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--blu-forte); color: var(--bianco); font-weight: 800; margin-bottom: 14px;
}
.sezione-nera .scheda .numero { background: var(--blu); color: var(--nero); }
.scheda .quando { font-weight: 800; font-size: 1.05rem; margin-bottom: 2px; }
.scheda .ora { color: var(--testo-2); font-size: 0.95rem; margin-bottom: 12px; }
.sezione-nera .scheda .ora { color: rgba(255, 255, 255, 0.7); }
.scheda h3 { margin-bottom: 8px; }
.scheda p:last-child { margin-bottom: 0; }
.scheda .regalo { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--grigio-2); font-size: 0.95rem; color: var(--testo-2); }
.sezione-nera .scheda .regalo { border-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.75); }

/* ---------- Chi sono ---------- */
.chi-sono { display: grid; gap: 28px; }
@media (min-width: 860px) { .chi-sono { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.prove { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.prove li { position: relative; padding-left: 34px; }
.prove li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blu-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b63c9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.segnaposto-prova {
  border: 2px dashed var(--avviso); background: var(--avviso-sfondo); color: var(--avviso);
  padding: 14px 16px; border-radius: var(--raggio-s); font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq { max-width: var(--max-testo); margin-top: 20px; }
.faq details { border-bottom: 1px solid var(--grigio-2); padding: 6px 0; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.08rem; padding: 14px 36px 14px 0; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--blu-testo);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 16px; color: var(--testo-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Moduli ---------- */
.modulo {
  background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio);
  padding: 24px 20px; box-shadow: var(--ombra); max-width: 620px;
}
@media (min-width: 600px) { .modulo { padding: 32px 32px 28px; } }
.modulo-centrato { margin: 28px auto 0; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; }
.campo .aiuto { display: block; font-size: 0.9rem; color: var(--testo-2); margin-top: 4px; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"],
.campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 13px 14px; border: 2px solid var(--grigio-2);
  border-radius: var(--raggio-s); background: var(--bianco); color: var(--testo);
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--blu-forte); outline: none; }
.campo.errore input, .campo.errore select, .campo.errore textarea { border-color: var(--errore); }
.campo .msg-campo { display: none; color: var(--errore); font-size: 0.9rem; margin-top: 6px; font-weight: 600; }
.campo.errore .msg-campo { display: block; }
.consenso { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 0.95rem; color: var(--testo-2); }
.consenso input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--blu-forte); }
.campo.errore .consenso { color: var(--errore); }
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }
.modulo .btn { margin-top: 6px; }
.msg-modulo { display: none; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--raggio-s); font-weight: 600; }
.msg-modulo.errore { display: block; background: var(--errore-sfondo); color: var(--errore); }
.msg-modulo.ok { display: block; background: var(--ok-sfondo); color: var(--ok); }
.privacy-mini { font-size: 0.85rem; color: var(--testo-2); margin-top: 14px; }

.esito { display: none; }
.esito.visibile { display: block; }
.esito .scheda { border-color: #bbf7d0; background: var(--ok-sfondo); }

/* ---------- Passi (come funziona) ---------- */
.passi { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; counter-reset: passo; }
.passi li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  background: var(--bianco); border: 1px solid var(--grigio-2); border-radius: var(--raggio); padding: 16px 18px;
}
.passi li::before {
  counter-increment: passo; content: counter(passo);
  width: 44px; height: 44px; border-radius: 12px; background: var(--blu-forte); color: var(--bianco);
  font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
}
.passi strong { display: block; margin-bottom: 2px; }
.passi p { margin: 0; color: var(--testo-2); }

/* ---------- Avvisi e riquadri ---------- */
.riquadro { border-radius: var(--raggio); padding: 18px 20px; border: 1px solid var(--grigio-2); background: var(--grigio-1); }
.riquadro p:last-child { margin-bottom: 0; }
.riquadro-blu { background: var(--blu-chiaro); border-color: #bfdcff; }
.riquadro-avviso { background: var(--avviso-sfondo); border-color: #fcd34d; color: #78350f; }
.avviso-bozza {
  background: #7f1d1d; color: var(--bianco); text-align: center; padding: 12px 16px; font-weight: 700;
  position: sticky; top: 0; z-index: 50; font-size: 0.95rem;
}
.avviso-bozza code { background: rgba(255, 255, 255, 0.15); padding: 1px 6px; border-radius: 4px; }

/* ---------- Pagina di grazie ---------- */
.passo-unico { background: var(--bianco); color: var(--testo); border-radius: var(--raggio); padding: 28px 22px; margin-top: 28px; box-shadow: var(--ombra); }
@media (min-width: 600px) { .passo-unico { padding: 36px; } }
.passo-unico h2 { color: var(--testo); font-size: 1.5rem; }
.passo-unico .btn-whatsapp { width: 100%; font-size: 1.15rem; padding: 18px 20px; }
.passo-unico .nota { color: var(--testo-2); font-size: 0.95rem; margin: 14px 0 0; }
.promemoria { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 700px) { .promemoria { grid-template-columns: repeat(3, 1fr); } }
.promemoria .scheda { padding: 18px; box-shadow: none; }
.promemoria .scheda h3 { font-size: 1.02rem; }
.promemoria .scheda p { font-size: 0.95rem; color: var(--testo-2); }

.vip { border: 2px solid var(--blu-forte); border-radius: var(--raggio); padding: 26px 22px; background: var(--bianco); box-shadow: var(--ombra); }
@media (min-width: 600px) { .vip { padding: 36px; } }
.vip .prezzo { font-size: 2.2rem; font-weight: 800; line-height: 1; margin: 8px 0 14px; }
.vip .prezzo small { font-size: 1rem; font-weight: 600; color: var(--testo-2); }
.vip ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.vip li { position: relative; padding-left: 28px; }
.vip li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: var(--blu-forte); font-weight: 800; }

/* ---------- Checkout ---------- */
.prezzi { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 760px) { .prezzi { grid-template-columns: 1fr 1fr; } }
.prezzo-scheda { border: 2px solid var(--grigio-2); border-radius: var(--raggio); padding: 26px 22px; background: var(--bianco); }
.prezzo-scheda.in-evidenza { border-color: var(--blu-forte); }
.prezzo-scheda .cifra { font-size: 2.1rem; font-weight: 800; margin: 6px 0 10px; line-height: 1.1; }
.prezzo-scheda .cifra small { font-size: 1rem; font-weight: 600; color: var(--testo-2); }
.prezzo-scheda .btn { width: 100%; margin-top: 10px; }
.segnaposto { background: #fde68a; color: #78350f; padding: 0 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

.lista-voci { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.lista-voci li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; border: 1px solid var(--grigio-2); border-radius: var(--raggio-s); background: var(--bianco); }
.lista-voci li span:first-child { font-weight: 800; color: var(--blu-testo); }
mark.conferma { background: #fde68a; padding: 0 5px; border-radius: 4px; font-size: 0.85em; font-weight: 700; }

/* ---------- Privacy ---------- */
.legale h2 { font-size: 1.35rem; margin-top: 36px; }
.legale h3 { font-size: 1.1rem; margin-top: 22px; }
.legale table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 12px 0 20px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--grigio-2); }
.legale th { background: var(--grigio-1); font-weight: 700; }
@media (max-width: 640px) {
  .legale table, .legale thead, .legale tbody, .legale tr, .legale th, .legale td { display: block; }
  .legale thead { display: none; }
  .legale tr { border: 1px solid var(--grigio-2); border-radius: var(--raggio-s); margin-bottom: 12px; padding: 6px 0; }
  .legale td { border: 0; padding: 6px 12px; }
  .legale td::before { content: attr(data-etichetta); display: block; font-size: 0.8rem; font-weight: 700; color: var(--testo-2); text-transform: uppercase; letter-spacing: 0.04em; }
}

/* ---------- Banner cookie ---------- */
.banner-consenso {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  background: var(--nero); color: var(--bianco); border-radius: var(--raggio); padding: 18px 18px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); max-width: 560px; margin: 0 auto;
}
.banner-consenso p { margin: 0 0 12px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }
.banner-consenso a { color: var(--blu); }
.banner-consenso .azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.banner-consenso .btn { padding: 11px 18px; font-size: 0.98rem; }

/* ---------- Piè di pagina ---------- */
.pie { background: var(--nero); color: rgba(255, 255, 255, 0.75); padding: 40px 0 32px; font-size: 0.9rem; }
.pie a { color: rgba(255, 255, 255, 0.9); }
.pie .intestazione { color: var(--bianco); font-weight: 700; margin-bottom: 6px; }
.pie p { margin-bottom: 10px; max-width: 80ch; }
.pie .link { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 18px; padding: 0; list-style: none; }

/* ---------- Varie ---------- */
.centrato { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.nascosto { display: none !important; }

/* Gruppo di caselle (serate seguite) e griglia dei campi corti nel modulo di candidatura */
.caselle { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.caselle label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.caselle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blu-forte); }
.campi-2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .campi-2 { grid-template-columns: 1fr 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cta-finale { text-align: center; }
.cta-finale .btn { margin-top: 10px; }

/* Etichetta "facoltativo" accanto a un campo non obbligatorio */
.facoltativo { font-weight: 400; font-size: .9em; opacity: .75; }

/* ============================================================
   Aggiunte del 09/10: logo ufficiale, eroe con video e Mappa,
   sezione Mappa, regali con il nome, "Perché ho cominciato", piè con marchio
   ============================================================ */

/* ---------- Logo ufficiale (riquadro arrotondato su fondo scuro) ---------- */
.logo .logo-marchio { width: 46px; height: 46px; object-fit: contain; flex: none; }
.logo-testo { display: flex; flex-direction: column; line-height: 1.1; }
.logo-testo strong { font-size: 1rem; letter-spacing: -0.01em; }
.logo-testo span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blu); margin-top: 3px; }
@media (max-width: 380px) { .logo-testo span { display: none; } }

/* ---------- Eroe a due colonne: testo + video e Mappa ---------- */
.eroe-griglia { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .eroe-griglia { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .eroe-griglia .riquadro-date { grid-template-columns: 1fr; gap: 8px; }
  .eroe-griglia .riquadro-date div { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
}
.video-scheda { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--raggio); padding: 12px; }
.video-etichetta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blu); padding: 2px 4px 10px; }
.video-etichetta span:last-child { color: rgba(255, 255, 255, 0.6); letter-spacing: 0; text-transform: none; font-weight: 600; }
.video-scheda video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; display: block; }
.video-didascalia { display: flex; align-items: center; gap: 12px; padding: 12px 4px 2px; }
.video-didascalia .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blu); color: var(--nero); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex: none; }
.video-didascalia div { display: flex; flex-direction: column; line-height: 1.25; }
.video-didascalia div span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.riquadro-mappa { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; background: rgba(24, 139, 246, 0.12); border: 1px solid rgba(24, 139, 246, 0.35); border-radius: var(--raggio); padding: 16px; }
.riquadro-mappa .icona-mappa { width: 44px; height: 44px; border-radius: 10px; background: var(--blu); color: var(--nero); font-weight: 800; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.riquadro-mappa strong { display: block; margin-bottom: 4px; }
.riquadro-mappa p { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }

/* ---------- La Mappa (sezione) ---------- */
.mappa-griglia { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .mappa-griglia { grid-template-columns: 0.8fr 1.2fr; } }
.mappa-copertina { position: relative; display: flex; justify-content: center; padding: 24px 0; }
.mappa-libro {
  width: min(100%, 300px); aspect-ratio: 3 / 4; border-radius: 12px 18px 18px 12px; padding: 24px 22px;
  background: linear-gradient(160deg, #0d3a6b, #188bf6); color: var(--bianco);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; justify-content: space-between;
  border-left: 6px solid rgba(255, 255, 255, 0.35);
}
.mappa-libro .mappa-marca { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.mappa-libro .mappa-sopra { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #bfe0ff; }
.mappa-libro strong { font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.08; font-weight: 800; }
.mappa-libro em { font-style: normal; color: #bfe0ff; }
.mappa-libro .mappa-sotto { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.mappa-timbro {
  position: absolute; right: 8%; top: 8px; transform: rotate(8deg); background: var(--bianco); color: var(--blu-testo);
  border: 2px solid var(--blu-forte); border-radius: 999px; padding: 8px 14px; font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center; line-height: 1.2; font-weight: 700;
}
.mappa-timbro strong { display: block; font-size: 1rem; }
.mappa-griglia .btn { margin-top: 6px; }

/* ---------- Regali con il nome, nelle schede delle serate ---------- */
.scheda .regalo-etichetta { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--blu); margin-bottom: 4px; }
.sezione-nera .scheda .regalo strong { color: var(--bianco); }

/* ---------- Perché ho cominciato ---------- */
.foto-marco { margin: 0 0 22px; }
.foto-marco img { width: 100%; height: auto; border-radius: var(--raggio); }
.foto-marco figcaption { display: flex; flex-direction: column; margin-top: 10px; line-height: 1.3; }
.foto-marco figcaption span { font-size: 0.92rem; color: var(--testo-2); }
.obiettivo { font-weight: 600; }
.link-freccia { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blu-testo); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link-freccia svg { width: 20px; height: 20px; }

/* ---------- Piè di pagina con il marchio ---------- */
.pie-marchio { display: flex; align-items: center; gap: 22px; margin-bottom: 8px; flex-wrap: wrap; }
.pie-marchio img { width: 150px; height: auto; flex: none; }
.pie-marchio p { margin: 0 0 2px; }