/* cine.css · a abertura em sequência.
   O ícone sai da marca, abre em 4 faces e o zoom atravessa para o método.
   Sem JS ou com movimento reduzido, a mesma cena vira uma abertura parada. */

/* ===================== o salão · tubos, reflexo, chão ===================== */
.cine{position:relative; background:var(--bg-sunk)}
.cine-palco{position:relative; overflow:hidden; isolation:isolate;
  padding:calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-9);
  display:grid; justify-items:center; gap:var(--s-7)}
.salao{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(95,44,132,.20), transparent 70%), var(--bg-sunk)}
.salao::before{content:""; position:absolute; inset:0 0 auto; height:30%;
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent)}
.salao{--tubos:1}
.tubo{position:absolute; top:30%; height:22%; width:4px; border-radius:4px;
  background:linear-gradient(180deg, transparent, var(--c) 18%, var(--c) 82%, transparent);
  box-shadow:0 0 18px 2px var(--c), 0 0 60px 10px color-mix(in srgb, var(--c) 35%, transparent); opacity:calc(.85 * var(--tubos))}
.reflexo{position:absolute; inset:58% 0 0; transform:scaleY(-1); transform-origin:top; filter:blur(5px); opacity:.32;
  -webkit-mask-image:linear-gradient(0deg, transparent 40%, #000); mask-image:linear-gradient(0deg, transparent 40%, #000)}
.reflexo .tubo{top:-30%; box-shadow:0 0 24px 6px var(--c)}
.chao{position:absolute; left:-30%; right:-30%; bottom:0; height:44%; transform-origin:50% 0;
  transform:perspective(520px) rotateX(64deg);
  background-image:linear-gradient(rgba(243,245,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,245,250,.05) 1px, transparent 1px);
  background-size:120px 120px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 85%); mask-image:linear-gradient(180deg, #000, transparent 85%)}
.respingo{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}

/* ===================== a marca em três peças ===================== */
.marca-3d{position:relative; z-index:2; width:min(80vw, 860px); aspect-ratio:900 / 300}
.marca-3d > img,.m-slot{position:absolute; display:block; max-width:none}
.m-mo{left:0; top:0; width:45%; height:100%}
.m-ve{left:66.444%; top:0; width:33.556%; height:80%}
.m-tag{left:57.778%; top:80%; width:42.222%; height:20%}
.m-slot{left:41.333%; top:.667%; width:27.889%; height:95.667%}
.m-sem{width:100%; height:100%}
.solido-host{display:none}

.cine-abertura{position:relative; z-index:3; text-shadow:0 0 14px var(--bg-sunk), 0 0 4px var(--bg-sunk); display:grid; justify-items:center; gap:var(--s-4); text-align:center}
.cine-dica{display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3)}
.cine-dica svg{width:14px; height:14px}

.cine-copy{position:relative; z-index:3; display:grid; gap:var(--s-5); justify-self:start; max-width:var(--site-max);
  width:100%; margin-inline:auto}
.hero-titulo{font-weight:var(--fw-light); font-size:clamp(44px,6.3vw,100px); line-height:.95; letter-spacing:-.045em}
.hero-titulo span{display:block; white-space:nowrap}
.hero-titulo b{font-family:var(--font-mono); font-weight:var(--fw-book); letter-spacing:-.06em; color:var(--accent-good)}
.hero-titulo span + span{color:rgba(243,245,250,.72)}
.hero-sub{font-size:clamp(17px,1.5vw,22px); font-weight:var(--fw-light); line-height:1.42; color:var(--text);
  max-width:34ch; letter-spacing:-.012em}
.hero-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5)}
.hero-acoes .btn svg{width:16px; height:16px}
.hero-link{display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--fs-ui); color:var(--text)}
.hero-link-ic{width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); display:grid; place-items:center;
  transition:border-color var(--t-fast), background var(--t-fast)}
.hero-link:hover .hero-link-ic{border-color:var(--accent); background:var(--state-hover)}
.hero-link-ic svg{width:16px; height:16px}

.chip-prova{display:none; z-index:4; align-items:center; gap:var(--s-3); padding:12px 16px;
  border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--text-2); max-width:250px;
  background:color-mix(in srgb, var(--surface-raised) 74%, transparent);
  backdrop-filter:blur(var(--blur-vidro)); -webkit-backdrop-filter:blur(var(--blur-vidro));
  border:1px solid var(--border-strong); box-shadow:inset 0 1px 0 rgba(243,245,250,.08), var(--e-2)}
.chip-prova b{font-family:var(--font-mono); font-weight:var(--fw-med); color:var(--accent-good)}
.chip-prova svg{width:16px; height:16px; color:var(--accent-good); flex:none}

/* peças que só existem na sequência */
.cine-orbitas,.cine-fantasma,.cine-capitulo,.palco-controle,.cine-portal,.cine-rodape{display:none}

/* ===================== a sequência presa ao scroll ===================== */
.cine.vivo{height:380svh}
.cine.vivo .cine-palco{position:sticky; top:0; height:100svh; min-height:620px; padding:0; display:block}
.cine.vivo .cine-palco > *{position:absolute}
.cine.vivo .salao{inset:0}
.cine.vivo .marca-3d{left:50%; top:46%; transform:translate(-50%,-50%)}
.cine.vivo .m-sem{visibility:hidden}
.cine.vivo.no3d .m-sem{visibility:visible}
.cine.vivo .solido-host{display:block; left:0; top:0; z-index:3; transform-origin:0 0; will-change:transform}
.cine.vivo .cine-abertura{left:50%; top:calc(46% + min(80vw,860px) / 6 + 48px); transform:translateX(-50%); width:max-content; max-width:90vw}

.cine.vivo .cine-copy{left:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter))); top:50%;
  transform:translateY(-50%); width:min(46vw, 640px); margin:0; opacity:0; visibility:hidden}
.cine.vivo .chip-prova{display:flex; opacity:0}
.chip-prova--a{left:50%; top:16%}
.chip-prova--b{right:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter))); top:auto; bottom:22%}

.cine.vivo .cine-orbitas{display:block; z-index:1; width:min(46vw,620px); aspect-ratio:1; left:70%; top:50%;
  translate:-50% -50%; opacity:0; pointer-events:none}
.cine-orbitas i{position:absolute; inset:0; border:1px solid var(--border); border-radius:50%}
.cine-orbitas i:nth-child(2){inset:12%; border-color:rgba(243,245,250,.06)}
.cine-orbitas i:nth-child(3){inset:-10%; border-style:dashed; border-color:rgba(243,245,250,.05)}

.cine.vivo .cine-fantasma{display:block; z-index:1; left:-4%; top:30%; font-weight:var(--fw-air);
  font-size:24vw; line-height:1; letter-spacing:-.06em; white-space:nowrap; color:transparent;
  -webkit-text-stroke:1px rgba(243,245,250,.10); opacity:0; pointer-events:none}

.cine.vivo .cine-capitulo{display:grid; gap:var(--s-5); z-index:3; left:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter)));
  top:50%; transform:translateY(-50%); opacity:0; pointer-events:none}
.cine-capitulo h2{font-weight:var(--fw-light); font-size:clamp(52px,7vw,112px); line-height:.96; letter-spacing:-.06em}
.cine-capitulo h2 b{font-family:var(--font-mono); font-weight:var(--fw-book); color:var(--accent-good)}
.cine-capitulo .faces{list-style:none; padding:0; display:grid; gap:var(--s-2)}
.cine-capitulo .faces li{display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-lead); font-weight:var(--fw-light); color:rgba(243,245,250,.85)}
.cine-nota{font-size:var(--fs-body); color:var(--text-2); max-width:32ch}
.cine-servicos{font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,245,250,.7)}
.cine-capitulo .faces i{width:12px; height:12px; border-radius:3px}

.cine.vivo .palco-controle{display:flex; z-index:5; left:70%; bottom:9%; transform:translateX(-50%); opacity:0; visibility:hidden}
.palco-controle{align-items:center; white-space:nowrap; border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter:blur(var(--blur-vidro)); -webkit-backdrop-filter:blur(var(--blur-vidro))}
.palco-dica,.palco-botao{display:inline-flex; align-items:center; gap:var(--s-2); padding:12px 18px; font-size:var(--fs-sm); color:var(--text-2)}
.palco-dica svg,.palco-botao svg{width:15px; height:15px}
.palco-botao{border-left:1px solid var(--border-strong); color:var(--text); border-radius:0 var(--r-pill) var(--r-pill) 0;
  transition:background var(--t-fast)}
.palco-botao:hover{background:var(--state-hover)}
.palco-botao svg{transition:transform var(--t-base) var(--ease)}
.palco-botao[aria-pressed="true"] svg{transform:rotate(45deg)}

.cine.vivo .cine-portal{display:grid; place-items:start center; padding-top:calc(var(--nav-h) + 7svh) !important; inset:0; z-index:8; background:var(--paper); color:var(--paper-text);
  clip-path:circle(0% at 70% 50%); pointer-events:none; text-align:center; padding:var(--gutter)}
.cine-portal-conteudo{display:grid; justify-items:center; gap:var(--s-5); max-width:980px}
.cine-portal-conteudo img{width:52px; height:auto}
.cine-portal .t-kicker{color:var(--az-700)}
.cine-portal h2{font-weight:var(--fw-air); font-size:clamp(40px,6.4vw,104px); line-height:1; letter-spacing:-.055em}
.cine-portal h2 span{color:var(--brand-magenta)}
.cine-portal p{font-size:var(--fs-lead); color:var(--paper-text-2); max-width:46ch}

.cine.vivo .cine-rodape{display:flex; z-index:6; left:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter)));
  right:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter))); bottom:28px;
  align-items:center; justify-content:space-between; gap:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3)}
.cine-trilho{display:flex; gap:var(--s-2)}
.cine-trilho i{width:34px; height:2px; background:var(--border-strong); overflow:hidden}
.cine-trilho b{display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left}

@media (max-width:900px){
  .cine.vivo{height:330svh}
  .cine.vivo .marca-3d{width:88vw; top:40%}
  .cine.vivo .cine-abertura{top:calc(40% + 88vw / 6 + 36px)}
  .cine.vivo .cine-copy{left:var(--gutter); right:var(--gutter); width:auto; top:calc(var(--nav-h) + 24px); transform:none}
  .hero-titulo{font-size:clamp(40px,11vw,72px)}
  .hero-sub{font-size:16px}
  .cine.vivo .cine-orbitas{width:84vw; left:50%; top:70%}
  .chip-prova{font-size:var(--fs-xs); padding:9px 12px; max-width:200px}
  .cine.vivo .chip-prova--a{display:none}
  .chip-prova--b{right:var(--gutter); top:auto; bottom:15%}
  .cine.vivo .cine-capitulo{top:calc(var(--nav-h) + 24px); transform:none; left:var(--gutter); right:var(--gutter)}
  .cine.vivo .chip-prova{display:none}
  .tubo{display:none}
  .cine-servicos .quebra{display:block; height:0; overflow:hidden}
  .hero-sub{font-size:16px}
  .cine-capitulo .faces li{font-size:var(--fs-body)}
  .cine.vivo .palco-controle{left:50%; bottom:6%}
  .palco-dica{display:none}
  .palco-botao{border-left:0; border-radius:var(--r-pill)}
  .cine.vivo .cine-fantasma{top:44%; font-size:40vw}
  .cine.vivo .cine-rodape{display:none}
}

/* ===================== a seção clara que continua o portal ===================== */
.sec--papel{background:var(--paper); color:var(--paper-text)}
.sec--papel .t-kicker{color:var(--az-700)}
.sec--papel .t-lead,.sec--papel .t-body{color:var(--paper-text-2)}
.sec--papel .pilares li{background:var(--paper-dim); border-color:var(--paper-border)}
.sec--papel .pilares p{color:var(--paper-text-2)}
.sec--papel .t-label{color:var(--paper-text-2)}

/* cartão do hero que alterna entre soluções construídas no método */
.chip-prova span{display:grid; gap:2px; transition:opacity var(--t-slow) var(--ease)}
.chip-prova small{font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-weak)}
.chip-prova b{font-family:var(--font-display); font-weight:var(--fw-med); color:var(--accent-good)}
.chip-prova.troca span{opacity:0}

/* ===================== 01 · o método atravessado na horizontal ===================== */
/* sem JS ou com movimento reduzido: uma seção clara com os pilares empilhados */
.metodo{position:relative; z-index:2; background:var(--paper); color:var(--paper-text); padding-block:var(--s-9)}
.metodo-palco{max-width:var(--site-max); margin-inline:auto; padding-inline:var(--gutter)}
.metodo-trilho{display:grid; gap:var(--s-5)}
.metodo-intro{display:grid; gap:var(--s-5); justify-items:start; max-width:520px; margin-bottom:var(--s-5)}
.pilula{display:inline-flex; align-items:center; gap:var(--s-2); padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid currentColor; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; opacity:.8}
.pilula i{width:6px; height:6px; border-radius:50%; background:var(--accent-hot)}
.metodo h2{font-weight:var(--fw-light); font-size:clamp(44px,5.4vw,84px); line-height:.98; letter-spacing:-.05em}
.metodo h2 b{font-family:var(--font-mono); font-weight:var(--fw-book); color:var(--mi-700)}
.metodo h2 span{display:block; opacity:.5}
.metodo-intro p{font-size:var(--fs-lead); font-weight:var(--fw-light); line-height:1.6; opacity:.8; max-width:40ch}
.metodo-dica{display:none}
.pilar{position:relative; display:grid; gap:var(--s-4); align-content:start; padding:var(--s-7) var(--s-6); border-radius:var(--r-cartao-alto);
  background:var(--bg); color:var(--text); border:1px solid var(--border-strong); overflow:hidden; isolation:isolate}
.pilar-fundo{position:absolute; right:-2%; bottom:-14%; z-index:-1; font-weight:var(--fw-air); font-size:220px; line-height:1; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--c) 45%, transparent); pointer-events:none}
.pilar-face{width:56px; height:auto}
.pilar-tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:4px;
  color:color-mix(in srgb, var(--c) 70%, white); border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background:color-mix(in srgb, var(--c) 14%, transparent)}
.tag--neutra{--c:#A1A9BA}
.pilar h3{font-weight:var(--fw-light); font-size:clamp(26px,2.4vw,36px); line-height:1.1; letter-spacing:-.03em}
.pilar p{font-size:var(--fs-body); line-height:1.65; color:var(--text-2); max-width:38ch}
.pilar-n{font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-top:var(--s-4)}
.metodo-fim{display:grid; gap:var(--s-4); justify-items:start; padding-top:var(--s-5)}
.metodo-fim p{font-weight:var(--fw-light); font-size:clamp(24px,2.4vw,36px); letter-spacing:-.03em; max-width:18ch}
.metodo-fim b{font-family:var(--font-mono); font-weight:var(--fw-book); color:var(--accent-good)}
.metodo-hud{display:none}

/* com movimento: a seção prende, escurece e o trilho anda para a esquerda */
.metodo.vivo{height:420svh; padding:0; --escuro:0;
  background:color-mix(in srgb, var(--bg) calc(var(--escuro) * 100%), var(--paper));
  color:color-mix(in srgb, var(--text) calc(var(--escuro) * 100%), var(--paper-text))}
.cine.vivo + .metodo.vivo{margin-top:-28svh}
.metodo.vivo .metodo-palco{position:sticky; top:0; height:100svh; max-width:none; padding:0; overflow:hidden; perspective:1400px}
.metodo.vivo .metodo-palco::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--escuro);
  background:radial-gradient(ellipse 50% 60% at 70% 40%, rgba(95,44,132,.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 15% 85%, rgba(211,32,100,.10), transparent 70%)}
.metodo.vivo .metodo-trilho{display:flex; align-items:center; gap:6vw; height:100%; width:max-content; transform-style:preserve-3d;
  padding-inline:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter))) 24vw; will-change:transform}
.metodo.vivo .metodo-intro{margin:0; width:min(520px, 80vw); flex:none}
.metodo.vivo .metodo h2 b,.metodo.vivo h2 b{color:color-mix(in srgb, var(--accent-good) calc(var(--escuro) * 100%), var(--mi-700))}
.metodo.vivo .metodo-dica{display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.18em; text-transform:uppercase; opacity:.6}
.metodo-dica svg{width:14px; height:14px}
.metodo.vivo .pilar{flex:none; width:min(420px, 78vw); min-height:min(520px, 70svh); transform-origin:50% 50%;
  background:linear-gradient(160deg, rgba(243,245,250,.07), rgba(243,245,250,.015)), rgba(16,19,27,.82);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(243,245,250,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color var(--t-slow), box-shadow var(--t-slow)}
.metodo.vivo .pilar.ativo{border-color:color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow:0 50px 120px -40px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(243,245,250,.08)}
.metodo.vivo .metodo-fim{flex:none; width:min(420px, 78vw)}
.metodo.vivo .metodo-hud{display:flex; position:absolute; left:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter)));
  right:max(var(--gutter), calc((100vw - var(--site-max)) / 2 + var(--gutter))); bottom:32px; align-items:center; gap:var(--s-5);
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.18em; color:var(--text-3); opacity:var(--escuro)}
.metodo-trilha{flex:1; height:1px; background:var(--border)}
.metodo-trilha i{display:block; height:100%; width:0; background:var(--grad-brand)}
@media (max-width:900px){
  .metodo.vivo{height:480svh}
  .cine.vivo + .metodo.vivo{margin-top:-30svh}
  .metodo.vivo .metodo-trilho{gap:8vw; padding-inline:var(--gutter) 10vw}
  .metodo.vivo .pilar{min-height:62svh; padding:var(--s-6) var(--s-5)}
  .pilar-fundo{font-size:160px}
}

/* ===================== 02 · o percurso, desenhado pelo scroll ===================== */
.percurso-sec{padding-block:var(--s-10)}
.percurso-grade{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-9); align-items:start}
.percurso-fixo{position:sticky; top:calc(var(--nav-h) + var(--s-7)); display:grid; gap:var(--s-5)}
.percurso-fixo h2 b{font-family:var(--font-mono); font-weight:var(--fw-book); color:var(--accent-good)}
.percurso-leis{display:grid; gap:var(--s-4); margin-top:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--border)}
.percurso-leis p{font-size:var(--fs-sm); line-height:1.65; color:var(--text-2); max-width:46ch}
.percurso-leis strong{color:var(--text); font-weight:var(--fw-med)}
.percurso-linha{position:relative; padding-left:56px}
.percurso-trilho{position:absolute; left:19px; top:28px; bottom:120px; width:2px; background:var(--border)}
.percurso-trilho i{display:block; width:100%; height:100%; background:linear-gradient(180deg, #D32064, #5F2C84 30%, #15ABD8 65%, #2CECA8);
  transform-origin:top; transform:scaleY(var(--desenho,1))}
.passos{list-style:none; padding:0; display:grid}
.passo{position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--s-5); padding-block:var(--s-5)}
.passo-n{position:absolute; left:-56px; top:var(--s-5); width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-3); background:var(--bg); border:1px solid var(--border-strong);
  transition:color var(--t-slow), border-color var(--t-slow), box-shadow var(--t-slow), background var(--t-slow)}
.passo-corpo{grid-column:1 / -1; display:grid; gap:var(--s-3); padding:var(--s-5) var(--s-6); border-radius:var(--r-cartao);
  border:1px solid var(--border); background:var(--surface); transition:border-color var(--t-slow), transform var(--t-slow) var(--ease), opacity var(--t-slow)}
.passo .tag{justify-self:start; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:4px;
  color:color-mix(in srgb, var(--c) 70%, white); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); background:color-mix(in srgb, var(--c) 14%, transparent)}
.passo h3{font-weight:var(--fw-light); font-size:clamp(28px,2.6vw,40px); letter-spacing:-.03em; line-height:1.05}
.passo p{font-size:var(--fs-body); line-height:1.6; color:var(--text-2); max-width:48ch}
.passo p small{display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--text-weak); margin-bottom:var(--s-1)}
.portao{position:relative; padding-block:var(--s-2)}
.portao span{display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-weak); transition:color var(--t-slow)}
.portao span::before{content:""; position:absolute; left:-42px; top:50%; width:12px; height:12px; border-radius:3px; transform:translateY(-50%) rotate(45deg);
  border:1px solid var(--border-strong); background:var(--bg); transition:background var(--t-slow), border-color var(--t-slow)}
.portao svg{width:13px; height:13px}
.percurso-volta{display:flex; gap:var(--s-3); align-items:flex-start; margin-top:var(--s-6); padding:var(--s-5); border-radius:var(--r-cartao);
  border:1px dashed color-mix(in srgb, var(--accent-good) 40%, transparent); color:var(--text-2); font-size:var(--fs-sm); line-height:1.6}
.percurso-volta svg{width:18px; height:18px; color:var(--accent-good); flex:none; margin-top:2px}
/* estados com movimento: o que ainda não chegou fica apagado, o atual acende na cor do pilar */
.percurso-sec.vivo .passo:not(.feito) .passo-corpo{opacity:.4; transform:translateX(12px)}
.percurso-sec.vivo .passo.feito .passo-n{color:var(--text); border-color:var(--c); background:color-mix(in srgb, var(--c) 18%, var(--bg))}
.percurso-sec.vivo .passo.atual .passo-corpo{border-color:color-mix(in srgb, var(--c) 55%, transparent)}
.percurso-sec.vivo .passo.atual .passo-n{box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent)}
.percurso-sec.vivo .portao.feito span{color:var(--accent-good)}
.percurso-sec.vivo .portao.feito span::before{background:var(--accent-good); border-color:var(--accent-good)}
@media (max-width:1000px){
  .percurso-grade{grid-template-columns:1fr; gap:var(--s-7)}
  .percurso-fixo{position:static}
  .percurso-linha{padding-left:48px}
  .passo-n{left:-48px; width:34px; height:34px}
  .percurso-trilho{left:16px}
  .portao span::before{left:-35px}
  .passo-corpo{padding:var(--s-5)}
}