/**
 * Página Servicios (pages/services.php).
 * Origen: #s-servicios de services.html (valores exactos). Se carga solo en
 * esa plantilla. No confundir con css/services.css (componente
 * section/services.php).
 * Renombrado respecto al mockup para no chocar con .process-grid de
 * Fabricación: .process-media → .service-media, .process-grid →
 * .service-families (rejilla con utilidades), .process-family* →
 * .service-family* y .process-bullet → .service-family-bullet.
 * Globales usados aquí (style.css): .product-media, .about-card,
 * .section-head--wide, .lede--wide y .section--flush-top.
 *
 * @package silomasters
 */

/* =====================================================
   SERVICIOS: imagen estirada a la altura de las familias
   (la rejilla lleva items-stretch). Gana a .product-media{aspect-ratio:4/3}.
   ===================================================== */
.product-media.service-media{height:100%; aspect-ratio:auto;}
.product-media.service-media img{width:100%; height:100%; object-fit:cover; display:block;}

/* =====================================================
   FAMILIAS DE SERVICIOS
   ===================================================== */
.service-family-head{display:flex; align-items:center; gap:10px;}
/* rombo naranja de 9px */
.service-family-bullet{width:9px; height:9px; background:var(--orange); border-radius:2px; transform:rotate(45deg); flex-shrink:0;}
.service-family-head h3{font-size:16px; text-transform:none;}
.service-family-desc{font-size:13.5px; color:var(--text-secondary); margin-top:6px; line-height:1.55;}

/* reset explícito de la lista: sin JS no hay preflight de Tailwind CDN */
.service-family-list{margin:12px 0 0; padding:0; list-style:none;}
.service-family-list li{font-size:13px; color:var(--text-secondary); line-height:1.5; padding:7px 0 7px 16px; position:relative; border-top:1px solid var(--border);}
.service-family-list li:first-child{border-top:none;}
/* punto naranja de 5px */
.service-family-list li::before{content:''; position:absolute; left:0; top:14px; width:5px; height:5px; border-radius:50%; background:var(--orange);}