/* fases · meio da tarde, terracota · a pista vista de cima, que o visitante percorre rolando */
.fs-secao{
  --fs-terra:#b8725a; --fs-terra-2:#a8644d; --fs-funda:#94543f; --fs-fundo:#8a4b38;
  --fs-tinta:#fffaf3; --fs-tinta-2:#f3e2d6; --fs-escura:#2a1712;
  --fs-larg:clamp(222px, 21vw, 300px); --fs-raias:6; --fs-luz:2;
  --fs-gap:clamp(28px, 3.4vw, 64px);
  --fs-numtam:clamp(84px, 8.4vw, 136px); --fs-nometam:clamp(44px, 4.6vw, 78px);
  --fs-eixo:calc(var(--fs-numtam) * .8 + var(--fs-nometam) * .45);
  --fs-rout:calc(var(--fs-larg) * 1.55);
  position:relative; overflow:clip; isolation:isolate;
  background:var(--fs-fundo); color:var(--fs-tinta);
  font-family:var(--f-texto); font-weight:300;
  padding:var(--respiro) var(--margem) calc(var(--respiro) * .8);
}
.fs-malha{position:absolute;inset:0;pointer-events:none;z-index:-2}
.fs-m{position:absolute;border-radius:50%;animation:fs-deriva 34s ease-in-out infinite alternate}
.fs-m2{animation-duration:28s;animation-direction:alternate-reverse}
.fs-m3{animation-duration:40s}
@keyframes fs-deriva{to{transform:translate(6vw,4vw) scale(1.08)}}
.fs-m1{width:80vw;height:80vw;left:-30vw;top:-20vw;background:radial-gradient(closest-side in oklab, rgb(148 84 63 / .95), rgb(148 84 63 / .5) 50%, rgb(148 84 63 / 0))}
.fs-m2{width:70vw;height:70vw;right:-30vw;top:35%;background:radial-gradient(closest-side in oklab, rgb(122 64 51 / .85), rgb(122 64 51 / .4) 50%, rgb(122 64 51 / 0))}
.fs-m3{width:90vw;height:60vw;left:5vw;bottom:-25vw;background:radial-gradient(closest-side in oklab, rgb(110 56 44 / .8), rgb(110 56 44 / .35) 55%, rgb(110 56 44 / 0))}

/* a pista (SVG desenhado pelo JS com a geometria real da página) */
.fs-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible}
.fs-svg .fs-sup{fill:url(#fs-grad)}
.fs-svg .fs-grao{fill:url(#fs-ruido);opacity:.55}
.fs-svg .fs-sol{fill:url(#fs-sol-g)}
.fs-svg .fs-linha{fill:none;stroke:rgb(255 250 243 / .86);stroke-width:2}
.fs-svg .fs-meio{fill:none;stroke:rgb(255 250 243 / .2);stroke-width:1.2;stroke-dasharray:10 34}
.fs-svg .fs-rastro{fill:none;stroke:url(#fs-rastro-g);stroke-linecap:butt}
.fs-svg .fs-nraia{font-family:var(--f-titulo);font-weight:500;fill:rgb(255 250 243 / .9);text-anchor:middle}
/* sem JS: uma reta simples no meio */
.fs-secao:not(.fs-pronta) .fs-percurso::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:var(--fs-larg);transform:translateX(-50%);z-index:-1;
  background:repeating-linear-gradient(90deg, rgb(255 250 243 / .85) 0 2px, transparent 2px calc(100% / var(--fs-raias))), linear-gradient(var(--fs-terra), var(--fs-terra-2));
}

/* ponto de luz */
.fs-corredor{position:absolute;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;pointer-events:none;z-index:2;
  transform:translate(var(--fs-cx,-200px), var(--fs-cy,-200px));opacity:var(--fs-ca,0);
  background:radial-gradient(closest-side, #fffdf7 0 14%, rgb(255 232 196 / .7) 30%, rgb(255 214 170 / .22) 62%, rgb(255 214 170 / 0))}
.fs-corredor::before{content:"";position:absolute;inset:-110%;border-radius:50%;background:radial-gradient(closest-side, rgb(255 222 184 / .22), rgb(255 222 184 / 0));pointer-events:none}
.fs-corredor::after{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side, rgb(255 226 186 / .35), rgb(255 226 186 / 0));opacity:0;transform:scale(.6);transition:opacity 1.2s ease, transform 1.6s var(--curva)}
.fs-chegou .fs-corredor::after{opacity:1;transform:scale(1)}

/* cabeçalho */
.fs-cab{position:relative;max-width:var(--conteudo);margin:0 auto}
.fs-kicker{margin:0 0 18px;font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--fs-tinta-2);display:flex;align-items:center;gap:14px}
.fs-kicker::before{content:"";width:34px;height:2px;background:var(--pessego);border-radius:2px}
.fs-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(44px,5.2vw,88px);line-height:.88}
.fs-titulo span{display:block}
.fs-l2{color:var(--pessego)}

/* percurso: entrada (curva) + fases */
.fs-percurso{position:relative;max-width:var(--conteudo);margin:clamp(28px,3vw,48px) auto 0}
.fs-entrada{display:grid;grid-template-columns:minmax(0,1fr) var(--fs-larg) minmax(0,1fr);column-gap:var(--fs-gap);min-height:calc(var(--fs-rout) + 40px)}
.fs-entrada .fs-intro{grid-column:3;align-self:end;margin:0 0 6px;max-width:26em;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:var(--fs-tinta-2)}

.fs-lista{list-style:none;margin:0;padding:0}
.fs-fase{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--fs-larg) minmax(0,1fr);column-gap:var(--fs-gap);
  align-items:start;padding:clamp(44px,5vw,84px) 0
}
.fs-rotulo{position:relative;text-align:right}
/* computador: o nome acompanha a linha do ponto de luz, mas para antes da fase seguinte */
@media (min-width:901px){
  .fs-esq{align-self:stretch;padding-bottom:clamp(140px,15vw,240px)}
  .fs-rotulo{position:sticky;top:calc(55vh - var(--fs-eixo))}
}
.fs-num{position:absolute;right:-.04em;top:0;font-family:var(--f-titulo);font-weight:600;font-size:var(--fs-numtam);line-height:.78;
  color:transparent;-webkit-text-stroke:1.5px rgb(242 207 176 / .5);transition:-webkit-text-stroke-color .9s, color .9s}
.fs-nome{position:relative;margin:0;padding-top:calc(var(--fs-numtam) * .8);
  font-family:var(--f-titulo);font-weight:600;font-size:var(--fs-nometam);line-height:.9;color:var(--fs-tinta);letter-spacing:.005em}
.fs-marca{position:relative;display:block;margin-top:calc(var(--fs-eixo) - 5px);height:10px;
  width:calc(100% / var(--fs-raias));margin-left:calc(100% / var(--fs-raias) * var(--fs-luz));
  background:rgb(255 250 243 / .62);border-radius:1px;transition:background-color .9s, box-shadow .9s}
.fs-marca b{position:absolute;left:0;right:0;top:20px;text-align:center;font-family:var(--f-titulo);font-weight:500;font-size:20px;letter-spacing:.06em;color:rgb(255 250 243 / .75);transition:color .9s}
.fs-marca::after{ /* fio da marca até o texto */
  content:"";position:absolute;top:4.5px;left:100%;height:1px;
  width:calc(100% * (var(--fs-raias) - var(--fs-luz) - 1) + var(--fs-gap) - 12px);
  background:linear-gradient(90deg, rgb(255 250 243 / .7), rgb(255 250 243 / .25));
  transform-origin:left;transform:scaleX(.0);transition:transform 1s var(--curva)
}
.fs-corpo{margin-top:calc(var(--fs-eixo) - 15px)}
.fs-txt{margin:0;max-width:27em;font-size:clamp(18px,1.25vw,20px);line-height:1.55;color:var(--fs-tinta)}
.fs-placa{margin-top:22px;max-width:30em;background:color-mix(in oklab, #f6ece1 95%, transparent);color:var(--fs-escura);border-radius:3px;padding:18px 22px;
  box-shadow:0 18px 40px -26px rgb(40 14 8 / .7)}
.fs-placa p{margin:0;display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:0 10px;font-size:18px;line-height:1.5}
.fs-placa p + p{margin-top:10px;padding-top:10px;border-top:1px solid rgb(148 84 63 / .2)}
.fs-placa b{font-family:var(--f-titulo);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--fs-funda)}

/* estados: apagada, acesa, agora */
.js .fs-rotulo, .js .fs-corpo{opacity:.6;transition:opacity .9s ease, transform 1s var(--curva)}
.js .fs-corpo{transform:translateX(14px)}
.js .fs-on .fs-rotulo, .js .fs-on .fs-corpo{opacity:1;transform:none}
.fs-on .fs-marca{background:#ffe7c6;box-shadow:0 0 26px 6px rgb(255 222 180 / .5)}
.fs-on .fs-marca b{color:var(--fs-tinta)}
.fs-on .fs-marca::after{transform:none}
.fs-on .fs-num{-webkit-text-stroke-color:rgb(242 207 176 / .8)}
.fs-agora .fs-num{color:rgb(242 207 176 / .16);-webkit-text-stroke-color:var(--pessego)}
.fs-agora .fs-marca{box-shadow:0 0 40px 12px rgb(255 222 180 / .6)}
/* a festa de cada fase: um anel de luz sai da marca quando ela acende */
.fs-marca::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  border:2px solid rgb(255 236 210 / .9);opacity:0;transform:scale(.1);pointer-events:none}
.fs-on .fs-marca::before{animation:fs-festa 1.5s var(--curva) both}
@keyframes fs-festa{0%{opacity:0;transform:scale(.1)}15%{opacity:.9}100%{opacity:0;transform:scale(1)}}

/* fecho */
.fs-fecho{position:relative;max-width:var(--conteudo);margin:clamp(30px,4vw,60px) auto 0;text-align:center}
.fs-citacao{margin:0}
.fs-citacao blockquote{margin:0}
.fs-citacao p{margin:0 auto;max-width:14em;font-family:var(--f-titulo);font-weight:500;font-size:clamp(46px,5.6vw,96px);line-height:.9;color:var(--fs-tinta);transition:color 1.2s}
.fs-chegou .fs-citacao p{color:#fff3e2;text-shadow:0 0 40px rgb(255 214 170 / .35)}
.fs-citacao figcaption{margin-top:18px;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--fs-tinta-2)}
.fs-acao{margin:clamp(40px,5vw,64px) auto 0;display:flex;flex-direction:column;align-items:center;gap:20px}
.fs-acao p{margin:0;max-width:30em;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:var(--fs-tinta-2)}
.fs-acao .btn:focus-visible{outline-color:var(--pessego)}

/* celular e tablet: pista estreita à esquerda, placas à direita */
@media (max-width:900px){
  .fs-secao{--fs-larg:66px;--fs-raias:3;--fs-luz:1;--fs-gap:18px;--fs-numtam:64px;--fs-nometam:44px;--fs-rout:96px;padding-left:0}
  .fs-cab{padding-left:var(--margem)}
  .fs-secao:not(.fs-pronta) .fs-percurso::before{left:0;transform:none}
  .fs-entrada,.fs-fase{grid-template-columns:var(--fs-larg) minmax(0,1fr)}
  .fs-entrada{min-height:0;padding-top:calc(var(--fs-rout) + 44px)}
  .fs-entrada .fs-intro{grid-column:2;margin:0}
  .fs-fase{padding:44px 0 34px}
  .fs-esq{grid-column:2;grid-row:1}
  .fs-rotulo{text-align:left}
  .fs-num{left:-.02em;right:auto}
  .fs-marca{grid-column:1;grid-row:1}
  .fs-marca::after{display:none}
  .fs-marca b{font-size:16px;top:16px}
  .fs-corpo{grid-column:2;margin-top:16px}
  .fs-placa{padding:16px 16px 16px 18px}
  .fs-placa p{grid-template-columns:minmax(0,1fr);gap:2px}
  .fs-fecho{text-align:left;padding:0 0 0 calc(var(--fs-larg) + var(--fs-gap))}
  .fs-citacao p{margin:0}
  .fs-acao{align-items:flex-start}
}
@media (max-width:1180px) and (min-width:901px){
  .fs-placa p{grid-template-columns:minmax(0,1fr);gap:2px}
}
@media (max-width:420px){
  .fs-kicker{font-size:14px;letter-spacing:.1em;gap:10px}
  .fs-kicker::before{width:22px}
}
@media (max-width:900px) and (min-width:600px){
  .fs-secao{--fs-larg:96px;--fs-gap:36px;--fs-numtam:84px;--fs-nometam:56px;--fs-rout:140px}
}
@media (prefers-reduced-motion: reduce){
  .js .fs-rotulo, .js .fs-corpo{opacity:1;transform:none}
}