/* ==========================================================================
   Pubblipro - pagina Consulenza Marketing
   Si usa con base.css, home.css, agenzia.css e servizio.css: qui solo i ritocchi della pagina.
   ========================================================================== */

/* nota sotto l'elenco "Cosa ricevi" */
.cs-note { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* ---------- Cosa analizziamo: cinque medaglioni ---------- */
.cs-medals { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 56px clamp(20px, 2.4vw, 40px); }
.cs-medal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cs-medal h3 { margin: 0; font-weight: 600; font-size: clamp(24px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.cs-medal p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); }

/* cerchio colorato con l'icona, più un cerchio vuoto spostato dietro (effetto stampa fuori registro) */
.cs-medal__ico {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 14px 22px 0;
  color: var(--paper-text);
}
.cs-medal__ico::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: var(--tone); transition: transform 300ms var(--ease); }
.cs-medal__ico::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 2px solid var(--ink); border-radius: 50%; transform: translate(12px, 12px); transition: transform 300ms var(--ease); }
.cs-medal__ico svg { position: relative; z-index: 3; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-medal__ico--blue  { --tone: var(--blue); }
.cs-medal__ico--red   { --tone: var(--red); }
.cs-medal__ico--ink   { --tone: var(--ink); }
.cs-medal__ico--amber { --tone: var(--amber); color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .cs-medal:hover .cs-medal__ico::before { transform: translate(-4px, -4px); }
  .cs-medal:hover .cs-medal__ico::after { transform: translate(16px, 16px); }
}
@media (max-width: 1100px) {
  .cs-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cs-medals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; }
}
@media (max-width: 480px) {
  .cs-medals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-medal__ico::before, .cs-medal__ico::after { transition: none; }
}

/* ---------- Sezione del modulo: senza divisore a pallini, sfondo carta più scura per staccarla dalle domande ---------- */
.cs-form { padding-top: 120px; background: var(--paper-2); }

/* nota sotto il campo email del modulo (sfondo scuro della scheda) */
.cs-hint { font-size: 16px; line-height: 1.45; color: var(--muted-on-ink); }