/* ==========================================================================
   SERVIÇOS — grade de cartões (gerados por js/componentes/servicos.js)
   Mobile: foto ao lado do texto. A partir de 640px: foto em cima.
   ========================================================================== */

.servicos { padding-block: 3rem; background: var(--cinza-100); }

.servicos__grade { display: grid; gap: 1rem; }

.card-servico {
  display: flex; overflow: hidden; border-radius: var(--raio-lg);
  background: #fff; border: 1px solid var(--cinza-200); box-shadow: var(--sombra-md);
  transition: box-shadow .3s;
}
.card-servico:hover { box-shadow: var(--sombra-xl); }
.card-servico__img { flex: 0 0 7rem; align-self: stretch; min-height: 7.5rem; width: 7rem; object-fit: cover; }
.card-servico__corpo {
  display: flex; flex: 1; flex-direction: column; justify-content: space-between;
  min-width: 0; padding: 1rem;
}
.card-servico__categoria {
  font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vermelho-600);
}
.card-servico__titulo { margin: .125rem 0 .25rem; font-size: 1rem; font-weight: 700; color: var(--azul-900); }
.card-servico__texto { font-size: 13px; line-height: 1.375; color: var(--cinza-600); }
.card-servico__link {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem;
  font-size: .875rem; font-weight: 600; color: var(--vermelho-600); transition: color .2s;
}
.card-servico__link:hover { color: var(--vermelho-700); }
.card-servico__link .icone { font-size: .75rem; }

/* Cartão largo no fim da grade (revisão completa) */
.card-largo {
  display: flex; flex-direction: column; overflow: hidden; margin-top: 1rem;
  border-radius: var(--raio-lg); background: #fff; border: 1px solid var(--cinza-200); box-shadow: var(--sombra-md);
}
.card-largo img { width: 100%; height: 11rem; object-fit: cover; }
.card-largo__corpo { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 1.25rem; }
.card-largo__corpo .card-servico__titulo { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.card-largo__corpo p:not(.card-servico__categoria) { margin-bottom: 1rem; font-size: .875rem; color: var(--cinza-600); }
.card-largo__corpo .btn { align-self: flex-start; }

@media (min-width: 640px) {
  .servicos { padding-block: 5rem; }
  .servicos__grade { gap: 2rem; }
  .card-servico { flex-direction: column; }
  .card-servico__img { flex: none; align-self: auto; width: 100%; height: 12rem; min-height: 0; }
  .card-servico__corpo { padding: 1.5rem; }
  .card-servico__titulo { margin: .25rem 0 .5rem; font-size: 1.25rem; }
  .card-servico__texto { font-size: .875rem; line-height: 1.625; }
  .card-servico__link { margin-top: 1.5rem; }
  .card-largo { margin-top: 2rem; }
}
@media (min-width: 768px) {
  .servicos__grade { grid-template-columns: repeat(2, 1fr); }
  .card-largo { flex-direction: row; }
  .card-largo img { width: 50%; height: 16rem; }
  .card-largo__corpo { padding: 2rem; }
  .card-largo__corpo .card-servico__titulo { font-size: 1.5rem; margin-bottom: .75rem; }
  .card-largo__corpo p:not(.card-servico__categoria) { font-size: 1rem; margin-bottom: 1.5rem; }
}
@media (min-width: 1024px) { .servicos__grade { grid-template-columns: repeat(3, 1fr); } }