/* ==========================================================================
   components/servicios.css — Servicios
   Sin marcador (bloque único en servicios.html).
   ========================================================================== */
.servicios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);      /* 8 servicios = 2 filas completas */
  border-top: var(--hairline) solid var(--c-borde);
}
.servicios__item { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: var(--hairline) solid var(--c-borde); }
.servicios__icono { width: var(--icono-lg); height: var(--icono-lg); margin-bottom: var(--space-4); color: var(--c-laguna); }
.servicios__titulo { font-size: var(--text-lg); }
.servicios__item p { margin: 0; font-size: var(--text-md); color: var(--c-texto-suave); }
/* 8 servicios: 4 → 2 → 1 columnas, siempre filas completas (sin huérfanos) */
@media (max-width: 1200px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .servicios { grid-template-columns: 1fr; }
  .servicios__item { padding-right: 0; }
}