/* software.css — módulo de la página /software-panel-composite.
   (Extraído del <style> inline del PHP; el hero usa .doc-hero de publicas.css.) */

.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); max-width: 1000px; margin: 0 auto; }
.sf-feature { background: var(--bg-surface); border: var(--bw-1) solid var(--border-subtle); border-radius: var(--radius-panel, 8px);
              padding: var(--sp-7); transition: border-color var(--dur-base) var(--ease); }
.sf-feature:hover { border-color: color-mix(in srgb, var(--selection-indicator) 40%, var(--border)); }
.sf-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
                    border-radius: var(--radius-control); background: var(--selection-wash); color: var(--selection-indicator); margin-bottom: var(--sp-5); }
.sf-feature__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-feature h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
.sf-feature p { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

.sf-cta { padding: var(--sp-12) 0; text-align: center; border-top: var(--bw-1) solid var(--border-subtle); background: var(--bg-surface); }
.sf-cta h2 { margin-bottom: var(--sp-4); }
.sf-cta p { color: var(--text-secondary); max-width: 560px; margin: 0 auto var(--sp-6); }

@media (max-width: 720px) { .sf-grid { grid-template-columns: 1fr; } }