/* ==========================================================================
   Fotografía real en lugar de los marcadores de posición.

   La landing llegó de una plataforma generadora, y como todas ellas entregó
   el diseño con huecos: el hero era un rectángulo gris plano, las seis
   tarjetas de solución mostraban un emoji sobre un degradado, y la sección de
   tecnología un 🏢 de 80px.

   POR QUÉ ESTE ARCHIVO EXISTE Y NO SE EDITÓ index.html:

   Esas reglas viven en el bloque <style> embebido que mandó el cliente. Este
   archivo se carga DESPUÉS de ese bloque, así que gana por orden de cascada
   sin necesidad de !important y sin tocar una sola línea de lo que él envió.
   El emoji sigue en el HTML; aquí sólo se oculta con font-size: 0.

   Consecuencia a tener presente: las tarjetas se seleccionan por posición
   (:nth-child). Si algún día se reordenan o se agrega una, hay que reasignar
   las imágenes aquí abajo.

   Las fotos son de Unsplash, licencia libre para uso comercial. Ver
   img/CREDITS.txt. Son escenas industriales genéricas: NO representan equipo
   Jereh, y por eso ninguna se acompaña de un pie que afirme lo contrario.
   Cuando lleguen fotos reales del fabricante, esto se sustituye reemplazando
   archivos en img/ — sin tocar código.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero

   La capa oscura sube de 0.3 a 0.55. Con el gris plano original bastaba 0.3;
   sobre una fotografía nocturna con luces, el titular blanco perdía contraste
   y dejaba de cumplir el mínimo de legibilidad.
   -------------------------------------------------------------------------- */

.hero {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url('img/hero.webp');
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------------
   Sección «Technology Driven»
   -------------------------------------------------------------------------- */

.split-image {
  background-image: url('img/technology.webp');
  background-size: cover;
  background-position: center;
  /* Oculta el emoji 🏢 sin quitarlo del marcado. */
  font-size: 0;
}

/* --------------------------------------------------------------------------
   Tarjetas de solución

   El orden corresponde al del marcado: Oil & Gas, Power Generation,
   Environmental, Industrial Services, R&D, Partnership & Support.
   -------------------------------------------------------------------------- */

.product-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Oculta los emojis ⛽ ⚡ 💧 🏭 🔬 🤝 conservándolos en el HTML. */
  font-size: 0;
}

.products-grid .product-card:nth-child(1) .product-image {
  background-image: url('img/sol-oil-gas.webp');
}

.products-grid .product-card:nth-child(2) .product-image {
  background-image: url('img/sol-power.webp');
}

.products-grid .product-card:nth-child(3) .product-image {
  background-image: url('img/sol-environmental.webp');
}

.products-grid .product-card:nth-child(4) .product-image {
  background-image: url('img/sol-services.webp');
}

.products-grid .product-card:nth-child(5) .product-image {
  background-image: url('img/sol-rnd.webp');
}

.products-grid .product-card:nth-child(6) .product-image {
  background-image: url('img/sol-partnership.webp');
}

/* Un velo muy leve unifica fotografías de fuentes distintas y evita que el
   título de la tarjeta compita con una imagen demasiado brillante. */
.product-card .product-image {
  box-shadow: inset 0 -40px 60px -30px rgba(0, 0, 0, 0.35);
}