/* =========================================================
   DROPWAKE STUDIO — pages.css
   Componentes de PÁGINA (no del sistema base).

   Se enlaza SIEMPRE después de style.css, en todas las páginas,
   para que su precedencia sea explícita y no dependa del orden
   interno de style.css.

   Regla del proyecto: style.css es append-only y NO se divide.
   ========================================================= */

/* ---------- Estructura de página ----------
   El navbar es position: fixed (altura --nav-h), así que el contenido
   de las páginas interiores debe empezar por debajo de él. */
.page-main {
  padding-top: var(--nav-h);
}

/* ---------- Enlace activo del navbar ----------
   El marcado va en el HTML con aria-current="page"; aquí solo se
   reutiliza el subrayado que ya existe en :hover (style.css). */
.navbar__nav a[aria-current="page"] { color: var(--text); }
.navbar__nav a[aria-current="page"]::after { width: 100%; }

/* ---------- Migas de pan ---------- */
.breadcrumb {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px clamp(20px, 4vw, 48px) 0;
}
.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb__list li + li::before {
  content: "/";
  color: var(--text-dim);
  opacity: 0.45;
}
.breadcrumb__item {
  color: var(--text-dim);
  transition: color 0.3s var(--ease);
}
a.breadcrumb__item:hover { color: var(--text); }
.breadcrumb__item[aria-current="page"] { color: var(--text); }

/* ---------- Banda CTA de cierre ---------- */
.cta-band {
  position: relative;   /* por encima del hero sticky cuando se reutilice en la home */
  z-index: 2;
  padding: 96px clamp(20px, 4vw, 48px) 104px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(13, 110, 253, 0.07), transparent 70%),
    var(--bg-deep);
}
.cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cta-band__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.cta-band__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 22px;
}
.cta-band__text {
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 36px;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- Pie de página ---------- */
.site-footer {
  position: relative;   /* por encima del hero sticky cuando se reutilice en la home */
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 56px clamp(20px, 4vw, 48px) 36px;
}
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
/* Reutiliza el wordmark del navbar: esa clase solo aporta tipografía y color. */
.site-footer .navbar__wordmark { font-size: 15px; }
.site-footer__slogan {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  font-size: 10px;
  letter-spacing: 3px;
}
.site-footer__nav {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.site-footer__nav a {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s var(--ease);
}
.site-footer__nav a:hover { color: var(--text); }
.site-footer__bottom {
  max-width: var(--max);
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 8px;
}
.site-footer__note {
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 620px;
}
.site-footer__legal {
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

/* ---------- Páginas interiores: móvil ---------- */
@media (max-width: 820px) {
  .breadcrumb { padding-top: 28px; }
  .cta-band { padding: 72px 20px 80px; }
  .site-footer { padding: 44px 20px 32px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   PAGINAS INTERIORES — bloques de contenido
   ========================================================= */

/* ---------- Otros servicios (enlazado interno entre paginas) ---------- */
.related {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.related__inner { max-width: var(--max); margin: 0 auto; }
.related__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
}
.related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.related__card {
  display: grid;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(28, 34, 38, 0.72), rgba(17, 20, 22, 0.9));
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.related__card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 30px 60px -40px rgba(13, 110, 253, 0.4);
}
.related__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
}
.related__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.related__arrow {
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.related__card:hover .related__arrow { transform: translateX(6px); color: var(--accent-hi); }

/* ---------- Preguntas frecuentes (details/summary nativo, sin JS) ---------- */
.faq {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 30px;
}
.faq__item { border-top: 1px solid var(--border); }
.faq__item:last-of-type { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-hi); }
/* Indicador dibujado con CSS: + que pasa a - al abrirse */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 13px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 13px 1.5px no-repeat;
}
.faq__a {
  padding: 0 0 24px;
  max-width: 700px;
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* ---------- Nota de honestidad bajo una seccion ---------- */
.page-note {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.65;
  opacity: 0.9;
}

@media (max-width: 820px) {
  .related { padding-top: 64px; }
  .related__grid { grid-template-columns: 1fr; gap: 14px; }
  .faq { padding-top: 64px; }
  .faq__q { font-size: 0.98rem; padding: 18px 0; }
}

/* ---------- Cita editorial (recogida de la tarjeta GEO de la home) ---------- */
.page-quote {
  max-width: 680px;
  margin: 0 auto 64px;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--accent);
  color: rgba(242, 242, 242, 0.82);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---------- "Qué incluye" (mismo lenguaje de checks que las tarjetas) ---------- */
.page-list {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.page-list__inner { max-width: 820px; margin: 0 auto; }
.page-list__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 28px;
}
.page-points {
  list-style: none;
  display: grid;
  gap: 14px;
}
.page-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.page-points__check {
  flex: 0 0 auto;
  width: 6px;
  height: 11px;
  margin-top: 5px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* ---------- CTA bajo una pregunta de la FAQ (siempre visible, no dentro del desplegable) ---------- */
.faq__cta { margin-top: 30px; }

@media (max-width: 820px) {
  .page-list { padding-top: 64px; }
  .page-quote { margin-bottom: 48px; font-size: 1rem; }
}

/* ---------- Hover de las tarjetas de servicios ----------
   Se conserva el hairline ORIGINAL de style.css (degradado azul que se
   desvanece en los extremos, transición de 0.5 s) y solo se sube el grosor
   a 2 px: más sutil que una línea sólida.
   Reutiliza el ::before que ya existe (position: absolute), así que NO
   altera el tamaño de la tarjeta ni el layout de la grid.
   Solo afecta a .service-card. */
.service-card::before {
  height: 2px;
}

/* (3) Tarjetas "Otros servicios" (paginas interiores): mismo criterio que (a),
   fondo con --surface en lugar del degradado oscuro viejo. */
.related__card {
  background: var(--surface);
}

/* (4) Su eyebrow tambien pasa a --accent-hi, por el mismo motivo de contraste
   (estan sobre el mismo tipo de superficie). */
.related__eyebrow {
  color: var(--accent-hi);
}

/* La banda CTA vive en este archivo, así que su override va aquí (pages.css
   carga después de style.css). Pasa de --bg-deep a --bg plano, conservando
   su halo azul. */
.cta-band {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(13, 110, 253, 0.07), transparent 70%),
    var(--bg);
}

/* =========================================================
   PÁGINA NOSOTROS
   Componentes propios de /nosotros/. Todos parten de --bg y
   --surface, y respetan el ritmo vertical del resto del sitio.
   ========================================================= */

/* Bloque 1 — apertura (page-hero): kicker + H1 + entradilla. */
.page-hero {
  position: relative;
  z-index: 2;
  padding: 40px clamp(20px, 4vw, 48px) 0;
}
.page-hero__inner { max-width: var(--max); margin: 0 auto; }
.page-hero__kicker {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.page-hero__title {
  max-width: 900px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 28px;
}
.page-hero__lead {
  max-width: 720px;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.8;
}

/* Bloque 2 — el nombre (destacado). */
.about-name {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.about-name__inner { max-width: var(--max); margin: 0 auto; }
.about-name__lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 500;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.about-name__lines {
  display: grid;
  gap: 6px;
  margin-bottom: 30px;
}
.about-name__line {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text);
}
.about-name__line--accent { color: var(--accent); }
.about-name__text {
  max-width: 640px;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Bloque 3 — Soy Alejandro: foto (≈40 %) + texto. */
.about-person {
  position: relative;
  z-index: 2;
  padding: 96px clamp(20px, 4vw, 48px) 0;
}
.about-person__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.about-person__photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  filter: grayscale(0.6) contrast(1.05);
}
.about-person__title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 24px;
}
.about-person__text {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.8;
}
.about-person__text + .about-person__text { margin-top: 20px; }

/* Bloque 4 — bloque de texto genérico (reutilizable). */
.page-block {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.page-block__inner { max-width: var(--max); margin: 0 auto; }
.page-block__title {
  max-width: 900px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 22px;
}
.page-block__text {
  max-width: 760px;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.8;
}

@media (max-width: 820px) {
  .page-hero { padding-top: 24px; }
  .page-hero__title { margin-bottom: 22px; }
  .about-name { padding-top: 64px; }
  .about-name__lines { margin-bottom: 24px; }
  .about-person { padding-top: 64px; }
  .about-person__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .page-block { padding-top: 64px; }
}

/* =========================================================
   PÁGINA PROCESO (/proceso/)
   Selector de caminos (bloque 2) + pasos del camino elegido (bloque 3)
   + línea de compromiso (bloque 4).

   Reutiliza el lenguaje visual del workflow de /automatizacion/:
   nodos tipo tarjeta, conectores de 1 px y pulso azul viajero.
   Todo parte de --bg y --surface (regla del sistema de grises).
   Append-only: no se toca nada de lo anterior de este archivo.
   ========================================================= */

/* ---------- Bloque 2 — Selector de caminos ---------- */
.process-paths {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.process-paths__inner { max-width: var(--max); margin: 0 auto; }
.process-paths__title {
  max-width: 820px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 30px;
}

.path-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Nodo apagado (estado por defecto): fondo de tarjeta, borde gris sutil
   y texto atenuado. El color va en el boton y los hijos lo heredan. */
.path {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-dim);
  font: inherit;
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  transition:
    opacity 0.3s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    color 0.3s var(--ease);
}
.path__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  opacity: 0.8;
}
.path__label {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
.path__hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.85;
}

/* Hover / foco: mismo criterio que .workflow__node de style.css. */
.path:hover,
.path:focus-visible {
  border-color: rgba(13, 110, 253, 0.5);
  color: var(--text);
}

/* Nodo activo: borde --accent, texto principal y halo azul sutil.
   La entrada reutiliza el keyframe automation-node-active del workflow. */
.path.is-active {
  border-color: var(--accent);
  background:
    linear-gradient(145deg, rgba(13, 110, 253, 0.16), rgba(13, 110, 253, 0.04)),
    var(--surface);
  box-shadow: 0 0 26px -12px rgba(13, 110, 253, 0.85), inset 0 0 0 1px rgba(13, 110, 253, 0.1);
  color: var(--text);
  animation: automation-node-active 0.75s var(--ease) both;
}

/* Los otros tres caminos se atenúan mientras hay uno activo. */
.path-list.has-active .path:not(.is-active) { opacity: 0.45; }

/* ---------- Bloque 3 — Pasos del camino elegido ---------- */
.process-routes {
  position: relative;
  z-index: 2;
  padding: 72px clamp(20px, 4vw, 48px) 0;
}
.process-routes__inner { max-width: var(--max); margin: 0 auto; }

/* El atributo hidden del HTML gana sobre el display de .route. */
.route[hidden] { display: none; }

/* Fade in + slide up al cambiar de camino (0.3 s). Se reinicia desde el JS
   quitando y volviendo a poner .is-visible (misma técnica que travel()). */
.route.is-visible { animation: process-reveal 0.3s var(--ease) both; }
@keyframes process-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.route__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  --route-gap: clamp(24px, 3.2vw, 44px);
}
.route__step {
  position: relative;
  padding-right: var(--route-gap);   /* hueco por el que corre el conector */
}
.route__step:last-child { padding-right: 0; }

.route__node {
  display: grid;
  gap: 8px;
  align-content: start;
  height: 100%;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.route__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  color: var(--accent-hi);
}
.route__step-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.route__step-text {
  display: block;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Conector entre pasos: misma técnica que .vflow__link de style.css
   (punto de 5 px --accent-hi + keyframes con los stops 0 / 15 / 85 / 100
   y var(--ease)), llevada al eje horizontal en vez del vertical. */
.route__link {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--route-gap);
  height: 1px;
  margin-top: -0.5px;
  background: var(--border);
}
.route__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 6px rgba(13, 110, 253, 0.8);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: process-travel-x 3s var(--ease) infinite;
}
/* Retardos escalonados: el pulso se lee como una ola de izquierda a derecha
   (mismos pasos de 0.6 s que usa .vflow__link). */
.route__step:nth-child(2) .route__link::after { animation-delay: 0.6s; }
.route__step:nth-child(3) .route__link::after { animation-delay: 1.2s; }
.route__step:nth-child(4) .route__link::after { animation-delay: 1.8s; }

@keyframes process-travel-x {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Botón final del camino elegido. */
.route__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- Bloque 4 — Línea de compromiso ---------- */
.process-promise {
  position: relative;
  z-index: 2;
  padding: 88px clamp(20px, 4vw, 48px) 0;
}
.process-promise__inner { max-width: var(--max); margin: 0 auto; }
.process-promise__text {
  max-width: 760px;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

/* ---------- Proceso: tablet ----------
   Los 5 pasos horizontales solo caben con holgura por encima de 1024 px
   (mismo corte que los mockups de /desarrollo-web/): en tablet se apilan. */
@media (max-width: 1024px) {
  .process-paths { padding-top: 72px; }
  .path-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-routes { padding-top: 56px; }
  .process-promise { padding-top: 72px; }

  .route__steps { grid-template-columns: 1fr; }
  .route__step { padding-right: 0; padding-bottom: 40px; }
  .route__step:last-child { padding-bottom: 0; }

  .route__link {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 40px;
    margin-top: 0;
  }
  .route__link::after {
    left: 50%;
    animation-name: process-travel-y;
  }
  @keyframes process-travel-y {
    0%   { top: 0; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}

/* ---------- Proceso: móvil ---------- */
@media (max-width: 820px) {
  .process-paths { padding-top: 64px; }
  .process-paths__title { margin-bottom: 24px; }
  .path-list { grid-template-columns: 1fr; gap: 12px; }
  .process-routes { padding-top: 48px; }
  .route__step { padding-bottom: 32px; }
  .route__link { height: 32px; }
  .route__cta { margin-top: 32px; }
  .process-promise { padding-top: 64px; }
  .process-promise__text { padding-left: 16px; }
}

/* ---------- Proceso: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .route__link::after { animation: none; opacity: 0; }
  .route.is-visible { animation: none; }
  .path.is-active { animation: none; }
  .path { transition: none; }
}

/* =========================================================
   PÁGINA PROCESO — comportamiento por dispositivo
   ≤1024 px (móvil y tablet, Opción D): los nodos navegan directo a la
   página del servicio y el panel de pasos NO se muestra. Solo CSS.
   >1024 px (desktop): panel de pasos + línea conectora ortogonal con
   punto blanco viajero, del nodo activo a la primera tarjeta.
   ========================================================= */

/* ---------- ≤1024 px: sin panel de pasos ----------
   El JS ya no intenta mostrarlo (navega en su lugar), pero la regla es
   CSS para que tampoco aparezca si el estado viene de un resize. */
@media (max-width: 1024px) {
  .process-routes { display: none; }
}

/* ---------- >1024 px: +40 px de aire ----------
   72 -> 112 px de recorrido vertical para que el codo respire antes de
   entrar en la primera tarjeta. Móvil y tablet no cambian. */
@media (min-width: 1025px) {
  .process-routes { padding-top: 112px; }
}

/* El SVG se posiciona contra esta caja, de modo que su origen de
   coordenadas coincide con el de los nodos (las dos son cajas de --max
   centradas, con el mismo padding lateral). */
.process-routes__inner { position: relative; }

/* ---------- Línea conectora ---------- */
.process-link {
  display: none;                 /* solo se habilita en desktop (abajo) */
  position: absolute;
  left: 0;
  width: 100%;                   /* el JS ajusta top y height en px */
  opacity: 0;
  pointer-events: none;          /* nunca intercepta el clic de los nodos */
  transition: opacity 0.3s var(--ease);
}
@media (min-width: 1025px) {
  .process-link { display: block; }
}
.process-link.is-visible { opacity: 1; }

/* Trazado ortogonal: mismo vocabulario que las líneas del workflow de
   /automatizacion/ (M / V / H / V), en --accent al 50 %. */
.process-link__path {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.5;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Punto blanco: misma técnica que .hero__spark de style.css
   (relleno + resplandor suave con drop-shadow sobre currentColor). */
.process-link__spark {
  fill: #F2F2F2;
  color: #F2F2F2;
  filter: drop-shadow(0 0 8px currentColor);
}

@media (prefers-reduced-motion: reduce) {
  .process-link { transition: none; }
  .process-link__dot { display: none; }   /* sin punto viajero; la línea se queda */
}