/* ============================================================================
   SERVICIOS — Grilla de cards de vidrio. Mobile-first.
   Cada card es un servicio: ícono, título, descripción y etiquetas.
   ========================================================================== */

.servicios__grid {
  display: grid;
  /* El navegador decide cuántas columnas entran: 1 en mobile, 2 en tablet,
     3 en desktop. Sin media queries.

     auto-FILL, no auto-fit: auto-fit colapsaría las columnas sobrantes y
     estiraría las cards de un grupo de dos hasta casi 600px. auto-fill
     conserva la columna vacía, así todos los grupos tienen cards del mismo
     ancho aunque tengan distinta cantidad de servicios. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
}

/* ---- Grupo de servicios -------------------------------------------------
   La sección se divide en tres pilares. Cada grupo tiene su cabecera y su
   propia grilla, así las cards de un pilar nunca se mezclan con las de otro. */

.servicios__group + .servicios__group { margin-top: var(--sp-8); }

.group__head { margin-bottom: var(--sp-5); }

/* Fila del título. La descripción va aparte, en su propio bloque: si se
   dejaba dentro del mismo flex, su max-width la hacía "caber" al lado de la
   línea y nunca bajaba de renglón. */
.group__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.group__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-cyan);
  letter-spacing: var(--ls-wide);
}

.group__title {
  font-size: var(--fs-xl);
  font-weight: 600;
}

/* Línea que ocupa el espacio sobrante hasta el borde derecho.
   flex:1 sobre un elemento vacío es la forma más simple de hacerlo. */
.group__rule {
  flex: 1 1 40px;
  height: 1px;
  min-width: 32px;
  background: linear-gradient(90deg, var(--border-cyan), transparent);
}

.group__desc {
  margin-top: var(--sp-3);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* ---- Card ---------------------------------------------------------------- */

.service {
  position: relative;
  overflow: hidden;               /* recorta el spotlight */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}

/* Spotlight: sigue al cursor. Las coordenadas las escribe
   js/modules/spotlight.js en --mx / --my. Sin JS, simplemente no aparece. */
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(28, 231, 242, 0.10),
    transparent 65%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
  pointer-events: none;
}
.service:hover::before { opacity: 1; }

/* ---- Ícono --------------------------------------------------------------- */

.service__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(28, 231, 242, 0.08);
  border: 1px solid var(--border-cyan);
  color: var(--brand-cyan);
  transition: background var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft);
}
.service:hover .service__icon {
  background: rgba(28, 231, 242, 0.14);
  box-shadow: var(--glow-cyan-sm);
}

/* ---- Textos -------------------------------------------------------------- */

.service__title { font-size: var(--fs-lg); font-weight: 600; }

.service__desc {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  /* margin-top:auto en las tags empuja todo hacia abajo y alinea
     las etiquetas de todas las cards, aunque el texto varíe de largo. */
  flex-grow: 1;
}

/* ---- Etiquetas ----------------------------------------------------------- */

.service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.service__tags li {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Cierre de sección --------------------------------------------------
   Una línea de texto + link para que la sección no termine en seco. */
.servicios__foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.servicios__foot a {
  color: var(--brand-cyan);
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.servicios__foot a:hover { text-decoration: underline; text-underline-offset: 4px; }