/* =========================================================
   Process flow — ascending timeline refinement
   Preserves texts/structure; adds rise, BG, divider, motion
   ========================================================= */

.process{
  --p-orange:#ff6a00;
  --p-ink:#111111;
  --p-muted:#6f675e;
  --p-warm:#8a8278;
  --p-ease:cubic-bezier(.22,1,.36,1);
  --p-rise:40; /* max rise first→last marker (desktop) */
  position:relative;
  isolation:isolate;
  /* subtly warmer/lighter than clarity off-white */
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,106,0,.028),transparent 55%),
    linear-gradient(180deg,#fbf9f5 0%,#faf7f2 50%,#f7f3ed 100%)!important;
  /* top: line is 1px via ::before; rest of top space = head margin */
  padding:0 clamp(1rem,3vw,2.5rem) clamp(64px,7vw,88px);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  min-height:0!important;
}

/* Hide legacy precision art */
.precision__wave,
.precision__board,
.precision__mobile,
.precision-pillar,
.precision-chip{display:none!important}

/* Divider = top border of this section (container width, no spacer block) */
.process::before{
  content:"";
  display:block;
  box-sizing:border-box;
  width:min(100%,1120px);
  height:1px;
  margin:0 auto;
  padding:0;
  border:0;
  background:rgba(120,100,80,.16);
  flex:0 0 auto;
}
/* no independent divider element, no orange center segment */
.process__divider{display:none!important}

/* ---- Background grafismos ---- */
.process__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.process__bg-lines{
  position:absolute;
  left:0;right:0;bottom:0;
  width:100%;
  height:min(42%,280px);
  opacity:1;
}
.process__bg-lines path{
  fill:none;
  stroke-width:1;
  stroke-linecap:round;
}
.process__bg-lines path:nth-child(1){stroke:rgba(255,106,0,.1)}
.process__bg-lines path:nth-child(2){stroke:rgba(180,150,120,.1)}
.process__bg-lines path:nth-child(3){stroke:rgba(120,100,80,.07)}

.process__dots{
  position:absolute;
  left:50%;
  top:42%;
  width:min(90%,900px);
  height:220px;
  transform:translateX(-50%);
  opacity:.028;
  background-image:radial-gradient(circle,rgba(17,17,17,.9) 1px,transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%);
}

/* ---- Head ---- */
.process__head,
.process-shell{
  position:relative;
  z-index:1;
}
.process__head{
  /* mais largo: as 2 linhas da headline não quebram no meio */
  width:min(100%,920px);
  /* line → badge: 56–72px (desktop) */
  margin:clamp(56px,6.5vw,72px) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.process__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 clamp(22px,2.5vw,28px);
  padding:.5rem .95rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,17,17,.1);
  color:var(--p-ink);
  font-size:.78rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.process__badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--p-orange);
  box-shadow:0 0 0 3px rgba(255,106,0,.14);
  flex:0 0 auto;
}
.process__title{
  margin:0 0 clamp(20px,2.4vw,26px);
  /* um pouco menor no topo para caber em 2 linhas limpas */
  font-size:clamp(1.7rem,3.6vw,2.75rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.04em;
  max-width:100%;
}
/* Clip mask + rising span (keyframes = more reliable than transition) */
.process__line{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
}
/* Desktop/tablet: exatamente 2 linhas (sem “execução.” ou “etapa.” sozinhas) */
@media (min-width:700px){
  .process__line{
    white-space:nowrap;
  }
}
/* Initial state — JS/WAAPI drives the rise; CSS is backup only */
.process__rise{
  display:block;
  transform:translate3d(0,110%,0);
  opacity:0;
}
/* Backup CSS animation (uses !important to beat global reduced-motion nukes on *) */
.process.is-in .process__line:nth-child(1) .process__rise{
  animation:processTitleRise .95s cubic-bezier(.16,1,.3,1) .05s both!important;
  animation-duration:.95s!important;
  animation-iteration-count:1!important;
}
.process.is-in .process__line:nth-child(2) .process__rise{
  animation:processTitleRise 1s cubic-bezier(.16,1,.3,1) .22s both!important;
  animation-duration:1s!important;
  animation-iteration-count:1!important;
}
@keyframes processTitleRise{
  0%{
    transform:translate3d(0,110%,0);
    opacity:0;
  }
  40%{
    opacity:1;
  }
  100%{
    transform:translate3d(0,0,0);
    opacity:1;
  }
}
.process__title-ink{
  display:inline;
  color:var(--p-ink);
  font-weight:700;
}
.process__title-accent{
  display:inline;
  background-image:linear-gradient(90deg,#ff8a3d,#ff6a00 50%,#ffb070);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:700;
}
.process__lead{
  margin:0;
  max-width:700px;
  color:var(--p-muted);
  font-size:clamp(.95rem,1.15vw,1.05rem);
  line-height:1.55;
  letter-spacing:-.01em;
}
.process.is-in .process__badge{
  animation:processFadeUp .55s cubic-bezier(.16,1,.3,1) both;
}
.process.is-in .process__lead{
  animation:processFadeUp .7s cubic-bezier(.16,1,.3,1) .38s both;
}
@keyframes processFadeUp{
  from{
    opacity:0;
    transform:translate3d(0,14px,0);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.process__hint{display:none!important}

/* ---- Shell: path + steps ---- */
.process-shell{
  width:min(100%,1120px);
  /* description → timeline: 48–60px */
  margin:clamp(48px,5vw,60px) auto 0;
  position:relative;
}

/* Ascending SVG path — d + viewBox set in JS from real marker centers */
.process-path{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  z-index:0;
  overflow:visible;
  pointer-events:none;
}
.process-path__base,
.process-path__draw{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* No gray trail ahead — only the orange progress stroke should read as “the line” */
.process-path__base{
  stroke:transparent;
  stroke-width:2;
  opacity:0!important;
  visibility:hidden!important;
}
.process-path__draw{
  stroke:#ff6a00;
  stroke-width:3.5;
  fill:none;
  /* hidden until JS draws progress (pathLength=1) */
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
}
/* Mid-draw: NEVER force full stroke — only the progressed portion exists */
.process-shell.is-drawing .process-path__draw{
  opacity:1;
}
/* Finished only */
.process-shell.is-drawn:not(.is-drawing) .process-path__draw,
.process-shell.is-pulse:not(.is-drawing) .process-path__draw,
.process-path__draw.is-drawn{
  stroke-dasharray:1!important;
  stroke-dashoffset:0!important;
  opacity:1!important;
}
.process-path__return{display:none!important}
.process-shell.is-pulse .process-step.is-lit.process-step--final .process-step__marker{
  animation:processFinalPulse .9s var(--p-ease) 1;
}

@keyframes processFinalPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,106,0,.14)}
  45%{box-shadow:0 0 0 6px rgba(255,106,0,.22),0 0 0 14px rgba(255,106,0,.08)}
  100%{box-shadow:0 0 0 4px rgba(255,106,0,.14)}
}

/* Steps grid — equal columns; rise via --rise (px from top) */
.process-track{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:0; /* no gap so centers are exact 10/30/50/70/90% */
  position:relative;
  z-index:1;
  /* top rail for markers + room for text */
  padding-top:calc(var(--p-rise, 64) * 1px + 20px);
  min-height:0;
}

.process-step{
  --rise:0; /* marker Y from top of track rail (higher = lower on screen) */
  --i:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  padding:0 8px;
  min-width:0;
  /* steps stay visible; line + markers carry the motion */
  opacity:1;
  transform:none;
}
/* Text block shares one baseline for all columns */
.process-step__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
  width:100%;
  margin-top:calc(var(--p-rise, 40) * 1px + 24px);
  opacity:.42;
  transition:opacity .35s ease;
}
.process-step.is-lit .process-step__body{
  opacity:1;
}

/* Markers sit on the rail; light up as the line arrives */
.process-step__marker{
  position:absolute;
  left:50%;
  top:calc(var(--rise) * 1px + 6px);
  width:12px;
  height:12px;
  margin-left:-6px;
  border-radius:50%;
  border:2px solid rgba(17,17,17,.18);
  background:#fbf8f3;
  box-sizing:border-box;
  z-index:2;
  transform:scale(1);
  transition:
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s cubic-bezier(.16,1,.3,1);
}
.process-step.is-lit .process-step__marker{
  border-color:var(--p-orange);
  background:var(--p-orange);
  box-shadow:0 0 0 4px rgba(255,106,0,.14);
  transform:scale(1.12);
}

.process-step--final .process-step__title{
  font-weight:750;
  letter-spacing:-.035em;
}

.process-step__tip{
  position:absolute;
  left:50%;
  top:calc(var(--rise) * 1px - 16px);
  transform:translateX(-50%) translateY(4px);
  padding:.18rem .45rem;
  border-radius:999px;
  background:rgba(17,17,17,.88);
  color:#fff;
  font-size:.58rem;
  font-weight:650;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
  z-index:4;
}

.process-step__num{
  display:block;
  margin-top:.55rem;
  color:var(--p-orange);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
}
.process-step__title{
  margin:0;
  color:var(--p-ink);
  font-size:clamp(.95rem,1.15vw,1.08rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
}
.process-step__phrase{
  margin:0;
  max-width:22ch;
  color:rgba(17,17,17,.72);
  font-size:.86rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.01em;
}
.process-step__out{
  margin:.1rem 0 0;
  max-width:18ch;
  color:var(--p-warm);
  font-size:.78rem;
  font-weight:500;
  line-height:1.4;
  opacity:.9;
  transition:opacity .25s ease,color .25s ease;
}
.process-step__out[hidden]{display:none!important}

/* Hover */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .process-shell.is-on:hover .process-step{
    opacity:.4;
    filter:saturate(.75);
  }
  .process-shell.is-on .process-step:hover{
    opacity:1;
    filter:none;
  }
  .process-shell.is-on .process-step:hover .process-step__marker{
    transform:scale(1.12);
    box-shadow:0 0 0 5px rgba(255,106,0,.2);
  }
  .process-shell.is-on .process-step:hover .process-step__tip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  .process-shell.is-on .process-step:hover .process-step__out{
    opacity:1;
    color:var(--p-muted);
  }
  .process-shell.is-on .process-step:hover .process-step__title{
    color:#0a0a0a;
  }
}

/* Reduced motion: keep structure readable. Line/title driven by process-anim.js rAF
   (not CSS transitions), so we do NOT force stroke fully drawn here — JS handles settle. */
@media (prefers-reduced-motion:reduce){
  .process-step{
    opacity:1!important;
    animation:none!important;
  }
  .process-step--final .process-step__marker{
    animation:none!important;
  }
}

/* Tablet */
@media (max-width:960px){
  .process__head{margin-top:clamp(48px,6vw,64px)}
  .process-shell{margin-top:clamp(44px,5vw,56px)}
  .process-step__phrase{font-size:.82rem;max-width:14ch}
  .process-step__out{font-size:.72rem}
  .process-step__title{font-size:.95rem}
  .process-track{padding-top:calc(var(--p-rise, 64) * 1px + 16px)}
}

/*
  Mobile / narrow: ONE vertical axis for ALL markers.
  Track padding-left creates content gutter.
  Line + markers share the same --axis X coordinate.
  No per-step horizontal offset. No grid rail tricks.
*/
@media (max-width:900px){
  .process{
    --axis:12px;       /* center of vertical line from track left edge */
    --gutter:34px;     /* content starts here (axis + marker radius + gap) */
    --marker:12px;
    --step-gap:1.65rem;
    --surface:#fbf9f5;
    padding:0 1.15rem clamp(48px,9vw,64px);
    overflow-x:clip;
    overflow-y:visible;
  }
  .process::before{width:100%}
  .process__head{
    margin-top:clamp(36px,8vw,48px);
    align-items:flex-start;
    text-align:left;
    width:100%;
    max-width:100%;
  }
  .process__badge{align-self:flex-start}
  .process__lead{max-width:none}
  .process__title{font-size:clamp(1.55rem,6.5vw,2.05rem)}
  .process__line{white-space:normal}
  .process__bg-lines{height:140px;opacity:.65}
  .process__dots{display:none}

  .process-shell{
    width:100%;
    max-width:100%;
    margin:clamp(32px,7vw,44px) 0 0;
  }
  .process-path{display:none!important}

  .process-track{
    display:block!important;
    grid-template-columns:none!important;
    column-gap:0!important;
    padding:4px 0 0!important;
    padding-left:var(--gutter)!important;
    position:relative;
    width:100%;
    min-height:0;
  }

  /* Single vertical axis — same X for gray base + orange fill */
  .process-track::before,
  .process-track::after{
    content:"";
    position:absolute;
    left:var(--axis);
    top:8px;
    bottom:8px;
    width:2px;
    margin:0;
    border-radius:999px;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
  }
  /* No full gray rail ahead — only orange progress grows */
  .process-track::before{
    display:none!important;
  }
  .process-track::after{
    top:8px;
    bottom:auto;
    height:var(--process-rail, 0%);
    max-height:calc(100% - 16px);
    background:#ff6a00;
    transition:none;
  }
  .process-shell.is-drawn:not(.is-drawing) .process-track::after,
  .process-shell.is-pulse:not(.is-drawing) .process-track::after{
    height:calc(100% - 16px);
  }

  .process-step{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    margin-left:0!important;
    padding:0 0 var(--step-gap)!important;
    padding-top:0!important;
    text-align:left!important;
    align-items:flex-start!important;
    gap:.3rem!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .process-step:last-child{padding-bottom:0!important}

  .process-step__tip{display:none!important}

  /*
    Marker: absolute to the STEP.
    Step content starts at --gutter from track left.
    Axis is --axis from track left.
    Marker center = axis, relative to step left = axis - gutter.
  */
  .process-step__marker{
    position:absolute!important;
    left:calc(var(--axis) - var(--gutter))!important;
    top:0.2rem!important;
    width:var(--marker)!important;
    height:var(--marker)!important;
    margin:0!important;
    margin-left:0!important;
    transform:translateX(-50%)!important;
    z-index:2;
    box-sizing:border-box;
    border:2px solid rgba(17,17,17,.16)!important;
    background:var(--surface)!important;
    box-shadow:0 0 0 3px var(--surface)!important;
    border-radius:50%!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:auto!important;
    align-self:auto!important;
  }
  /* Only light markers as the line arrives (is-lit) — not all at once */
  .process-step.is-lit .process-step__marker{
    width:var(--marker)!important;
    height:var(--marker)!important;
    left:calc(var(--axis) - var(--gutter))!important;
    margin:0!important;
    margin-left:0!important;
    transform:translateX(-50%)!important;
    background:var(--p-orange)!important;
    border-color:var(--p-orange)!important;
    box-shadow:0 0 0 3px var(--surface)!important;
  }

  .process-step:hover .process-step__marker{
    transform:translateX(-50%)!important;
  }

  .process-step__body{
    margin-top:0!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:.3rem!important;
  }
  .process-step__num{
    display:block;
    margin:0;
    padding:0;
    font-size:.7rem;
    line-height:1.25;
  }
  .process-step__title{
    margin:.1rem 0 0;
    font-size:1.08rem;
    line-height:1.25;
    word-wrap:break-word;
    overflow-wrap:anywhere;
  }
  .process-step__phrase,
  .process-step__out{
    max-width:none!important;
    margin:0;
  }
  .process-step__phrase{
    margin-top:.2rem;
    font-size:.92rem;
    line-height:1.4;
  }
  .process-step__out{
    margin-top:.15rem;
    font-size:.84rem;
    line-height:1.45;
  }
}

@media (max-width:380px){
  .process{
    --axis:11px;
    --gutter:30px;
    padding-inline:.9rem;
  }
  .process-step__title{font-size:1.02rem}
}

/* no extra hairline from section-rhythm */
.process::after{display:none!important;content:none!important}