/* ===== Exemplos (cards) ===== */
.examples-grid { margin-top: 1.25rem; }

.example-card{
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  padding: 1.25rem 1.25rem 1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

.example-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(600px circle at 10% 0%, rgba(0,105,217,.10), transparent 45%);
  pointer-events:none;
}

.example-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: rgba(0,105,217,.35);
}

.example-head{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  margin-bottom: .75rem;
  position: relative;
  z-index: 1;
}

.example-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: .45rem;
  flex: 0 0 auto;
}

.example-num{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color: #fff;
  background: var(--accent-color, #0069d9);
  box-shadow: 0 10px 18px rgba(0,105,217,.25);
}

.example-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--accent-color, #0069d9);
  background: rgba(0,105,217,0.10);
  border: 1px solid rgba(0,105,217,0.15);
}

.example-title h4{
  color: var(--primary-color);
  font-size: 1.1rem;
  line-height: 1.25;
}

.example-body{
  position: relative;
  z-index: 1;
}

.example-benefit{
  border-left: 4px solid var(--accent-color, #0069d9);
  padding: .75rem 1rem;
  background: #f8f9fa;
  border-radius: 10px;
  margin: .75rem 0 1rem;
  color: #334155;
}

.example-points{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.example-points li{
  display:flex;
  gap: .5rem;
  align-items:flex-start;
  color: #475569;
  font-size: .95rem;
}

.example-points i{
  color: #28a745;
  margin-top: .2rem;
}

/* Mobile: deixa o cabeçalho mais “compacto” */
@media (max-width: 576px){
  .example-card{ padding: 1rem; border-radius: 12px; }
  .example-num, .example-icon{ width: 38px; height: 38px; border-radius: 10px; }
}