/* TiroDoc — landing: herói, demo viva, ritmo das seções. Tokens novos com prefixo --lp-. Só transform/opacity animam. */
:root{
  --lp-noite:#0a141b; --lp-noite-2:#122330; --lp-noite-linha:rgb(232 240 237 / .16);
  --lp-tinta:#e8f0ed; --lp-tinta-2:#a9bfc0; --lp-brilho:#3fd2b6; --lp-brilho-fundo:rgb(63 210 182 / .18);
  --lp-ok:#86b4ea; --lp-papel-alto:#fafcfb;
  --lp-h1:clamp(2.7rem,1rem + 8.2vw,8.2rem);
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){--lp-noite:#060d12;--lp-noite-2:#0d1b25}}
:root[data-tema="escuro"]{--lp-noite:#060d12;--lp-noite-2:#0d1b25}

.lp .btn--grande{min-height:3.6rem;padding:.9rem 1.8rem;font-size:var(--t-m);font-weight:700}

/* ---------- herói: a tese é "existe um dia certo" ---------- */
.lp-heroi{padding-block:calc(var(--e7) + 1rem) var(--e8);isolation:isolate}
/* régua de plotagem no topo: marcas de dia e de semana */
.lp-heroi::before{content:"";position:absolute;inset:0 0 auto 0;height:1.1rem;z-index:-1;opacity:.55;
  background:
    repeating-linear-gradient(90deg,var(--linha-forte) 0 1px,transparent 1px 7px) top/100% .45rem no-repeat,
    repeating-linear-gradient(90deg,var(--tinta) 0 2px,transparent 2px 49px) top/100% 1.1rem no-repeat}
.lp-heroi .heroi__alvo{right:-16rem;top:-10rem;width:min(78rem,170vw);color:var(--linha-forte);opacity:.34}
.lp-heroi .heroi__alvo circle{stroke-width:1}
.lp-eyebrow{max-width:none;display:flex;align-items:center;gap:.6rem;color:var(--tinta-2)}
.lp-ponto{width:.7rem;height:.7rem;border-radius:50%;background:var(--janela);box-shadow:0 0 0 4px var(--janela-fundo);flex:none}
.lp-h1{font-size:var(--lp-h1);max-width:12.5ch;font-stretch:125%;font-weight:780;letter-spacing:-.045em;line-height:.93;margin-top:var(--e4);isolation:isolate}
.lp-h1 em{position:relative;font-style:normal;color:var(--janela-texto);background:none;padding-inline:0;white-space:nowrap}
.lp-h1 em::after{content:"";position:absolute;inset:auto -.04em .02em -.04em;height:.36em;background:var(--janela-fundo);z-index:-1;
  transform-origin:left;animation:lp-varre .95s .25s var(--ease) both}
@keyframes lp-varre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lp-heroi .heroi__fila{margin-top:var(--e6);margin-bottom:var(--e8)}
.lp-heroi .lead{font-size:clamp(1.1rem,1rem + .45vw,1.35rem);max-width:46ch;color:var(--tinta)}

/* demo: prancha em relevo, com placa deslocada e marcas de registro */
.lp-demo{padding:clamp(1rem,.6rem + 1.6vw,2rem);border-radius:var(--r-g);background:var(--folha);border:1px solid var(--linha-forte);
  box-shadow:12px 12px 0 -1px var(--janela-fundo),12px 12px 0 0 var(--janela);margin-right:12px;margin-bottom:12px}
.lp-demo::before,.lp-demo::after{content:"";position:absolute;width:1.1rem;height:1.1rem;border:2px solid var(--tinta);pointer-events:none}
.lp-demo::before{left:-.55rem;top:-.55rem;border-right:0;border-bottom:0}
.lp-demo::after{right:-.55rem;top:-.55rem;border-left:0;border-bottom:0}
.lp-demo .janela__num{font-size:clamp(3.6rem,2.4rem + 6vw,7.5rem)}
.lp-demo .janela__un{font-size:var(--t-m)}
.demo__controle{margin-top:var(--e4);padding:var(--e4);border:1px dashed var(--linha-forte);border-radius:var(--r-m);background:var(--papel)}
.demo__controle label{display:block;font-weight:700;font-stretch:108%;margin-bottom:var(--e3)}
.demo__linha{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e3);align-items:center}
@media (min-width:40rem){.demo__linha{grid-template-columns:minmax(0,1fr) 15rem}}
.demo__linha output{font-weight:600;color:var(--janela-texto);background:var(--janela-fundo);padding:.35rem .7rem;border-radius:99px;text-align:center;min-height:2rem}
.demo__controle input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;background:transparent;cursor:ew-resize;margin:0}
.demo__controle input[type=range]::-webkit-slider-runnable-track{height:.5rem;border-radius:99px;background:linear-gradient(90deg,var(--linha-forte),var(--janela))}
.demo__controle input[type=range]::-moz-range-track{height:.5rem;border-radius:99px;background:linear-gradient(90deg,var(--linha-forte),var(--janela))}
.demo__controle input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.9rem;height:1.9rem;margin-top:-.7rem;border-radius:50%;background:var(--papel);border:3px solid var(--tinta);box-shadow:0 0 0 5px var(--janela-fundo)}
.demo__controle input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--papel);border:3px solid var(--tinta);box-shadow:0 0 0 5px var(--janela-fundo)}
.demo__controle input[type=range]:focus-visible{outline:3px solid var(--foco);outline-offset:4px;box-shadow:none}

/* ---------- seções: título grande, rótulo com peso ---------- */
.lp .secao{padding-block:var(--e8);border-top:3px solid var(--tinta)}
.lp .secao h2{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.3rem);font-stretch:120%;font-weight:760;letter-spacing:-.03em;line-height:1;max-width:20ch}
.lp .secao__rot .rotulo{display:inline-block;padding:.25rem .6rem;border:2px solid var(--tinta);border-radius:99px}
.lp .fato{padding:var(--e4);border:1px solid var(--linha);border-top:6px solid var(--janela);border-radius:var(--r-m);background:var(--folha)}
.lp .fato:nth-child(2){transform:translateY(1.4rem)}
@media (max-width:43.99rem){.lp .fato:nth-child(2){transform:none}}
.lp .ordem{margin-top:var(--e7)}
.lp .ordem svg{max-width:42rem}
.lp .folha--plana h3{font-stretch:112%}
.lp .chips-uf a{transition:transform var(--d-rapido) var(--ease),background var(--d-rapido),color var(--d-rapido)}
.lp .chips-uf a:hover{transform:translateY(-3px)}

/* entrada suave das seções (só opacity/transform; sem JS fica visível) */
@supports (animation-timeline:view()){
  .lp .secao>div:last-child,.lp .lp-zero{animation:lp-sobe both linear;animation-timeline:view();animation-range:entry 0% entry 38%}
  @keyframes lp-sobe{from{transform:translateY(2.4rem)}to{transform:none}}
  .lp-heroi .heroi__alvo{animation:lp-gira linear both;animation-timeline:scroll(root);animation-range:0 120vh}
  @keyframes lp-gira{to{transform:rotate(38deg) scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){
  .lp-h1 em::after{animation:none;transform:none}
  .lp .secao>div:last-child,.lp .lp-zero,.lp-heroi .heroi__alvo{animation:none!important}
}

/* a fenda: a janela verde que atravessa o herói e aponta para a demo */
.lp-fenda{display:none}
@media (min-width:56rem){
  .lp-fenda{display:block;position:absolute;right:7%;bottom:100%;width:clamp(5rem,9vw,9rem);height:min(34rem,52vh);pointer-events:none;z-index:-1;
    background:linear-gradient(0deg,var(--janela-fundo),transparent 94%);border-inline:2px solid var(--janela);
    -webkit-mask-image:linear-gradient(0deg,#000 55%,transparent);mask-image:linear-gradient(0deg,#000 55%,transparent);
    transform-origin:bottom;animation:lp-fenda 1.1s .5s var(--ease) both}
  .lp-fenda span{position:absolute;left:50%;bottom:1.2rem;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;font-family:var(--f-dados);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--janela-texto);white-space:nowrap}
  @keyframes lp-fenda{from{transform:scaleY(0)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.lp-fenda{animation:none}}

/* reserva de espaço da demo (o SVG e a legenda chegam por JS): evita deslocamento de layout */
.lp-demo .janela__tela{min-height:25.2rem}
.lp-demo .janela__resumo{min-height:4.5rem}
.lp-demo .janela__legenda{min-height:1.3rem}
@media (max-width:47.99rem){.lp-demo .janela__tela{min-height:30.5rem}.lp-demo .janela__legenda{min-height:2.9rem}}
@media (max-width:29.99rem){.lp-demo .janela__resumo{min-height:7.4rem}.lp-demo .janela__legenda{min-height:4.6rem}}
.lp-demo .janela__resumo{flex:1 1 20rem}

.lp .ordem text{font-size:15px}.lp .ordem .d{font-size:13px}