/* ═══════════════════════════════════════════════════════════════════════════
   WCOR RUNTIME GATEWAY v2 — MAQUETACIÓN VISUAL OPERACIONAL
  Especificación: Infraestructura operacional, briefing, no formulario
   Paleta: #1E4B7C, grises institucionales, blanco puro
   Respiración: 24px entre bloques, 20px padding interno
   ═══════════════════════════════════════════════════════════════════════════ */

/* ROOT COLOR VARIABLES */
:where(html, body) {
  background: #000000;
}

:root {
  --bg-main: #060d16;
  --bg-deep: #04080f;
  --bg-panel: #0b1523;
  --bg-panel-soft: #0f1e32;
  --bg-panel-raise: #13263d;
  --line: rgba(165, 208, 255, 0.2);
  --line-green: rgba(90, 180, 255, 0.32);
  --line-gold: rgba(98, 168, 235, 0.34);
  --text-main: #deedff;
  --text-dim: #a8c2de;
  --text-muted: #6f89a5;
  --green: #00c16a;
  --yellow: #d7a93e;
  --red: #d94a4a;
  --cyan: #58b9ff;
  --amber: #6aaeff;
  --glow-cyan: rgba(88, 185, 255, 0.28);
  --glow-amber: rgba(106, 174, 255, 0.2);
  --glow-red: rgba(217, 74, 74, 0.28);
  --inner-deep: rgba(6, 14, 24, 0.9);
  --inner-petro: rgba(9, 24, 36, 0.86);
  --inner-electric: rgba(11, 21, 40, 0.9);
  --inner-focus-cyan: rgba(84, 214, 255, 0.22);
  --inner-focus-blue: rgba(84, 132, 255, 0.2);
  --inner-focus-green: rgba(86, 196, 138, 0.16);
  --inner-focus-amber: rgba(234, 174, 72, 0.2);

  --color-brand-primary: var(--cyan);
  --color-brand-hover: #76c6ff;
  --color-brand-active: #4d98df;
  --color-gray-primary: var(--text-dim);
  --color-gray-secondary: #b8d4f0;
  --color-gray-tertiary: var(--text-muted);
  --color-gray-light: rgba(102, 157, 212, 0.58);
  --color-gray-lighter: rgba(90, 180, 255, 0.28);
  --color-gray-lightest: rgba(90, 180, 255, 0.16);
  --color-bg-white: var(--bg-panel);
  --color-bg-soft: rgba(8, 18, 31, 0.96);
  --color-bg-page: var(--bg-main);
  --color-bg-input: rgba(9, 18, 30, 0.82);
  --color-text-primary: var(--text-main);
  --color-text-secondary: var(--text-dim);
  --color-text-tertiary: var(--text-muted);
  --color-error-soft: var(--red);
  
  /* SHADOWS */
  --shadow-level-1: 0 10px 24px rgba(4, 10, 20, 0.4);
  --shadow-level-2: 0 16px 36px rgba(1, 6, 14, 0.5);
  --shadow-level-3: 0 24px 52px rgba(1, 5, 12, 0.56);
  
  /* SPACING */
  --spacing-block-gap: 24px;
  --spacing-block-gap-large: 32px;
  --spacing-block-gap-small: 16px;
  --spacing-padding-block: 20px;
  --spacing-padding-external: 40px;
  
  /* TYPOGRAPHY */
  --font-family: "Segoe UI", "Bahnschrift", "Trebuchet MS", sans-serif;
  --font-size-title: 22px;
  --font-size-label: 16px;
  --font-size-label-subtle: 15px;
  --font-size-body: 16px;
  --font-size-body-large: 18px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --wcor-title-tracking: 0.012em;
  --wcor-subtitle-line: 1.48;
  --wcor-label-tracking: 0.07em;
}

  .domain-fixed-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(6, 18, 31, 0.98) 0%, rgba(4, 12, 22, 1) 100%);
    border: 1px solid rgba(84, 214, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(200, 232, 255, 0.08), inset 0 -10px 18px rgba(1, 7, 13, 0.6), 0 0 0 1px rgba(5, 16, 28, 0.7), 0 0 18px rgba(84, 214, 255, 0.14);
  }

  .domain-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #99bbd9;
  }

  .domain-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: calc(1rem + 2px);
    font-weight: 700;
    color: #ecf6ff;
    line-height: 1.2;
  }

  .linkedin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1d77bc 0%, #0d4f87 100%);
    border: 1px solid rgba(153, 201, 255, 0.38);
    color: #f2fbff;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: lowercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.28);
  }
  right: 16px;
  box-shadow: 0 0 18px 2px var(--glow-amber);
  background: rgba(106, 174, 255, 0.28);
}

/* CONTAINER */
.wcor-gateway-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 34px;
}

/* I18N gateway header/nav guardrails: keep labels readable on ES/EN switch. */
.wcor-gateway-body .wr-lang-switch .wr-lang-btn.active {
  color: #d9ffe9;
  border-color: rgba(78, 219, 144, 0.94);
  background: linear-gradient(180deg, rgba(20, 112, 66, 0.96) 0%, rgba(12, 80, 46, 0.99) 100%);
  box-shadow: inset 0 1px 0 rgba(203, 248, 223, 0.16), 0 0 14px rgba(78, 219, 144, 0.28);
}

.wcor-gateway-body .wr-lang-switch .wr-lang-btn.inactive {
  color: #ffdfe2;
  border-color: rgba(228, 110, 126, 0.88);
  background: linear-gradient(180deg, rgba(110, 28, 42, 0.95) 0%, rgba(80, 16, 28, 0.99) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 214, 220, 0.12), 0 0 12px rgba(228, 110, 126, 0.22);
}

.wcor-gateway-body .nav-btn [data-i18n-key],
.wcor-gateway-body .gateway-mini-title[data-i18n-key],
.wcor-gateway-body .gateway-mini-subtitle[data-i18n-key] {
  overflow-wrap: anywhere;
}

/* BLOCK BASE */
.wcor-block {
  background: linear-gradient(180deg, rgba(11, 23, 39, 0.94) 0%, rgba(9, 19, 33, 0.97) 100%);
  border: 1px solid rgba(90, 180, 255, 0.38);
  border-radius: 16px;
  margin-bottom: var(--spacing-block-gap);
  box-shadow: 0 22px 48px rgba(2, 7, 15, 0.52), inset 0 0 0 1px rgba(142, 197, 255, 0.08);
  position: relative;
  overflow: hidden;
  --block-accent: rgba(90, 180, 255, 0.72);
  --block-glow: rgba(90, 180, 255, 0.18);
}

.wcor-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--block-accent);
  box-shadow: 0 0 10px var(--block-glow), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.wcor-block:last-child {
  margin-bottom: var(--spacing-padding-external);
}

.block-inner {
  padding: 22px 18px;
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 1: CABECERA INSTITUCIONAL
   ───────────────────────────────────────────────────────────────────────── */
.block-1 {
  background: linear-gradient(180deg, rgba(13, 28, 46, 0.95) 0%, rgba(9, 20, 36, 0.98) 100%);
  border: 1px solid rgba(90, 180, 255, 0.52);
  margin-bottom: var(--spacing-block-gap);
  box-shadow: inset 0 0 0 1px rgba(90, 180, 255, 0.1), 0 20px 44px rgba(2, 7, 15, 0.54), 0 0 20px rgba(90, 180, 255, 0.2);
  --block-accent: rgba(90, 180, 255, 0.72);
  --block-glow: rgba(90, 180, 255, 0.22);
}

.block-header {
  border-radius: 16px;
}

.block-header .block-inner {
  padding: 20px;
}

/* Localized: WCOR hero right-aligned logo */
.wcor-hero-right {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* decorative */
}
.wcor-hero-logo {
  max-height: 96px;
  width: auto;
  object-fit: contain;
  display: block;
}

.block-title {
  display: flex;
  align-items: center;
  font-size: calc(1.8rem + 2px);
  font-weight: 800;
  color: #deedff;
  letter-spacing: 0.45px;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 0 12px rgba(136, 207, 255, 0.16);
}

.gateway-header-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  margin-right: 12px;
  border-radius: 8px;
  object-fit: contain;
}

.wcor-header-image {
  display: block;
  width: min(100%, 176px);
  max-width: 176px;
  height: auto;
  margin: 0 0 10px;
  object-fit: contain;
  border-radius: 12px;
  opacity: 0.92;
  filter: saturate(0.80) brightness(0.94) contrast(0.96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 8px rgba(83, 217, 255, 0.08);
}

.block-subtitle {
  font-size: calc(0.96rem + 2px);
  font-weight: 500;
  color: #b8d4f0;
  margin-top: 8px;
  line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 2: CONTEXTO OPERACIONAL (Dos columnas)
   ───────────────────────────────────────────────────────────────────────── */
.block-2 {
  margin-bottom: var(--spacing-block-gap-large);
  border-color: rgba(70, 212, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(90, 235, 255, 0.14), 0 22px 48px rgba(2, 7, 15, 0.52), 0 0 22px rgba(70, 212, 255, 0.24), 0 0 44px rgba(70, 212, 255, 0.12);
  --block-accent: rgba(70, 212, 255, 0.9);
  --block-glow: rgba(70, 212, 255, 0.3);
}

.block-2::before {
  background: rgba(70, 212, 255, 0.78);
  box-shadow: 0 0 14px rgba(70, 212, 255, 0.4), 0 0 26px rgba(70, 212, 255, 0.18);
}

.context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.context-column {
  display: flex;
  flex-direction: column;
}

.block-label {
  font-size: calc(0.9rem + 2px);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.gateway-select {
  font-size: calc(1rem + 2px);
  font-weight: 600;
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(5, 14, 24, 0.98) 0%, rgba(3, 10, 18, 1) 100%);
  border: 1px solid rgba(84, 214, 255, 0.76);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 40px;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: inset 0 1px 0 rgba(200, 232, 255, 0.08), inset 0 -10px 18px rgba(1, 7, 13, 0.6), 0 0 0 1px rgba(5, 16, 28, 0.7), 0 0 14px rgba(84, 214, 255, 0.12);
  color-scheme: dark;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239FB0C4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  width: 100%;
}

.gateway-select:hover {
  border-color: rgba(122, 226, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(208, 237, 255, 0.1), inset 0 -10px 18px rgba(2, 8, 15, 0.62), 0 0 0 1px rgba(8, 20, 34, 0.74), 0 0 16px rgba(72, 190, 255, 0.2);
}

.gateway-select:focus {
  outline: none;
  border-color: rgba(84, 214, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(218, 240, 255, 0.12), inset 0 -12px 20px rgba(2, 8, 15, 0.64), 0 0 0 1px rgba(84, 214, 255, 0.34), 0 0 22px rgba(84, 214, 255, 0.28);
}

.gateway-select option {
  background: #07131f;
  color: #e6f4ff;
  font-weight: 600;
}

.gateway-select option:checked,
.gateway-select option[selected] {
  background: linear-gradient(180deg, #0f3550 0%, #0b2a3f 100%);
  color: #f3fbff;
}

.gateway-select option:hover,
.gateway-select option:focus {
  background: #114163;
  color: #f4fbff;
}

#gateway-domain {
  background-color: #07131f !important;
  border-color: rgba(84, 214, 255, 0.78);
  color: #e8f5ff !important;
  color-scheme: dark;
}

#gateway-domain option {
  background-color: #07131f !important;
  color: #e6f4ff !important;
}

#gateway-domain option:checked,
#gateway-domain option[selected] {
  background: #0f3550 !important;
  color: #f3fbff !important;
}

#gateway-domain option[value="linkedin"] {
  color: #8be6aa !important;
  font-weight: 700;
}

#gateway-domain option:not([value=""]):not([value="linkedin"]) {
  color: #ff7f7f !important;
}

#gateway-domain option:not([value=""]):not([value="linkedin"]):checked,
#gateway-domain option:not([value=""]):not([value="linkedin"])[selected] {
  background: #3a1010 !important;
  color: #ff9a9a !important;
}

body[data-domain="linkedin"] #gateway-domain {
  border-color: rgba(88, 224, 128, 0.82);
  box-shadow: inset 0 1px 0 rgba(200, 232, 255, 0.08), inset 0 -10px 18px rgba(1, 7, 13, 0.6), 0 0 0 1px rgba(5, 16, 28, 0.7), 0 0 14px rgba(88, 224, 128, 0.22);
}

.domain-status-note {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #cfe3f8;
}

.domain-status-active {
  color: #8be6aa;
  font-weight: 700;
}

.domain-status-build {
  color: #ff8e8e;
  font-weight: 700;
}

.gateway-select:disabled,
.objective-guided-select:disabled {
  background-color: #0A111A;
  color: var(--color-gray-tertiary);
  cursor: not-allowed;
  opacity: 0.6;
}

.context-activation {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(84, 130, 171, 0.22);
}

.context-activation-lead::before {
  content: '';
}

.context-activation-lead {
  font-size: calc(0.88rem + 2px);
  font-weight: 500;
  color: #c9e4ff;
  line-height: 1.5;
  margin-bottom: 10px;
}

.context-activation-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── MATRIZ COMPACTA DE CONFIGURACIÓN OPERACIONAL (CAM) ── */
.context-activation-matrix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.cam-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 120px;
  min-width: 100px;
  gap: 3px;
}

.cam-label {
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cam-col--signal .cam-label   { color: rgba(130, 200, 255, 0.9); }
.cam-col--context .cam-label  { color: rgba(240, 190, 90, 0.9); }
.cam-col--tension .cam-label  { color: rgba(240, 100, 110, 0.9); }
.cam-col--moment .cam-label   { color: rgba(100, 210, 140, 0.9); }
.cam-col--action .cam-label   { color: rgba(140, 220, 240, 0.9); }

.cam-select {
  font-family: var(--font-family);
  font-size: 11.5px;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(6, 14, 24, 0.97) 0%, rgba(4, 10, 18, 0.99) 100%);
  border: 1px solid;
  border-radius: 6px;
  padding: 5px 22px 5px 7px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  line-height: 1.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(160,200,240,0.5)' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px 6px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.cam-select--blue  { border-color: rgba(84, 180, 255, 0.54); color: rgba(180, 224, 255, 0.92); box-shadow: 0 0 10px rgba(84, 180, 255, 0.1); }
.cam-select--amber { border-color: rgba(230, 175, 70, 0.54);  color: rgba(252, 218, 148, 0.92); box-shadow: 0 0 10px rgba(230, 175, 70, 0.1); }
.cam-select--red   { border-color: rgba(220, 90, 100, 0.54);  color: rgba(255, 190, 196, 0.92); box-shadow: 0 0 10px rgba(220, 90, 100, 0.1); }
.cam-select--green { border-color: rgba(80, 200, 130, 0.54);  color: rgba(180, 240, 204, 0.92); box-shadow: 0 0 10px rgba(80, 200, 130, 0.1); }
.cam-select--cyan  { border-color: rgba(84, 214, 255, 0.54);  color: rgba(192, 240, 255, 0.92); box-shadow: 0 0 10px rgba(84, 214, 255, 0.1); }

.cam-select:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(84, 214, 255, 0.32), 0 0 14px rgba(84, 214, 255, 0.18);
}

.cam-select option {
  background: #080f1a;
  color: #cce0ff;
}

.context-open-case {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(84, 130, 171, 0.2);
}

.context-open-case-title {
  font-size: calc(0.88rem + 2px);
  font-weight: 600;
  color: var(--color-gray-primary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.context-open-case-copy {
  font-size: calc(0.86rem + 2px);
  color: #c6e0fa;
  line-height: 1.5;
  margin-bottom: 8px;
}

.context-open-case-input {
  font-family: var(--font-family);
  font-size: var(--font-size-label-subtle);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(6, 15, 25, 0.96) 0%, rgba(4, 10, 18, 0.98) 100%);
  border: 1px solid rgba(77, 132, 181, 0.56);
  border-radius: 10px;
  width: 100%;
  min-height: 82px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  box-shadow: inset 0 1px 0 rgba(196, 228, 255, 0.05), inset 0 -12px 22px rgba(2, 8, 15, 0.5), 0 0 0 1px rgba(7, 18, 30, 0.56);
}

.context-open-case-input::placeholder {
  color: var(--color-gray-tertiary);
}

.context-open-case-input:focus {
  outline: none;
  border-color: rgba(84, 214, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(213, 239, 255, 0.08), inset 0 -14px 24px rgba(2, 8, 15, 0.56), 0 0 0 1px rgba(84, 214, 255, 0.24), 0 0 20px var(--inner-focus-cyan);
  background: linear-gradient(180deg, rgba(7, 17, 28, 0.98) 0%, rgba(4, 11, 19, 1) 100%);
}

.context-open-case-input.formulation-applied.textarea-output-blue {
  color: #9fd9ff;
}

.context-open-case-input.formulation-applied.textarea-output-white {
  color: #e9f1ff;
}

.context-open-case-input.formulation-applied.textarea-output-green {
  color: #8fe1b2;
}

.formulation-assistant-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formulation-assistant-apply {
  margin-top: 0;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 700;
  color: #e9f7ff;
  background: linear-gradient(180deg, rgba(14, 92, 128, 0.96) 0%, rgba(8, 58, 90, 0.99) 100%);
  border: 1px solid rgba(84, 214, 255, 0.9);
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(208, 242, 255, 0.18), inset 0 -10px 18px rgba(3, 24, 40, 0.56), 0 10px 24px rgba(4, 10, 20, 0.4), 0 0 18px rgba(84, 214, 255, 0.26);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.formulation-assistant-apply:hover {
  border-color: rgba(146, 232, 255, 1);
  box-shadow: inset 0 1px 0 rgba(220, 246, 255, 0.22), inset 0 -10px 18px rgba(3, 24, 40, 0.62), 0 0 24px rgba(84, 214, 255, 0.34);
  transform: translateY(-1px);
}

.formulation-assistant-apply-secondary {
  color: #ffecee;
  background: linear-gradient(180deg, rgba(118, 20, 36, 0.95) 0%, rgba(86, 12, 26, 0.99) 100%);
  border-color: rgba(238, 108, 128, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 216, 224, 0.14), inset 0 -10px 18px rgba(40, 6, 14, 0.54), 0 0 18px rgba(218, 74, 104, 0.22);
}

.formulation-assistant-apply-secondary:hover {
  border-color: rgba(248, 152, 168, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 228, 234, 0.16), inset 0 -10px 18px rgba(40, 6, 14, 0.58), 0 0 20px rgba(218, 74, 104, 0.3);
}

.formulation-assistant-apply-ghost {
  color: #e9ffef;
  background: linear-gradient(180deg, rgba(20, 106, 62, 0.95) 0%, rgba(12, 74, 42, 0.99) 100%);
  border-color: rgba(88, 206, 132, 0.88);
  box-shadow: inset 0 1px 0 rgba(196, 242, 214, 0.14), inset 0 -10px 18px rgba(5, 30, 18, 0.54), 0 0 18px rgba(78, 204, 138, 0.2);
}

.formulation-assistant-apply-ghost:hover {
  border-color: rgba(126, 230, 164, 0.96);
  box-shadow: inset 0 1px 0 rgba(213, 248, 226, 0.16), inset 0 -10px 18px rgba(5, 30, 18, 0.58), 0 0 20px rgba(78, 204, 138, 0.28);
}

.formulation-assistant-apply:disabled {
  background: linear-gradient(180deg, rgba(58, 88, 126, 0.76) 0%, rgba(44, 66, 96, 0.82) 100%);
  border-color: rgba(102, 141, 188, 0.62);
  color: rgba(220, 235, 252, 0.86);
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(206, 226, 248, 0.08), 0 0 12px rgba(88, 140, 206, 0.14);
  opacity: 0.82;
}

.formulation-assistant-apply-secondary:disabled {
  background: linear-gradient(180deg, rgba(90, 26, 38, 0.78) 0%, rgba(68, 18, 30, 0.84) 100%);
  border-color: rgba(178, 96, 112, 0.62);
  color: rgba(245, 222, 227, 0.84);
  box-shadow: inset 0 1px 0 rgba(244, 210, 218, 0.08), 0 0 12px rgba(162, 72, 94, 0.14);
}

.formulation-assistant-apply-ghost:disabled {
  background: linear-gradient(180deg, rgba(28, 90, 58, 0.78) 0%, rgba(20, 66, 44, 0.84) 100%);
  border-color: rgba(92, 168, 126, 0.62);
  color: rgba(219, 241, 228, 0.84);
  box-shadow: inset 0 1px 0 rgba(198, 236, 214, 0.08), 0 0 12px rgba(78, 154, 112, 0.14);
}

.activation-case-chip {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  color: #def2ff;
  background: linear-gradient(180deg, rgba(20, 56, 112, 0.94) 0%, rgba(10, 33, 74, 0.98) 100%);
  border: 1px solid rgba(92, 186, 255, 0.78);
  border-radius: 999px;
  padding: 7px 11px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  box-shadow: inset 0 1px 0 rgba(201, 232, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 38, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 12px rgba(88, 185, 255, 0.16);
}

.activation-case-chip:hover {
  border-color: rgba(150, 225, 255, 0.96);
  color: #f1f9ff;
  background: linear-gradient(180deg, rgba(26, 68, 132, 0.96) 0%, rgba(12, 40, 86, 1) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 238, 255, 0.14), inset 0 -8px 14px rgba(5, 19, 42, 0.54), 0 0 16px rgba(88, 185, 255, 0.26);
}

.activation-case-chip:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 3: OBJETIVO DEL ANÁLISIS ★ NÚCLEO PERCEPTUAL
   ───────────────────────────────────────────────────────────────────────── */
.block-3 {
  margin-bottom: var(--spacing-block-gap);
}

.block-objective {
  min-height: 90px;
  border-color: rgba(28, 76, 196, 0.88);
  background: linear-gradient(180deg, rgba(15, 32, 50, 0.99) 0%, rgba(9, 20, 34, 1) 100%);
  box-shadow: inset 0 0 0 1px rgba(64, 118, 246, 0.2), inset 0 0 30px rgba(33, 78, 188, 0.18), 0 28px 64px rgba(1, 4, 10, 0.66), 0 0 30px rgba(28, 76, 196, 0.3), 0 0 54px rgba(20, 62, 170, 0.18);
  --block-accent: rgba(28, 76, 196, 0.94);
  --block-glow: rgba(28, 76, 196, 0.36);
}

.block-objective::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: rgba(28, 76, 196, 0.96);
  box-shadow: 0 0 14px rgba(28, 76, 196, 0.44), 0 0 26px rgba(28, 76, 196, 0.24);
}

.block-label-objective {
  font-weight: 700;
  color: #eef7ff;
  letter-spacing: 0.2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 4: BRIEFING OPERACIONAL
   ───────────────────────────────────────────────────────────────────────── */
.block-4 {
  margin-bottom: var(--spacing-block-gap);
}

.block-briefing {
  min-height: 220px;
  border-color: rgba(78, 204, 138, 0.6);
  background: linear-gradient(180deg, rgba(12, 25, 40, 0.92) 0%, rgba(8, 18, 31, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(121, 232, 170, 0.12), inset 0 0 24px rgba(78, 204, 138, 0.1), 0 18px 38px rgba(2, 7, 14, 0.5), 0 0 20px rgba(78, 204, 138, 0.18);
  --block-accent: rgba(78, 204, 138, 0.84);
  --block-glow: rgba(78, 204, 138, 0.24);
}

.block-briefing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: rgba(78, 204, 138, 0.78);
  box-shadow: 0 0 10px rgba(78, 204, 138, 0.28), 0 0 20px rgba(78, 204, 138, 0.14);
}

.block-briefing .block-label::before {
  content: '';
  margin-right: 0;
}

.briefing-activation {
  font-size: calc(0.9rem + 2px);
  font-weight: 500;
  color: #d2eaff;
  line-height: 1.5;
  margin-top: 8px;
}

.gateway-textarea {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(7, 18, 22, 0.96) 0%, rgba(4, 11, 15, 0.99) 100%);
  border: 1px solid rgba(78, 156, 120, 0.56);
  border-radius: 10px;
  padding: 14px;
  width: 100%;
  min-height: 200px;
  max-height: 500px;
  margin-top: 8px;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(192, 230, 210, 0.04), inset 0 -16px 30px rgba(2, 9, 10, 0.5), 0 0 0 1px rgba(6, 18, 13, 0.48);
}

.gateway-textarea::placeholder {
  color: var(--color-gray-tertiary);
}

.gateway-textarea:focus {
  outline: none;
  border-color: rgba(98, 196, 146, 0.8);
  box-shadow: inset 0 1px 0 rgba(205, 236, 218, 0.06), inset 0 -16px 30px rgba(2, 9, 10, 0.54), 0 0 0 1px rgba(98, 196, 146, 0.2), 0 0 20px var(--inner-focus-green);
}

.gateway-textarea:disabled {
  background-color: #0A111A;
  color: var(--color-gray-tertiary);
  cursor: not-allowed;
}

.briefing-meta {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-right: 0;
}

.briefing-counter {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-tertiary);
  opacity: 0.7;
}

.wcor-context-analyst {
  margin-top: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(9, 30, 22, 0.86) 0%, rgba(6, 22, 16, 0.92) 100%);
  border: 1px solid rgba(67, 219, 124, 0.42);
  border-left: 2px solid rgba(83, 217, 255, 0.34);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.08), inset 0 -12px 20px rgba(2, 10, 8, 0.34), 0 0 14px rgba(67, 219, 124, 0.12);
}

.wcor-context-analyst-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ccf5df;
  text-transform: uppercase;
}

.wcor-context-analyst-subtitle {
  margin-top: 5px;
  font-size: 0.82rem;
  color: rgba(195, 235, 220, 0.86);
  line-height: 1.45;
}

.wcor-context-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.wcor-context-card {
  padding: 10px;
  border: 1px solid rgba(67, 219, 124, 0.26);
  border-left: 2px solid rgba(83, 217, 255, 0.3);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 25, 19, 0.86) 0%, rgba(6, 18, 14, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(181, 236, 206, 0.06), inset 0 -12px 20px rgba(2, 8, 7, 0.3), 0 0 10px rgba(83, 217, 255, 0.08);
}

.wcor-context-card.is-context-insertable {
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wcor-context-card.is-context-insertable:hover,
.wcor-context-card.is-context-insertable:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(115, 236, 168, 0.64);
  box-shadow: inset 0 1px 0 rgba(181, 236, 206, 0.08), inset 0 -12px 20px rgba(2, 8, 7, 0.34), 0 0 14px rgba(83, 217, 255, 0.16);
  outline: none;
}

.wcor-context-label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(159, 236, 255, 0.9);
  text-transform: uppercase;
}

.wcor-context-value {
  margin-top: 5px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(214, 243, 231, 0.9);
}

.wcor-context-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wcor-context-action-btn {
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 8px 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.wcor-context-action-btn--primary {
  color: #e9fff1;
  background: linear-gradient(180deg, rgba(19, 94, 57, 0.92) 0%, rgba(12, 66, 39, 0.98) 100%);
  border-color: rgba(96, 214, 154, 0.72);
  box-shadow: inset 0 1px 0 rgba(205, 246, 224, 0.14), inset 0 -10px 16px rgba(5, 31, 19, 0.48), 0 0 14px rgba(96, 214, 154, 0.16);
}

.wcor-context-action-btn--primary:hover {
  border-color: rgba(132, 228, 180, 0.86);
  box-shadow: inset 0 1px 0 rgba(215, 250, 232, 0.16), inset 0 -10px 16px rgba(5, 31, 19, 0.54), 0 0 18px rgba(96, 214, 154, 0.2);
}

.wcor-context-action-btn--secondary {
  color: #e8f7ff;
  background: linear-gradient(180deg, rgba(21, 71, 95, 0.92) 0%, rgba(14, 49, 72, 0.98) 100%);
  border-color: rgba(109, 196, 232, 0.64);
  box-shadow: inset 0 1px 0 rgba(212, 237, 248, 0.14), inset 0 -10px 16px rgba(6, 20, 33, 0.48), 0 0 14px rgba(234, 174, 72, 0.14);
}

.wcor-context-action-btn--secondary:hover {
  border-color: rgba(146, 214, 240, 0.84);
  box-shadow: inset 0 1px 0 rgba(220, 243, 252, 0.16), inset 0 -10px 16px rgba(6, 20, 33, 0.54), 0 0 16px rgba(234, 174, 72, 0.2);
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 5: ENCUADRE Y RECONDUCCIÓN (WCOR)
   ───────────────────────────────────────────────────────────────────────── */
.block-5 {
  margin-bottom: var(--spacing-block-gap-small);
}

.block-reconduction {
  background: linear-gradient(180deg, rgba(10, 22, 36, 0.88) 0%, rgba(8, 18, 30, 0.94) 100%);
  border: 1px solid rgba(108, 143, 156, 0.4);
  min-height: 110px;
  box-shadow: inset 0 0 0 1px rgba(116, 164, 180, 0.08), 0 12px 28px rgba(2, 7, 14, 0.42), 0 0 12px rgba(108, 143, 156, 0.1);
  --block-accent: rgba(108, 143, 156, 0.62);
  --block-glow: rgba(108, 143, 156, 0.12);
}

.block-reconduction::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: rgba(108, 143, 156, 0.62);
  box-shadow: 0 0 8px rgba(108, 143, 156, 0.2), 0 0 16px rgba(108, 143, 156, 0.08);
}

.block-label-reconduction::before {
  content: '';
  margin-right: 0;
}

.block-label-reconduction {
  font-size: var(--font-size-label-subtle);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-tertiary);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  display: block;
}

.reconduction-content {
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(9, 18, 28, 0.86) 0%, rgba(7, 15, 23, 0.92) 100%);
  border: 1px solid rgba(104, 132, 148, 0.22);
  border-left: 2px solid rgba(108, 143, 156, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(182, 210, 228, 0.03), inset 0 -10px 18px rgba(2, 8, 15, 0.34);
  padding: 10px 12px;
}

.reconduction-text {
  font-size: calc(0.86rem + 2px);
  font-weight: 500;
  color: rgba(171, 194, 212, 0.9);
  margin-bottom: 8px;
}

.reconduction-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reconduction-list li {
  font-size: calc(0.84rem + 2px);
  font-weight: 500;
  color: rgba(166, 190, 208, 0.88);
  margin-bottom: 6px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
}

.reconduction-bullet {
  color: var(--color-gray-light);
  margin-right: 8px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   BLOQUE 6: ACTIVACIÓN (CTA DOMINANTE)
   ───────────────────────────────────────────────────────────────────────── */
.block-6 {
  margin-bottom: 0;
  background: linear-gradient(180deg, rgba(12, 25, 40, 0.92) 0%, rgba(8, 18, 31, 0.96) 100%);
  border: 1px solid rgba(234, 174, 72, 0.7);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 112, 0.16), inset 0 0 30px rgba(234, 174, 72, 0.14), 0 18px 38px rgba(2, 7, 14, 0.5), 0 0 22px rgba(234, 174, 72, 0.24), 0 0 44px rgba(234, 174, 72, 0.12);
  --block-accent: rgba(234, 174, 72, 0.92);
  --block-glow: rgba(234, 174, 72, 0.3);
}

.block-6::before {
  content: '';
  background: rgba(234, 174, 72, 0.9);
  box-shadow: 0 0 14px rgba(234, 174, 72, 0.4), 0 0 26px rgba(234, 174, 72, 0.2);
}

.gateway-post-cta::before {
  content: '';
  margin-right: 0;
}

.wcor-gateway-body[data-case-type='simple'] .context-activation-lead::before {
  content: '';
}

.wcor-gateway-body[data-case-type='complejo'] .context-activation-lead::before {
  content: '';
}

.wcor-gateway-body[data-case-type='custom'] .context-activation-lead::before {
  content: '';
}

.wcor-gateway-body[data-case-type='critico'] .context-activation-lead::before {
  content: '';
}

.wcor-gateway-body[data-case-type='critico'] .block-2 {
  border-color: rgba(217, 74, 74, 0.52);
  box-shadow: inset 0 0 0 1px rgba(217, 74, 74, 0.08), 0 22px 48px rgba(15, 5, 8, 0.54), 0 0 20px rgba(217, 74, 74, 0.22);
}

.wcor-gateway-body[data-case-type='critico'] .block-2::before {
  width: 4px;
  background: rgba(217, 74, 74, 0.86);
  box-shadow: 0 0 14px rgba(217, 74, 74, 0.34);
}

.wcor-gateway-body[data-case-type='critico'] .block-6::before {
  background: rgba(217, 74, 74, 0.78);
  box-shadow: 0 0 14px rgba(217, 74, 74, 0.28);
  animation: runtime-pulse 8s ease-in-out infinite;
}

@keyframes runtime-pulse {
  0%, 100% {
    opacity: 0.55;
    box-shadow: 0 0 8px rgba(234, 191, 101, 0.1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(234, 191, 101, 0.22);
  }
}

.block-inner-activation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.wcor-gateway-container button {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-width: 1px;
  border-style: solid;
}

.gateway-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family);
  font-size: 19px;
  font-weight: var(--font-weight-semibold);
  color: #f4fcff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, rgba(72, 198, 255, 0.92) 0%, rgba(36, 146, 224, 0.98) 100%);
  border: 1px solid rgba(102, 222, 255, 0.9);
  border-radius: 999px;
  padding: 14px 24px;
  min-height: 56px;
  min-width: 280px;
  max-width: 320px;
  cursor: pointer;
  transition: background-color var(--transition-normal), 
              box-shadow var(--transition-normal),
              transform var(--transition-interaction);
  box-shadow: inset 0 1px 0 rgba(225, 247, 255, 0.26), inset 0 -14px 24px rgba(10, 62, 108, 0.46), 0 16px 32px rgba(1, 4, 8, 0.58), 0 0 22px rgba(72, 198, 255, 0.34);
  line-height: 1.2;
}

.cta-icon {
  font-size: calc(1.2em + 2px);
  line-height: 1;
}

.cta-text {
  display: inline-block;
}

.gateway-cta:hover {
  border-color: rgba(156, 236, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(236, 250, 255, 0.3), inset 0 -14px 24px rgba(11, 66, 114, 0.5), 0 0 28px rgba(72, 198, 255, 0.42);
}

.gateway-cta:active {
  background-color: rgba(42, 148, 224, 0.96);
  box-shadow: var(--shadow-level-1);
  transform: scale(0.98);
  transition: transform var(--transition-interaction);
}

.gateway-cta:focus {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(236, 250, 255, 0.3), inset 0 -14px 24px rgba(11, 66, 114, 0.5), 0 0 0 2px rgba(102, 222, 255, 0.34), 0 0 24px rgba(72, 198, 255, 0.36);
}

.block-6 .block-inner-activation {
  background: linear-gradient(180deg, rgba(10, 14, 21, 0.92) 0%, rgba(7, 10, 16, 0.96) 100%);
  border: 1px solid rgba(201, 154, 70, 0.3);
  border-left: 2px solid rgba(234, 174, 72, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(247, 210, 136, 0.08), inset 0 -14px 24px rgba(3, 5, 8, 0.46), 0 0 14px rgba(234, 174, 72, 0.1);
}

.block-6::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, rgba(234, 174, 72, 0) 0%, rgba(234, 174, 72, 0.36) 50%, rgba(234, 174, 72, 0) 100%);
  filter: blur(0.2px);
  opacity: 0.8;
  pointer-events: none;
}

@keyframes runtime-amber-breathe {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(225, 247, 255, 0.26), inset 0 -14px 24px rgba(10, 62, 108, 0.46), 0 16px 32px rgba(1, 4, 8, 0.58), 0 0 16px rgba(72, 198, 255, 0.22);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(236, 250, 255, 0.3), inset 0 -14px 24px rgba(11, 66, 114, 0.5), 0 16px 32px rgba(1, 4, 8, 0.58), 0 0 24px rgba(72, 198, 255, 0.34);
  }
}

.block-6 .gateway-cta {
  animation: runtime-amber-breathe 9s ease-in-out infinite;
}

.gateway-cta:disabled {
  background: linear-gradient(180deg, rgba(58, 108, 138, 0.76) 0%, rgba(44, 82, 106, 0.84) 100%);
  border-color: rgba(118, 178, 210, 0.6);
  color: rgba(219, 238, 248, 0.86);
  cursor: not-allowed;
  opacity: 0.84;
  box-shadow: inset 0 1px 0 rgba(220, 238, 248, 0.1), 0 0 14px rgba(80, 150, 190, 0.16);
}

.wcor-gateway-body[data-case-type='critico'] .gateway-cta,
.wcor-gateway-body[data-case-type='critico'] .activation-case-chip {
  background: linear-gradient(180deg, rgba(126, 26, 34, 0.94) 0%, rgba(88, 16, 23, 0.98) 100%);
  border-color: rgba(232, 92, 106, 0.86);
  color: #ffe9ec;
  box-shadow: inset 0 1px 0 rgba(255, 202, 208, 0.14), inset 0 -10px 18px rgba(54, 8, 12, 0.5), 0 0 18px rgba(217, 74, 74, 0.24);
}

.gateway-post-cta {
  font-size: calc(0.95rem + 2px);
  font-weight: var(--font-weight-regular);
  color: #b6cde4;
  text-align: center;
  line-height: 1.4;
  margin-top: 0;
}

.wcor-legitimacy-runtime {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(90, 180, 255, 0.35);
  background: linear-gradient(180deg, rgba(8, 19, 31, 0.92) 0%, rgba(5, 12, 22, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(90, 180, 255, 0.08), 0 0 16px rgba(90, 180, 255, 0.12);
}

.wcor-legitimacy-title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9fdcff;
  font-weight: 700;
  margin-bottom: 8px;
}

.wcor-legitimacy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wcor-legitimacy-grid p,
.wcor-legitimacy-lists p,
.wcor-legitimacy-note {
  font-size: 0.82rem;
  color: #d2e9ff;
  margin: 0;
  line-height: 1.4;
}

.wcor-legitimacy-lists {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.wcor-legitimacy-note {
  margin-top: 8px;
  color: #f2d3a5;
}

.wcor-gateway-body[data-legitimacy='low'] .block-5,
.wcor-gateway-body[data-legitimacy='low'] .wcor-context-analyst {
  opacity: 0.65;
}

.wcor-gateway-body[data-legitimacy='partial'] .block-5 {
  border-color: rgba(234, 174, 72, 0.55);
  box-shadow: inset 0 0 0 1px rgba(234, 174, 72, 0.1), 0 12px 24px rgba(2, 7, 14, 0.4), 0 0 16px rgba(234, 174, 72, 0.18);
}

.wcor-gateway-body[data-overreading-risk='high'] .block-4 {
  border-color: rgba(217, 74, 74, 0.64);
  box-shadow: inset 0 0 0 1px rgba(217, 74, 74, 0.14), 0 20px 40px rgba(15, 5, 8, 0.5), 0 0 20px rgba(217, 74, 74, 0.22);
}

.wcor-gateway-body[data-overreading-risk='medium'] .block-5,
.wcor-gateway-body[data-overreading-risk='medium'] .wcor-context-analyst {
  opacity: 0.82;
  filter: saturate(0.9);
}

.wcor-gateway-body[data-overreading-risk='high'] .block-5,
.wcor-gateway-body[data-overreading-risk='high'] .wcor-context-analyst {
  opacity: 0.58;
  filter: grayscale(0.2) saturate(0.78);
}

.wcor-gateway-body.runtime-output-blocked .gateway-cta {
  animation: none;
  background: linear-gradient(180deg, rgba(108, 56, 56, 0.88) 0%, rgba(72, 34, 34, 0.94) 100%);
  border-color: rgba(217, 74, 74, 0.72);
  box-shadow: inset 0 1px 0 rgba(248, 210, 210, 0.1), 0 0 18px rgba(217, 74, 74, 0.24);
}

.wcor-gateway-body.runtime-output-blocked #wcor-cognitive-card {
  opacity: 0.5;
  filter: grayscale(0.35);
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════════════
   MAPA CROMATICO COGNITIVO WCOR (SOLO COLOR/BORDE/HALO/FONDO)
   ═════════════════════════════════════════════════════════════════════════ */

/* 1) Header del producto WCOR — CYAN institucional */
.block-1 {
  border-color: rgba(83, 217, 255, 0.56);
  box-shadow: 0 0 18px rgba(83, 217, 255, 0.14), 0 10px 24px rgba(4, 10, 20, 0.4);
}

/* 2) Dominio contextual / Tipo de caso — CYAN */
.block-2 {
  border-color: rgba(83, 217, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.14), 0 12px 28px rgba(2, 8, 16, 0.44), 0 0 18px rgba(83, 217, 255, 0.22);
}

/* 3) Que necesitas resolver o entender — CYAN */
.block-objective {
  border-color: rgba(83, 217, 255, 0.62);
  background: linear-gradient(180deg, rgba(8, 24, 34, 0.94) 0%, rgba(6, 16, 26, 0.98) 100%);
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.14), inset 0 0 24px rgba(83, 217, 255, 0.08), 0 16px 32px rgba(2, 8, 16, 0.5), 0 0 18px rgba(83, 217, 255, 0.2);
}

/* 4) Briefing operacional — VERDE */
.block-briefing {
  border-color: rgba(67, 219, 124, 0.58);
  background: linear-gradient(180deg, rgba(10, 30, 20, 0.9) 0%, rgba(8, 20, 14, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(67, 219, 124, 0.12), inset 0 0 22px rgba(67, 219, 124, 0.08), 0 16px 32px rgba(2, 8, 16, 0.5), 0 0 18px rgba(67, 219, 124, 0.18);
}

/* 5) Encuadre y reconduccion — CYAN apagado */
.block-reconduction {
  border-color: rgba(83, 217, 255, 0.34);
  background: linear-gradient(180deg, rgba(10, 20, 30, 0.84) 0%, rgba(8, 16, 24, 0.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.08), 0 12px 24px rgba(2, 7, 14, 0.38), 0 0 12px rgba(83, 217, 255, 0.1);
}

.reconduction-content {
  border-color: rgba(83, 217, 255, 0.22);
  border-left-color: rgba(83, 217, 255, 0.34);
}

.gateway-input.formulation-applied {
  border-color: rgba(67, 219, 124, 0.9);
  box-shadow: inset 0 0 0 1px rgba(67, 219, 124, 0.28), 0 0 0 2px rgba(67, 219, 124, 0.2), 0 0 14px rgba(67, 219, 124, 0.24);
}

/* 6) Activar analisis — CYAN operacional */
.block-6 {
  border-color: rgba(83, 217, 255, 0.64);
  background: linear-gradient(180deg, rgba(8, 24, 34, 0.9) 0%, rgba(6, 16, 26, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.16), 0 18px 38px rgba(2, 7, 14, 0.5), 0 0 20px rgba(83, 217, 255, 0.2);
}

.gateway-cta {
  color: #eaf8ff;
  background: linear-gradient(180deg, rgba(88, 208, 255, 0.94) 0%, rgba(34, 148, 218, 0.98) 100%);
  border-color: rgba(138, 226, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(226, 248, 255, 0.24), inset 0 -14px 24px rgba(10, 56, 92, 0.46), 0 16px 32px rgba(1, 4, 8, 0.58), 0 0 20px rgba(83, 217, 255, 0.3);
}

.gateway-cta .cta-icon {
  color: #f2fbff;
}

.gateway-cta:hover,
.gateway-cta:focus {
  border-color: rgba(176, 236, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(236, 252, 255, 0.3), inset 0 -14px 24px rgba(12, 64, 104, 0.5), 0 0 22px rgba(83, 217, 255, 0.34);
}

/* 7) Chips detonadores — CYAN (critico rojo ya existente) */
.activation-case-chip {
  background: linear-gradient(180deg, rgba(8, 36, 53, 0.9) 0%, rgba(6, 22, 34, 0.96) 100%);
  border-color: rgba(83, 217, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(198, 236, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 30, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 12px rgba(83, 217, 255, 0.18);
}

.activation-case-chip:hover {
  border-color: rgba(149, 230, 255, 0.96);
  background: linear-gradient(180deg, rgba(12, 44, 62, 0.92) 0%, rgba(7, 26, 38, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(212, 242, 255, 0.14), inset 0 -8px 14px rgba(5, 19, 34, 0.54), 0 0 16px rgba(83, 217, 255, 0.24);
}

/* ═════════════════════════════════════════════════════════════════════════
   CLONACION VISUAL WARROOM — BARRA, HERO, PILLS, CARDS
   ═════════════════════════════════════════════════════════════════════════ */
.wcor-gateway-body {
  background: #000000;
  color: #d9e6ff;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
}

.wcor-gateway-body::before,
.wcor-gateway-body::after,
.wcor-block::before,
.block-2::before,
.block-objective::before,
.block-briefing::before,
.block-reconduction::before,
.block-6::before {
  display: none !important;
}

.wcor-gateway-container {
  width: min(1400px, 94%);
  max-width: 1200px;
  margin: 28px auto;
  padding: 24px;
}

.wr-topbar.pd-topbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9, 24, 40, 0.92) 0%, rgba(6, 17, 30, 0.96) 100%);
  border: 1px solid rgba(65, 181, 241, 0.28);
  box-shadow: 0 0 20px rgba(44, 162, 236, 0.1), inset 0 0 0 1px rgba(100, 200, 255, 0.06);
}

/* ES/EN empujado al extremo derecho dentro de top-actions */
.wcor-lang-right {
  margin-left: auto;
}

/* BANDA DE MARCA WCOR */
.wcor-brand-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: nowrap;
  padding: 14px 24px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9, 24, 40, 0.92) 0%, rgba(6, 17, 30, 0.96) 100%);
  border: 1px solid rgba(65, 181, 241, 0.28);
  box-shadow: 0 0 20px rgba(44, 162, 236, 0.1), inset 0 0 0 1px rgba(100, 200, 255, 0.06);
}

.wcor-band-side-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  text-decoration: none;
}

.wcor-band-side-link::after {
  content: "Ver ciclo operacional WCOR completo";
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.32;
  font-weight: 500;
  color: rgba(208, 236, 255, 0.94);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 0 8px rgba(83, 217, 255, 0.2);
  white-space: nowrap;
}

.wcor-band-side-image {
  display: block;
  width: clamp(90px, 9.5vw, 130px);
  max-width: 130px;
  min-width: 90px;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  opacity: 0.88;
  filter: saturate(0.82) brightness(0.94);
  border: 1px solid rgba(83, 217, 255, 0.22);
  box-shadow: 0 0 12px rgba(83, 217, 255, 0.1);
}

.wcor-band-logo {
  display: block;
  width: min(190px, 22%);
  min-width: 120px;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #d9e6ff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-meta {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin-right: 4px;
}

.brand-ecosystem-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(83, 217, 255, 0.35);
  line-height: 1.1;
  white-space: nowrap;
  user-select: none;
}

.brand-capa-marker {
  font-size: calc(0.58rem + 7px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 174, 72, 0.82);
  line-height: 1.1;
  white-space: nowrap;
  user-select: none;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
}

.layer-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-icon--incident::before  { content: "⦿ "; }
.nav-icon--warroom::before   { content: "◈ "; }
.nav-icon--performance::before { content: "▥ "; }
.nav-icon--cabina::before    { content: "⛨ "; }

.layer-link {
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.87rem;
  border: 1px solid #2a3f5a;
  color: #d7e3ff;
  background: rgba(12, 19, 33, 0.85);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.layer-link:hover {
  text-decoration: none;
  border-color: rgba(83, 217, 255, 0.35);
  box-shadow: 0 0 8px rgba(83, 217, 255, 0.15);
  color: #ffffff;
}

.layer-link.layer-link-incident {
  border-color: rgba(255, 61, 87, 0.30);
  color: #d8a0aa;
  background: rgba(45, 8, 14, 0.72);
  opacity: 0.82;
}

.layer-link.layer-link-incident:hover {
  opacity: 1;
  border-color: rgba(255, 61, 87, 0.65);
  box-shadow: 0 0 14px rgba(255, 61, 87, 0.42);
  color: #ffd1d8;
}

.layer-link.active {
  border-color: rgba(255, 190, 85, 0.92);
  color: #ffe8c0;
  background: rgba(62, 42, 8, 0.95);
  box-shadow: 0 0 22px rgba(255, 190, 85, 0.55), 0 0 6px rgba(255, 190, 85, 0.30);
  opacity: 1;
}

.layer-link.layer-link-performance {
  border-color: rgba(83, 217, 255, 0.26);
  color: #8fb8d0;
  background: rgba(6, 22, 34, 0.72);
  opacity: 0.80;
}

.layer-link.layer-link-performance:hover {
  opacity: 1;
  border-color: rgba(83, 217, 255, 0.65);
  box-shadow: 0 0 12px rgba(83, 217, 255, 0.32);
  color: #c6eeff;
}

.layer-link.layer-link-cabina {
  border-color: rgba(67, 219, 124, 0.26);
  color: #8ec8a8;
  background: rgba(6, 30, 16, 0.72);
  opacity: 0.80;
}

.layer-link.layer-link-cabina:hover {
  opacity: 1;
  border-color: rgba(67, 219, 124, 0.65);
  box-shadow: 0 0 12px rgba(67, 219, 124, 0.32);
  color: #c5ffd8;
}

.pd-top-actions,
.wr-top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.pd-link,
.wr-back {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(78, 168, 255, 0.22);
  background: rgba(8, 14, 22, 0.70);
  color: #8eaac8;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: all 0.2s ease;
  opacity: 0.85;
}

.pd-link:hover,
.wr-back:hover {
  opacity: 1;
  border-color: rgba(83, 217, 255, 0.45);
  text-decoration: none;
  color: #c4dcf5;
  box-shadow: 0 0 10px rgba(83, 217, 255, 0.15);
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  letter-spacing: 0.045em;
  line-height: 1.18;
}

.wr-lang-switch {
  display: flex;
  border: 1px solid rgba(90, 170, 225, 0.32);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(115, 198, 248, 0.06);
}

.gateway-mini-card {
  display: inline-grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
  width: min(260px, 100%);
  padding: 6px 8px;
  border: 1px solid rgba(78, 168, 255, 0.4);
  border-radius: 10px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(7, 26, 44, 0.8), rgba(6, 19, 33, 0.88));
  box-shadow: 0 8px 18px rgba(0, 8, 18, 0.34), 0 0 12px rgba(44, 162, 236, 0.14);
  transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, transform 170ms ease;
}

.gateway-mini-card:hover {
  border-color: rgba(124, 216, 255, 0.68);
  box-shadow: 0 10px 20px rgba(0, 8, 18, 0.38), 0 0 16px rgba(53, 216, 255, 0.2);
  background: linear-gradient(180deg, rgba(9, 32, 54, 0.86), rgba(7, 24, 40, 0.92));
  transform: translateY(-1px);
}

.gateway-mini-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(103, 205, 255, 0.5);
  object-fit: cover;
  box-shadow: 0 0 10px rgba(51, 213, 255, 0.16);
}

.gateway-mini-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.gateway-mini-title {
  color: #c8edff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.gateway-mini-subtitle {
  color: #8ebedb;
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.wr-lang-btn {
  padding: 8px 11px;
  border: 0;
  border-radius: 0;
  font-size: 0.82rem;
  font-weight: 700;
  background: #0a1218;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}

.wr-lang-btn.active {
  background: linear-gradient(180deg, rgba(29, 140, 70, 0.92) 0%, rgba(19, 98, 48, 0.96) 100%);
  border-color: rgba(103, 232, 141, 0.84);
  box-shadow: 0 0 14px rgba(86, 228, 131, 0.3), inset 0 0 0 1px rgba(194, 255, 211, 0.24);
  color: #ffffff;
}

.wr-lang-btn.inactive {
  background: linear-gradient(180deg, rgba(102, 29, 29, 0.9) 0%, rgba(72, 20, 20, 0.94) 100%);
  border-color: rgba(165, 74, 74, 0.74);
  box-shadow: 0 0 10px rgba(190, 72, 72, 0.2), inset 0 0 0 1px rgba(255, 157, 157, 0.08);
  color: #ffffff;
  opacity: 0.88;
}

.wcor-block {
  background: linear-gradient(180deg, #0a1218, #0f1825);
  border: 1px solid #2a3f5a;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(4, 10, 20, 0.4);
  margin-bottom: 18px;
}

.block-inner {
  padding: 15px 16px;
}

.block-1 {
  border-color: rgba(78, 168, 255, 0.5);
  box-shadow: 0 0 18px rgba(83, 217, 255, 0.12), 0 10px 24px rgba(4, 10, 20, 0.4);
}

.hero-warroom-content {
  min-width: 0;
}

.warroom-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px 0;
}

.warroom-title-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.wr-title {
  margin: 0;
  font-size: 1.74rem;
  font-weight: 700;
  letter-spacing: var(--wcor-title-tracking);
  line-height: 1.12;
  color: #d9e6ff;
}

.wr-subtitle {
  margin: 4px 0 0 0;
  font-size: 1.01rem;
  line-height: var(--wcor-subtitle-line);
  color: #9fb0c9;
  max-width: 72ch;
}

.wr-product-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid #2a3f5a;
  border-radius: 6px;
  background: rgba(7, 12, 24, 0.75);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.wr-product-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wr-product-chip-label {
  color: #ffbe55;
  min-width: 62px;
  font-size: 0.74rem;
  letter-spacing: var(--wcor-label-tracking);
  font-weight: 700;
}

.wr-product-chip-value {
  color: #d9e6ff;
}

.wr-product-chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #37b36f;
  box-shadow: 0 0 7px rgba(55, 179, 111, 0.5);
  margin-right: 4px;
}

.wr-command-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 12px;
  margin-bottom: 0;
}

.analysis-command-strip {
  padding: 0;
}

.wr-command-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #4e6f60;
  border-radius: 999px;
  background: rgba(15, 34, 28, 0.75);
  color: #d9e6ff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.wr-command-link:hover {
  text-decoration: none;
  border-color: #7ea18f;
  background: rgba(20, 42, 35, 0.88);
}

.wr-command-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.wr-command-dot--ok {
  background: #37b36f;
  box-shadow: 0 0 8px rgba(55, 179, 111, 0.45);
}

.wr-command-dot--warn {
  background: #d8a84e;
  box-shadow: 0 0 8px rgba(216, 168, 78, 0.45);
}

.wr-command-dot--gate {
  background: #4f6f5d;
  box-shadow: 0 0 8px rgba(146, 105, 131, 0.34);
}

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — MOBILE
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .wcor-gateway-container {
    padding: 20px 16px;
  }

  .block-inner {
    padding: 16px;
  }

  .context-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .context-activation {
    margin-top: 12px;
    padding-top: 10px;
  }

  .activation-case-chip {
    font-size: 15px;
    padding: 8px 12px;
  }

  .context-open-case-input {
    min-height: 88px;
    font-size: 16px;
  }

  .obj-path {
    padding: 10px 12px;
  }

  .gateway-input-objective {
    font-size: 18px;
    min-height: 60px;
  }

  .gateway-textarea {
    min-height: 180px;
    font-size: 18px;
  }

  .gateway-cta {
    min-width: 100%;
    max-width: 100%;
    padding: 14px 16px;
    min-height: 56px;
  }

  .gateway-select,
  .objective-guided-select {
    font-size: 18px;
  }

  .wr-topbar.pd-topbar {
    align-items: flex-start;
  }

  .wr-top-actions,
  .pd-top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .gateway-mini-card {
    width: min(250px, 100%);
  }

  .wcor-brand-band {
    gap: 12px;
    padding: 10px 16px;
  }

  .wcor-band-logo {
    width: min(160px, 38%);
  }

  .wcor-band-side-image {
    width: clamp(80px, 24vw, 110px);
    min-width: 80px;
  }

  .wcor-band-side-link::after {
    font-size: 13px;
    margin-top: 5px;
  }

  .wr-command-strip {
    gap: 8px;
    padding: 10px;
  }

  .wr-command-link {
    font-size: 0.82rem;
    padding: 6px 10px;
  }

  .wcor-context-grid {
    grid-template-columns: 1fr;
  }

  .wcor-context-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .wcor-gateway-container {
    padding: 16px 12px;
  }

  .block-inner {
    padding: 14px;
  }

  .block-title {
    font-size: 20px;
  }

  .block-subtitle {
    font-size: 15px;
  }

  .block-label {
    font-size: 14px;
  }

  .gateway-cta {
    min-width: 100%;
    max-width: 100%;
    font-size: 16px;
    padding: 12px 16px;
    min-height: 48px;
  }

  .brand-link {
    width: 100%;
  }

  .brand-meta {
    width: 100%;
  }

  .layer-nav {
    width: 100%;
  }

  .wr-lang-switch {
    margin-left: auto;
  }

  .gateway-mini-card {
    width: 100%;
    max-width: 100%;
  }

  .wcor-brand-band {
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
  }

  .wcor-band-logo {
    order: 1;
    flex: 0 1 100%;
    width: min(140px, 52%);
    margin: 0 auto;
  }

  .wcor-band-side-image-left {
    order: 2;
  }

  .wcor-band-side-link {
    order: 3;
  }

  .wcor-band-side-image {
    width: clamp(78px, 32vw, 102px);
    min-width: 78px;
  }

  .wcor-band-side-link::after {
    max-width: 150px;
    white-space: normal;
    line-height: 1.26;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ═════════════════════════════════════════════════════════════════════════ */

/* Aumentar contraste para validación WCAG AA */
.gateway-input,
.gateway-select,
.objective-guided-select,
.gateway-textarea {
  color: var(--color-text-primary);
}

/* Focus visible para navegación por teclado */
.gateway-input:focus-visible,
.gateway-select:focus-visible,
.objective-guided-select:focus-visible,
.gateway-textarea:focus-visible,
.gateway-cta:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .gateway-input,
  .gateway-select,
  .objective-guided-select,
  .gateway-textarea {
    border-width: 2px;
  }

  .block-label {
    font-weight: var(--font-weight-semibold);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .gateway-input,
  .gateway-select,
  .objective-guided-select,
  .gateway-textarea,
  .gateway-cta {
    transition: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   OVERRIDE FINAL MAPA COGNITIVO (PRIORIDAD DE CASCADA)
   ═════════════════════════════════════════════════════════════════════════ */

.wcor-block.block-2 {
  border-color: rgba(83, 217, 255, 0.62) !important;
  background: linear-gradient(180deg, rgba(8, 24, 34, 0.94) 0%, rgba(6, 16, 26, 0.98) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.14), 0 12px 28px rgba(2, 8, 16, 0.44), 0 0 18px rgba(83, 217, 255, 0.22) !important;
}

.wcor-block.block-objective {
  border-color: rgba(83, 217, 255, 0.62) !important;
  background: linear-gradient(180deg, rgba(8, 24, 34, 0.94) 0%, rgba(6, 16, 26, 0.98) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.14), inset 0 0 24px rgba(83, 217, 255, 0.08), 0 16px 32px rgba(2, 8, 16, 0.5), 0 0 18px rgba(83, 217, 255, 0.2) !important;
}

.wcor-block.block-briefing {
  border-color: rgba(67, 219, 124, 0.58) !important;
  background: linear-gradient(180deg, rgba(10, 30, 20, 0.9) 0%, rgba(8, 20, 14, 0.96) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(67, 219, 124, 0.12), inset 0 0 22px rgba(67, 219, 124, 0.08), 0 16px 32px rgba(2, 8, 16, 0.5), 0 0 18px rgba(67, 219, 124, 0.18) !important;
}

.wcor-block.block-reconduction {
  border-color: rgba(83, 217, 255, 0.34) !important;
  background: linear-gradient(180deg, rgba(10, 20, 30, 0.84) 0%, rgba(8, 16, 24, 0.9) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.08), 0 12px 24px rgba(2, 7, 14, 0.38), 0 0 12px rgba(83, 217, 255, 0.1) !important;
}

.wcor-block.block-6 {
  border-color: rgba(83, 217, 255, 0.64) !important;
  background: linear-gradient(180deg, rgba(8, 24, 34, 0.9) 0%, rgba(6, 16, 26, 0.95) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.16), 0 18px 38px rgba(2, 7, 14, 0.5), 0 0 20px rgba(83, 217, 255, 0.2) !important;
}

.block-6 .gateway-cta {
  animation: none !important;
  color: #eaf8ff !important;
  background: linear-gradient(180deg, rgba(88, 208, 255, 0.94) 0%, rgba(34, 148, 218, 0.98) 100%) !important;
  border-color: rgba(138, 226, 255, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(226, 248, 255, 0.24), inset 0 -14px 24px rgba(10, 56, 92, 0.46), 0 16px 32px rgba(1, 4, 8, 0.58), 0 0 20px rgba(83, 217, 255, 0.3) !important;
}

.block-6 .gateway-cta .cta-icon {
  color: #f2fbff !important;
}

.block-6 .gateway-cta:hover,
.block-6 .gateway-cta:focus {
  border-color: rgba(176, 236, 255, 0.98) !important;
  box-shadow: inset 0 1px 0 rgba(236, 252, 255, 0.3), inset 0 -14px 24px rgba(12, 64, 104, 0.5), 0 0 22px rgba(83, 217, 255, 0.34) !important;
}

/* ---------------------------------------------------------------------------
   WCOR HERO VISUAL � INTEGRACI�N MINIATURA OPERACIONAL
   --------------------------------------------------------------------------- */

/* Flex layout para contenido hero con miniatura a la derecha */
.hero-warroom-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.wcor-hero-content-left {
  flex: 1;
  min-width: 0;
}

.wcor-hero-content-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Link para la miniatura */
.wcor-hero-visual-link {
  display: inline-block;
  border-radius: 12px;
  border: 1px solid rgba(42, 199, 255, 0.45);
  overflow: hidden;
  box-shadow: 0 0 10px rgba(42, 199, 255, 0.18), 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: border-color 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}

.wcor-hero-visual-link:hover {
  border-color: rgba(88, 185, 255, 0.7);
  box-shadow: 0 0 16px rgba(88, 185, 255, 0.32), 0 8px 20px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(88, 185, 255, 0.2);
}

/* Miniatura */
.wcor-hero-thumb {
  display: block;
  width: 220px;
  height: auto;
  max-height: 132px;
  object-fit: cover;
  object-position: center;
  border-radius: 11px;
}

.wcor-hero-thumb-caption {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(190, 225, 255, 0.86);
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(42, 199, 255, 0.28);
}

/* Responsive: En pantallas peque�as, colocar miniatura debajo */
@media (max-width: 768px) {
  .hero-warroom-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .wcor-hero-content-right {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .wcor-hero-thumb {
    width: 100%;
    max-width: 220px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   CAPA INTERPRETATIVA: tarjeta miniatura de acceso al simulador
   ───────────────────────────────────────────────────────────────────────── */
.wcor-cognitive-card {
  margin: 22px 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(88, 185, 255, 0.3);
  background: linear-gradient(155deg, rgba(7, 18, 34, 0.94) 0%, rgba(12, 32, 58, 0.92) 58%, rgba(9, 20, 40, 0.95) 100%);
  box-shadow: 0 14px 32px rgba(0, 8, 18, 0.45), inset 0 0 0 1px rgba(136, 206, 255, 0.08);
  overflow: hidden;
}

.wcor-cognitive-card.is-hidden {
  display: none;
}

.wcor-cognitive-card.is-active {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   PANEL: EXPLORAR RESULTADO DEL ANÁLISIS
   ───────────────────────────────────────────────────────────────────────── */

.analysis-layers-panel {
  /* Oculto por defecto; se revela via body.gateway-runtime-active */
  display: none;
  opacity: 0;
  margin-top: var(--spacing-block-gap);
  margin-bottom: var(--spacing-padding-external);
  border-radius: 16px;
  border: 1px solid rgba(83, 217, 255, 0.32);
  background: linear-gradient(180deg, rgba(8, 22, 36, 0.92) 0%, rgba(6, 14, 26, 0.96) 100%);
  box-shadow: 0 16px 36px rgba(2, 7, 14, 0.46), inset 0 0 0 1px rgba(83, 217, 255, 0.08), 0 0 18px rgba(83, 217, 255, 0.12);
  overflow: hidden;
}

body.gateway-runtime-active .analysis-layers-panel {
  display: block;
  animation: layers-panel-fadein 500ms ease 200ms both;
}

@keyframes layers-panel-fadein {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.analysis-layers-inner {
  padding: 20px 18px 16px;
}

.analysis-layers-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(83, 217, 255, 0.9);
  margin-bottom: 6px;
}

.analysis-layers-subtitle {
  font-size: calc(0.84rem + 2px);
  font-weight: 500;
  color: #b8d4f0;
  line-height: 1.5;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(83, 217, 255, 0.18);
}


.wcor-cognitive-card-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  position: relative;
}

.wcor-cognitive-media {
  border-radius: 12px;
  border: 1px solid rgba(112, 199, 255, 0.35);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(2, 13, 28, 0.5);
}

.wcor-cognitive-thumb {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  object-position: center;
}

.wcor-cognitive-copy h2 {
  margin: 0;
  color: #e8f7ff;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}

.wcor-open-simulator {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid rgba(122, 214, 255, 0.58);
  background: linear-gradient(180deg, rgba(50, 176, 255, 0.38) 0%, rgba(19, 108, 186, 0.48) 100%);
  color: #f2fbff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.wcor-open-simulator:hover {
  border-color: rgba(172, 233, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(95, 203, 255, 0.18), 0 8px 18px rgba(3, 18, 34, 0.5);
}

.wcor-cognitive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.wcor-cognitive-actions .wcor-open-simulator {
  margin-top: 0;
}

.wcor-open-simulator--secondary {
  min-width: 176px;
  text-align: center;
}

.wcor-cognitive-note {
  margin: 10px 0 0;
  color: rgba(214, 237, 255, 0.86);
  font-size: 0.84rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .wcor-cognitive-card-inner {
    grid-template-columns: 1fr;
    padding-top: 38px;
  }

  .wcor-cognitive-thumb {
    height: 170px;
  }

}

/* ---------------------------------------------------------------------------
   FASE GATEWAY V3 — IMPREGNACION COGNITIVA CONTROLADA (sin cambio estructural)
   --------------------------------------------------------------------------- */

.wcor-gateway-body {
  --domain-core: rgba(83, 217, 255, 0.68);
  --domain-glow: rgba(83, 217, 255, 0.2);
  --domain-soft: rgba(83, 217, 255, 0.12);
  --domain-select-border: rgba(84, 214, 255, 0.76);
  --domain-select-glow: rgba(84, 214, 255, 0.2);
  --pill-tone-a: rgba(8, 36, 53, 0.92);
  --pill-tone-b: rgba(6, 22, 34, 0.98);
  --pill-border: rgba(83, 217, 255, 0.72);
  --pill-glow: rgba(83, 217, 255, 0.18);
  --pill-hot: rgba(83, 217, 255, 0.24);
  --pill-warm: rgba(83, 217, 255, 0.14);
  --pill-cool: rgba(83, 217, 255, 0.1);
}

.wcor-gateway-body[data-domain='educativo'] {
  --domain-core: rgba(63, 216, 255, 0.72);
  --domain-glow: rgba(63, 216, 255, 0.24);
  --domain-soft: rgba(63, 216, 255, 0.14);
  --domain-select-border: rgba(99, 224, 255, 0.84);
  --domain-select-glow: rgba(63, 216, 255, 0.24);
  --pill-tone-a: rgba(12, 46, 64, 0.92);
  --pill-tone-b: rgba(8, 29, 43, 0.98);
  --pill-border: rgba(95, 220, 255, 0.78);
  --pill-glow: rgba(63, 216, 255, 0.2);
  --pill-hot: rgba(63, 216, 255, 0.3);
  --pill-warm: rgba(63, 216, 255, 0.2);
  --pill-cool: rgba(63, 216, 255, 0.12);
}

.wcor-gateway-body[data-domain='incidente'] {
  --domain-core: rgba(255, 90, 108, 0.7);
  --domain-glow: rgba(255, 90, 108, 0.24);
  --domain-soft: rgba(255, 90, 108, 0.14);
  --domain-select-border: rgba(255, 120, 134, 0.84);
  --domain-select-glow: rgba(255, 90, 108, 0.22);
  --pill-tone-a: rgba(61, 16, 24, 0.92);
  --pill-tone-b: rgba(36, 10, 15, 0.98);
  --pill-border: rgba(255, 110, 122, 0.78);
  --pill-glow: rgba(255, 90, 108, 0.2);
  --pill-hot: rgba(255, 106, 120, 0.28);
  --pill-warm: rgba(255, 106, 120, 0.18);
  --pill-cool: rgba(255, 106, 120, 0.1);
}

.wcor-gateway-body[data-domain='organizacional'] {
  --domain-core: rgba(74, 141, 255, 0.7);
  --domain-glow: rgba(74, 141, 255, 0.22);
  --domain-soft: rgba(74, 141, 255, 0.12);
  --domain-select-border: rgba(109, 163, 255, 0.84);
  --domain-select-glow: rgba(74, 141, 255, 0.22);
  --pill-tone-a: rgba(14, 42, 82, 0.92);
  --pill-tone-b: rgba(9, 26, 52, 0.98);
  --pill-border: rgba(104, 160, 255, 0.76);
  --pill-glow: rgba(74, 141, 255, 0.2);
  --pill-hot: rgba(104, 160, 255, 0.27);
  --pill-warm: rgba(104, 160, 255, 0.16);
  --pill-cool: rgba(104, 160, 255, 0.1);
}

.wcor-gateway-body[data-domain='infraestructura'] {
  --domain-core: rgba(85, 214, 163, 0.68);
  --domain-glow: rgba(85, 214, 163, 0.22);
  --domain-soft: rgba(85, 214, 163, 0.12);
  --domain-select-border: rgba(115, 228, 182, 0.82);
  --domain-select-glow: rgba(85, 214, 163, 0.2);
  --pill-tone-a: rgba(10, 48, 34, 0.92);
  --pill-tone-b: rgba(7, 30, 22, 0.98);
  --pill-border: rgba(106, 224, 176, 0.76);
  --pill-glow: rgba(85, 214, 163, 0.18);
  --pill-hot: rgba(106, 224, 176, 0.26);
  --pill-warm: rgba(106, 224, 176, 0.16);
  --pill-cool: rgba(106, 224, 176, 0.1);
}

.wcor-gateway-body[data-domain='linkedin'] {
  --domain-core: rgba(255, 179, 71, 0.7);
  --domain-glow: rgba(255, 179, 71, 0.22);
  --domain-soft: rgba(255, 179, 71, 0.12);
  --domain-select-border: rgba(255, 194, 104, 0.84);
  --domain-select-glow: rgba(255, 179, 71, 0.2);
  --pill-tone-a: rgba(66, 39, 9, 0.92);
  --pill-tone-b: rgba(40, 24, 6, 0.98);
  --pill-border: rgba(255, 192, 100, 0.76);
  --pill-glow: rgba(255, 179, 71, 0.18);
  --pill-hot: rgba(255, 192, 100, 0.26);
  --pill-warm: rgba(255, 192, 100, 0.16);
  --pill-cool: rgba(255, 192, 100, 0.1);
}

.block-2 {
  border-color: var(--domain-core) !important;
  box-shadow: inset 0 0 0 1px var(--domain-soft), 0 12px 28px rgba(2, 8, 16, 0.44), 0 0 18px var(--domain-glow) !important;
}

.block-2::before {
  background: var(--domain-core) !important;
  box-shadow: 0 0 14px var(--domain-glow), 0 0 26px rgba(255, 255, 255, 0.06) !important;
}

.gateway-select {
  border-color: var(--domain-select-border) !important;
  box-shadow: inset 0 1px 0 rgba(200, 232, 255, 0.08), inset 0 -10px 18px rgba(1, 7, 13, 0.6), 0 0 0 1px rgba(5, 16, 28, 0.7), 0 0 14px var(--domain-select-glow) !important;
}

.gateway-select:hover,
.gateway-select:focus {
  box-shadow: inset 0 1px 0 rgba(208, 237, 255, 0.12), inset 0 -10px 18px rgba(2, 8, 15, 0.62), 0 0 0 1px rgba(8, 20, 34, 0.74), 0 0 18px var(--domain-select-glow) !important;
}

.activation-case-chip {
  background: linear-gradient(180deg, var(--pill-tone-a) 0%, var(--pill-tone-b) 100%) !important;
  border-color: var(--pill-border) !important;
  box-shadow: inset 0 1px 0 rgba(198, 236, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 30, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 12px var(--pill-glow) !important;
}

.activation-case-chip:nth-child(1) {
  box-shadow: inset 0 1px 0 rgba(198, 236, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 30, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 16px var(--pill-hot) !important;
}

.activation-case-chip:nth-child(2) {
  box-shadow: inset 0 1px 0 rgba(198, 236, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 30, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 13px var(--pill-warm) !important;
}

.activation-case-chip:nth-child(3) {
  box-shadow: inset 0 1px 0 rgba(198, 236, 255, 0.12), inset 0 -8px 14px rgba(4, 16, 30, 0.5), 0 0 0 1px rgba(8, 24, 50, 0.56), 0 0 10px var(--pill-cool) !important;
}

.activation-case-chip.is-active {
  border-color: color-mix(in srgb, var(--pill-border) 82%, #ffffff 18%) !important;
  box-shadow: inset 0 1px 0 rgba(232, 247, 255, 0.16), inset 0 -8px 14px rgba(4, 16, 30, 0.58), 0 0 0 1px rgba(12, 28, 50, 0.62), 0 0 22px var(--pill-hot) !important;
}

.wcor-context-analyst {
  box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.09), inset 0 -12px 20px rgba(2, 10, 8, 0.34), 0 0 16px rgba(67, 219, 124, 0.16), 0 0 10px var(--domain-glow) !important;
}

.wcor-context-card {
  box-shadow: inset 0 1px 0 rgba(181, 236, 206, 0.06), inset 0 -12px 20px rgba(2, 8, 7, 0.3), 0 0 10px rgba(83, 217, 255, 0.1), 0 0 6px var(--domain-glow) !important;
}

.wcor-gateway-container {
  position: relative;
  transition: filter 340ms ease, transform 340ms ease;
}

.wcor-gateway-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(1200px 520px at 50% 18%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.45) 100%);
  transition: opacity 340ms ease;
}

.wcor-gateway-body.gateway-activating .wcor-gateway-container {
  filter: saturate(0.9) brightness(0.88);
  transform: scale(0.996);
}

.wcor-gateway-body.gateway-activating .wcor-gateway-container::after {
  opacity: 1;
}

.gateway-cta {
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-interaction), filter 280ms ease !important;
}

.gateway-cta.is-activating {
  filter: brightness(1.08) saturate(1.06);
  box-shadow: inset 0 1px 0 rgba(236, 252, 255, 0.3), inset 0 -14px 24px rgba(12, 64, 104, 0.5), 0 0 30px rgba(83, 217, 255, 0.4) !important;
}

.gateway-post-cta {
  animation: postCtaBreath 5.8s ease-in-out infinite;
}

.wcor-gateway-body.gateway-activating .gateway-post-cta {
  animation-duration: 2.2s;
}

@keyframes postCtaBreath {
  0%,
  100% {
    opacity: 0.78;
    text-shadow: 0 0 0 rgba(83, 217, 255, 0);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 11px rgba(83, 217, 255, 0.26);
  }
}

/* ---------------------------------------------------------------------------
   HEADER BUTTONS — Visual microcirugía (scoped, non-structural)
   - Applies border-radius, border-thickness, glow, padding, height, weight, spacing,
     hover and transition to header buttons only.
   - Colors mapped per request: HOME=green, BACK=performance blue, SIMULATOR=dark blue,
     GATEWAY=cyan institutional, ES=red, EN=green (language buttons use existing classes).
   ------------------------------------------------------------------------- */
.wcor-gateway-body .wr-topbar .nav-btn {
  border-radius: 10px;
  border: 2px solid transparent;
  padding: 6px 12px;
  height: 36px;
  min-height: 36px;
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: box-shadow 180ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
}

.wcor-gateway-body .wr-topbar .nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

/* HOME: verde */
#navHome {
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0,193,106,0.16);
  background: linear-gradient(180deg, rgba(0,193,106,0.06), rgba(0,193,106,0.02));
  color: #eafef0;
}

/* BACK TO FOUNDRY PORTFOLIO: amarillo/dorado institucional (Layer 1 accents) */
#navBack {
  border-color: var(--yellow);
  box-shadow: 0 0 14px rgba(215,169,62,0.18);
  background: linear-gradient(180deg, rgba(215,169,62,0.04), rgba(215,169,62,0.01));
  color: #fffaf0;
}

#navBack:hover {
  box-shadow: 0 10px 30px rgba(215,169,62,0.22), 0 0 22px rgba(215,169,62,0.14);
}

/* WCOR Operational Simulator: darker performance blue */
.wr-top-actions .nav-btn[href*="wcor-pipeline-viewer"] {
  border-color: #1e4b7c;
  box-shadow: 0 0 14px rgba(30,75,124,0.18);
  background: linear-gradient(180deg, rgba(30,75,124,0.06), rgba(11,21,40,0.02));
  color: #f0f8ff;
}

/* Gateway mini card: cyan institucional (keep layout but add glow/border thickness) */
.gateway-mini-card {
  border-radius: 10px;
  border: 2px solid var(--cyan);
  padding: 6px 10px;
  box-shadow: 0 0 14px var(--glow-cyan);
}
.gateway-mini-card:hover { box-shadow: 0 0 22px var(--glow-cyan); transform: translateY(-3px); }

/* Language buttons: keep existing active/inactive colors but normalize radius/padding */
.wcor-gateway-body .wr-lang-switch .wr-lang-btn {
  border-radius: 8px;
  padding: 6px 10px;
  height: 34px;
  font-weight: 800;
  transition: box-shadow 160ms ease, transform 140ms ease;
}
.wcor-gateway-body .wr-lang-switch .wr-lang-btn:hover { transform: translateY(-2px); }

/* Ensure header visuals are non-invasive on mobile */
@media (max-width: 768px) {
  .wcor-gateway-body .wr-topbar .nav-btn { padding: 6px 10px; height: 34px; }
  .gateway-mini-card { width: min(250px, 100%); }
}

/* ---------------------------------------------------------------------------
   ECOSYSTEM SECONDARY v2 - rich header component with SVG flows
   - Left: title, description, legend
   - Center: horizontal nodes with arrows and dotted cyan integration lines (SVG)
   - Right: OBSERVE / UNDERSTAND / DECIDE / GOVERN with descriptions
   ------------------------------------------------------------------------- */
.ecosystem-secondary {
  margin: 12px 0 20px;
  padding: 20px 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6,12,20,0.36), rgba(4,8,14,0.48));
  border: 1px solid rgba(83,217,255,0.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.48), 0 0 12px rgba(83,217,255,0.03);
}
.ecosystem-inner.v2 { display:flex; gap:18px; align-items:center; justify-content:space-between; }
.ecosystem-col { display:flex; flex-direction:column; }
.ecosystem-col-left.v2-left { flex: 0 0 240px; padding-right:16px; min-width:220px; }
.ecosystem-col-center.v2-center { flex: 1 1 1000px; display:flex; align-items:center; justify-content:center; min-width:640px; }
.ecosystem-col-right.v2-right { flex: 0 0 280px; padding-left:16px; min-width:240px; }

/* If left or right V2 columns are intentionally empty, hide them so the center map can fill the space */
.ecosystem-col-left.v2-left[aria-hidden="true"],
.ecosystem-col-right.v2-right[aria-hidden="true"] {
  display: none;
}

.ecosystem-left-title { font-weight:900; color: #ffffff; letter-spacing:0.6px; font-size:0.95rem; margin-bottom:6px; }
.ecosystem-left-desc { font-size:0.85rem; color:var(--color-text-secondary); margin-bottom:10px; line-height:1.2; }

.ecosystem-legend { display:flex; flex-direction:column; gap:8px; }
.legend-item { display:flex; gap:10px; align-items:center; }
.legend-swatch { width:18px; height:14px; border-radius:4px; display:inline-block; box-shadow: 0 2px 6px rgba(0,0,0,0.45); }
.legend-label { color:var(--color-text-secondary); font-weight:700; font-size:0.82rem; }
/* Legend chips: dark background, colored border and subtle glow - no solid fills */
.legend-swatch { background: rgba(7,16,26,0.78); border: 2px solid rgba(255,255,255,0.04); }
.swatch-orange { border-color: #FF9A3C; box-shadow: 0 0 14px rgba(255,154,60,0.08); }
.swatch-purple { border-color: #B56CFF; box-shadow: 0 0 14px rgba(181,108,255,0.08); }
.swatch-green { border-color: #5ED28E; box-shadow: 0 0 14px rgba(94,210,142,0.08); }
.swatch-cyan { border-color: #53D9FF; box-shadow: 0 0 14px rgba(83,217,255,0.08); }

.ecosystem-svg-wrap { width:100%; display:flex; align-items:center; justify-content:center; overflow: visible; }
.ecosystem-svg { max-height:280px; height:auto; width:100%; }

/* Ensure SVG text scales down slightly to avoid overlap */
.ecosystem-svg text { font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; dominant-baseline: middle; }

/* Provide minimum readable width for legend and step blocks */
.ecosystem-legend { min-width:180px; }
.v2-step { min-width:220px; }

/* Hide intermediate brand band to allocate space to the Ecosystem Map */
.wcor-brand-band { display: none !important; }

/* Steps (right column) */
.v2-steps { display:flex; flex-direction:column; gap:10px; }
.v2-step { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border-radius:10px; padding:10px 12px; border:1px solid rgba(255,255,255,0.03); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.v2-step .step-title { font-weight:900; color:#ffffff; font-size:0.92rem; margin-bottom:4px; }
.v2-step .step-desc { color:var(--color-text-secondary); font-size:0.8rem; line-height:1.15; }

/* Step borders & glows by intent */
.step-observe { border: 2px solid #53D9FF; box-shadow: 0 6px 20px rgba(83,217,255,0.06); }
.step-understand { border: 2px solid #B56CFF; box-shadow: 0 6px 20px rgba(181,108,255,0.06); }
.step-decide { border: 2px solid #FF9A3C; box-shadow: 0 6px 20px rgba(255,154,60,0.06); }
.step-govern { border: 2px solid #5ED28E; box-shadow: 0 6px 20px rgba(94,210,142,0.06); }

/* SVG node text color */
.ecosystem-svg text.node-text { fill: #eaf6ff; font-size: 14px; }

/* SVG nodes generic (ensure dark translucent fills) */
.ecosystem-svg rect.node { fill: rgba(7,16,26,0.78); }

/* Responsive: stack columns on narrow viewports */
@media (max-width: 980px) {
  .ecosystem-inner.v2 { flex-direction:column; align-items:flex-start; }
  .ecosystem-col-left.v2-left, .ecosystem-col-right.v2-right { width:100%; flex: 0 0 auto; }
  .ecosystem-col-center.v2-center { width:100%; margin:8px 0; }
  .ecosystem-svg { max-height:200px; }
}