/* Ajustes exclusivos del SOC. Los componentes base provienen de style.css. */
.soc-page .soc-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 35px; color: #b9c8d5; font-size: .78rem; }
.soc-page .soc-breadcrumb a:hover { color: var(--cyan); }
.soc-page .hero-content { grid-template-columns: 1.2fr .85fr; gap: 60px; }
.soc-page h1 { font-size: clamp(2.75rem, 5.1vw, 4.6rem); }
.soc-page .soc-hero-note { max-width: 600px; margin: 23px 0 0; color: #afbfcb; font-size: .78rem; }
.soc-page .hero-points { margin-top: 30px; }
.soc-page .soc-diagram { width: 100%; margin: 0; }
.soc-page .panel-heading { gap: 15px; }
.soc-page .panel-label { color: #afbfcb; }
.soc-page .soc-outline-tag { padding: 5px 9px; border: 1px solid #31526a; border-radius: 4px; color: var(--cyan); font-size: .7rem; font-weight: 750; letter-spacing: .08em; }
.soc-page .soc-sources { display: flex; flex-wrap: wrap; gap: 8px; padding: 25px 24px 0; }
.soc-page .soc-sources span { padding: 5px 10px; border: 1px solid #31526a; border-radius: 4px; color: #b9c8d5; font-size: .72rem; }
.soc-page .soc-signal-flow { margin: 0; padding: 26px 24px; list-style: none; }
.soc-page .soc-signal-flow li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding-bottom: 27px; }
.soc-page .soc-signal-flow li:last-child { padding-bottom: 0; }
.soc-page .soc-signal-flow li:not(:last-child)::after { position: absolute; top: 36px; bottom: 0; left: 17px; width: 1px; background: #31526a; content: ""; }
.soc-page .soc-step-number { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border: 1px solid #31526a; border-radius: 4px; color: var(--cyan); background: var(--navy-900); font-size: .7rem; }
.soc-page .soc-signal-flow strong { color: var(--white); font-size: .9rem; }
.soc-page .soc-signal-flow p { margin: 3px 0 0; color: #afbfcb; font-size: .76rem; }
.soc-page .soc-diagram figcaption { padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.09); color: #afbfcb; font-size: .72rem; }
.soc-page .soc-scope-note { margin-top: 30px; padding: 25px 30px; border: 1px solid var(--line); border-left: 3px solid var(--cyan-dark); border-radius: 4px; background: var(--white); }
.soc-page .soc-scope-note strong { color: var(--ink); }
.soc-page .soc-scope-note p { margin: 8px 0 0; color: var(--muted); font-size: .9rem; }
.soc-page .soc-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.soc-page .soc-tool { padding: 30px 25px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.soc-page .soc-tool .service-tag { display: block; margin-bottom: 24px; }
.soc-page .soc-tool h3 { font-size: 1.5rem; }
.soc-page .soc-tool p { margin: 0; color: var(--muted); font-size: .9rem; }
.soc-page .soc-technology-note { margin-top: 26px; margin-bottom: 0; color: var(--muted); font-size: .85rem; }
.soc-page .soc-evaluation-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 90px; align-items: center; }
.soc-page .soc-evaluation-layout > div > p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: #b9c8d5; }
.soc-page .soc-evaluation-actions > p { margin-top: 18px; font-size: .8rem; }
.soc-page .soc-evaluation-actions .text-link { display: inline-block; margin-top: 25px; color: var(--cyan); }
.soc-page .main-nav.open { overflow-y: auto; }
.soc-page .service-card ul { margin-bottom: 0; }
.soc-page .card-number { color: var(--muted); }
.soc-page .footer-bottom { color: #afbfcb; }
.soc-page .eyebrow.dark, .soc-page .soc-tool .service-tag, .soc-page .method-steps span { color: #087891; }

@media (max-width: 980px) {
  .soc-page .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .soc-page .soc-diagram { max-width: 560px; }
  .soc-page .soc-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soc-page .soc-evaluation-layout { gap: 45px; }
}

@media (max-width: 740px) {
  .soc-page h1 { font-size: clamp(2.55rem, 10vw, 4rem); }
  .soc-page .soc-diagram { display: block; }
  .soc-page .soc-breadcrumb { margin-bottom: 26px; }
  .soc-page .soc-scope-note { padding: 23px; }
  .soc-page .soc-tool-grid, .soc-page .soc-evaluation-layout { grid-template-columns: 1fr; }
  .soc-page .soc-tool .service-tag { margin-bottom: 14px; }
  .soc-page .soc-tool h3 { margin-bottom: 12px; }
  .soc-page .soc-evaluation-layout { gap: 30px; }
  .soc-page .soc-evaluation-actions .button { width: 100%; }
}