/* ==========================================================================
   EnBlanco · #proceso «Cómo trabajamos» (oscuro, tinta)
   Las 4 etapas reales en un Bento en zigzag: números grandes, dos paneles por
   etapa (lo que hacemos / lo que necesitamos de ti) y conexiones SVG que se
   dibujan al bajar (js/proceso.js). Composición distinta del Bento de
   #servicios: título a todo el ancho y bloques escalonados unidos por un trazo.
   Solo tokens.
   ========================================================================== */

/* ---- Cabecera: título a todo el ancho, debajo la entrada y el conmutador --- */
.pr-head {
  display: grid;
  gap: clamp(var(--s-4), 3.4vw, var(--s-5));
  margin-bottom: clamp(var(--s-6), 7vw, var(--s-8));
}
.pr-head__title {
  max-width: 17ch;
  font-size: clamp(2.5rem, 1.3rem + 5vw, 5.75rem); /* 40–92: el título manda en la sección oscura */
}
.pr-head__title .nowrap { white-space: nowrap; }
.pr-head__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-4);
  align-items: end;
}
.pr-head__lead {
  grid-column: 1 / span 6;
  max-width: 30ch;
  font-size: var(--fs-4);
  line-height: 1.35;
  color: var(--c-arena);
}
.pr-who { grid-column: 8 / -1; justify-self: end; display: grid; gap: var(--s-1); }
.pr-who__label {
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
  color: var(--c-arena);
}

/* Conmutador segmentado (mismo lenguaje que #servicios, versión oscura) */
.pr-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--c-tinta-2);
}
.pr-seg__opt {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: var(--r-pill);
  color: var(--c-arena);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  touch-action: manipulation;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-press) var(--ease-out);
}
.pr-seg__opt[aria-pressed="true"] { background: var(--c-arena); color: var(--c-tinta); }
.pr-seg__opt:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .pr-seg__opt:not([aria-pressed="true"]):hover { background: var(--c-tinta); color: var(--c-blanco); }
}

/* ---- Mapa: Bento en zigzag + trazo de conexión ----------------------------- */
.pr-map { position: relative; }
.pr-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2; /* sobre los bloques: los extremos del trazo se apoyan en su borde */
}
.pr-links path {
  fill: none;
  stroke: var(--c-terracota);
  stroke-width: 3;
  stroke-linecap: round;
}
.pr-links .pr-links__ghost { stroke: var(--c-line-dark); stroke-width: 3; }
.pr-links circle { fill: var(--c-terracota); }
.pr-links circle.pr-links__ring { fill: var(--c-tinta); stroke: var(--c-terracota); stroke-width: 3; }

.pr-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(var(--s-6), 7vw, var(--s-7) + 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.pr-step--1 { grid-column: 1 / span 6; }
.pr-step--2 { grid-column: 8 / -1; margin-top: clamp(var(--s-6), 10vw, 168px); }
.pr-step--3 { grid-column: 1 / span 5; }
.pr-step--4 { grid-column: 7 / -1; margin-top: clamp(var(--s-5), 6vw, var(--s-7)); }

.pr-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-self: start;
  background: var(--c-tinta-2);
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.pr-step__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}
/* Número grande: se enciende (terracota) cuando el trazo llega a la etapa */
.pr-step__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(5rem, 3rem + 7.5vw, 10.5rem); /* 80–168 */
  line-height: .78;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-arena) 55%, var(--c-tinta-2)); /* apagado, con contraste ≥ 4.5:1 */
  transition: color var(--dur-reveal) var(--ease-out);
}
.pr-step.is-lit .pr-step__num { color: var(--c-terracota); }
.pr-step__phase {
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-tinta);
  color: var(--c-arena);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}
.pr-step__title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); /* 28–48 */
  font-weight: var(--fw-display);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  color: var(--c-blanco);
}

/* Dos paneles: un paso de tono, sin filetes */
.pr-step__panes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--s-1);
  margin: 0;
}
.pr-pane {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.pr-pane dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}
.pr-pane dt::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: currentColor;
}
.pr-pane dd { margin: 0; font-size: var(--fs-3); line-height: 1.5; text-wrap: pretty; }
.pr-pane--us { background: var(--c-tinta); color: var(--c-blanco); }
.pr-pane--us dt { color: var(--c-arena); }
.pr-pane--you { background: var(--c-arena); color: var(--c-tinta); }
.pr-pane--you dt::before { background: var(--c-terracota); }

/* Conmutador «¿Quién hace qué?»: resalta, nunca oculta */
.pr-steps[data-focus="us"] .pr-pane--you,
.pr-steps[data-focus="you"] .pr-pane--us { opacity: .55; } /* atenuado con contraste AA */
.pr-steps[data-focus="us"] .pr-pane--us,
.pr-steps[data-focus="you"] .pr-pane--you { transform: translateY(-4px); }
.pr-steps[data-focus="us"] .pr-pane--us { box-shadow: inset 0 0 0 2px var(--c-arena); }
.pr-steps[data-focus="you"] .pr-pane--you { box-shadow: inset 0 0 0 2px var(--c-terracota); }
.pr-steps[data-instant] .pr-pane { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .pr-step:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
}

/* ---- CTA ------------------------------------------------------------------ */
.pr-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: clamp(var(--s-6), 7vw, var(--s-8));
  padding: clamp(var(--s-3), 3vw, var(--s-5));
  border-radius: var(--r-bento);
  background: var(--c-tinta-2);
}
.pr-cta__btn { padding: 16px 26px; font-size: var(--fs-3); }
.pr-cta__note { color: var(--c-arena); font-size: var(--fs-3); }

/* ---- Tableta: zigzag más suave --------------------------------------------- */
@media (max-width: 1079px) {
  .pr-head__lead { grid-column: 1 / -1; }
  .pr-who { grid-column: 1 / -1; justify-self: start; }
  .pr-step--1 { grid-column: 1 / span 10; }
  .pr-step--2 { grid-column: 3 / -1; margin-top: 0; }
  .pr-step--3 { grid-column: 1 / span 10; }
  .pr-step--4 { grid-column: 3 / -1; margin-top: 0; }
}

/* ---- Ruta y flechas del carrusel (las crea js/proceso.js; solo en teléfono) - */
.pr-rail, .pr-nav { display: none; }

/* ---- Teléfono: carrusel deslizable; la ruta 01–04 sustituye al trazo ------- */
@media (max-width: 767px) {
  .pr-head { margin-bottom: var(--s-5); }
  .pr-head__row { grid-template-columns: minmax(0, 1fr); }
  .pr-head__lead, .pr-who { grid-column: 1; }
  .pr-who { justify-self: stretch; }
  .pr-seg { width: 100%; flex-wrap: nowrap; }
  .pr-seg__opt { flex: 1 1 auto; padding: 0 10px; white-space: nowrap; }
  .pr-step__num { font-size: clamp(4.5rem, 2rem + 14vw, 6rem); }
  .pr-cta { margin-top: var(--s-5); }
  .pr-cta__btn { width: 100%; }

  .pr-links { display: none; }

  /* Las etapas, una al lado de otra; se asoma la siguiente.
     (.pr-map delante: gana a la regla general de listas que pone el padding a 0) */
  .pr-map .pr-steps {
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(var(--page-pad) * -1);
    padding: 4px var(--page-pad) var(--s-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pr-steps::-webkit-scrollbar { display: none; }
  .pr-step--1, .pr-step--2, .pr-step--3, .pr-step--4 { margin-top: 0; align-self: stretch; }
  /* Las etapas que se asoman desde la derecha entran junto con la primera */
  .reveal-on .pr-step--1.is-revealed ~ .pr-step[data-reveal] { opacity: 1; transform: none; }
  .pr-step--2 { --reveal-delay: 80ms; }
  .pr-step--3 { --reveal-delay: 160ms; }
  .pr-step--4 { --reveal-delay: 240ms; }
  .pr-step {
    flex: 0 0 min(86%, 420px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: box-shadow var(--dur-ui) var(--ease-out);
  }
  .pr-step.is-current { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-terracota) 70%, transparent); }
  .pr-step__panes { grid-template-columns: minmax(0, 1fr); }

  /* Ruta: cuatro paradas unidas por una línea que se llena al deslizar */
  .pr-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 var(--s-3);
    padding: 0;
    list-style: none;
  }
  .pr-rail::before, .pr-rail::after {
    content: "";
    position: absolute;
    left: 12.5%; right: 12.5%;
    top: 21px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-line-dark);
  }
  .pr-rail::after {
    background: var(--c-terracota);
    transform-origin: 0 50%;
    transform: scaleX(var(--pr-fill, 0));
    transition: transform var(--dur-reveal) var(--ease-out);
  }
  .pr-rail__stop {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: var(--tap-min);
    padding: 0 2px;
    color: var(--c-arena);
    font-size: var(--fs-1);
    font-weight: var(--fw-medium);
    text-align: center;
    touch-action: manipulation;
  }
  .pr-rail__dot {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--c-tinta);
    box-shadow: inset 0 0 0 2px var(--c-line-dark);
    color: var(--c-arena);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: 15px;
    transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
  }
  .pr-rail__stop.is-done .pr-rail__dot { box-shadow: inset 0 0 0 2px var(--c-terracota); color: var(--c-blanco); }
  .pr-rail__stop[aria-current="step"] { color: var(--c-blanco); }
  .pr-rail__stop[aria-current="step"] .pr-rail__dot { background: var(--c-terracota); box-shadow: none; color: var(--c-blanco); transform: scale(1.08); }
  .pr-rail__stop:active .pr-rail__dot { transform: scale(var(--press-scale)); }

  /* Flechas debajo de las etapas */
  .pr-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); }
  .pr-nav__hint { color: var(--c-arena); font-size: var(--fs-1); }
  .pr-nav__btns { display: flex; gap: 8px; }
  .pr-nav__btn {
    display: grid;
    place-items: center;
    width: var(--tap-min); height: var(--tap-min);
    border-radius: 50%;
    background: var(--c-tinta-2);
    color: var(--c-blanco);
    touch-action: manipulation;
    transition: background-color var(--dur-fast) ease, opacity var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
  }
  .pr-nav__btn--next { background: var(--c-terracota); }
  .pr-nav__btn:active { transform: scale(var(--press-scale)); }
  .pr-nav__btn:disabled { opacity: .35; }
}

/* ---- Movimiento reducido: sin desplazamientos ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pr-step, .pr-pane { transition-property: opacity, box-shadow; }
  .pr-steps[data-focus] .pr-pane { transform: none; }
  .pr-step:hover { transform: none; }
  .pr-seg__opt:active, .pr-rail__stop:active .pr-rail__dot, .pr-nav__btn:active { transform: none; }
  .pr-rail::after { transition: none; }
}