/* ==========================================================================
   Seguridad Física · INTEGRACIÓN
   Usa del sitio: --bg, --blue, --cyan, .container, .eyebrow, .gradient, .lead
   y --header-height (lo define solutions-page.js).
   ========================================================================== */

/* El sitio usa overflow:hidden en <main>, que impide position:sticky.
   overflow:clip recorta igual pero sí permite sticky. */
.security-page main { overflow: clip; }

/* Encabezado: título a la izquierda, descripción a la derecha */
.etapas-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.etapas-heading h2 { max-width: 820px; }
.etapas-heading h2 .gradient { display: block; }
.etapas-heading .lead { margin-top: 0; }
@media (max-width: 800px) {
  .etapas-heading { grid-template-columns: 1fr; gap: 0; margin-bottom: 48px; }
  .etapas-heading .lead { margin-top: 24px; }
}

/* Trayectoria */
.etapas-section { position: relative; padding-block: 110px; }
.etapas { position: relative; --p: 0; }
.etapas-phases { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); margin-bottom: 30px; }
.etapas-phases span {
  grid-column: span var(--span);
  margin: 0 10px; padding-top: 14px;
  border-top: 1px solid #2b2e48;
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: #6e89a3;
  transition: color .5s, border-color .5s;
}
.etapas-phases b { font-weight: 400; color: #4f6580; margin-right: 10px; transition: color .5s; }
.etapas-phases span.is-on { color: #fff; border-color: var(--cyan); }
.etapas-phases span.is-on b { color: var(--cyan); }

.etapas-steps-wrap { position: relative; }
.etapas-track { position: absolute; left: calc(100% / 22); right: calc(100% / 22); top: 26px; height: 1px; background: #22324a; }
.etapas-track span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); transform: scaleX(var(--p)); transform-origin: left; }
.etapas-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.etapas-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; min-width: 0; }
.etapas-step-icon {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #050718; border: 1px solid #2b2e48;
  transition: border-color .5s, background-color .5s, box-shadow .5s;
}
.etapas-step-icon svg { width: 22px; height: 22px; fill: none; stroke: #56657f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.etapas-step-num { margin-top: 18px; font-size: .75rem; color: var(--cyan); letter-spacing: .08em; }
.etapas-step-label { margin-top: 6px; font-size: .85rem; line-height: 1.45; color: #dbe4f1; }
.etapas-step-num, .etapas-step-label { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s ease; }
.etapas-step.is-on .etapas-step-icon { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, #050718); }
.etapas-step.is-on .etapas-step-icon svg { stroke: #fff; }
.etapas-step.is-current .etapas-step-icon { box-shadow: 0 0 0 6px #00b0d11c, 0 0 26px -6px var(--cyan); }
.etapas-step.is-on .etapas-step-num, .etapas-step.is-on .etapas-step-label { opacity: 1; transform: none; }

/* Desktop: sección fija mientras la línea se llena */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .etapas-section.is-pinned { height: 280vh; padding: 0; }
  .etapas-section.is-pinned .etapas-pin {
    position: sticky; top: var(--header-height, 74px);
    height: calc(100vh - var(--header-height, 74px));
    display: flex; align-items: center;
  }
  .etapas-section.is-pinned .etapas-pin > .container { width: min(1200px, calc(100% - 96px)); }
}

/* Tablet / mobile: recorrido vertical */
@media (max-width: 1023px) {
  .etapas-phases { display: none; }
  .etapas-track { left: 26px; right: auto; top: 26px; bottom: 26px; width: 1px; height: auto; }
  .etapas-track span { background: linear-gradient(180deg, var(--blue), var(--cyan)); transform: scaleY(var(--p)); transform-origin: top; }
  .etapas-steps { grid-template-columns: 1fr; row-gap: 20px; }
  .etapas-step { display: grid; grid-template-columns: 52px 1fr; column-gap: 20px; align-items: center; text-align: left; padding: 0; }
  .etapas-step-icon { grid-row: 2 / span 2; }
  .etapas-step-num { margin-top: 0; align-self: end; }
  .etapas-step-label { margin-top: 0; align-self: start; font-size: .95rem; }
  .etapas-step[data-phase-start]::before {
    content: attr(data-phase-start);
    grid-column: 2; grid-row: 1;
    margin: 18px 0 8px;
    font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #6e89a3;
  }
  .etapas-step:first-child[data-phase-start]::before { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .etapas-step-num, .etapas-step-label { opacity: 1; transform: none; }
}/* Retos: restore the restrained editorial list, without arrows or scroll markers. */
.security-challenges .challenge-list{border-left:0;padding-left:0}.security-challenges .challenge-list li{opacity:1;min-height:0;padding:27px 0;gap:25px}.security-challenges .challenge-list li:before,.security-challenges .challenge-list li:after{display:none}.security-challenges .challenge-list li p{color:#c4cede}.security-challenges .challenge-list li span{color:#00b0d1}.security-challenges .challenge-visual{position:absolute;inset:0 calc((100% - 100vw)/2);width:auto;height:100%;opacity:.32;transform:none;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);z-index:-1}.challenge-visual img{width:100%;height:100%;object-fit:cover;max-width:none}.security-challenges{min-height:0}.security-challenges .security-heading{position:static}
.etapas{--blue:#0095E5;--cyan:#00B0D1}.etapas-step,.etapas-phases span{--phase:#0095E5}.etapas-step[data-phase="1"],.etapas-phases span:nth-child(2){--phase:#00B0D1}.etapas-step[data-phase="2"],.etapas-phases span:nth-child(3){--phase:#CD0298}.etapas-step[data-phase="3"],.etapas-phases span:nth-child(4){--phase:#FFB500}.etapas-phases span{letter-spacing:.08em}.etapas-phases span.is-on,.etapas-phases span.is-on b,.etapas-step-num{color:var(--phase)}.etapas-phases span.is-on{border-color:var(--phase)}.etapas-step.is-on .etapas-step-icon{border-color:var(--phase);background:color-mix(in srgb,var(--phase) 12%,#050718)}.etapas-step.is-on .etapas-step-icon svg{stroke:var(--phase)}.etapas-step.is-current .etapas-step-icon{box-shadow:0 0 0 5px color-mix(in srgb,var(--phase) 10%,transparent),0 0 24px -6px var(--phase)}.etapas-track span{transform:none;width:calc(var(--p)*100%);background:linear-gradient(90deg,#0095E5 0% 15%,#00B0D1 20% 55%,#CD0298 60% 75%,#FFB500 80% 100%);background-size:var(--track-width,1000px) 100%}.etapas-section{background:radial-gradient(ellipse at 15% 50%,#0688ff12,transparent 65%),radial-gradient(ellipse at 90% 60%,#da1fff0d,transparent 60%)}
@media(max-width:1023px){.etapas-track span{width:100%;height:calc(var(--p)*100%);transform:none;background:linear-gradient(180deg,#0095E5 0% 15%,#00B0D1 20% 55%,#CD0298 60% 75%,#FFB500 80% 100%);background-size:100% var(--track-height,1000px)}.etapas-step{grid-template-rows:auto auto auto}.etapas-step-num{grid-column:2;grid-row:2}.etapas-step-label{grid-column:2;grid-row:3}.etapas-step[data-phase-start]:before{color:var(--phase)}}
@media(max-width:800px){.security-challenges .challenge-visual{position:absolute;height:100%;inset:0 -20px;opacity:.24}.challenge-visual img{object-position:65% center}}
/* Ambient artwork stays behind the narrative; the challenge list stays clear. */
.security-challenges .challenge-visual{inset:0 auto 0 -8%;width:60%;height:100%;opacity:.22;mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 58%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 58%,transparent 100%)}
.security-challenges .challenge-visual img{object-fit:cover;object-position:42% center;mask-image:linear-gradient(transparent 0%,#000 22%,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0%,#000 22%,#000 72%,transparent 100%)}
.etapas-phases span.is-on{color:#fff}
@media(max-width:800px){.security-challenges .challenge-visual{left:-20px;top:0;bottom:auto;width:calc(100% + 40px);height:430px;opacity:.18;mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}.security-challenges .challenge-visual img{object-position:center;mask-image:linear-gradient(90deg,transparent,#000 20%,#000 70%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 70%,transparent)}.etapas-step.is-on[data-phase-start]:before{color:#fff}}