/**
 * Página Ingeniería (pages/engineering.php).
 * Origen: engineering.html (valores exactos). Se carga solo en esa plantilla.
 * Globales usados aquí (style.css): .product-media, .about-card, .feature-cards,
 * .section-head--wide y .section-head--flush.
 *
 * @package silomasters
 */

/* entradilla sin ancho máximo (estilo en línea en el mockup); gana a .lede por orden de carga */
.lede.lede--wide{max-width:none;}

/* =====================================================
   MÁS LIGERO: TABLA COMPARATIVA
   ===================================================== */
.compare-wrap{overflow-x:auto; margin-top:40px; border:1px solid var(--border); border-radius:10px; background:var(--white);}
.compare-wrap:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
.compare-table{width:100%; min-width:680px; border-collapse:collapse;}
.compare-table th{font-family:var(--label); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); text-align:left; padding:16px 20px; background:var(--bg-tint); border-bottom:1px solid var(--border);}
.compare-table td{padding:16px 20px; font-size:14.5px; color:var(--text); border-bottom:1px solid var(--border);}
/* cabecera de fila (<th scope="row">): mismo aspecto que td:first-child del mockup */
.compare-table tbody th{font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--text); background:none;}
.compare-table tr:last-child td,
.compare-table tbody tr:last-child th{border-bottom:none;}
.compare-table td:first-child{font-weight:700;}
.compare-table .is-lighter{color:var(--orange); font-weight:800;}
.compare-note{font-size:12px; font-style:italic; color:var(--text-secondary); margin-top:12px;}

/* =====================================================
   NORMATIVA
   ===================================================== */
.feature-cards.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){ .feature-cards.cols-2{grid-template-columns:1fr;} }
.big-card{padding:34px 30px;}
.big-card h3{font-size:22px; text-transform:none; margin-top:4px;}
.big-card > p{font-size:14.5px; line-height:1.65; margin-top:12px;}
.card-num{font-family:var(--display); font-weight:900; font-size:14px; letter-spacing:.08em; color:var(--orange); text-transform:uppercase; margin-bottom:6px;}
/* reset explícito de la lista: sin JS no hay preflight de Tailwind CDN */
.card-list{margin:18px 0 0; padding:0; list-style:none;}
.card-list li{display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-top:1px solid var(--border); font-size:14px; color:var(--text-secondary); line-height:1.5;}
.card-list li .material-symbols-outlined{color:var(--orange); font-size:20px; flex-shrink:0; margin-top:1px;}
.card-list li strong{color:var(--text);}

/* =====================================================
   MONITORIZACIÓN Y AIREACIÓN: tarjetas con foto de fondo
   La foto es un <img class="bg-card-media"> (no background-image).
   Capas: foto (z 0) → degradado ::before (z 1) → contenido (z 2).
   Los iconos de la lista siguen en naranja, como en el mockup.
   ===================================================== */
.bg-card{position:relative; overflow:hidden; border-color:transparent; color:var(--white);}
.bg-card-media{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.bg-card::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.82) 100%);}
.bg-card > :not(.bg-card-media){position:relative; z-index:2;}
.bg-card h3{color:var(--white);}
.bg-card > p{color:rgba(255,255,255,.86);}
.bg-card .about-card-icon{background:rgba(255,255,255,.14);}
.bg-card .about-card-icon .material-symbols-outlined{color:var(--white);}
.bg-card .card-list li{border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.9);}