/* ==========================================================================
   Continuidad Operativa · NOC + MESA DE AYUDA (progressive disclosure)
   Usa del sitio: .section, .container, .eyebrow, .gradient, .lead, h2 (Poppins)
   Azul #0095E5 + cian #00B0D1 dominantes · violeta/fucsia solo como acento
   Desktop (≥1180px): recorrido horizontal · <1180px: timeline vertical
   Estados: .is-on = etapa ya recorrida · .is-active = etapa en el panel · .is-focus = hover/focus
   ========================================================================== */
.noc-section {
  --noc-blue: #0095e5; --noc-cyan: #00b0d1; --noc-fx: #cd0298; --noc-violet: #8a5cff;
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(ellipse 50% 40% at 50% 0%, #0095e512, transparent 70%), #00010e;
}
.noc-section::after {                         /* textura digital muy tenue abajo */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #0a6fc2 1px, transparent 1.6px) 0 0 / 14px 14px;
  opacity: .14;
  mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 100%, #000 10%, transparent 70%);
}
.noc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Encabezado + 24/7 (secundario) ---------- */
.noc-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.noc-heading .eyebrow { color: #fff; }
.noc-heading h2 .gradient { background-image: linear-gradient(90deg, #0688ff, #da1fff); }
.noc-heading .lead { max-width: 640px; margin-top: 22px; font-size: .98rem; line-height: 1.85; color: #aebed3; }

.noc-247 {
  margin: 0 0 6px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 14px;
  border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(135deg, #071834cc, #030a1dcc) padding-box,
    linear-gradient(90deg, #0095e540, #00b0d126 70%, #8a5cff73) border-box;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 18px -12px #0095e5;
}
.noc-247 strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: #fff; padding-right: 12px; border-right: 1px solid #ffffff1f; line-height: 1; }
.noc-247 span { font-size: .76rem; color: #a9b8cb; white-space: nowrap; }

/* ---------- Recorrido (desktop horizontal) ---------- */
.noc-flow {
  position: relative; margin-top: 56px;
  display: grid;
  grid-template-columns: 168px 34px repeat(4, minmax(0, 1fr)) 176px repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(74px, auto) 60px auto;
}
.noc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.noc-flow [data-node] { position: relative; z-index: 1; transition: opacity .35s ease; outline: none; }
.noc-flow [data-node]:focus-visible { outline: 1px solid var(--noc-cyan); outline-offset: 6px; border-radius: 14px; }
.noc-branches { display: contents; }

/* Puntos de entrada: compactos */
.noc-entry {
  display: flex; gap: 10px; align-items: center; padding: 9px 14px 9px 10px;
  border: 1px solid #0095e53d; border-radius: 14px;
  background: linear-gradient(135deg, #0a1b35cc, #040a1bcc);
}
.noc-entry--noc  { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 12px; }
.noc-entry--desk { grid-column: 1; grid-row: 3; align-self: start; margin-top: 12px; border-color: #cd029840; background: linear-gradient(135deg, #1a0d2ecc, #070818cc); }
.noc-entry-icon { flex: none; display: grid; }
.noc-entry-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--noc-cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.noc-entry--desk .noc-entry-icon svg { stroke: #e548bd; }
.noc-entry h3 { margin: 0; font-size: .8rem; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: #fff; }
.noc-entry h3 span { display: block; font-size: .74rem; font-weight: 400; letter-spacing: 0; color: #a9b8cb; }

/* Etapas: número + icono + nombre */
.noc-stage {
  grid-row: 1 / 4; display: grid; grid-template-rows: subgrid;
  justify-items: center; text-align: center; padding: 0 4px; cursor: pointer;
}
.noc-stage[data-node="s1"] { grid-column: 3; }  .noc-stage[data-node="s2"] { grid-column: 4; }
.noc-stage[data-node="s3"] { grid-column: 5; }  .noc-stage[data-node="s4"] { grid-column: 6; }
.noc-stage[data-node="s5"] { grid-column: 8; }  .noc-stage[data-node="s6"] { grid-column: 9; }
.noc-stage[data-node="s7"] { grid-column: 10; }
.noc-num { grid-row: 1; align-self: end; margin-bottom: 12px; font-size: 1.3rem; font-weight: 400; line-height: 1; color: #18507c; transition: color .4s, text-shadow .4s; }
.noc-node {
  grid-row: 2; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #0b1b36, #030817 72%);
  border: 1px solid #0095e53d;
  transition: border-color .4s, box-shadow .4s, transform .4s;
}
.noc-node svg { width: 24px; height: 24px; fill: none; stroke: #56708f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, filter .4s; }
.noc-text { grid-row: 3; margin-top: 14px; }
.noc-text h3 { margin: 0; font-size: .92rem; font-weight: 500; line-height: 1.3; color: #7f91a9; transition: color .4s; }

/* Rutas de escalamiento: pills secundarias */
.noc-branch {
  display: flex; align-items: center; gap: 8px; justify-self: center; padding: 5px 14px 5px 5px;
  border: 1px solid #8a5cff33; border-radius: 999px;
  background: linear-gradient(135deg, #120f30cc, #050819cc);
  transition: opacity .35s, border-color .4s, box-shadow .4s; cursor: pointer;
}
.noc-branch--experts { grid-column: 7; grid-row: 1; align-self: end; margin-bottom: 14px; }
.noc-branch--field   { grid-column: 7; grid-row: 3; align-self: start; margin-top: 14px; }
.noc-branch-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #8a5cff40; background: #070a1f; }
.noc-branch-icon svg { width: 15px; height: 15px; fill: none; stroke: #8492b5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.noc-branch h3 { margin: 0; font-size: .74rem; font-weight: 500; color: #b4bfd2; white-space: nowrap; }

/* ---------- Estados ---------- */
.noc-flow.is-armed .noc-entry { opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; }
.noc-flow.is-armed .noc-entry.is-on { opacity: 1; transform: none; }

/* Recorrida: intensidad media */
.noc-stage.is-on .noc-num { color: #0a74b8; }
.noc-stage.is-on .noc-node { border-color: #0095e580; }
.noc-stage.is-on .noc-node svg { stroke: #5aa9dc; }
.noc-stage.is-on h3 { color: #b6c3d4; }
.noc-branch.is-on { border-color: #8a5cff59; }
/* Activa / hover: intensidad completa */
.noc-stage.is-active .noc-num, .noc-stage.is-focus .noc-num { color: var(--noc-blue); text-shadow: 0 0 12px #0095e566; }
.noc-stage.is-active .noc-node, .noc-stage.is-focus .noc-node { border-color: var(--noc-cyan); box-shadow: 0 0 0 5px #00b0d10d, 0 0 24px -6px #00b0d1b3; transform: scale(1.04); }
.noc-stage.is-active .noc-node svg, .noc-stage.is-focus .noc-node svg { stroke: #8be6ff; filter: drop-shadow(0 0 4px #00b0d199); }
.noc-stage.is-active h3, .noc-stage.is-focus h3 { color: #fff; }
.noc-stage--escalate.is-active .noc-node, .noc-stage--escalate.is-focus .noc-node { border-color: #9d7bff; box-shadow: 0 0 0 5px #8a5cff12, 0 0 24px -6px #8a5cffcc; }
.noc-stage--escalate.is-active .noc-node svg, .noc-stage--escalate.is-focus .noc-node svg { stroke: #d6c8ff; filter: drop-shadow(0 0 4px #8a5cffaa); }
.noc-branch.is-active, .noc-branch.is-focus { border-color: #9d7bffb3; box-shadow: 0 0 18px -8px #8a5cffb3; }
.noc-branch.is-active .noc-branch-icon svg, .noc-branch.is-focus .noc-branch-icon svg { stroke: #d6c8ff; }
.noc-branch.is-active h3, .noc-branch.is-focus h3 { color: #fff; }

/* Hover / focus: los demás bajan un poco */
.noc-flow.is-hovering [data-node]:not(.is-focus) { opacity: .5; }

/* Líneas: base tenue · recorrida a media intensidad · tramo actual completo */
.noc-seg path { fill: none; vector-effect: non-scaling-stroke; }
.noc-seg-base { stroke: #0b4f80; stroke-opacity: .45; stroke-width: 1.4; }
.noc-seg-hi {
  stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .42;
  transition: stroke-dashoffset var(--dur, .8s) cubic-bezier(.45,0,.25,1), opacity .5s, stroke-width .3s;
  filter: drop-shadow(0 0 3px #00b0d1) drop-shadow(0 0 8px #0095e566);
}
.noc-seg.is-drawn .noc-seg-hi { stroke-dashoffset: 0; }
.noc-seg.is-current .noc-seg-hi { opacity: 1; }
.noc-seg.is-hot .noc-seg-hi { stroke-dashoffset: 0; opacity: 1; stroke-width: 2.4; transition-duration: .45s; }
.noc-flow.is-hovering .noc-seg:not(.is-hot) .noc-seg-hi { opacity: .18; }
.noc-flow.is-resetting .noc-seg-hi { opacity: 0; transition: opacity .6s; }

/* ---------- Panel contextual único ---------- */
.noc-panel {
  max-width: 660px; margin: 34px auto 0; padding: 18px 26px 20px;
  border: 1px solid #0095e533; border-radius: 16px;
  background: linear-gradient(135deg, #0a1a33a6, #040a1ba6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  min-height: 106px;
}
.noc-panel-head, .noc-panel-text { transition: opacity .24s ease, transform .24s ease; }
.noc-panel.is-swapping .noc-panel-head, .noc-panel.is-swapping .noc-panel-text { opacity: 0; transform: translateY(7px); }
.noc-panel-head { display: flex; align-items: baseline; gap: 14px; }
.noc-panel-num { font-size: .82rem; font-weight: 500; color: var(--noc-blue); letter-spacing: .06em; }
.noc-panel-title { font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.noc-panel-text { margin: 8px 0 0; font-size: .9rem; line-height: 1.7; color: #aab8cb; }

/* ---------- Banda inferior ---------- */
.noc-support {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #0095e529; border-radius: 18px;
  background: linear-gradient(180deg, #0a1a3359, #03081a59);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.noc-support li { display: flex; align-items: flex-start; gap: 16px; padding: 22px 28px; }
.noc-support li + li { border-left: 1px solid #ffffff12; }
.noc-support-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #0095e54d; background: #040b1d; }
.noc-support-icon svg { width: 21px; height: 21px; fill: none; stroke: var(--noc-blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.noc-support-icon--cyan { border-color: #00b0d14d; } .noc-support-icon--cyan svg { stroke: var(--noc-cyan); }
.noc-support-icon--violet { border-color: #8a5cff59; } .noc-support-icon--violet svg { stroke: #a88bff; }
.noc-support h3 { margin: 2px 0 0; font-size: .92rem; font-weight: 500; color: #fff; }
.noc-support p { margin: 6px 0 0; font-size: .8rem; line-height: 1.6; color: #9aabc2; }

/* ---------- Tablet y móvil: timeline vertical; el panel se coloca bajo la etapa seleccionada ---------- */
@media (max-width: 1179px) {
  .noc-header { grid-template-columns: 1fr; gap: 26px; }
  .noc-247 { justify-self: start; }
  .noc-flow {
    max-width: 680px; margin-top: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 14px;
  }
  .noc-entry--noc, .noc-entry--desk { grid-row: auto; align-self: stretch; margin: 0 0 54px; }
  .noc-entry--noc { grid-column: 1; } .noc-entry--desk { grid-column: 2; }
  .noc-stage, .noc-stage[data-node] {
    grid-column: 1 / -1; grid-row: auto;
    grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 20px; justify-items: start; align-items: center; text-align: left; padding: 0 0 34px;
  }
  .noc-num { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 4px; font-size: 1.05rem; }
  .noc-node { grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; }
  .noc-text { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
  .noc-text h3 { font-size: 1rem; }
  .noc-stage[data-node="s4"] { padding-bottom: 50px; }
  .noc-branch--experts, .noc-branch--field { grid-row: auto; align-self: center; justify-self: center; margin: 0 0 54px; }
  .noc-branch--experts { grid-column: 1; } .noc-branch--field { grid-column: 2; }
  .noc-stage[data-node="s7"] { padding-bottom: 0; }
  .noc-flow > .noc-panel { position: relative; z-index: 1; grid-column: 1 / -1; width: auto; max-width: none; margin: -18px 0 34px 76px; min-height: 0; padding: 14px 18px 16px; }
  .noc-support { grid-template-columns: 1fr; margin-top: 48px; }
  .noc-support li + li { border-left: 0; border-top: 1px solid #ffffff12; }
}
/* ---------- Tablet y móvil: lista secuencial sin líneas; el panel y las rutas de 04 van debajo de la etapa activa ---------- */
@media (max-width: 1179px) {
  .noc-lines { display: none; }
  .noc-flow { margin-top: 40px; }
  .noc-entry--noc, .noc-entry--desk { margin-bottom: 38px; }
  .noc-stage, .noc-stage[data-node], .noc-stage[data-node="s4"] { padding-bottom: 32px; }
  /* Sin estado "recorrido": solo la etapa activa se destaca */
  .noc-stage.is-on:not(.is-active):not(.is-focus) .noc-num { color: #18507c; }
  .noc-stage.is-on:not(.is-active):not(.is-focus) .noc-node { border-color: #0095e53d; }
  .noc-stage.is-on:not(.is-active):not(.is-focus) .noc-node svg { stroke: #56708f; }
  .noc-stage.is-on:not(.is-active):not(.is-focus) h3 { color: #7f91a9; }
  .noc-stage.is-active .noc-node, .noc-stage.is-focus .noc-node { box-shadow: 0 0 0 5px #00b0d112, 0 0 28px -4px #00b0d1cc; }
  .noc-flow > .noc-panel { margin: -14px 0 24px 76px; }
  /* Especialistas / Field Services: solo con 04 activo, en una fila bajo su panel */
  .noc-branches { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; margin: 0 0 32px 76px; }
  .noc-flow.is-esc .noc-branches { display: flex; animation: noc-in .26s ease both; }
  .noc-branch--experts, .noc-branch--field { margin: 0; justify-self: auto; padding-right: 12px; }
}
@media (max-width: 700px) {
  .noc-heading h2 { font-size: 2rem; }
  .noc-heading .lead { font-size: .9rem; }
  .noc-entry--noc, .noc-entry--desk { padding: 9px 10px; }
  .noc-entry h3 { font-size: .78rem; }
  .noc-stage, .noc-stage[data-node], .noc-stage[data-node="s4"] { grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; }
  .noc-node { width: 50px; height: 50px; }
  .noc-flow > .noc-panel { margin-left: 66px; }
  .noc-branches { margin-left: 66px; }
  .noc-panel-title { font-size: .8rem; letter-spacing: .1em; }
  .noc-panel-text { font-size: .86rem; }
  .noc-support li { padding: 20px; }
}
@keyframes noc-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .noc-flow > [data-node], .noc-node, .noc-node svg, .noc-num, .noc-text h3, .noc-seg-hi, .noc-panel-head, .noc-panel-text { transition: none; }
  .noc-panel.is-swapping .noc-panel-head, .noc-panel.is-swapping .noc-panel-text { opacity: 1; transform: none; }
  .noc-flow.is-esc .noc-branches { animation: none; }
}