/* Sistema de entradas: só esconde quando o JS está presente */
html.js .reveal .part{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
html.js .reveal.in .part{opacity:1;transform:none}
html.js .reveal.in .part:nth-child(2){transition-delay:.09s}
html.js .reveal.in .part:nth-child(3){transition-delay:.18s}
html.js .reveal.in .part:nth-child(4){transition-delay:.27s}
html.js .reveal.in .part:nth-child(5){transition-delay:.36s}
html.js .reveal.in .part:nth-child(6){transition-delay:.45s}
html.js .reveal.in.done .part:nth-child(n){transition-delay:0s}
html.rm .reveal .part{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){html.js .reveal .part{opacity:1;transform:none}}

/* Rua entre seções: a rua do pátio vista de cima, com o guincho (mais lento) e um carro
   (mais rápido) atravessando em loop. Cada veículo anda num "trilho" da largura da rua que
   vai de 0 até 100% + a largura máxima do veículo: o veículo começa colado à esquerda, fora
   da rua, e termina inteiro fora à direita. overflow:hidden impede rolagem lateral. */
.rua-divisoria{--guincho-w:186px;position:relative;width:var(--wrap);height:120px;margin:0 auto;overflow:hidden;
  background:#0D1830;border-block:3px solid #2A3D60;border-radius:6px}
.rua-divisoria::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  background:repeating-linear-gradient(to right,#5C77A6 0 40px,transparent 40px 70px)}
.rua-trilho{position:absolute;left:0;width:100%;height:50%}
.rua-trilho-guincho{top:0}
.rua-trilho-carro{top:50%}
.rua-trilho svg{position:absolute;right:100%;top:50%;transform:translateY(-50%);overflow:visible;display:block}
.rua-guincho{width:var(--guincho-w);height:40px}
.rua-carro{width:56px;height:32px}
/* sem movimento: veículos parados à vista */
.rua-trilho-guincho{transform:translateX(calc(40% + var(--guincho-w)))}
.rua-trilho-carro{transform:translateX(75%)}
@media (prefers-reduced-motion:no-preference){
  .rua-trilho-guincho{animation:rua-atravessa 13s linear infinite}
  .rua-trilho-carro{animation:rua-atravessa 8s linear infinite;animation-delay:-3s}
}
html.rm .rua-trilho{animation:none}
@keyframes rua-atravessa{from{transform:translateX(0)}to{transform:translateX(calc(100% + var(--guincho-w) + 60px))}}
@media (max-width:600px){
  .rua-divisoria{--guincho-w:130px;height:84px}
  .rua-guincho{height:28px}
  .rua-carro{width:40px;height:22px}
}

/* A dor */
.dor-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.dor-head{display:grid;gap:18px}
.dores{list-style:none;margin:0;padding:0;counter-reset:d}
.dores li{position:relative;padding:24px 0 24px 64px;border-top:1px solid var(--line)}
.dores li::before{counter-increment:d;content:"0" counter(d);position:absolute;left:0;top:28px;
  font:500 .9rem/1 var(--f-mono);color:var(--text-secondary)}
.dores h3{margin-bottom:8px}
.dores p{color:var(--text-secondary);max-width:44ch}

/* Como funciona */
.passos-lista{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.passo{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 28px}
.passo-art{margin:0;background:var(--canvas);border-radius:12px;overflow:hidden}
.passo-art svg{width:100%;height:auto;aspect-ratio:3/2}
.passo-n{font:500 .85rem/1 var(--f-mono);color:var(--text-secondary);margin:20px 0 10px}
.passo h3{margin-bottom:8px}
.passo p:last-child{color:var(--text-secondary)}
.ill-panel{fill:var(--panel-raised);stroke:var(--line-strong);stroke-width:2}
.ill-accent{fill:var(--accent)}
.ill-soft{fill:var(--accent-muted)}
.ill-line-muted{fill:none;stroke:var(--line);stroke-width:2}
.ill-line{fill:none;stroke:var(--line-strong);stroke-width:6;stroke-linecap:round}
.ill-line-accent{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round}
.ill-plate{font:500 28px var(--f-mono);fill:var(--text-primary);text-anchor:middle;letter-spacing:2px}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 4.8s var(--ease-io) -1.2s infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(.86)}}

/* Pausa quem está fora da tela */
.live-el:not(.on) .pulse,.live-el:not(.on)::after,.live-el:not(.on) .ticket-card::after,
.ticket-card.live-el:not(.on)::after,.final.live-el:not(.on)::before{animation-play-state:paused}

/* A conta aberta */
.conta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.conta-lede{color:var(--text-secondary);margin:16px 0 32px;max-width:40ch}
.conta-controles fieldset{border:0;margin:0 0 24px;padding:0}
.conta-controles legend,.dias label{font:500 .8rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.conta-controles legend{margin-bottom:12px}
.opcoes{display:flex;flex-wrap:wrap;gap:10px}
.chip-opt{position:relative;display:inline-flex}
.chip-opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip-opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);
  border-radius:999px;color:var(--text-secondary);
  transition:border-color .25s var(--ease-out),color .25s var(--ease-out),background-color .25s var(--ease-out)}
.chip-opt:hover span{color:var(--text-primary)}
.chip-opt input:checked + span{border-color:var(--accent);color:var(--text-primary);background:rgba(46,155,255,.12)}
.chip-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.dias{margin:0 0 26px}
.dias-top{display:flex;justify-content:space-between;align-items:baseline}
.dias output{font:500 1.6rem/1 var(--f-mono)}
.dias input[type=range]{width:100%;height:44px;accent-color:var(--accent);cursor:pointer}
.ticket-card{position:relative;background:var(--panel-raised);border:2px solid var(--line-strong);border-radius:16px;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ticket-card::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(46,155,255,.18);opacity:0;animation:respira 6s var(--ease-io) -2s infinite}
@keyframes respira{50%{opacity:1}}
.ticket-head{display:flex;justify-content:space-between;align-items:center;padding:9px 20px;
  background:var(--accent);color:var(--accent-ink);font:500 .78rem/1 var(--f-mono);letter-spacing:.2em}
.ticket-linhas{margin:0;padding:8px 22px}
.ticket-linhas div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line)}
.ticket-linhas dt{color:var(--text-secondary)}
.ticket-linhas dd{margin:0;font:500 1.05rem/1 var(--f-mono)}
.ticket-total{border-bottom:0!important}
.ticket-total dt{color:var(--text-primary)}
.ticket-total dd{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.ticket-nota{padding:0 22px 20px;font-size:.9rem;color:var(--text-secondary)}

/* Recursos */
.recursos-lista{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,6vw,96px)}
.recursos-lista li{display:grid;grid-template-columns:14px 1fr;gap:6px 18px;padding:26px 0;border-top:1px solid var(--line)}
.recursos-lista li::before{content:"";grid-row:1 / span 2;width:14px;height:14px;margin-top:.4em;border:2px solid var(--accent-muted);border-radius:3px}
.recursos-lista p{color:var(--text-secondary)}

/* Preços */
.planos{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:20px;margin-top:48px}
.plano{display:flex;flex-direction:column;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px}
.plano-destaque{border-color:var(--accent)}
.selo{align-self:flex-start;font:500 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(46,155,255,.14);color:var(--accent-hover);padding:8px 10px;border-radius:999px}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.valor{font:800 italic clamp(2.2rem,3.4vw,2.6rem)/1 var(--f-display);font-stretch:118%;white-space:nowrap}
.periodo{color:var(--text-secondary);white-space:nowrap}
.plano-itens{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plano-itens li{position:relative;padding-left:26px;color:var(--text-secondary)}
.plano-itens li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:2px;background:var(--accent)}
.plano .btn{margin-top:auto}

/* Perguntas */
.estreito{width:min(820px,100% - 32px);margin-inline:auto}
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  min-height:44px;padding:22px 0;font:500 1.15rem/1.3 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 1.4rem/1 var(--f-mono);color:var(--text-secondary);transition:transform .35s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--text-secondary);max-width:62ch}

/* Convite final */
.final{position:relative;text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(25,195,255,.10) 118px 120px);
  -webkit-mask:radial-gradient(60% 70% at 50% 50%,#000 20%,transparent 75%);mask:radial-gradient(60% 70% at 50% 50%,#000 20%,transparent 75%);
  animation:respira 9s var(--ease-io) -3s infinite}
.final h2{margin:0 auto 32px;max-width:16ch;font-size:clamp(2.4rem,6vw,4.6rem)}

@media (max-width:860px){
  .dor-grid,.conta-grid,.passos-lista,.recursos-lista,.planos{grid-template-columns:1fr}
}