/* ==========================================================================
   Sezione "Cosa ricevi prenotando oggi"
   Sfondo scenografico solo CSS (nessuna immagine): blu Novarreda ai bordi,
   azzurri luminosi e tinte chiare al centro, dietro una card bianca opaca.
   Il gradiente appartiene solo a questa sezione e termina con essa.
   Mobile: gradiente più delicato, card a tutta larghezza, CTA a tutta riga.
   ========================================================================== */

.offer {
  /* Varianti della palette approvata (brand #0E8EBD, primary #0B7196,
     primary-hover #095B78, accent-soft #EAF6FA) */
  --offer-deep: #095B78;
  --offer-mid: #0B7196;
  --offer-bright: rgba(14, 142, 189, 0.55);
  --offer-light: rgba(234, 246, 250, 0.85);

  padding-block: 48px;
  background-color: var(--offer-mid); /* riserva */
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 45%, var(--offer-light) 0%, rgba(234, 246, 250, 0) 72%),
    radial-gradient(ellipse 60% 40% at 90% 10%, var(--offer-bright) 0%, rgba(14, 142, 189, 0) 70%),
    radial-gradient(ellipse 60% 40% at 10% 95%, var(--offer-bright) 0%, rgba(14, 142, 189, 0) 70%),
    linear-gradient(160deg, var(--offer-mid) 0%, #3E9FC6 40%, #7EC4DE 58%, #2C93BC 78%, var(--offer-deep) 100%);
}

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

/* ---------- Card ---------- */
.offer__card {
  max-width: 1000px;
  margin-inline: auto;
  padding: 32px 20px;
  border-radius: 16px;
  background-color: var(--color-surface);
  box-shadow:
    0 28px 56px -28px rgba(9, 91, 120, 0.6),
    0 2px 6px rgba(9, 91, 120, 0.08);
}

.offer__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: var(--color-accent-soft);
  color: var(--color-primary-hover);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.offer__title {
  margin-bottom: 24px;
  color: var(--color-ink);
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- Vantaggi ---------- */
.offer__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Bonus: «IN OMAGGIO» con la classe condivisa .text-highlight, in blu CTA
   sulla card bianca (azzurro ghiaccio illeggibile qui) e nel peso del grassetto. */
.offer__item .text-highlight {
  --highlight-color: var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.offer__check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--color-primary);
}

.offer__item strong {
  font-weight: 700;
}

/* ---------- Box posti limitati ---------- */
.offer__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background-color: var(--color-surface-soft);
}

.offer__note-icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.offer__note-text {
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.offer__note-text strong {
  font-weight: 700;
}

/* ---------- CTA verso il form Hero (#consulenza) ---------- */
.offer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 28px;
  padding: 14px 16px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.offer__cta:hover,
.offer__cta:active {
  background-color: var(--color-primary-hover);
}

.offer__cta-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  .offer {
    padding-block: 72px;
    background-image:
      radial-gradient(ellipse 55% 50% at 50% 50%, var(--offer-light) 0%, rgba(234, 246, 250, 0) 70%),
      radial-gradient(ellipse 45% 45% at 92% 8%, var(--offer-bright) 0%, rgba(14, 142, 189, 0) 70%),
      radial-gradient(ellipse 45% 45% at 8% 92%, var(--offer-bright) 0%, rgba(14, 142, 189, 0) 70%),
      linear-gradient(135deg, var(--offer-deep) 0%, var(--offer-mid) 20%, #3E9FC6 42%, #9DD3E7 58%, #2C93BC 80%, var(--offer-deep) 100%);
  }

  .offer__card {
    padding: 44px 40px;
    border-radius: 20px;
  }

  .offer__note {
    align-items: center;
    padding: 20px 24px;
  }

  /* Separatore verticale tra icona e testo, come nella proposta */
  .offer__note-icon {
    width: 32px;
    height: 32px;
  }

  .offer__note-text {
    padding-left: 18px;
    border-left: 1px solid var(--color-border);
  }

  /* Pulsante a larghezza del contenuto, centrato nella card */
  .offer__cta {
    width: fit-content;
    margin-inline: auto;
    padding-inline: 32px;
    font-size: 1.0625rem;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 60em) {
  .offer {
    padding-block: 96px;
  }

  .offer__card {
    padding: 56px 64px;
    border-radius: 24px;
  }

  .offer__title {
    margin-bottom: 32px;
  }

  .offer__list {
    gap: 18px;
  }

  .offer__note {
    margin-top: 36px;
  }

  .offer__cta {
    margin-top: 36px;
  }
}