/* 02 · história — a fita é o caminho dela: começa no alto, cai, corre plana, sobe de novo e assenta em "hoje" */
.hi-sec{overflow-x:clip;--hi-alto:23%;--hi-base:76%;--hi-h:clamp(580px,min(78vh,50vw),720px)}
.hi-topo{display:grid;gap:20px;justify-items:start;max-width:min(44rem,56%);position:relative;z-index:3}
.hi-topo .wf-titulo{margin-top:4px}
.hi-topo q{color:var(--creme)}

/* palco: sangra até as bordas da tela e sobe para junto da abertura; o trilho é a caixa do conteúdo, onde ficam os nós */
.hi-palco{position:relative;height:var(--hi-h);margin:calc(64px - var(--hi-h)*.23) calc(50% - 50vw) 0}
.hi-palco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg in oklab,transparent,rgb(217 168 102/.4) 30%,rgb(243 220 174/.6) 78%,rgb(217 168 102/.3))}
.hi-trilho{position:absolute;top:0;bottom:0;left:max(var(--margem),calc(50% - var(--largura)/2));right:max(var(--margem),calc(50% - var(--largura)/2))}
.hi-fita-v{display:none}

.hi-passo{position:absolute;left:calc(var(--u)*100%);width:calc(var(--w)*100%);padding-left:18px;z-index:2}
.hi-passo::before{content:"";position:absolute;left:0;width:1px;background:linear-gradient(180deg in oklab,rgb(217 168 102/.8),rgb(217 168 102/.1));transform-origin:50% 0;transition:transform 1.1s var(--suave) .15s}
.hi-baixo{top:var(--hi-base);padding-top:30px}
.hi-baixo::before{top:10px;bottom:0}
.hi-queda::before{top:20px}
.hi-cima{bottom:calc(100% - var(--hi-base));padding-bottom:30px}
.hi-cima::before{top:0;bottom:10px;background:linear-gradient(0deg in oklab,rgb(217 168 102/.8),rgb(217 168 102/.1));transform-origin:50% 100%}
.hi-baixo.hi-alto{top:var(--hi-alto)}
.hi-cima.hi-alto{bottom:calc(100% - var(--hi-alto))}
.hi-nome{position:relative;font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--creme);display:flex;gap:.8em;align-items:baseline;white-space:nowrap}
.hi-nome b{font-weight:300;color:var(--mel-claro);font-size:.9em}
.hi-passo blockquote{margin-top:10px;font-size:clamp(.94rem,1.3vw,1.22rem);line-height:1.4;letter-spacing:-.008em;color:var(--creme);text-wrap:pretty}
.hi-passo .hi-eco{color:var(--mel-luz)}
.hi-queda blockquote,.hi-hoje blockquote{font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.1rem,1.62vw,1.56rem);line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
.hi-hoje blockquote{color:var(--mel-luz)}
/* o nível de onde a fita cai e para onde ela volta */
.hi-nivel{position:absolute;left:36%;top:var(--hi-alto);transform:translateY(-135%);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:lowercase;color:var(--creme-3);transition:opacity 1.4s var(--suave) .5s}
.hi-vivo .hi-nivel{opacity:0}
.hi-vivo.hi-fim .hi-nivel{opacity:1}

/* entrada dos passos: só quando o JS da seção está vivo */
.hi-vivo .hi-passo{opacity:0;transform:translate3d(0,10px,0);transition:opacity .9s var(--suave),transform .9s var(--suave)}
.hi-vivo .hi-passo::before{transform:scaleY(0)}
.hi-vivo .hi-passo.hi-on{opacity:1;transform:none}
.hi-vivo .hi-passo.hi-on::before{transform:none}

/* retrato: grande, em pé sobre a linha do palco; a fita chega por trás do cabelo e assenta nela */
.hi-retrato{--hi-im:min(clamp(520px,46vw,664px),var(--hi-h)*.93);position:absolute;bottom:0;left:calc(75% - var(--hi-im)*.22);width:var(--hi-im);z-index:1;pointer-events:none}
.hi-retrato img{position:relative;width:100%;filter:drop-shadow(0 0 26px rgb(217 168 102/.22));-webkit-mask-image:linear-gradient(#000 84%,rgb(0 0 0/.5));mask-image:linear-gradient(#000 84%,rgb(0 0 0/.5))}
.hi-brasa{position:absolute;inset:-6% -16% 0;background:radial-gradient(closest-side at 54% 50% in oklab,rgb(217 168 102/.36),rgb(164 117 61/.14) 55%,transparent)}
.hi-casa{position:absolute;left:22%;top:calc(100% + 16px);white-space:nowrap;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mel-claro);display:flex;align-items:center;gap:.9em}
.hi-casa i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}

/* fecho */
.hi-fecho{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:clamp(32px,6vw,96px);align-items:end;margin-top:clamp(76px,10vh,112px)}
.hi-medo{padding-left:clamp(18px,2vw,28px)}
.hi-medo blockquote{font-size:clamp(1.5rem,2.5vw,2.5rem);line-height:1.18;letter-spacing:-.025em;font-weight:500;font-family:var(--f-titulo);text-wrap:balance}
.hi-medo em{font-style:normal;color:var(--mel-luz)}
.hi-ponte{display:grid;gap:22px;padding-bottom:4px}
.hi-ponte .wf-texto{font-size:1rem;max-width:24em}
.hi-cuidar{font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.3rem,1.75vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--mel-luz)}

@media (max-width:1180px){
  .hi-sec{--hi-alto:25%;--hi-base:71%}
  .hi-palco{margin-top:calc(64px - var(--hi-h)*.25)}
  .hi-casa{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.5}
  .hi-casa i{display:none}
  .hi-cima:not(.hi-alto) .hi-nome{white-space:normal}
}
@media (max-width:900px){
  .hi-topo{max-width:none}
  .hi-palco{height:auto;margin:40px 0 0}
  .hi-palco::after{left:calc(var(--margem)*-1);right:calc(var(--margem)*-1)}
  .hi-fita-h,.hi-nivel{display:none}
  .hi-trilho{position:relative;left:auto;right:auto;padding-left:58px}
  .hi-fita-v{display:block;position:absolute;left:calc(var(--margem)*-1);top:-34px;width:100vw;height:calc(100% + 34px);pointer-events:none}
  .hi-passo,.hi-baixo,.hi-cima,.hi-baixo.hi-alto,.hi-cima.hi-alto{position:relative;left:auto;top:auto;bottom:auto;width:auto;padding:0;margin:0 0 42px}
  .hi-passo::before{display:none}
  .hi-nome{font-size:.875rem;white-space:normal}
  .hi-nome::before{content:"";position:absolute;right:calc(100% + 8px);top:50%;width:34px;height:1px;background:linear-gradient(90deg in oklab,rgb(217 168 102/.75),rgb(217 168 102/.2))}
  .hi-alto .hi-nome::before{width:5px}
  .hi-passo blockquote{font-size:1.09rem;line-height:1.42;margin-top:8px;max-width:26em}
  .hi-queda blockquote{font-size:1.3rem;line-height:1.24}
  .hi-hoje{margin-bottom:0}
  .hi-hoje blockquote{font-size:1.5rem;line-height:1.2}
  .hi-retrato{--hi-im:min(122vw,600px);position:relative;left:auto;margin:calc(var(--hi-im)*-.04) 0 0 calc(50% - 29px - var(--hi-im)*.57);width:var(--hi-im);max-width:none}
  .hi-retrato img{-webkit-mask-image:none;mask-image:none}
  .hi-casa{position:absolute;left:calc(var(--hi-im)*.57 - 50vw + var(--margem));width:calc(100vw - var(--margem)*2);top:calc(100% + 14px);font-size:.875rem;white-space:normal}
  .hi-palco{padding-bottom:0}
  .hi-fecho{grid-template-columns:1fr;gap:38px;margin-top:84px}
  .hi-ponte .wf-texto{font-size:1rem;max-width:none}
  .hi-cuidar{font-size:1.5rem}
  .hi-medo blockquote{font-size:1.62rem}
}