/* ==========================================================================
   Benefícios ("Mais presença digital"): quatro cards com efeito glass
   ========================================================================== */

.benefits__layout {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.benefits__title {
  max-width: 15ch;
}

.benefits__list {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1rem;
}

/* Brilho violeta atrás dos cards: é ele que o blur do vidro deixa ver */
.benefits__list::before {
  content: "";
  position: absolute;
  inset: 5% 0;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgb(var(--c-violet) / 0.32), transparent),
    radial-gradient(40% 50% at 85% 85%, rgb(var(--c-violet) / 0.18), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* ---------- Card (vidro) ---------- */

.benefits__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02) 60%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.08),
    0 18px 40px -20px rgb(0 0 0 / 0.7);
}

/* Camadas do hover: brilho no canto (::before) e borda violeta (::after) */
.benefits__item::before,
.benefits__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur) ease;
  pointer-events: none;
}

.benefits__item::before {
  z-index: -1;
  background: radial-gradient(120% 100% at 0% 0%, rgb(var(--c-violet) / 0.12), transparent 65%);
}

.benefits__item::after {
  box-shadow: inset 0 0 0 1px rgb(var(--c-violet) / 0.45);
}

.benefits__icon {
  color: var(--c-chalk);
  stroke-width: 1.5;
  transition:
    color var(--dur) ease,
    transform var(--dur) var(--ease-out);
}

.benefits__text {
  max-width: 24ch;
  margin-top: 1.125rem;
  color: var(--c-paper);
  font-size: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .benefits__item:hover::before,
  .benefits__item:hover::after {
    opacity: 1;
  }

  .benefits__item:hover .benefits__icon {
    color: var(--c-white);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .benefits__item:hover :is(.benefits__icon, .benefits__text) {
    transform: translateY(-3px);
  }
}

/* ---------- Responsivo ---------- */

@media (width >= 40em) {
  .benefits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .benefits__item {
    padding: 2.25rem 2rem;
  }
}

@media (width >= 64em) {
  .benefits__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 4rem;
  }
}