/* 🧰 Servicios — estilos específicos
   ─────────────────────────────────────────────────────────
   🧭 Estructura visual de la página de servicios con bloques:
   - Hero de servicios (🎯)
   - Grillas de "Combustión" y "Gas Natural" (🔥 / ⛽)
   - Bloque "Seguridad y Cumplimiento" (🛡️)
   - "Servicios complementarios" (🧪)
   - CTA final (📞)
   ───────────────────────────────────────────────────────── */

section{padding:60px 0}
h1{font-size:34px; letter-spacing:-.4px}
h2{font-size:28px; letter-spacing:-.3px; margin:6px 0 10px}
.lead{color:var(--muted); margin:0 0 22px}

.hero-sv{background:linear-gradient(180deg,#fff,#f0f9ff)}
.badge{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:13px}

/* 🧩 Tarjeta de servicio */
.service-card{position:relative}
.service-card h3{margin:8px 0}
.service-card .kicker{font-size:12px; color:#075985; background:#eff6ff; border:1px solid #dbeafe; padding:4px 8px; border-radius:999px; display:inline-block; font-weight:700; letter-spacing:.2px}
.service-card .value{margin:10px 0 0; color:var(--ink-2)}
.service-card .deliver{margin:10px 0 0; padding-left:18px}

/* ✅ Listas con checks y mini-iconos */
.list-check{list-style:none; padding-left:0; margin:10px 0 0}
.list-check li{display:flex; gap:8px; align-items:flex-start; margin:8px 0}
.list-check .ico{min-width:22px; height:22px; border-radius:999px; background:#ecfeff; border:1px solid #a5f3fc; display:grid; place-items:center; color:#0369a1; font-size:14px}

/* 🧪 Otros servicios — variante sutil */
.card.alt{background:#f8fafc}

/* 📞 CTA final */
.cta-block{background:#0f172a; color:#fff; border-radius:18px; padding:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
.cta-block p{margin:0; opacity:.9}
.cta-block .actions{display:flex; gap:10px}

/* 📱 Responsive */
@media (max-width: 960px){
  .cta-block{flex-direction:column; align-items:flex-start}
}




/* Medios dentro de tarjetas de servicios */
.card-media{
  margin:0 0 .6rem 0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid color-mix(in oklab, var(--line, #e5e7eb) 70%, #fff 12%);
}
.card-media img{
  display:block;
  width:100%;
  height:170px;           /* ajustá a tu gusto */
  object-fit:cover;       /* recorte elegante */
  transform:scale(1.01);
  transition:transform .45s ease;
}
.service-card:hover .card-media img{ transform:scale(1.05) }