/* ===== TextoPro Studio — Tecnología Viva · Servicios =====
   Solo CSS estático: sin JavaScript, sin animaciones. Se carga únicamente en servicios.html. */

/* --- Índice rápido bajo el hero --- */
.page-index{ margin-top: 1.1rem; }
.page-index-label{
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-silver);
}
.page-index ul{ list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin: 0; padding: 0; }
.page-index a{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.page-index a span{ transition: transform 0.15s ease; }
.page-index a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.page-index a:hover span{ transform: translateY(2px); }

/* --- Cómo trabajamos: conectores estáticos con flecha entre los cinco pasos ---
   Cada conector es un solo pseudo-elemento (línea + punta de flecha) con clip-path.
   Escritorio (≥1201 px): flechas horizontales 1→2→3→4→5.
   Tableta (641–1200 px): tres columnas; las flechas horizontales siguen dentro de cada fila y
   un codo conecta el final de la primera fila (paso 3) con el inicio de la segunda (paso 4).
   Móvil (≤640 px): una columna con flechas verticales hacia abajo. */
.steps-grid--five{ --g: 1.3rem; --rg: 2.4rem; --c1: rgba(110, 231, 255, 0.6); --c2: rgba(50, 177, 255, 0.95); }
.steps-grid--five .step{ position: relative; }

/* flecha horizontal (escritorio y dentro de cada fila en tableta) */
.steps-grid--five .step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: calc(1.2rem + 14px - 5px);
  left: 100%;
  width: var(--g);
  height: 10px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  clip-path: polygon(0 4px, calc(100% - 8px) 4px, calc(100% - 8px) 0, 100% 5px, calc(100% - 8px) 10px, calc(100% - 8px) 6px, 0 6px);
}

/* Tableta: tres columnas */
@media (min-width: 641px) and (max-width: 1200px){
  .steps-grid--five{ grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--rg); }
  /* codo: del centro del paso 3, medio hueco hacia abajo, a la izquierda hasta la columna 1 */
  .steps-grid--five .step:nth-child(3)::after{
    top: 100%;
    left: calc(50% - 200% - 2 * var(--g));
    width: calc(200% + 2 * var(--g));
    height: calc(var(--rg) / 2);
    background: none;
    clip-path: none;
    border-right: 2px solid var(--c1);
    border-bottom: 2px solid var(--c1);
    box-sizing: border-box;
    transform: translateX(1px);
  }
  /* …y baja hasta el paso 4 con punta de flecha */
  .steps-grid--five .step:nth-child(4)::before{
    content: "";
    position: absolute;
    top: calc(var(--rg) / -2);
    left: 50%;
    width: 10px;
    height: calc(var(--rg) / 2);
    margin-left: -5px;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    clip-path: polygon(4px 0, 6px 0, 6px calc(100% - 8px), 10px calc(100% - 8px), 5px 100%, 0 calc(100% - 8px), 4px calc(100% - 8px));
  }
}

/* Móvil: una columna, flechas verticales */
@media (max-width: 640px){
  .steps-grid--five{ --rg: 1.9rem; row-gap: var(--rg); }
  .steps-grid--five .step::before{ content: none; }
  .steps-grid--five .step:not(:last-child)::after{
    top: 100%;
    left: calc(1.3rem + 14px - 5px);
    width: 10px;
    height: var(--rg);
    margin: 0;
    border: 0;
    transform: none;
    box-sizing: content-box;
    background: linear-gradient(180deg, var(--c1), var(--c2));
    clip-path: polygon(4px 0, 6px 0, 6px calc(100% - 8px), 10px calc(100% - 8px), 5px 100%, 0 calc(100% - 8px), 4px calc(100% - 8px));
  }
}

/* --- Conversión: recorrido de quien lee hasta el siguiente paso --- */
.svc-path{
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 2rem 0 0;
  padding: 0;
}
.svc-path li{ position: relative; flex: 1 1 0; max-width: 13rem; padding: 0 0.5rem; text-align: center; }
.svc-path-dot{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(110, 231, 255, 0.5);
  background: #0a2150;
  color: var(--text);
  font-size: 0.85rem;
}
.svc-path-label{ display: block; font-size: 0.88rem; color: var(--text); overflow-wrap: anywhere; }
.svc-path li:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 2px;
  background: linear-gradient(90deg, rgba(110, 231, 255, 0.55), rgba(50, 177, 255, 0.3));
}
.svc-path li:last-child .svc-path-dot{
  border-color: var(--accent);
  background: #0e2d6b;
  box-shadow: 0 0 18px rgba(50, 177, 255, 0.3);
}
@media (max-width: 640px){
  .svc-path{ flex-direction: column; align-items: stretch; max-width: 22rem; margin-inline: auto; }
  .svc-path li{ display: flex; align-items: center; gap: 0.9rem; max-width: none; padding: 0 0 1.2rem; text-align: left; }
  .svc-path li:last-child{ padding-bottom: 0; }
  .svc-path-dot{ flex: none; margin: 0; }
  .svc-path li:not(:last-child)::after{
    top: 44px;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(110, 231, 255, 0.55), rgba(50, 177, 255, 0.3));
  }
}

/* --- Sin pulso infinito en los nodos acentuados de esta página (la regla compartida de styles.css sigue en uso en otras páginas) --- */
.motion-strip .motion-node--accent{ animation: none; }

@media (prefers-reduced-motion: reduce){
  .page-index a span{ transition: none; }
  .page-index a:hover span{ transform: none; }
}