/* =============================================================
   ASEC — LANDING PAGE LUCRO PRESUMIDO (/lucro-presumido)
   -------------------------------------------------------------
   CONCEITO PRÓPRIO — "sala de estratégia": editorial + dados.
   Mesma IDV (papel menta + esmeralda), motion completamente
   diferente das LPs MEI/Simples:
   · hero editorial: palavras sobem de máscaras + marca-texto
     varrendo o destaque + GRÁFICO que se desenha na largura toda
   · ticker de bolsa escuro (no lugar do marquee claro)
   · dores em LIVRO-RAZÃO: linhas com varredura de luz e status
     que flipa PENDENTE -> RESOLVIDO + contador 06/06
   · solução em ESTEIRA HORIZONTAL PINADA (GSAP, com fallback)
   · margem presumida INTERATIVA (Serviços 32% / Comércio 8%)
   · transformação em COLUNAS QUE EXPANDEM sobre painel escuro
   · por que a ASEC: título fixo (sticky) + lista editorial
   · CTA final em verde-tinta escuro com brilho
   · motor de reveal próprio ([data-pv]): wipe + blur, sem os
     scripts split-reveal/scroll-anim das outras páginas.
   Reusa do mei.css apenas a infra: lp-progress, lp-tag, lp-sec,
   lp-head, reqs, mei-form, lp-bar.
   ============================================================= */

:root{
  --pr-ink:#0C1A12;          /* verde-tinta (as "páginas escuras" da LP) */
  --pr-ink-2:#101F16;
  --pr-mint-ink:#9DB8A8;     /* texto de apoio sobre o escuro */
  --pr-neon:#2FCB6E;         /* esmeralda viva sobre o escuro */
}

/* =========================================================
   MOTOR DE REVEAL próprio — [data-pv]
   (só arma quando o JS marca html.pv-ready; sem JS, tudo visível)
   ========================================================= */
html.pv-ready [data-pv]{opacity:0;transform:translateY(30px);filter:blur(6px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s ease}
html.pv-ready [data-pv].in{opacity:1;transform:none;filter:none}

/* =========================================================
   1. HERO — painel de planejamento (layout .sn-hero/.sn-doc
   vem do simples.css; aqui só o conteúdo do painel)
   ========================================================= */
.pr-bar-row{padding:12px 0}
.pr-bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:9px}
.pr-bar-head span{color:var(--muted);font-size:.92rem;font-weight:500}
.pr-val{font-family:var(--font-mono);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pr-val.bad{color:#B4543A}
.pr-val.good{color:var(--brand-2)}

.pr-bar{height:12px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.pr-bar i{display:block;height:100%;width:var(--w,100%);border-radius:8px;
  transform:scaleX(0);transform-origin:left}
.pr-bar i.bad{background:linear-gradient(90deg,#C96A4C,#E09B6B);
  transition:transform 1.1s .55s cubic-bezier(.16,1,.3,1)}
.pr-bar i.good{background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  box-shadow:0 0 14px var(--brand-glow);
  transition:transform 1.3s .95s cubic-bezier(.16,1,.3,1)}
.sn-doc.live .pr-bar i{transform:scaleX(1)}

/* a economia (reusa .doc-save do simples.css) chega depois das barras */
.pr-dash .doc-save{margin-top:14px;transition-delay:2.3s,2.3s}

/* =========================================================
   2. MARQUEE — claro, estilos vêm do mei.css/simples.css
   ========================================================= */

/* =========================================================
   3. DORES — livro-razão que se resolve
   ========================================================= */
.ledger{max-width:1000px;margin:0 auto;border-top:1px solid var(--line-2)}
.lg-row{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,34px);
  align-items:center;padding:26px clamp(6px,1.5vw,18px);border-bottom:1px solid var(--line);overflow:hidden}
/* varredura de luz quando a linha entra */
.lg-row::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(18,161,80,.12) 50%,transparent 80%);
  transform:translateX(-120%)}
.lg-row.in::after{animation:lg-sweep 1s .1s cubic-bezier(.5,0,.3,1) forwards}
@keyframes lg-sweep{to{transform:translateX(120%)}}

.lg-num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.3px rgba(18,161,80,.45)}
.lg-row p{color:var(--text);font-size:clamp(1rem,1.4vw,1.14rem);font-weight:500;line-height:1.45}

/* status flipa: PENDENTE (âmbar) -> RESOLVIDO (verde) */
.lg-status{display:grid;perspective:400px}
.lg-status b{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 13px;border-radius:100px;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.3,.5,1)}
.lg-status .st-p{color:#B4784A;background:rgba(224,120,60,.1);border:1px solid rgba(224,120,60,.28)}
.lg-status .st-r{color:var(--brand-2);background:var(--brand-soft);border:1px solid rgba(18,161,80,.3);
  opacity:0;transform:rotateX(-92deg)}
.lg-row.in .st-p{opacity:0;transform:rotateX(92deg);transition-delay:.55s,.55s}
.lg-row.in .st-r{opacity:1;transform:none;transition-delay:.72s,.72s}

/* rodapé do razão: contador */
.lg-total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(6px,1.5vw,18px);
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.lg-total b{color:var(--brand-2);font-size:.95rem;letter-spacing:.1em}

/* frase de virada com marca-texto */
.pr-relief{max-width:820px;margin:60px auto 0;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:-.02em;line-height:1.22;color:var(--text)}
.pr-relief b{color:var(--brand-2)}
.pr-relief .rl-hl{border-radius:8px;padding:0 .08em;
  background:linear-gradient(120deg,rgba(18,161,80,.16),rgba(47,203,110,.26));
  background-repeat:no-repeat;background-size:0% 74%;background-position:0 86%;
  transition:background-size 1s .25s cubic-bezier(.6,0,.2,1);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pr-relief.in .rl-hl{background-size:100% 74%}

/* =========================================================
   4. SOLUÇÃO — esteira horizontal pinada (fallback: grade)
   ========================================================= */
.pr-hsec{position:relative;padding:clamp(52px,6.5vw,96px) 0}
.pr-hsec.hs-on{padding:0}
.pr-hsec.hs-on .hs-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding:96px 0 44px}

/* fallback (mobile / sem GSAP): grade de 2 colunas */
.pr-htrack{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1080px;margin:0 auto;padding:0 28px}
/* modo esteira */
.pr-hsec.hs-on .pr-htrack{display:flex;gap:clamp(18px,2.4vw,28px);width:max-content;
  max-width:none;padding:0 max(28px,7vw);will-change:transform}
.pr-hsec.hs-on .hs-card{width:min(620px,76vw);flex:none}

.hs-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.4vw,30px);align-items:center;
  padding:clamp(26px,3vw,44px);border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(155deg,#fff,#F4FBF7);box-shadow:0 30px 66px -46px rgba(16,60,40,.5)}
.hs-step{position:absolute;top:18px;right:22px;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.hs-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(18,161,80,.5)}
.hs-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--brand-soft);border:1px solid rgba(18,161,80,.22)}
.hs-ic svg{width:25px;height:25px;color:var(--brand-2)}
.hs-card h3{font-size:clamp(1.25rem,2vw,1.7rem);margin-bottom:9px;padding-right:60px}
.hs-card p{color:var(--muted);font-size:1rem;max-width:52ch}
.hs-card.hot{background:linear-gradient(120deg,#0A5E30,#12A150 55%,#2FCB6E);border-color:transparent}
.hs-card.hot h3,.hs-card.hot p{color:#fff}
.hs-card.hot p{opacity:.92}
.hs-card.hot .hs-num{-webkit-text-stroke-color:rgba(255,255,255,.7)}
.hs-card.hot .hs-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.hs-card.hot .hs-ic svg{color:#fff}
.hs-card.hot .hs-step{color:rgba(255,255,255,.7)}

/* barra de progresso da esteira */
.hs-progress{display:none}
.pr-hsec.hs-on .hs-progress{display:block;width:min(420px,56vw);height:3px;border-radius:3px;
  margin:34px auto 0;background:var(--surface-2);overflow:hidden}
.hs-progress i{display:block;height:100%;border-radius:3px;width:100%;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transform:scaleX(var(--p,0));transform-origin:left}

/* =========================================================
   5. QUEM SE ENQUADRA — margem presumida interativa
   ========================================================= */
.pr-fit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:start;max-width:1080px;margin:0 auto}
.pr-fit-side .reqs-lead{color:var(--muted);font-size:1.02rem;font-weight:500;margin-bottom:14px}
.pr-fit-side .reqs-soft{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.pr-fit-side .reqs-soft p{color:var(--muted);font-size:1rem;max-width:40ch}

.pr-presume{position:relative;margin-top:30px;padding:clamp(22px,2.6vw,30px);border-radius:var(--radius-lg);
  border:1px dashed var(--line-2);background:
    radial-gradient(60% 70% at 50% 40%,rgba(18,161,80,.05),transparent 75%),
    linear-gradient(168deg,#fff,#F6FBF8)}

/* alternador Serviços / Comércio */
.pp-toggle{display:inline-flex;gap:5px;padding:5px;border-radius:100px;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--line)}
.pt-btn{padding:8px 15px;border-radius:100px;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:background .3s,color .3s,box-shadow .3s}
.pt-btn em{font-style:normal;margin-left:6px;color:var(--muted-2);transition:color .3s}
.pt-btn.on{background:#fff;color:var(--text);box-shadow:0 6px 16px -8px rgba(16,60,40,.4),0 0 0 1px rgba(18,161,80,.3)}
.pt-btn.on em{color:var(--brand-2)}

.pp-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pp-label span{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.pp-label .pp-tag{color:var(--muted-2);letter-spacing:.1em}

/* trilho = faturamento; fatia = margem presumida */
.pp-bar{position:relative;height:52px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--line)}
.pp-slice{position:absolute;left:0;top:0;bottom:0;width:var(--w,32%);border-radius:13px;
  background:linear-gradient(120deg,var(--brand-deep),var(--brand) 70%);
  box-shadow:0 0 20px var(--brand-glow);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s .25s cubic-bezier(.16,1,.3,1),width .9s cubic-bezier(.16,1,.3,1)}
.pr-presume.in .pp-slice{transform:scaleX(1)}
/* rótulo sempre FORA da fatia (à direita), acompanha a largura */
.pp-slice b{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-2);white-space:nowrap;opacity:0;transition:opacity .5s 1s ease}
.pp-slice b u{text-decoration:none;font-size:.8rem}
.pr-presume.in .pp-slice b{opacity:1}

.pp-hint{display:flex;align-items:flex-start;gap:9px;margin-top:14px;max-width:92%;
  opacity:0;transform:translateY(8px);transition:opacity .55s 1.25s ease,transform .55s 1.25s cubic-bezier(.16,1,.3,1)}
.pr-presume.in .pp-hint{opacity:1;transform:none}
.pp-hint svg{flex:none;width:16px;height:16px;color:var(--brand-2);margin-top:2px;margin-left:clamp(4px,6%,44px)}
.pp-hint span{color:var(--muted);font-size:.92rem;line-height:1.45}
.pp-hint b{color:var(--brand-2)}
.pp-caption{display:block;margin-top:16px;text-align:center;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

/* =========================================================
   6. TRANSFORMAÇÃO — colunas que expandem (painel escuro)
   ========================================================= */
.pr-dark{position:relative;padding:clamp(60px,7vw,110px) 0;background:var(--pr-ink);overflow:hidden}
.pr-dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(40% 50% at 80% 0%,rgba(47,203,110,.12),transparent 65%),
             radial-gradient(34% 44% at 8% 100%,rgba(47,203,110,.08),transparent 65%)}
.pr-dark .lp-head{position:relative}
.pr-dark .lp-head h2{color:#F0F7F2}
.pr-dark .lp-head .kicker{color:var(--pr-neon)}
.pr-dark .lp-head .kicker::before{background:linear-gradient(90deg,var(--pr-neon),transparent)}
.pr-dark .lp-head .lead{color:var(--pr-mint-ink)}
.pr-dark .grad-text{background:linear-gradient(120deg,#F0F7F2 30%,var(--pr-neon) 80%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.pr-cols{position:relative;display:flex;gap:14px;min-height:400px}
.pcol{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.6vw,30px);border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,var(--pr-ink-2),var(--pr-ink));
  border:1px solid rgba(47,203,110,.16);
  transition:flex .65s cubic-bezier(.6,0,.2,1),background .5s,border-color .5s}
.pcol:hover{border-color:rgba(47,203,110,.35)}
.pcol.on{flex:2.6;background:linear-gradient(170deg,#13291C,#0E2015);border-color:rgba(47,203,110,.4)}
.pcol .gic{position:absolute;top:22px;left:22px;width:50px;height:50px;border-radius:14px;
  display:grid;place-items:center;background:rgba(47,203,110,.12);border:1px solid rgba(47,203,110,.28)}
.pcol .gic svg{width:24px;height:24px;color:var(--pr-neon)}
.pcol .pk{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pr-neon);margin-bottom:12px}
.pcol h3{color:#ECF5EF;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.15}
.pcol p{color:var(--pr-mint-ink);font-size:.98rem;line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.6,0,.2,1),opacity .5s .12s,margin .5s}
.pcol.on p{max-height:240px;opacity:1;margin-top:12px}

/* =========================================================
   7. POR QUE A ASEC — título fixo + lista editorial
   ========================================================= */
.pr-why{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(30px,5vw,70px);max-width:1120px;margin:0 auto}
.pw-head{position:sticky;top:120px;align-self:start}
.pw-list{border-top:1px solid var(--line-2)}
.pw-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.6vw,30px);
  align-items:center;padding:30px 8px;border-bottom:1px solid var(--line);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s}
.pw-item:hover{transform:translateX(10px)}
.pw-num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px rgba(18,161,80,.45)}
.pw-item h3{font-size:clamp(1.2rem,1.8vw,1.45rem);margin-bottom:7px}
.pw-item p{color:var(--muted);font-size:.98rem;max-width:52ch}
.pw-arrow{width:22px;height:22px;color:var(--brand-2);opacity:0;transform:translateX(-12px);transition:.35s}
.pw-item:hover .pw-arrow{opacity:1;transform:none}

/* =========================================================
   9. CTA FINAL — verde-tinta escuro
   ========================================================= */
.pr-final{position:relative;overflow:hidden;padding:clamp(60px,7vw,104px) 0;background:var(--pr-ink);color:#fff}
.pf-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 56% at 14% 18%,rgba(47,203,110,.16),transparent 65%),
             radial-gradient(40% 52% at 88% 86%,rgba(18,161,80,.14),transparent 65%)}
.pf-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.1;
  background-image:linear-gradient(rgba(120,220,160,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,220,160,.5) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent 75%)}
.pr-final-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.pr-final-copy h2{font-size:clamp(2rem,4.2vw,3.3rem);font-weight:700;line-height:1.06;letter-spacing:-.02em;
  color:#F0F7F2;margin-bottom:20px}
.pr-final-copy p{color:rgba(236,245,239,.88);font-size:1.1rem;max-width:52ch}
.pr-final-copy .lp-tag{background:rgba(47,203,110,.1);border-color:rgba(47,203,110,.45);color:var(--pr-neon);margin-bottom:22px}
.pr-final-copy .lp-tag .pulse{background:var(--pr-neon)}
.pr-final-copy .mf-reinforce{margin-top:22px;font-size:.92rem;color:rgba(236,245,239,.66)}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media(max-width:980px){
  .lg-row{grid-template-columns:auto 1fr;row-gap:12px}
  .lg-status{grid-column:2;justify-self:start}

  .pr-fit{grid-template-columns:1fr}
  .pr-cols{flex-direction:column;min-height:0}
  .pcol{min-height:0}
  .pcol p,.pcol.on p{max-height:none;opacity:1;margin-top:12px}   /* empilhado: tudo aberto */
  .pcol,.pcol.on{flex:1}

  .pr-why{grid-template-columns:1fr}
  .pw-head{position:static}
  .pr-final-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:600px){
  .pr-htrack{grid-template-columns:1fr}
  .hs-card h3{padding-right:0}
  .pp-slice b{font-size:.56rem}
}

/* =========================================================
   REDUZ MOVIMENTO — tudo no estado final
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  .pr-bar i{transform:scaleX(1)!important;transition:none}
  .pr-relief .rl-hl{background-size:100% 74%;transition:none}
  .lg-row::after{display:none}
  .lg-status .st-p{opacity:0}
  .lg-status .st-r{opacity:1;transform:none}
  .pp-slice{transform:scaleX(1)}
  .pp-slice b,.pp-hint{opacity:1;transform:none}
  .pcol,.pcol p{transition:none}
}