/* === GRID BASE === */
.servicos-destaque {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5em;
  max-width: 1000px;
  margin: 2em auto;
  padding: 0 1em;
  grid-auto-flow: dense;
}

/* === Desktop: força AD (topo col1) e Wi-Fi (abaixo col1) === */
@media (min-width: 992px) {
  .servicos-destaque {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    grid-template-areas:
      "ad   .   ."
      "wifi .   .";
  }
  .servicos-destaque .card.ad   { grid-area: ad; }
  .servicos-destaque .card.wifi { grid-area: wifi; }
}

/* === Mobile: tudo empilhado === */
@media (max-width: 768px) {
  .servicos-destaque {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .servicos-destaque .card.ad,
  .servicos-destaque .card.wifi {
    grid-area: auto;
  }
}

/* === Seus estilos existentes (mantidos) === */
.servicos-destaque .card {
  background: #f9f9f9;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.servicos-destaque .card:hover { transform: translateY(-5px); }
.servicos-destaque h3 { color: #002b5c; margin-bottom: 0.5em; }
.servicos-destaque p { color: #555; }

.btn-vermelho {
  display: inline-block;
  padding: 10px 20px;
  background-color: #d9534f; color: #fff;
  text-decoration: none; border-radius: 4px; font-weight: bold;
  transition: background-color 0.3s ease;
}
.btn-vermelho:hover { background-color: #c9302c; }