/* Variante B: héroe BLANCO; fila de cifras en tarjeta NEGRA con cifras en plata (la destacada en rojo);
   interfaces en negro con foto de puertos; tarjetas blancas con número rojo y borde superior rojo al hover.
   Se carga después de sitio.css. */

/* Héroe blanco en dos columnas */
.hero { padding: var(--space-10) 0 var(--space-8); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-8); align-items: center; }
.hero .photo { border-radius: var(--radius-lg); }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

/* Fila de cifras: tarjeta negra, cifras en plata */
.kpis { background: var(--surface-base); border: 1px solid var(--nerp-graphite); box-shadow: var(--shadow-light-md); padding: var(--space-3) 0; margin-top: var(--space-9); }
.kpi + .kpi { border-left: 1px solid var(--border-default); }
.kpi b { color: var(--nerp-silver-100); }
.kpi span { color: var(--nerp-silver-400); }
.kpi.hot b { color: var(--nerp-red); }
@media (max-width: 820px) {
  .kpi:nth-child(3) { border-left: none; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--border-default); }
  .kpi { padding: var(--space-5) var(--space-3); }
}

/* Interfaces: sección negra con foto de puertos */
section.dark { padding: calc(var(--space-10) * 1.2) 0; }
@media (max-width: 820px) { section.dark { padding: var(--space-9) 0; } }

/* Tarjetas blancas: número rojo, borde superior rojo al hover */
.card .num { color: var(--nerp-red); }
.card { position: relative; }
.card:hover { box-shadow: inset 0 2px 0 var(--nerp-red), var(--shadow-light-md); }
.alt .card { background: var(--surface-light-base); }
.checklist li::before { color: var(--nerp-red); }