/* =========================================================
   PÁGINA: Servicios (hub) — servicios/index.html
   Solo reglas específicas de esta página. Todo lo demás
   (header, footer, botones, grilla de servicios, CTA final)
   se hereda de global.css y home.css. La variante clara del
   Header (.header--light) vive en global.css como componente
   transversal, reutilizable en el resto de páginas internas.
   ========================================================= */

/* Fondo propio de esta página (en vez del de la Home) */
.services__bg {
  background: url("../assets/servicios/serviciosMain.webp") center/cover no-repeat;
}

/* Eyebrow sobre el H1 de la sección de servicios */
.services__eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--color-gray);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* El título es un H1 en esta página (h2 en la Home); replica el
   mismo espaciado que .services h2 para mantener el "aire"
   arriba y abajo del título dentro de la sección. */
.services h1 {
  margin-bottom: 56px;
  line-height: 1.16;
}

/* Esta es la primera (y única) sección de la página: el Header
   (.header--light) queda absolute + transparente flotando encima,
   así que compensamos con padding-top propio para que no tape el
   eyebrow/H1 — equivalente a lo que hace .hero en la Home. */
.services {
  padding-top: clamp(190px, 16vw, 250px);
}

/* ============ CARACTERÍSTICAS / VALOR (4 ítems) ============
   Reutiliza el mismo lenguaje visual que .kvp-card (fondo
   --color-card-accent, tarjeta centrada): antes esto era una lista
   simple sin tarjeta, duplicada en las 9 fichas de servicio; ahora
   vive una sola vez acá, como tarjetas. */
.service-features { padding: 20px 0 70px; }
.service-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.service-feature {
  background: var(--color-card-accent);
  padding: 36px 40px;
  border-radius: 4px;
}
.service-feature__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.service-feature__head h3 {
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.service-feature__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}
.service-feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.service-feature p {
  margin-top: 16px;
  line-height: 1.65;
  color: var(--color-gray);
}

/* ============ BOTÓN DESCARGA PDF ============ */
.service-pdf { display: flex; justify-content: center; padding: 20px 0 70px; }

@media (max-width: 700px) {
  .service-features__grid { grid-template-columns: 1fr; gap: 24px; }
  .service-feature { padding: 30px 26px; }
}