/* =========================================================
   DN TECH — V44 / CÓMO TRABAJAMOS
   Estilos aislados de servicios-proceso.html
   ========================================================= */

.page-services-process {
  --prc-bg:#071522;
  --prc-panel:#0d2032;
  --prc-panel-2:#10283e;
  --prc-line:rgba(108,212,255,.14);
  --prc-line-strong:rgba(108,212,255,.28);
  --prc-text:#f5faff;
  --prc-muted:#a9c1d4;
  --prc-muted-2:#7897ad;
  background:var(--prc-bg);
  color:var(--prc-text);
}

.page-services-process .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1000;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.014) 44%,rgba(255,255,255,0) 100%),
    rgba(7,18,31,.58);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  backdrop-filter:blur(22px) saturate(155%);
  border-top:1px solid rgba(255,255,255,.028);
  border-bottom:1px solid rgba(112,205,246,.105);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 9px 30px rgba(0,0,0,.075);
}

.page-services-process .site-header.is-scrolled {
  background:
    linear-gradient(180deg,rgba(255,255,255,.042) 0%,rgba(255,255,255,.010) 46%,rgba(255,255,255,0) 100%),
    rgba(6,16,28,.76);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-bottom-color:rgba(105,201,243,.135);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),0 14px 38px rgba(0,0,0,.18);
}

.page-services-process .services-process-main { display:block; padding-top:0; background:var(--prc-bg); }

.prc-view {
  --prc-pointer-x:76%;
  --prc-pointer-y:18%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  padding:calc(var(--header-h) + 30px) 0 44px;
  background:
    radial-gradient(circle at 86% 13%,rgba(41,182,246,.13),transparent 26%),
    radial-gradient(circle at 12% 80%,rgba(22,119,255,.06),transparent 30%),
    linear-gradient(145deg,#06101d 0%,#0b1d30 100%);
}

.prc-view::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.095;
  background-image:linear-gradient(rgba(104,212,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.08) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 86%);
}

.prc-view::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(520px circle at var(--prc-pointer-x) var(--prc-pointer-y),rgba(80,207,255,.065),transparent 68%);
}

.prc-container { position:relative; }

.prc-breadcrumb {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 15px;
  color:#7899af;
  font-size:10px;
  font-weight:750;
}
.prc-breadcrumb-link { color:#95b5ca; transition:color .18s ease,transform .18s ease; }
.prc-breadcrumb-link:hover { color:#dff7ff; transform:translateX(-2px); }
.prc-breadcrumb-separator { color:#496b83; }
.prc-breadcrumb-current { color:#6f91a9; }

.prc-hero {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:stretch;
  margin-bottom:24px;
}

.prc-hero-copy {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:215px;
  padding:10px 0 4px;
}

.prc-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  margin-bottom:13px;
  color:#63d5ff;
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.prc-eyebrow-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#62d8ff;
  box-shadow:0 0 0 5px rgba(98,216,255,.08),0 0 18px rgba(98,216,255,.32);
}

.prc-title {
  margin:0 0 14px;
  color:#fff;
  font-size:clamp(42px,4.7vw,64px);
  line-height:.98;
  letter-spacing:-.047em;
}

.prc-intro {
  margin:0;
  max-width:760px;
  color:#b8ccdc;
  font-size:15.5px;
  line-height:1.72;
}

.prc-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:21px; }
.prc-actions .btn { min-height:44px; padding-inline:17px; font-size:11px; }
.prc-contact-button { color:#fff !important; box-shadow:0 12px 28px rgba(17,133,220,.18); }
.prc-price-button {
  color:#eef9ff !important;
  border-color:rgba(111,204,245,.24) !important;
  background:rgba(255,255,255,.04) !important;
}
.prc-price-button:hover {
  border-color:rgba(111,204,245,.42) !important;
  background:rgba(41,182,246,.085) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.04);
}
.prc-button-arrow { margin-left:5px; color:#d4f5ff; transition:transform .18s ease; }
.prc-actions a:hover .prc-button-arrow { transform:translateX(3px); }

.prc-expectations {
  position:relative;
  overflow:hidden;
  padding:18px 19px;
  border:1px solid rgba(108,212,255,.15);
  border-radius:24px;
  background:
    radial-gradient(260px circle at 18% 0%,rgba(75,202,255,.085),transparent 70%),
    linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 24px 54px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);
}

.prc-expectations-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:13px; }
.prc-expectations-dots { display:flex; gap:6px; }
.prc-expectations-dots span { width:8px; height:8px; border-radius:50%; background:#35516d; }
.prc-expectations-code { color:#5e8199; font-size:7px; font-weight:850; letter-spacing:.17em; }
.prc-expectations-kicker { display:block; margin-bottom:9px; color:#63d5ff; font-size:8.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.prc-expectations-list { display:grid; gap:8px; }
.prc-expectation {
  display:grid;
  grid-template-columns:31px 1fr;
  gap:10px;
  align-items:center;
  min-height:48px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.prc-expectation:hover { transform:translateY(-2px); border-color:rgba(108,212,255,.20); background:rgba(41,182,246,.045); }
.prc-expectation-icon {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:10px;
  color:#59e1b4;
  background:rgba(38,205,147,.07);
  border:1px solid rgba(87,226,181,.13);
  font-size:11px;
  font-weight:900;
}
.prc-expectation-copy { display:grid; gap:1px; }
.prc-expectation-copy strong { color:#edf8ff; font-size:10.5px; }
.prc-expectation-copy small { color:#7f9caf; font-size:8px; }

.prc-timeline {
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  padding-top:18px;
}

.prc-timeline-line {
  position:absolute;
  top:35px;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:linear-gradient(90deg,rgba(87,210,255,.18),rgba(87,210,255,.44),rgba(87,210,255,.18));
  transform-origin:left center;
  animation:prcLineReveal .7s cubic-bezier(.2,.72,.22,1) both;
}

.prc-step {
  --prc-card-x:50%;
  --prc-card-y:15%;
  position:relative;
  min-height:235px;
  padding:44px 18px 17px;
  border:1px solid rgba(108,212,255,.12);
  border-radius:20px;
  background:
    radial-gradient(250px circle at var(--prc-card-x) var(--prc-card-y),rgba(79,205,255,.055),transparent 68%),
    linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 18px 36px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.02);
  transition:transform .22s cubic-bezier(.2,.72,.22,1),border-color .22s ease,box-shadow .22s ease;
  animation:prcStepReveal .46s cubic-bezier(.2,.72,.22,1) both;
}
.prc-step:nth-of-type(2) { animation-delay:.06s; }
.prc-step:nth-of-type(3) { animation-delay:.12s; }
.prc-step:nth-of-type(4) { animation-delay:.18s; }
.prc-step:nth-of-type(5) { animation-delay:.24s; }
.prc-step:hover {
  transform:translateY(-4px);
  border-color:rgba(108,212,255,.27);
  box-shadow:0 24px 46px rgba(0,0,0,.17),0 0 28px rgba(41,182,246,.035),inset 0 1px 0 rgba(255,255,255,.03);
}

.prc-step-node {
  position:absolute;
  top:12px;
  left:50%;
  z-index:2;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-left:-23px;
  border:1px solid rgba(108,212,255,.24);
  border-radius:15px;
  color:#67d8ff;
  background:linear-gradient(145deg,#102b43,#071725);
  box-shadow:0 0 0 7px rgba(7,21,34,.92),0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
}
.prc-step-node span { font-size:10px; font-weight:900; letter-spacing:.08em; }
.prc-step-kicker { display:block; margin-bottom:5px; color:#61d4ff; font-size:7.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.prc-step-title { margin:0 0 7px; color:#f3f9fd; font-size:17px; line-height:1.28; letter-spacing:-.02em; }
.prc-step-copy { margin:0; color:#9eb8cb; font-size:10.5px; line-height:1.58; }
.prc-step-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:13px; }
.prc-step-tags span { padding:4px 6px; border:1px solid rgba(108,212,255,.09); border-radius:999px; color:#7f9fb5; background:rgba(2,12,21,.33); font-size:6.6px; font-weight:800; }

.prc-bottom {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:13px;
  align-items:stretch;
  margin-top:15px;
}

.prc-back-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:150px;
  padding:13px 15px;
  border:1px solid rgba(108,212,255,.11);
  border-radius:16px;
  color:#dff6ff;
  background:rgba(2,11,19,.28);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.prc-back-card:hover { transform:translateX(-2px); border-color:rgba(108,212,255,.25); background:rgba(41,182,246,.045); }
.prc-back-card-arrow { color:#61d6ff; font-size:15px; }
.prc-back-card-copy { display:grid; }
.prc-back-card-copy small { color:#688aa2; font-size:6.5px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.prc-back-card-copy strong { color:#edf9ff; font-size:10.5px; }

.prc-final-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:13px 16px;
  border:1px solid rgba(108,212,255,.16);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(41,182,246,.08),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.prc-final-cta-copy { display:grid; gap:1px; }
.prc-final-cta-kicker { color:#688da7; font-size:6.4px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.prc-final-cta-title { margin:0; color:#fff; font-size:18px; letter-spacing:-.02em; }
.prc-final-cta-text { margin:0; color:#8daabd; font-size:8.6px; }
.prc-final-cta-button { flex:none; min-height:42px; padding-inline:15px; font-size:10px; }
.prc-final-cta-button span { margin-left:6px; transition:transform .18s ease; }
.prc-final-cta-button:hover span { transform:translateX(3px); }

.page-services-process :where(a,button):focus-visible { outline:2px solid rgba(104,212,255,.85); outline-offset:3px; }

/* Footer con la identidad nueva. */
.page-services-process .prc-footer {
  padding:21px 0;
  border-top:1px solid rgba(108,212,255,.07);
  background:#040c15;
}
.page-services-process .footer-brand-new { display:inline-flex; align-items:center; gap:9px; }
.page-services-process .footer-brand-mark {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:4px;
  border:1px solid rgba(108,212,255,.14);
  border-radius:9px;
  background:linear-gradient(145deg,rgba(18,45,73,.85),rgba(5,18,31,.95));
}
.page-services-process .footer-brand-icon { width:100%; height:100%; object-fit:contain; }
.page-services-process .footer-brand-copy { display:grid; line-height:1; }
.page-services-process .footer-brand-main { color:#f3f9fd; font-size:11px; }
.page-services-process .footer-brand-city { margin-top:3px; color:#6dbbd9; font-size:6.2px; font-weight:800; letter-spacing:.22em; }

@keyframes prcLineReveal { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } }
@keyframes prcStepReveal { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }

@media (max-width:1080px) {
  .prc-hero { grid-template-columns:1fr; }
  .prc-expectations { max-width:760px; }
  .prc-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prc-timeline-line { display:none; }
  .prc-step { min-height:210px; }
}

@media (max-width:820px) {
  .prc-view { padding-top:calc(var(--header-h) + 24px); }
  .prc-bottom { grid-template-columns:1fr; }
  .prc-back-card { min-width:0; }
  .prc-final-cta { align-items:flex-start; flex-direction:column; }
}

@media (max-width:640px) {
  .prc-view { padding-top:calc(var(--header-h) + 18px); padding-bottom:34px; }
  .prc-breadcrumb { margin-bottom:12px; }
  .prc-title { font-size:clamp(39px,12vw,52px); }
  .prc-intro { font-size:14px; }
  .prc-actions { width:100%; }
  .prc-actions .btn { width:100%; }
  .prc-expectations { padding:15px; border-radius:21px; }
  .prc-timeline { grid-template-columns:1fr; gap:11px; }
  .prc-step { min-height:auto; padding:43px 15px 15px; }
  .prc-step-node { width:42px; height:42px; margin-left:-21px; }
  .prc-final-cta-button { width:100%; }
  .page-services-process .footer-wrap { gap:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .prc-timeline-line,
  .prc-step { animation:none !important; }
  .prc-step,
  .prc-expectation,
  .prc-back-card,
  .prc-button-arrow,
  .prc-final-cta-button span { transition:none !important; }
  .prc-step:hover,
  .prc-expectation:hover,
  .prc-back-card:hover { transform:none !important; }
  .prc-view::after { display:none; }
}

/* =========================================================
   DN TECH — V45 / TIMELINE PREMIUM FINAL
   ========================================================= */

/* Panel de expectativas más compacto y proporcionado. */
.page-services-process .prc-expectations {
  padding:16px 17px 15px;
}
.page-services-process .prc-expectations-top { margin-bottom:10px; }
.page-services-process .prc-expectations-kicker { margin-bottom:8px; }
.page-services-process .prc-expectations-list { gap:7px; }
.page-services-process .prc-expectation {
  min-height:43px;
  padding:7px 9px;
  grid-template-columns:28px 1fr;
  gap:9px;
}
.page-services-process .prc-expectation-icon {
  width:28px;
  height:28px;
  border-radius:9px;
}
.page-services-process .prc-expectations-scope {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(108,212,255,.08);
  color:#789aaf;
  font-size:8px;
  font-weight:750;
}
.page-services-process .prc-expectations-scope-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#62d8ff;
  box-shadow:0 0 10px rgba(98,216,255,.34);
}

/* Timeline con línea base + progreso interactivo. */
.page-services-process .prc-timeline {
  --prc-progress:0%;
  gap:13px;
  padding-top:16px;
}
.page-services-process .prc-timeline::before {
  content:"";
  position:absolute;
  top:33px;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:rgba(89,205,249,.16);
  pointer-events:none;
}
.page-services-process .prc-timeline-line {
  top:33px;
  left:12.5%;
  right:auto;
  width:calc(var(--prc-progress) * .75);
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#30b9f3,#6ad8ff);
  box-shadow:0 0 14px rgba(83,205,255,.35);
  transform:none;
  animation:none;
  transition:width .32s cubic-bezier(.2,.72,.22,1),opacity .2s ease;
  opacity:.82;
}

/* Tarjetas más compactas, con icono y respuesta visual. */
.page-services-process .prc-step {
  min-height:194px;
  padding:48px 18px 15px;
}
.page-services-process .prc-step-node {
  top:11px;
  width:42px;
  height:42px;
  margin-left:-21px;
  border-radius:14px;
  box-shadow:0 0 0 6px rgba(7,21,34,.93),0 8px 18px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,color .22s ease;
}
.page-services-process .prc-step:hover .prc-step-node,
.page-services-process .prc-step.is-active .prc-step-node {
  color:#b9efff;
  border-color:rgba(108,212,255,.48);
  box-shadow:0 0 0 6px rgba(7,21,34,.93),0 8px 18px rgba(0,0,0,.20),0 0 22px rgba(73,199,248,.18),inset 0 1px 0 rgba(255,255,255,.045);
  transform:translateY(-1px);
}
.page-services-process .prc-step-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:9px;
  border:1px solid rgba(108,212,255,.11);
  border-radius:9px;
  color:#66d6ff;
  background:rgba(41,182,246,.055);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.page-services-process .prc-step-icon svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.page-services-process .prc-step:hover .prc-step-icon,
.page-services-process .prc-step.is-active .prc-step-icon {
  transform:translateY(-1px) scale(1.04);
  border-color:rgba(108,212,255,.26);
  background:rgba(41,182,246,.09);
  box-shadow:0 0 18px rgba(41,182,246,.07);
}
.page-services-process .prc-step-kicker { margin-bottom:4px; }
.page-services-process .prc-step-title { margin-bottom:6px; }
.page-services-process .prc-step-copy { color:#a7c0d1; }
.page-services-process .prc-step-tags { margin-top:10px; }
.page-services-process .prc-step-tags span {
  color:#93b2c6;
  border-color:rgba(108,212,255,.12);
  background:rgba(2,12,21,.42);
}

/* Cierre: volver es navegación secundaria; CTA principal ocupa toda la atención. */
.page-services-process .prc-bottom {
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-top:15px;
}
.page-services-process .prc-back-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  padding:4px 1px;
  color:#88a9bd;
  font-size:9.5px;
  font-weight:750;
  transition:color .18s ease,transform .18s ease;
}
.page-services-process .prc-back-link:hover {
  color:#dcf6ff;
  transform:translateX(-2px);
}
.page-services-process .prc-final-cta {
  min-height:88px;
  padding:17px 20px;
  border-radius:18px;
  background:
    radial-gradient(360px circle at 80% 0%,rgba(64,197,250,.08),transparent 75%),
    linear-gradient(145deg,rgba(41,182,246,.095),rgba(255,255,255,.018));
}
.page-services-process .prc-final-cta-copy { gap:2px; }
.page-services-process .prc-final-cta-kicker {
  color:#67cce9;
  font-size:7.3px;
  letter-spacing:.16em;
}
.page-services-process .prc-final-cta-title {
  font-size:22px;
  letter-spacing:-.025em;
}
.page-services-process .prc-final-cta-text {
  max-width:720px;
  color:#9eb8c9;
  font-size:9.5px;
}
.page-services-process .prc-final-cta-button {
  min-height:46px;
  padding-inline:19px;
  font-size:10.5px;
}

@media (max-width:1080px) {
  .page-services-process .prc-timeline::before,
  .page-services-process .prc-timeline-line { display:none; }
  .page-services-process .prc-step { min-height:188px; }
}

@media (max-width:640px) {
  .page-services-process .prc-step { min-height:auto; padding:45px 15px 15px; }
  .page-services-process .prc-step-icon { margin-bottom:8px; }
  .page-services-process .prc-final-cta { padding:16px; }
  .page-services-process .prc-final-cta-title { font-size:20px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-services-process .prc-timeline-line,
  .page-services-process .prc-step-node,
  .page-services-process .prc-step-icon,
  .page-services-process .prc-back-link { transition:none !important; }
}

/* =========================================================
   DN TECH — V46 / TIMELINE GEOMÉTRICO + MÁS AIRE
   ========================================================= */

/* El timeline puede respirar más que el hero sin romper el ancho general. */
.page-services-process .prc-timeline,
.page-services-process .prc-bottom {
  width:min(1320px,calc(100vw - 64px));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}

.page-services-process .prc-timeline {
  --prc-line-start:0px;
  --prc-line-total:0px;
  --prc-progress-width:0px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  padding-top:22px;
}

/* Línea base medida exactamente entre el centro del nodo 01 y el 04. */
.page-services-process .prc-timeline::before {
  top:44px;
  left:var(--prc-line-start);
  right:auto;
  width:var(--prc-line-total);
  height:1px;
  background:linear-gradient(90deg,rgba(96,211,255,.16),rgba(96,211,255,.24),rgba(96,211,255,.16));
}

/* Progreso interactivo: mismo origen exacto y ancho calculado por JS. */
.page-services-process .prc-timeline-line {
  top:43px;
  left:var(--prc-line-start);
  right:auto;
  width:var(--prc-progress-width);
  height:2px;
  background:linear-gradient(90deg,#23b3ef 0%,#6bddff 100%);
  box-shadow:0 0 16px rgba(83,205,255,.32);
  transition:width .34s cubic-bezier(.2,.72,.22,1),opacity .2s ease;
}

/* Tarjetas menos comprimidas y con una jerarquía interna más relajada. */
.page-services-process .prc-step {
  min-height:226px;
  padding:58px 22px 22px;
  border-radius:22px;
}

.page-services-process .prc-step-node {
  top:22px;
  width:44px;
  height:44px;
  margin-left:-22px;
  border-radius:14px;
}

.page-services-process .prc-step-icon {
  width:34px;
  height:34px;
  margin-bottom:12px;
  border-radius:10px;
}
.page-services-process .prc-step-icon svg {
  width:18px;
  height:18px;
}

.page-services-process .prc-step-kicker {
  margin-bottom:7px;
  font-size:8px;
  letter-spacing:.15em;
}
.page-services-process .prc-step-title {
  margin-bottom:10px;
  font-size:18px;
  line-height:1.28;
}
.page-services-process .prc-step-copy {
  font-size:11.2px;
  line-height:1.68;
}
.page-services-process .prc-step-tags {
  gap:6px;
  margin-top:15px;
}
.page-services-process .prc-step-tags span {
  padding:4px 7px;
  font-size:6.9px;
}

/* Los nodos deben sentarse sobre la línea, no parecer atravesados por ella. */
.page-services-process .prc-step-node {
  z-index:4;
  background:linear-gradient(145deg,#112e48,#071725);
  box-shadow:0 0 0 7px rgba(7,21,34,.96),0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}
.page-services-process .prc-step.is-active .prc-step-node,
.page-services-process .prc-step:hover .prc-step-node {
  box-shadow:0 0 0 7px rgba(7,21,34,.96),0 8px 20px rgba(0,0,0,.22),0 0 24px rgba(73,199,248,.20),inset 0 1px 0 rgba(255,255,255,.05);
}

/* Alineamos el cierre con el ancho visual nuevo del timeline. */
.page-services-process .prc-bottom {
  margin-top:20px;
}

/* Tablet: dos columnas con más aire, sin forzar una línea horizontal falsa. */
@media (max-width:1080px) {
  .page-services-process .prc-timeline,
  .page-services-process .prc-bottom {
    width:min(920px,calc(100vw - 48px));
  }
  .page-services-process .prc-timeline {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .page-services-process .prc-timeline::before,
  .page-services-process .prc-timeline-line { display:none; }
  .page-services-process .prc-step {
    min-height:216px;
    padding:56px 21px 21px;
  }
}

/* Móvil: timeline vertical real. */
@media (max-width:700px) {
  .page-services-process .prc-timeline,
  .page-services-process .prc-bottom {
    width:100%;
    margin-left:0;
    transform:none;
  }
  .page-services-process .prc-timeline {
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding-top:0;
  }
  .page-services-process .prc-timeline::before {
    display:block;
    top:34px;
    bottom:34px;
    left:37px;
    width:1px;
    height:auto;
    background:linear-gradient(180deg,rgba(96,211,255,.20),rgba(96,211,255,.10));
  }
  .page-services-process .prc-timeline-line { display:none; }

  .page-services-process .prc-step {
    min-height:auto;
    padding:22px 18px 22px 72px;
  }
  .page-services-process .prc-step-node {
    top:22px;
    left:16px;
    width:42px;
    height:42px;
    margin-left:0;
  }
  .page-services-process .prc-step-icon {
    width:32px;
    height:32px;
    margin-bottom:10px;
  }
  .page-services-process .prc-step-title { font-size:17.5px; }
  .page-services-process .prc-step-copy { font-size:11.2px; }
}

/* =========================================================
   DN TECH — V47 / CIERRE DE “CÓMO TRABAJAMOS”
   Menos CTA repetido, panel más compacto, timeline más sobrio
   y cierre final con una única acción fuerte.
   ========================================================= */

/* Hero: acciones contextuales; la conversión queda reservada al cierre. */
.page-services-process .prc-actions {
  gap:10px;
}
.page-services-process .prc-services-button {
  color:#dff5ff !important;
  border-color:rgba(111,204,245,.18) !important;
  background:rgba(255,255,255,.025) !important;
}
.page-services-process .prc-services-button:hover {
  color:#fff !important;
  border-color:rgba(111,204,245,.36) !important;
  background:rgba(41,182,246,.065) !important;
  box-shadow:0 9px 22px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.035);
}
.page-services-process .prc-button-arrow-back {
  margin-left:0;
  margin-right:5px;
}
.page-services-process .prc-actions a:hover .prc-button-arrow-back {
  transform:translateX(-3px);
}

/* El panel de expectativas deja de estirarse hasta la altura del hero. */
.page-services-process .prc-hero {
  align-items:center;
}
.page-services-process .prc-expectations {
  align-self:center;
  padding:14px 16px 13px;
}
.page-services-process .prc-expectations-top {
  margin-bottom:8px;
}
.page-services-process .prc-expectations-kicker {
  margin-bottom:7px;
}
.page-services-process .prc-expectations-list {
  gap:6px;
}
.page-services-process .prc-expectation {
  min-height:40px;
  padding:6px 8px;
  grid-template-columns:27px 1fr;
  gap:8px;
}
.page-services-process .prc-expectation-icon {
  width:27px;
  height:27px;
}
.page-services-process .prc-expectations-scope {
  margin-top:8px;
  padding-top:8px;
}

/* Timeline: en reposo es estructura, no protagonista. */
.page-services-process .prc-timeline::before {
  height:1px;
  opacity:.72;
  background:linear-gradient(90deg,rgba(96,211,255,.08),rgba(96,211,255,.15),rgba(96,211,255,.08));
}
.page-services-process .prc-timeline-line {
  height:2px;
  opacity:.94;
  background:linear-gradient(90deg,#1da9e4 0%,#69dcff 100%);
  box-shadow:0 0 11px rgba(83,205,255,.22);
}

/* La etapa activa es la protagonista; las anteriores quedan conectadas sin competir. */
.page-services-process .prc-step.is-active {
  border-color:rgba(108,212,255,.20);
}
.page-services-process .prc-step:hover {
  border-color:rgba(108,212,255,.31);
}

/* El enlace de vuelta acompaña al CTA final en vez de convertirse en otro bloque. */
.page-services-process .prc-bottom {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
  margin-top:22px;
}
.page-services-process .prc-back-link {
  align-self:flex-start;
  min-height:0;
  padding:3px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#809fb4;
  box-shadow:none;
  font-size:9px;
}
.page-services-process .prc-back-link:hover {
  transform:translateX(-3px);
  border-color:transparent;
  background:transparent;
  color:#dff7ff;
  box-shadow:none;
}

/* Un único cierre de conversión, sin repetir cuatro veces la misma idea. */
.page-services-process .prc-final-cta {
  min-height:96px;
  padding:18px 21px;
  border-radius:20px;
  border-color:rgba(108,212,255,.18);
  background:
    radial-gradient(420px circle at 82% 0%,rgba(64,197,250,.095),transparent 74%),
    linear-gradient(145deg,rgba(41,182,246,.09),rgba(255,255,255,.018));
}
.page-services-process .prc-final-cta-copy {
  gap:3px;
}
.page-services-process .prc-final-cta-kicker {
  color:#68cce9;
  font-size:7.4px;
}
.page-services-process .prc-final-cta-title {
  font-size:22px;
  line-height:1.18;
}
.page-services-process .prc-final-cta-text {
  color:#9db7c9;
  font-size:9.8px;
}
.page-services-process .prc-final-cta-button {
  min-height:46px;
  padding-inline:19px;
  font-size:10.5px;
}

@media (max-width:700px) {
  .page-services-process .prc-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .page-services-process .prc-actions .btn {
    width:100%;
  }
  .page-services-process .prc-expectations {
    width:100%;
  }
  .page-services-process .prc-bottom {
    gap:8px;
  }
  .page-services-process .prc-final-cta {
    padding:17px;
  }
}

@media (max-width:480px) {
  .page-services-process .prc-actions {
    grid-template-columns:1fr;
  }
}

/* =========================================================
   DN TECH — V48 / ACABADO FINAL DE “CÓMO TRABAJAMOS”
   Sin duplicar navegación, nodos mejor integrados, más lectura
   y un cierre con más respuesta visual.
   ========================================================= */

/* El enlace superior “Ver servicios” ya cumple la navegación de vuelta. */
.page-services-process .prc-bottom {
  gap:0;
  margin-top:23px;
}

/* Integramos los nodos un poco más dentro de las tarjetas SIN romper
   la geometría del timeline: línea base y progreso bajan exactamente
   la misma cantidad. */
.page-services-process .prc-timeline::before {
  top:48px;
}
.page-services-process .prc-timeline-line {
  top:47px;
}
.page-services-process .prc-step-node {
  top:26px;
}

/* Más legibilidad en la explicación de cada fase. */
.page-services-process .prc-step-copy {
  color:#b6cad8;
}

/* Panel superior derecho un poco más compacto, sin perder jerarquía. */
.page-services-process .prc-expectations {
  padding:12px 15px 11px;
}
.page-services-process .prc-expectations-top {
  margin-bottom:7px;
}
.page-services-process .prc-expectations-kicker {
  margin-bottom:6px;
}
.page-services-process .prc-expectations-list {
  gap:5px;
}
.page-services-process .prc-expectation {
  min-height:37px;
  padding:5px 8px;
  grid-template-columns:26px 1fr;
  gap:8px;
}
.page-services-process .prc-expectation-icon {
  width:26px;
  height:26px;
}
.page-services-process .prc-expectations-scope {
  margin-top:7px;
  padding-top:7px;
}

/* CTA final: feedback más claro sin convertirlo en efecto excesivo. */
.page-services-process .prc-final-cta-button {
  position:relative;
  overflow:hidden;
  transition:transform .20s cubic-bezier(.2,.72,.22,1),
             box-shadow .20s ease,
             filter .20s ease;
}
.page-services-process .prc-final-cta-button::before {
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 55%);
  opacity:0;
  transform:translateX(-20%);
  transition:opacity .20s ease,transform .28s cubic-bezier(.2,.72,.22,1);
}
.page-services-process .prc-final-cta-button:hover {
  transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(17,133,220,.26),0 0 22px rgba(61,198,255,.10);
  filter:brightness(1.035);
}
.page-services-process .prc-final-cta-button:hover::before {
  opacity:1;
  transform:translateX(16%);
}
.page-services-process .prc-final-cta-button:hover #process-final-cta-arrow {
  transform:translateX(4px);
}

/* Un poco más de respiración entre el cierre de contenido y el footer. */
.page-services-process .prc-footer {
  padding-top:28px;
  padding-bottom:21px;
}

@media (max-width:700px) {
  /* En móvil el timeline es vertical: mantenemos la geometría propia
     definida para ese layout y no aplicamos el desplazamiento desktop. */
  .page-services-process .prc-step-node {
    top:22px;
  }
  .page-services-process .prc-expectations {
    padding:12px 14px;
  }
  .page-services-process .prc-footer {
    padding-top:25px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .page-services-process .prc-final-cta-button,
  .page-services-process .prc-final-cta-button::before,
  .page-services-process .prc-final-cta-button #process-final-cta-arrow {
    transition:none !important;
  }
  .page-services-process .prc-final-cta-button:hover {
    transform:none;
  }
}

/* =========================================================
   DN TECH — V49 / ÚLTIMO PASE DE “CÓMO TRABAJAMOS”
   Orden de navegación coherente, microjerarquía y cierre más fino.
   ========================================================= */

/* Recorrido natural: volver a Servicios antes de saltar a Precios. */
.page-services-process .prc-actions {
  align-items:center;
}

/* Acercamos el cierre al proceso para que se lea como conclusión del timeline. */
.page-services-process .prc-bottom {
  margin-top:12px;
}

/* Iconografía algo más presente sin competir con los títulos. */
.page-services-process .prc-step-icon {
  width:36px;
  height:36px;
  margin-bottom:12px;
  border-color:rgba(108,212,255,.16);
  background:rgba(41,182,246,.07);
}
.page-services-process .prc-step-icon svg {
  width:19px;
  height:19px;
  stroke-width:1.7;
}

/* Tags más legibles en pantallas con menos brillo. */
.page-services-process .prc-step-tags span {
  color:#a8c7d9;
  border-color:rgba(108,212,255,.17);
  background:rgba(3,14,24,.50);
}

/* La flecha del CTA final forma parte explícita de la microinteracción. */
.page-services-process #process-final-cta-arrow {
  display:inline-block;
  transition:transform .20s cubic-bezier(.2,.72,.22,1);
}
.page-services-process .prc-final-cta-button:hover #process-final-cta-arrow {
  transform:translateX(5px);
}

/* Cierre de marca ligeramente más visible. */
.page-services-process .footer-brand-new {
  gap:10px;
}
.page-services-process .footer-brand-mark {
  width:34px;
  height:34px;
  padding:4px;
  border-radius:10px;
}
.page-services-process .footer-brand-main {
  font-size:12.5px;
  letter-spacing:-.015em;
}
.page-services-process .footer-brand-city {
  margin-top:3px;
  font-size:6.8px;
  letter-spacing:.23em;
}

/* Móvil: mantenemos aire entre cada fase y el CTA final. */
@media (max-width:700px) {
  .page-services-process .prc-timeline {
    gap:15px;
  }
  .page-services-process .prc-step {
    padding-bottom:17px;
  }
  .page-services-process .prc-bottom {
    margin-top:11px;
  }
  .page-services-process .prc-step-icon {
    width:34px;
    height:34px;
  }
  .page-services-process .prc-step-icon svg {
    width:18px;
    height:18px;
  }
  .page-services-process .footer-brand-mark {
    width:31px;
    height:31px;
  }
  .page-services-process .footer-brand-main {
    font-size:11.5px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .page-services-process #process-final-cta-arrow {
    transition:none !important;
  }
}

/* =========================================================
   DN TECH — V50 / CIERRE 100 % “CÓMO TRABAJAMOS”
   Microjerarquía final: breadcrumb + separación del cierre.
   ========================================================= */

.page-services-process .prc-breadcrumb-link {
  color:#a8c5d7;
  font-weight:650;
}
.page-services-process .prc-breadcrumb-separator {
  color:#5f8198;
}
.page-services-process .prc-breadcrumb-current {
  color:#8eafc4;
  font-weight:620;
}
.page-services-process .prc-breadcrumb-link:hover {
  color:#e5f8ff;
}

/* El CTA es la conclusión del proceso, no una quinta tarjeta. */
.page-services-process .prc-bottom {
  margin-top:22px;
}

@media (max-width:700px) {
  .page-services-process .prc-bottom {
    margin-top:18px;
  }
}