/* hi · Patrícia — a história como um fio de pedras, da bruta à lapidada.
   Padrão (celular, tablet, sem JS, movimento reduzido): fio vertical.
   Com .hi-pan (JS, tela larga): palco preso e o fio corre na horizontal com a rolagem. */
.hi-secao { --hi-col: 4rem; --hi-pedra: 3.1rem; }
.hi-palco { max-width: 46rem; margin-inline: auto; }
.hi-titulo { margin-top: clamp(1.2rem, 2.4vw, 2rem); }
.hi-intro { margin-top: 1.6rem; }
.hi-siga, .hi-conta, .hi-selo { display: none; }

/* o fio */
.hi-fio { position: relative; margin-top: clamp(3rem, 9vw, 4.5rem); }
.hi-linha { position: absolute; left: calc(var(--hi-col) / 2 - 1px); top: 1.5rem; bottom: -3rem; width: 2px; background: linear-gradient(var(--fio), var(--fio)) 50% 0 / 1px 100% no-repeat; }
.hi-cheia { position: absolute; inset: 0; background: var(--rosa); transform-origin: 0 0; transform: scaleY(var(--hi-p, 1)); }

.hi-marco { position: relative; display: grid; grid-template-columns: var(--hi-col) minmax(0, 1fr); column-gap: 1.1rem; padding-bottom: clamp(3rem, 9vw, 4rem); }
.hi-pedra-cx { grid-column: 1; grid-row: 1 / span 3; display: flex; justify-content: center; align-items: flex-start; padding-top: .2rem; }
.hi-pedra { display: block; width: var(--hi-pedra); height: auto; overflow: visible; transform: rotate(37deg); transition: opacity 1.2s var(--suave), filter 1.2s var(--suave), transform 1.4s var(--suave); }
.hi-marco-gema { --hi-pedra: 3.9rem; }
.hi-topo, .hi-base, .hi-retrato { grid-column: 2; }
.hi-onde { font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.hi-quando { margin-top: .15rem; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(3.2rem, 13vw, 4.6rem); line-height: .95; letter-spacing: -.012em; color: var(--tinta); }
.hi-base { margin-top: .9rem; }
.hi-cita { margin: 0; }
.hi-base .wf-texto + .hi-cita, .hi-base .wf-texto + .hi-trofeu { margin-top: 1.4rem; }
.hi-fala { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.18; }
.hi-retrato { margin-top: 1.6rem; aspect-ratio: 4 / 5; max-width: 22rem; }
.hi-retrato img { object-position: 50% 12%; }
.hi-trofeu { --c: 14px; width: 9.5rem; aspect-ratio: 3 / 4; }

/* pedra ainda não alcançada: fosca (só com JS e com movimento permitido) */
.js .hi-secao.hi-vivo .hi-marco:not(.hi-on) .hi-pedra { opacity: .5; filter: saturate(.5); transform: rotate(37deg) scale(.84); }

/* fecho: a pergunta. O fio segue, tracejado: ainda há o que lapidar */
.hi-fecho { position: relative; padding-left: calc(var(--hi-col) + 1.1rem); padding-top: .5rem; }
.hi-fecho::before { content: ""; position: absolute; left: calc(var(--hi-col) / 2 - .5px); top: 3rem; bottom: 0; width: 1px; background: repeating-linear-gradient(180deg, var(--rosa) 0 3px, transparent 3px 9px); }
.hi-fecho-antes { max-width: 22em; }
.hi-pergunta { margin-top: .8rem; font-size: clamp(3.3rem, 14.5vw, 6rem); line-height: .94; letter-spacing: -.015em; text-wrap: balance; }
.hi-fecho-base { margin-top: 2rem; max-width: 30rem; }

/* ───────── fio horizontal ───────── */
.hi-secao.hi-pan { padding: 0; --hi-ph: min(27vh, 15rem); --hi-cx: calc(var(--hi-ph) * 1.08); }
.hi-pan .hi-palco { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; overflow: clip; }
.hi-pan .hi-trilho { display: flex; width: max-content; height: 100%; padding-inline: var(--margem) 0; will-change: transform; }
.hi-pan .hi-abre { position: relative; flex: none; width: min(80vw, 80rem); height: 100%; display: grid; grid-template-rows: 1fr 1fr; padding-right: 5vw; }
.hi-pan .hi-abre::after { content: ""; position: absolute; left: calc(var(--margem) * -1); right: 0; top: calc(50% - 1px); height: 2px; background: var(--rosa); }
.hi-pan .hi-abre-topo { align-self: end; padding-bottom: clamp(1.2rem, 3.4vh, 2.2rem); }
.hi-pan .hi-abre-base { align-self: start; padding-top: clamp(1.2rem, 3.4vh, 2.2rem); display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem; }
.hi-pan .hi-abre-base .hi-intro, .hi-pan .hi-abre-base .hi-siga { margin-top: 0; }
.hi-pan .hi-abre-base .hi-siga { flex: none; min-height: 1.9rem; }
.hi-pan .hi-titulo { font-size: clamp(3rem, min(7.9vw, 14.6vh), 8.2rem); line-height: .95; max-width: 10.4em; }
.hi-pan .hi-siga { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.2rem, 3.4vh, 2.4rem); font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.hi-pan .hi-siga i { width: 5rem; height: 1px; background: currentColor; position: relative; }
.hi-pan .hi-siga i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.hi-pan .hi-fio { display: flex; flex: none; height: 100%; margin: 0; }
.hi-pan .hi-linha { left: 0; right: 0; top: calc(50% - 1px); bottom: auto; width: auto; height: 2px; background: linear-gradient(var(--fio), var(--fio)) 0 50% / 100% 1px no-repeat; }
.hi-pan .hi-cheia { transform: scaleX(var(--hi-p, 1)); }
.hi-pan .hi-marco { flex: none; grid-template-columns: var(--hi-cx) max-content; grid-template-rows: 1fr 1fr; column-gap: 1.3rem; height: 100%; padding: 0 clamp(2.5rem, 4vw, 4.5rem) 0 0; }
.hi-pan .hi-pedra-cx { grid-row: 1 / span 2; align-self: center; align-items: center; padding: 0; }
.hi-pan .hi-pedra { width: calc(var(--hi-ph) / 1.254); }
.hi-pan .hi-topo { grid-row: 1; align-self: end; padding-bottom: .9rem; }
.hi-pan .hi-quando { font-size: clamp(3.6rem, min(8vw, 15.5vh), 8.6rem); white-space: nowrap; }
.hi-pan .hi-fala { font-size: clamp(1.5rem, 2.1vw, 1.95rem); }
.hi-pan .hi-base { grid-row: 2; align-self: start; width: 21rem; margin: 0; padding-top: 1.5rem; }
.hi-pan .hi-marco-largo .hi-base { width: 26rem; }
.hi-pan .hi-marco-foto { grid-template-columns: var(--hi-cx) max-content auto; }
.hi-pan .hi-marco-foto .hi-base { width: 17rem; }
.hi-pan .hi-retrato { grid-column: 3; grid-row: 1 / span 2; align-self: center; height: min(72vh, 50rem); width: auto; max-width: none; aspect-ratio: 2 / 3; margin: 0 0 0 1.5rem; z-index: 1; }
.hi-pan .hi-retrato img { object-position: 50% 50%; }
.hi-pan .hi-marco-trofeu .hi-base { width: 27rem; display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 1.5rem; align-items: start; }
.hi-pan .hi-trofeu { width: 8.5rem; margin: 0 !important; }
.hi-pan .hi-marco-gema { --hi-ph: min(34vh, 19rem); }

.hi-pan .hi-fecho { flex: none; width: min(90vw, 80rem); height: 100%; padding: 0 var(--margem) 0 1rem; }
.hi-pan .hi-fecho::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: repeating-linear-gradient(90deg, var(--rosa) 0 3px, transparent 3px 9px); }
.hi-pan .hi-fecho-topo { position: absolute; left: 1rem; right: var(--margem); bottom: calc(50% + 1.6rem); }
.hi-pan .hi-fecho-antes { font-size: var(--t-corpo); }
.hi-pan .hi-pergunta { font-size: clamp(4rem, min(9.6vw, 18vh), 10rem); white-space: nowrap; }
.hi-pan .hi-fecho-base { position: absolute; left: 1rem; top: calc(50% + 2.4rem); margin: 0; }
.hi-pan .hi-fecho-base .hi-fala { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }

/* a pedra recebe um lampejo quando o fio chega a ela */
.js .hi-vivo .hi-marco.hi-on .hi-pedra { animation: hi-acende 1.8s var(--suave); }
@keyframes hi-acende { 0% { filter: brightness(1.28) saturate(.8); } 100% { filter: none; } }

/* selo preso no alto, depois que o título sai de cena */
.hi-pan .hi-selo { display: flex; align-items: center; gap: .8rem; position: absolute; left: var(--margem); top: clamp(1.2rem, 4vh, 2.4rem); z-index: 2; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); opacity: 0; transition: opacity .8s var(--suave); }
.hi-pan .hi-selo i { width: 2.2rem; height: 1px; background: currentColor; opacity: .6; }
.hi-pan.hi-andando .hi-selo { opacity: 1; }
/* contador preso ao palco, como o "detalhe 05 de 17" do hero */
.hi-pan .hi-conta { display: flex; gap: .5em; position: absolute; right: var(--margem); bottom: clamp(1.2rem, 4vh, 2.4rem); z-index: 2; font-size: var(--t-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }
.hi-pan .hi-conta b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hi-cheia { transform: none !important; }
}