/* ============================================================
   Il Caffettino — mario.css
   Pagina Mario Moroni (Figma 445:2 desktop · 755:870 mobile).
   Mobile-first: le misure base sono quelle del frame 390,
   il blocco finale porta a quelle del frame 1440.
   ============================================================ */

.pagina-mario { background: var(--color-bg-canvas); }

/* Eyebrow grigia delle sezioni chiare */
.mm-eyebrow { color: var(--color-text-secondary); }

.mm-hero__inner,
.mm-chi__inner,
.mm-temi__inner,
.mm-premi__inner,
.mm-media__inner,
.mm-libri__inner,
.mm-contatti__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ---------- Hero ---------- */

/* Ordine di sovrapposizione: due immagini escono dal loro riquadro (la foto
   di Mario sotto la fascia scura, la copertina del fumetto sopra e sotto il
   box). Senza questi z-index le sezioni successive, che nel DOM vengono
   dopo, ci dipingerebbero sopra. */
.mm-hero {
  position: relative;
  z-index: 3;
  padding: 104px var(--container-pad) 40px;
  background: var(--color-bg-inverse);
}
.mm-hero__texture {
  position: absolute;
  inset: 0;
  opacity: 0.43;
  overflow: hidden;
  pointer-events: none;
}
.mm-hero__texture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mm-hero__inner {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mm-hero__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-hero__eyebrow { color: var(--color-accent); }
.mm-hero__title {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.02;
  color: var(--color-text-on-inverse);
}
.mm-hero__ruolo {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--color-text-on-inverse);
}
.mm-hero__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-on-inverse);
}
.mm-hero__foto {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: 16px;
}

/* ---------- Chi è ---------- */

.mm-chi {
  position: relative;
  z-index: 2;
  padding: 56px var(--container-pad) 0;
}
.mm-chi__inner,
.mm-chi__head,
.mm-chi__bio {
  display: flex;
  flex-direction: column;
}
.mm-chi__inner { gap: 24px; }
.mm-chi__head { gap: 10px; }
.mm-chi__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.mm-chi__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mm-chi__bio { gap: 16px; }
.mm-chi__lead {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.mm-chi__bio p:not(.mm-chi__lead) {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Numeri: su mobile una card grigia, su desktop una colonna a filetti */
.mm-numeri {
  margin: 0;
  padding: 8px 24px;
  list-style: none;
  border-radius: 16px;
  background: var(--color-bg-subtle);
}
.mm-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}
.mm-numero + .mm-numero { border-top: 1px solid var(--color-border-default); }
.mm-numero__cifra {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.mm-numero__label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------- Temi su cui interviene (Simone 19/09) ---------- */

.mm-temi { padding: 40px var(--container-pad) 0; }
.mm-temi__box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
}
.mm-temi__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-temi__eyebrow { color: var(--color-accent); }
.mm-temi__titolo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.mm-temi__intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.mm-temi__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-tema {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px; /* pill pieno da desktop: qui i temi lunghi vanno a capo */
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Tema evidenziato: bordo giallo e bollino giallo con testo scuro (il giallo
   fa da blocco, mai da testo). */
.mm-tema--evidenza {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-color: var(--color-accent);
}
.mm-tema__etichetta {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Premi e riconoscimenti ---------- */

.mm-premi,
.mm-media { padding: 56px var(--container-pad) 0; }
.mm-premi__inner,
.mm-media__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mm-premi__head,
.mm-media__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-premi__titolo,
.mm-media__titolo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.mm-premi__lista {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mm-premi__lista > li { display: flex; }
.mm-premio {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  border: 1px solid var(--color-border-default);
  border-radius: 16px;
  color: var(--color-text-primary);
  transition: border-color 200ms ease, transform 200ms ease;
}
a.mm-premio:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.mm-premio__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
}
.mm-premio__nome {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.mm-premio__ente {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.mm-premio__meta {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------- Mario sui media ---------- */

.mm-media__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border-default);
}
.mm-intervento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 32px 18px 0;
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
}
.mm-intervento__testata {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.mm-intervento__titolo {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.mm-intervento__meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.mm-intervento__vai {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 1.125rem;
  transition: transform 160ms ease;
}
a.mm-intervento:hover .mm-intervento__titolo {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a.mm-intervento:hover .mm-intervento__vai { transform: translate(2px, calc(-50% - 2px)); }

/* ---------- Libri ---------- */

.mm-libri {
  position: relative;
  z-index: 1;
  padding: 56px var(--container-pad);
}
.mm-libri__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mm-libri__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.mm-libri__row {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.mm-libro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mm-libro__cover {
  display: block;
  width: 100%;
  height: 498px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.mm-libro__col,
.mm-libro__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-libro__titolo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mm-libro__testo {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.mm-libro__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
}
.mm-libro__cta:hover { text-decoration: underline; }
/* Freccia come accento, mai testo giallo: è un'icona */
.mm-freccia {
  color: var(--color-accent);
  transition: transform 160ms ease;
}
.mm-libro__cta:hover .mm-freccia,
.mm-fumetto__cta:hover .mm-freccia { transform: translateX(3px); }

/* ---------- Box fumetto ---------- */

.mm-fumetto {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  background: #151618;
}
.mm-fumetto__col { display: contents; }
.mm-fumetto__chip { order: 1; }
.mm-fumetto__titolo { order: 2; }
.mm-fumetto__sub { order: 3; }
.mm-fumetto__slot { order: 4; }
.mm-fumetto__testo { order: 5; }
.mm-fumetto__cta-row { order: 6; }

.mm-fumetto__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: var(--radius-full);
  background: #97db03;
  color: #17171c;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mm-fumetto__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #17181d;
}
.mm-fumetto__titolo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #f0f0eb;
}
.mm-fumetto__sub {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: #97db03;
}
.mm-fumetto__slot {
  width: 100%;
  height: 404px;
}
.mm-fumetto__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.mm-fumetto__testo {
  font-size: 1rem;
  line-height: 1.6;
  color: #f0f0eb;
}
.mm-fumetto__cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mm-fumetto__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #f0f0eb;
}
.mm-fumetto__cta .mm-freccia { color: #97db03; }
.mm-fumetto__cta:hover { text-decoration: underline; }
/* Copertina e titolo portano a Kickstarter (Simone 19/09). */
a.mm-fumetto__slot { display: block; }
.mm-fumetto__titolo a { color: inherit; }
.mm-fumetto__titolo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.mm-fumetto__cta-row { flex-wrap: wrap; row-gap: 10px; }
.mm-fumetto__cta--ks .mm-freccia { color: #97db03; }

/* Conto alla rovescia della campagna */
.mm-ks {
  order: 6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-ks[hidden] { display: none; }
.mm-ks__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #97db03;
}
.mm-ks__timer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Su mobile numero sopra e unità sotto: in riga le quattro caselle non ci
   stavano e i secondi andavano a capo. */
.mm-ks__unita {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  padding: 8px 6px 7px;
  border: 1px solid rgba(151, 219, 3, 0.35);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  color: rgba(240, 240, 235, 0.7);
}
.mm-ks__unita b {
  min-width: 2ch;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #f0f0eb;
}
.mm-fumetto__cta-row { order: 7; }

.mm-fumetto__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

/* ---------- Contatti ---------- */

.mm-contatti {
  position: relative;
  z-index: 0;
  padding: 0 var(--container-pad) 64px;
}
.mm-contatti__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mm-contatti__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-contatti__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.mm-contatti__mail {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.mm-contatti__azioni {
  display: flex;
  align-items: center;
  gap: 18px;
}
.mm-contatti__social {
  display: flex;
  gap: 9px;
}
.mm-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border-default);
  border-radius: 18px;
  transition: background-color 160ms ease;
}
.mm-social-btn:hover { background: var(--color-border-default); }
.mm-contatti__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-full);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 160ms ease;
}
.mm-contatti__cta:hover { background: #f5e000; }

/* ============================================================
   Desktop (frame 1440)
   ============================================================ */

@media (min-width: 1024px) {
  /* ---- Hero ---- */
  .mm-hero { padding: 234px var(--container-pad) 77px; }
  .mm-hero__texture img {
    inset: auto;
    top: -119.29%;
    left: -54.17%;
    width: 208.33%;
    height: 338.57%;
    max-width: none;
    object-fit: fill;
  }
  .mm-hero__inner { display: block; }
  .mm-hero__text {
    max-width: 785px;
    gap: 22px;
  }
  .mm-hero__title {
    font-size: 4.75rem;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .mm-hero__ruolo { font-size: 1.5rem; }
  .mm-hero__lead {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
  }
  /* Foto ancorata al bordo destro della colonna: sfora sotto la fascia
     scura ed entra nella sezione bianca, come nel disegno. */
  .mm-hero__foto {
    position: absolute;
    top: -54px;
    right: 0;
    width: 430px;
    height: 540px;
    border-radius: var(--radius-lg);
  }

  /* ---- Chi è ---- */
  .mm-chi { padding: 100px var(--container-pad) 72px; }
  .mm-chi__inner { gap: 44px; }
  .mm-chi__head { gap: 14px; }
  .mm-chi__title {
    font-size: 3.25rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-chi__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 72px;
  }
  .mm-chi__bio {
    flex: 1;
    min-width: 0;
    gap: 20px;
  }
  .mm-chi__lead { font-size: 1.25rem; }
  .mm-chi__bio p:not(.mm-chi__lead) {
    font-size: 1.125rem;
    line-height: 1.72;
  }
  .mm-numeri {
    flex: 0 0 360px;
    width: 360px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .mm-numero { gap: 6px; }
  .mm-numero__cifra {
    font-size: 3.25rem;
    letter-spacing: -0.02em;
  }

  /* ---- Temi, premi, media ---- */
  .mm-temi { padding: 0 var(--container-pad) 72px; }
  .mm-temi__box {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    padding: 48px 56px;
    border-radius: 28px;
  }
  .mm-temi__head { gap: 14px; }
  .mm-temi__titolo {
    font-size: 2.5rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-temi__intro { font-size: 1.125rem; }
  .mm-temi__lista { gap: 12px; }
  .mm-tema {
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 1rem;
  }
  .mm-tema--evidenza {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .mm-premi,
  .mm-media { padding: 0 var(--container-pad) 88px; }
  .mm-premi__inner,
  .mm-media__inner { gap: 40px; }
  .mm-premi__head,
  .mm-media__head { gap: 14px; }
  .mm-premi__titolo,
  .mm-media__titolo {
    font-size: 3.25rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-premi__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .mm-premio { padding: 32px; border-radius: var(--radius-lg); }
  .mm-premio__nome { font-size: 1.5rem; }
  .mm-intervento {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 32px;
    padding: 24px 48px 24px 0;
  }
  .mm-intervento__titolo { font-size: 1.375rem; }
  .mm-intervento__meta { white-space: nowrap; }
  .mm-intervento__vai { right: 8px; }

  /* ---- Fumetto: conto alla rovescia ---- */
  .mm-ks { gap: 10px; padding-top: 6px; }
  .mm-ks__timer { gap: 8px; }
  .mm-ks__unita {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.8125rem;
  }
  .mm-ks__unita b { font-size: 1.625rem; }

  /* ---- Libri ---- */
  .mm-libri { padding: 0 var(--container-pad); }
  .mm-libri__inner { gap: 44px; }
  .mm-libri__title {
    font-size: 3.25rem;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .mm-libri__row {
    flex-direction: row;
    gap: 24px;
  }
  .mm-libro {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
  }
  .mm-libro__cover {
    flex: 0 0 150px;
    width: 150px;
    height: 225px;
  }
  .mm-libro__col {
    flex: 1;
    min-width: 0;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
  }
  .mm-libro__titolo {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .mm-libro__cta {
    font-size: 0.9375rem;
    gap: 4px;
  }
  /* Su desktop la freccia fa parte del testo, non è un accento a sé */
  .mm-libro__cta .mm-freccia { color: inherit; }

  /* ---- Box fumetto ---- */
  .mm-fumetto {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 24px 32px 24px 24px;
    border: 1px solid rgba(151, 219, 3, 0.35);
  }
  .mm-fumetto__col {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
  }
  /* La copertina esce dal riquadro sopra e sotto: il posto che occupa
     resta quello del riquadro (296×280), l'immagine sfora. Ingrandita
     rispetto al riquadro perché lo sbordo si veda davvero (Simone 21/09:
     con 296×383 sporgeva di un pixel appena). */
  .mm-fumetto__slot {
    order: 0;
    position: relative;
    flex: 0 0 296px;
    width: 296px;
    height: 280px;
  }
  .mm-fumetto__cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 328px;
    /* senza questo il `max-width: 100%` di base.css riporterebbe la
       larghezza a quella del riquadro e l'immagine resterebbe piccola */
    max-width: none;
    height: 427px;
    object-fit: contain;
    border-radius: 13px;
  }
  .mm-fumetto__chip {
    padding: 6px 14px 6px 12px;
    font-size: 0.6875rem;
  }
  .mm-fumetto__titolo {
    font-size: 2.5rem;
    letter-spacing: -0.015em;
  }
  .mm-fumetto__sub {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: 0;
  }
  .mm-fumetto__testo { color: rgba(240, 240, 235, 0.6); }
  .mm-fumetto__cta-row { padding-top: 6px; }
  .mm-fumetto__cta {
    font-size: 0.9375rem;
    color: var(--color-text-on-inverse);
    gap: 4px;
  }

  /* ---- Contatti ---- */
  .mm-contatti { padding: 16px var(--container-pad) 72px; }
  .mm-contatti__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 44px;
    border-radius: 24px;
    background: var(--color-bg-subtle);
  }
  .mm-contatti__text { gap: 8px; }
  .mm-contatti__title {
    font-size: 1.875rem;
    font-weight: 700;
  }
  .mm-contatti__azioni { gap: 24px; }
  .mm-contatti__cta {
    gap: 12px;
    padding: 12px 10px 12px 22px;
  }
  .mm-contatti__cta-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--color-bg-inverse);
    color: var(--color-bg-accent);
  }
}