/* =============================================================
   ASEC — LANDING PAGE MEI (/mei)
   -------------------------------------------------------------
   Página de tráfego, modelo de venda. Mais ousada que as internas:
   hero animado, marquee, "riscar" dores, cards que empilham,
   CTA imersivo em esmeralda, barra de conversão fixa no mobile.
   Continua no tema branco (papel menta) + verde da marca.
   Reaproveita nav, footer, cursor, botões, form, carrossel, faq.
   ============================================================= */

:root{
  --lp-grad:linear-gradient(120deg,#0A5E30,#12A150 55%,#2FCB6E);
  --lp-ink:#0C1A12;
}

/* ---------- barra de progresso de scroll ---------- */
.lp-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9997;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand-2));box-shadow:0 0 12px var(--brand-glow)}

/* =========================================================
   HERO — primeira dobra de alto impacto
   ========================================================= */
.mei-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px 0 80px;isolation:isolate;background:#fff}
.mei-hero .blob{display:none}   /* hero limpo: sem blobs de gradiente */
/* blobs de gradiente que respiram + seguem o mouse (parallax via JS) */
.mei-hero .blob{position:absolute;border-radius:50%;filter:blur(60px);z-index:-2;opacity:.55;will-change:transform;pointer-events:none}
.mei-hero .b1{width:46vw;height:46vw;left:-10vw;top:-14vw;background:radial-gradient(circle,rgba(47,203,110,.5),transparent 65%)}
.mei-hero .b2{width:40vw;height:40vw;right:-8vw;bottom:-16vw;background:radial-gradient(circle,rgba(18,161,80,.42),transparent 65%)}
.mei-hero .b3{width:26vw;height:26vw;right:22vw;top:8vw;background:radial-gradient(circle,rgba(120,215,160,.4),transparent 65%);animation:lp-breathe 9s ease-in-out infinite}
@keyframes lp-breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.12) translateY(-14px)}}
/* fundo do hero: branco limpo, sem quadriculado */
.mei-hero::after{content:none}

.mei-hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,5vw,72px);align-items:start;width:100%;position:relative;z-index:2}
/* a coluna de texto alinha com o cabeçalho do card (leve respiro) */
.mei-hero-copy{padding-top:clamp(0px,1.6vw,22px)}
.mei-hero-copy{max-width:600px}

/* etiqueta com brilho passando */
.lp-tag{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:100px;overflow:hidden;
  background:var(--surface);border:1px solid var(--brand);color:var(--brand-2);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px}
.lp-tag .pulse{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand-glow);animation:lp-pulse 2s ease-out infinite}
@keyframes lp-pulse{0%{box-shadow:0 0 0 0 var(--brand-glow)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

.mei-hero h1{font-size:clamp(1.9rem,3.6vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.025em;margin-bottom:20px}
.mei-hero h1 .hl{position:relative;white-space:nowrap;color:var(--brand-2)}
/* sublinhado desenhado à mão */
.mei-hero h1 .hl svg{position:absolute;left:0;bottom:-.16em;width:100%;height:.34em;overflow:visible}
.mei-hero h1 .hl path{fill:none;stroke:var(--brand);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.is-ready .mei-hero h1 .hl path{animation:lp-draw 1s .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes lp-draw{to{stroke-dashoffset:0}}

.mei-hero-sub{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--muted);max-width:50ch;margin-bottom:28px}
.mei-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.mei-cta-row .btn-wa-solid{background:#25D366;color:#fff;box-shadow:0 12px 30px -10px rgba(37,211,102,.55)}
.mei-cta-row .btn-wa-solid:hover{box-shadow:0 18px 42px -12px rgba(37,211,102,.6)}
.mei-cta-row .btn-wa-solid svg{width:20px;height:20px}

/* selo de confiança */
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--muted-2);font-size:.9rem;font-weight:500}
.trust-row .ti{display:inline-flex;align-items:center;gap:7px}
.trust-row .ti svg{width:16px;height:16px;color:var(--brand-2)}
.trust-row .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}

/* ---------- visual: painel "tudo em ordem" do MEI ----------
   mesma linguagem do extrato do Simples Nacional (papel + esmeralda),
   mas contando a história do MEI: DAS pago, DASN entregue, limite
   monitorado e situação regular. Reforça o H1 "manter tudo em ordem". */
.mei-visual{position:relative;justify-self:center;width:100%;max-width:460px;perspective:1200px}
.mei-panel{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(160deg,#ffffff,#F3FAF6);border:1px solid var(--line-2);
  box-shadow:0 44px 90px -40px rgba(12,60,40,.45),inset 0 1px 0 #fff;
  padding:clamp(22px,2.4vw,30px);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out;will-change:transform}
/* halo suave atrás do painel */
.mei-visual::before{content:"";position:absolute;z-index:-1;inset:4% -4% 2%;border-radius:32px;
  background:radial-gradient(60% 55% at 60% 40%,var(--brand-glow),transparent 70%);filter:blur(40px);opacity:.7;
  animation:lp-breathe 8s ease-in-out infinite}

/* cabeçalho do painel */
.mp-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;
  padding-bottom:15px;border-bottom:1px dashed var(--line-2)}
.mp-kicker{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-2)}
.mp-top img{opacity:.9}

/* linhas de status (DAS, DASN) */
.mp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0}
.mp-item{display:inline-flex;align-items:center;gap:11px;color:var(--text);font-size:.95rem;font-weight:500}
.mp-check{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--brand-soft);border:1px solid rgba(18,161,80,.24);color:var(--brand-2)}
.mp-check svg{width:13px;height:13px}
.mp-tag{font-family:var(--font-mono);font-size:.82rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.mp-tag.ok{color:var(--brand-2)}

/* bloco de faturamento com medidor */
.mp-meter-block{margin:10px 0 4px;padding:16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line)}
.mp-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.mp-meter-head span{color:var(--muted);font-size:.9rem;font-weight:500}
.mp-count{font-family:var(--font-mono);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:600;
  letter-spacing:-.01em;color:var(--brand-2);white-space:nowrap}
.mp-meter{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.mp-meter i{display:block;height:100%;width:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s .5s cubic-bezier(.16,1,.3,1)}
.is-ready .mp-meter i,.mei-panel.live .mp-meter i{transform:scaleX(.77)}
.mp-meter-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:9px}
.mp-meter-foot span{font-size:.74rem;color:var(--muted-2);font-weight:500}

/* faixa "tudo em ordem" */
.mp-status{display:flex;align-items:center;gap:12px;margin-top:16px;
  padding:14px 16px;border-radius:16px;background:var(--brand-soft);border:1px solid rgba(18,161,80,.28);
  opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .6s 1.1s ease,transform .6s 1.1s cubic-bezier(.34,1.45,.5,1)}
.is-ready .mp-status,.mei-panel.live .mp-status{opacity:1;transform:none}
.mp-status-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(18,161,80,.14)}
.mp-status-ic svg{width:16px;height:16px}
.mp-status span:last-child{color:var(--brand-2);font-size:.92rem;font-weight:500}
.mp-status b{font-weight:700}

/* linha de "escaneamento" percorrendo o painel */
.mp-scan{position:absolute;left:0;right:0;top:-12%;height:26%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(18,161,80,.075) 46%,rgba(18,161,80,.16) 50%,rgba(18,161,80,.075) 54%,transparent);
  animation:sn-scan 4.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sn-scan{0%{top:-26%}58%,100%{top:112%}}

.mp-note{margin-top:16px;text-align:center;font-size:.74rem;color:var(--muted-2)}

/* chips flutuando PARA FORA das laterais do painel */
.mei-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:100px;
  width:max-content;white-space:nowrap;
  background:#fff;border:1px solid var(--line-2);color:var(--text);font-size:.8rem;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(12,60,40,.4)}
.mei-chip svg{width:15px;height:15px;color:var(--brand-2)}
.mei-chip.mc1{top:15%;right:calc(100% - 30px);animation:lp-floatchip 5s ease-in-out infinite}
.mei-chip.mc2{top:52%;left:calc(100% - 46px);animation:lp-floatchip 5.6s ease-in-out infinite .4s}
.mei-chip.mc3{top:80%;right:calc(100% - 30px);animation:lp-floatchip 6.2s ease-in-out infinite .8s}
@keyframes lp-floatchip{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* =========================================================
   MARQUEE — faixa infinita de confiança
   ========================================================= */
.marquee{position:relative;overflow:hidden;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:lp-marquee 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2vw,1.6rem);color:var(--muted);white-space:nowrap}
.marquee span b{color:var(--brand-2)}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
@keyframes lp-marquee{to{transform:translateX(-50%)}}

/* =========================================================
   BASE de seção da LP
   ========================================================= */
.lp-sec{position:relative;padding:clamp(52px,6.5vw,96px) 0}
.lp-head{max-width:760px;margin:0 auto 40px;text-align:center}
.lp-head .h2{margin:16px 0 14px}
.lp-head .lead{margin:0 auto}

/* =========================================================
   2. DORES — "riscar" o problema ao rolar
   ========================================================= */
/* layout em 2 colunas; cada dor entra sozinha ao rolar e "vira solução" */
.pains{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* FASE 1 — o card entra rápido mostrando o ALERTA (âmbar).
   FASE 2 — ~1s depois, ele se resolve devagar (barra, ícone, etiqueta).
   Os delays maiores nas partes "resolvidas" criam essa leitura de tempo. */
.pain{position:relative;display:flex;align-items:center;gap:16px;padding:24px 26px;border-radius:var(--radius);
  border:1px solid var(--line);background:linear-gradient(168deg,#fff,#F6FBF8);overflow:hidden;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),border-color .8s 1s ease,box-shadow .8s 1s ease}
.pain.in{opacity:1;transform:none;border-color:var(--line-2);box-shadow:0 18px 40px -32px rgba(16,60,40,.55)}
/* barra de acento verde que cresce na lateral (começa a fase 2) */
.pain::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand),var(--brand-2));
  transform:scaleY(0);transform-origin:top;transition:transform .9s 1s cubic-bezier(.16,1,.3,1)}
.pain.in::before{transform:scaleY(1)}

/* ícone com dois estados sobrepostos: alerta (âmbar) -> check (verde) */
.pain .pic{position:relative;flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(224,120,60,.12);border:1px solid rgba(224,120,60,.26);
  transition:background .9s 1.15s ease,border-color .9s 1.15s ease}
.pain .pic svg{grid-area:1/1;width:20px;height:20px;transition:opacity .7s 1.15s ease,transform .7s 1.15s cubic-bezier(.34,1.4,.5,1)}
.pain .pic .i-alert{color:#e0783c}
.pain .pic .i-check{color:var(--brand-2);opacity:0;transform:scale(.3) rotate(-25deg)}
.pain.in .pic{background:var(--brand-soft);border-color:rgba(18,161,80,.28)}
.pain.in .pic .i-alert{opacity:0;transform:scale(.3) rotate(25deg)}
.pain.in .pic .i-check{opacity:1;transform:none}

.pain p{flex:1;color:var(--text);font-size:1.02rem;font-weight:500;line-height:1.42}

/* etiqueta "resolvido" — item inline à direita (reserva espaço, não cobre o texto) */
.pain .solved{flex:none;margin-left:6px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:100px;font-family:var(--font-mono);font-size:.58rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2);background:var(--brand-soft);border:1px solid rgba(18,161,80,.24);
  opacity:0;transform:translateX(10px) scale(.92);transition:opacity .6s 1.7s ease,transform .6s 1.7s cubic-bezier(.34,1.4,.5,1)}
.pain .solved svg{width:11px;height:11px}
.pain.in .solved{opacity:1;transform:none}

.pain-relief{text-align:center;margin-top:52px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.pain-relief b{color:var(--brand-2)}

/* =========================================================
   3. SOLUÇÃO — cards que EMPILHAM (sticky stack)
   ========================================================= */
.stack{position:relative;display:flex;flex-direction:column;gap:26px;max-width:960px;margin:0 auto}
.stack-card{position:sticky;top:calc(96px + var(--i,0) * 16px);
  border-radius:var(--radius-lg);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,#fff,#F4FBF7);
  box-shadow:0 30px 70px -44px rgba(16,60,40,.5);
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:clamp(26px,3.4vw,42px)}
.stack-card .sc-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--brand);opacity:.9}
.stack-card .sc-ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid rgba(18,161,80,.22);margin-top:14px}
.stack-card .sc-ic svg{width:27px;height:27px;color:var(--brand-2)}
.stack-card .sc-left{display:flex;flex-direction:column;align-items:center;gap:6px}
.stack-card h3{font-size:clamp(1.3rem,2.4vw,1.8rem);margin-bottom:10px}
.stack-card p{color:var(--muted);font-size:1.02rem;max-width:56ch}
.stack-card.hot{background:var(--lp-grad);border-color:transparent;color:#fff}
.stack-card.hot h3{color:#fff}
.stack-card.hot p{color:rgba(255,255,255,.9)}
.stack-card.hot .sc-num{-webkit-text-stroke-color:rgba(255,255,255,.8)}
.stack-card.hot .sc-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.stack-card.hot .sc-ic svg{color:#fff}

/* =========================================================
   4. QUEM PODE SER MEI — checklist
   ========================================================= */
.reqs-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;max-width:1000px;margin:0 auto}
.reqs-copy .lead{margin-top:14px}
.reqs{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,36px);border-radius:var(--radius-lg);
  border:1px solid var(--line);background:linear-gradient(168deg,#fff,#F4FBF7);box-shadow:0 30px 70px -44px rgba(16,60,40,.5)}
.req{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.req:last-child{border-bottom:0}
.req .rck{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid rgba(18,161,80,.22);color:var(--brand-2);transition:transform .3s}
.req:hover .rck{transform:scale(1.12) rotate(-6deg)}
.req .rck svg{width:16px;height:16px}
.req span{color:var(--text);font-size:1rem;font-weight:500;padding-top:4px}
.reqs-soft{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.reqs-soft p{color:var(--muted);font-size:1rem;max-width:40ch}

/* =========================================================
   5. BENEFÍCIOS — blocos ousados
   ========================================================= */
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:0 auto}
.benefit{position:relative;padding:clamp(28px,3.4vw,40px);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(168deg,#fff,#F4FBF7);transition:transform .4s,box-shadow .4s,border-color .4s}
.benefit:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 40px 80px -46px rgba(18,161,80,.5),0 0 0 1px var(--brand-soft)}
.benefit::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,var(--brand-soft),transparent 70%);opacity:0;transition:opacity .4s}
.benefit:hover::before{opacity:1}
.benefit .bic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;background:var(--brand-soft);border:1px solid rgba(18,161,80,.22)}
.benefit .bic svg{width:27px;height:27px;color:var(--brand-2)}
.benefit h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:10px}
.benefit p{color:var(--muted);font-size:1rem;max-width:44ch}

/* =========================================================
   6. POR QUE A ASEC — grid com glow
   ========================================================= */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{position:relative;padding:30px 26px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(168deg,#fff,#F4FBF7);box-shadow:0 14px 32px -26px rgba(16,60,40,.5);
  transition:transform .35s,border-color .35s,box-shadow .35s}
.why-card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -40px rgba(16,60,40,.5)}
.why-card .wn{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--brand-2);margin-bottom:16px;display:block}
.why-card h3{font-size:1.24rem;margin-bottom:10px}
.why-card p{color:var(--muted);font-size:.95rem}

/* =========================================================
   SPOTLIGHT — seção "emoldurada": quadro + cantos + luz + linhas
   ========================================================= */
.frame-sec{position:relative;overflow:hidden}
/* uma linha fina atravessando o fundo (aparece fora do quadro) */
.frame-sec::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);z-index:0}
.frame{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  border:1px solid var(--line-2);border-radius:0;
  background:linear-gradient(180deg,#ffffff,#F5FAF7);
  padding:clamp(44px,5.5vw,80px) clamp(22px,4vw,58px);
  box-shadow:0 44px 110px -55px rgba(16,60,40,.4)}
.frame > *{position:relative;z-index:1}
/* quadradinhos nas quatro pontas */
.frame .fc{position:absolute;width:11px;height:11px;background:var(--brand);border-radius:2px;z-index:3;
  box-shadow:0 0 12px var(--brand-glow)}
.frame .fc.tl{top:-6px;left:-6px}
.frame .fc.tr{top:-6px;right:-6px}
.frame .fc.bl{bottom:-6px;left:-6px}
.frame .fc.br{bottom:-6px;right:-6px}
/* o conteúdo do quadro usa os estilos normais das seções (lp-head, .why, etc.) */

/* =========================================================
   9. CTA FINAL — imersivo em esmeralda
   ========================================================= */
.mei-final{position:relative;overflow:hidden;background:var(--lp-grad);color:#fff;padding:clamp(56px,7vw,96px) 0}
.mei-final .aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:radial-gradient(40% 50% at 20% 20%,rgba(255,255,255,.5),transparent 60%),radial-gradient(45% 55% at 85% 80%,rgba(255,255,255,.4),transparent 60%);
  background-size:200% 200%;animation:asec-gradient 16s ease infinite}
.mei-final::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:54px 54px;-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%)}
.mei-final-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.mei-final-copy h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.mei-final-copy .lp-tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;margin-bottom:22px}
.mei-final-copy .lp-tag .pulse{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:none}
.mei-final-copy p{color:rgba(255,255,255,.92);font-size:1.12rem;max-width:52ch}
.mei-final-copy .mf-reinforce{margin-top:22px;font-size:.92rem;color:rgba(255,255,255,.8)}

/* card do formulário sobre o verde */
.mei-form{background:#fff;color:var(--lp-ink);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,40px);
  box-shadow:0 50px 100px -40px rgba(6,40,24,.55)}
.mei-form h3{font-size:1.5rem;margin-bottom:6px;color:var(--lp-ink)}
.mei-form .sub{color:var(--muted);font-size:.94rem;margin-bottom:24px}
.mei-form .field .input{background:#fff}
/* rótulo flutuante do select (não tem :placeholder-shown -> usa :valid/:focus).
   opção vazia + required = :invalid enquanto nada escolhido, então o label fica de placeholder. */
.mei-form .field select.input:focus + label,
.mei-form .field select.input:valid + label{top:7px;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-2);font-family:var(--font-mono)}
.mei-form select.input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230B7A3B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.mei-form .btn{width:100%;justify-content:center}
.mei-form .wa-alt{margin-top:12px}
.mei-form .priv{font-size:.74rem;color:var(--muted-2);text-align:center;margin-top:16px}
.mei-form .form-ok{display:none;text-align:center;padding:30px 8px}
.mei-form .form-ok.show{display:block}
.mei-form .ok-ic{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid var(--brand)}
.mei-form .ok-ic svg{width:30px;height:30px;color:var(--brand-2)}

/* =========================================================
   BARRA DE CONVERSÃO FIXA (mobile)
   ========================================================= */
.lp-bar{position:fixed;left:0;right:0;bottom:0;z-index:8500;display:none;gap:10px;padding:12px 16px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);transform:translateY(120%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lp-bar.show{transform:none}
.lp-bar .btn{flex:1;justify-content:center;padding:14px 16px}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media(max-width:980px){
  .mei-hero{padding:120px 0 60px;min-height:auto}
  .mei-hero-grid{grid-template-columns:1fr;gap:44px}
  .mei-hero-copy{max-width:none}
  .mei-visual{max-width:420px;order:0;margin-top:4px}
  /* empilhado: os chips deixam de flutuar longe e passam a "grudar"
     nas bordas do painel (mesma leitura da página do Simples). */
  .mei-chip.mc1{top:-16px;right:8%;left:auto}
  .mei-chip.mc2{top:56%;left:auto;right:-8px}
  .mei-chip.mc3{top:-16px;left:8%;right:auto}
  .reqs-wrap{grid-template-columns:1fr;gap:28px}
  .pains{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .why{grid-template-columns:1fr 1fr}
  .stack-card{grid-template-columns:1fr;gap:14px;text-align:left}
  .stack-card .sc-left{flex-direction:row;align-items:center;gap:16px}
  .stack-card .sc-ic{margin-top:0}
  .mei-final-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:600px){
  .why{grid-template-columns:1fr}
  .mei-visual{max-width:none}
  .mei-chip{display:none}   /* evita transbordo lateral no celular */
  .mei-panel{padding:20px}
  .lp-bar{display:flex}
  .wa{display:none}   /* no mobile a barra fixa assume o WhatsApp */
}

/* reduz movimento */
@media(prefers-reduced-motion:reduce){
  .mei-hero .blob,.mei-panel,.mei-chip,.marquee-track,.mp-scan,.mei-hero .b3,
  .mei-visual::before,.mei-hero::after{animation:none!important}
  .mei-hero h1 .hl path{stroke-dashoffset:0}
  .mp-meter i{transition:none}
  .mp-status{transition:none;opacity:1;transform:none}
}