/* ══════════════════════════════════════════════════════════════════════
   Páginas dos plugins: mockups das telas (painel, loja e e-mail do cliente)
   Tudo desenhado em HTML/CSS, sem print: fica nítido em qualquer tela e
   acompanha mudança de texto sem refazer imagem. As telas de dentro usam
   fundo claro de propósito, como o WordPress e a loja aparecem de verdade.
   ══════════════════════════════════════════════════════════════════════ */
.mk{
  --pp:#FFFFFF; --pp-2:#F5F6FA; --pp-3:#ECEEF4; --pp-line:#E3E5EE;
  --pp-ink:#1C1C26; --pp-mut:#6A6B7D; --pp-dim:#9A9BAC;
  --loja:#14806B; --loja-dim:#E3F4EF; --pix:#25A699;
  --plug:#7900FF; --plug-dim:#F1E8FF; --ok:#1E9E5A; --ok-dim:#E2F6EA; --warn:#C27A00;
  font:400 12.5px/1.45 var(--body);color:var(--pp-ink);text-align:left;
}
.mk *{letter-spacing:0}
.mk b{font-weight:600}
.mk .num{font-variant-numeric:tabular-nums}

/* Janela de navegador */
.mk-win{border:1px solid var(--line);border-radius:var(--r-md);background:var(--raised);overflow:hidden;box-shadow:var(--shadow)}
.mk-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line)}
.mk-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.mk-url{flex:1;min-width:0;margin-left:8px;padding:4px 10px;border-radius:999px;background:var(--bg);color:var(--dim);font:500 11px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-page{background:var(--pp);min-height:100%}

/* Celular */
.mk-phone{width:min(262px,100%);margin-inline:auto;padding:10px;border-radius:38px;background:#0d0d14;border:1px solid var(--line);box-shadow:var(--shadow)}
.mk-phone .mk-screen{border-radius:29px;overflow:hidden;background:var(--pp);position:relative;font-size:11.5px}
/* No celular tudo fica mais compacto, para o aparelho não passar da altura do texto ao lado */
.mk-phone .em{padding:8px}
.mk-phone .em-head{padding:8px 12px}
.mk-phone .em-head .ass{font-size:12.5px;margin-bottom:6px}
.mk-phone .em-logo{padding:8px}
.mk-phone .em-in{padding:10px 11px}
.mk-phone .em-in h4{font-size:14px}
.mk-phone .em-in p{font-size:11px}
.mk-phone .em-dest{margin-top:8px}
.mk-phone .em-dest .lj-img{aspect-ratio:3}
.mk-phone .em-dest div.t{padding:7px 9px}
.mk-phone .em-dest .lj-btn{padding:6px 9px;font-size:11px;white-space:nowrap}
.mk-phone .em-g{margin-top:8px;gap:6px}
.mk-phone .em-g .lj-img{aspect-ratio:1.9}
.mk-phone .em-g .lj-nome{font-size:10.5px;margin-top:4px}
.mk-phone .em-cupom{margin-top:8px;padding:6px;font-size:10.5px}
.mk-phone .em-cupom b{font-size:13px}
.mk-phone .em-pe{padding:8px 10px 10px;font-size:10px}
.mk-phone .lj-preco{font-size:13.5px}
.mk-phone .lj-top{padding:9px 14px}
.mk-phone .atv{padding:14px 14px 12px}
.mk-phone .atv .av{width:46px;height:46px;font-size:16px;margin:4px auto 8px}
.mk-phone .atv h4{font-size:14.5px}
.mk-phone .atv .cup{margin:4px 0 2px}
.mk-phone .lj-grid{gap:8px;padding:12px}
.mk-phone .lj-grid .lj-img{aspect-ratio:1.35}
.mk-phone .lj-nome{font-size:11px;margin-top:5px}
.mk-notch{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:600 11px/1 var(--body);color:var(--pp-ink);background:var(--pp)}
.mk-notch span:last-child{display:flex;gap:4px}
.mk-notch span:last-child i{width:13px;height:7px;border-radius:2px;background:var(--pp-ink);opacity:.8}

/* Cartões soltos sobre o mockup do topo */
.mk-stage{position:relative;padding:var(--s-4) 0}
.mk-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line);box-shadow:var(--shadow);font:400 12px/1.3 var(--body);color:var(--muted)}
.mk-float b{display:block;font:600 15px/1.2 var(--display);color:var(--ink)}
.mk-float .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-dim);color:var(--brand-text);flex:none}
.mk-float .ic svg{width:16px;height:16px}
.mk-float.cy .ic{background:var(--accent-dim);color:var(--accent)}
.mk-float.f1{left:-6px;top:22%}
.mk-float.f2{right:-14px;bottom:3%}
html.motion .mk-float{animation:mkboia 5s ease-in-out infinite}
html.motion .mk-float.f2{animation-delay:-2.5s}
@keyframes mkboia{50%{transform:translateY(-6px)}}

/* Lista de garantias abaixo dos botões do topo */
.passur{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px;color:var(--muted);max-width:520px}
.passur li{display:flex;align-items:center;gap:8px}
.passur svg{width:15px;height:15px;color:var(--success);flex:none}

/* ── Vitrine de telas: mockup de um lado, explicação do outro ── */
.shows{display:grid;gap:var(--s-24)}
.show{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-12);align-items:center}
.show--rev{grid-template-columns:.8fr 1.2fr}
.show--rev .show-txt{order:-1}
.show-txt h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin:var(--s-2) 0 var(--s-4)}
.show-txt p{color:var(--muted)}
.show-txt ul{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:8px;color:var(--muted);font-size:15px}
.show-txt li{display:flex;gap:10px;align-items:flex-start}
.show-txt li svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:5px}
.show-tag{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.show-tag.adm{color:var(--brand-text)}
.shows-note{margin-top:var(--s-12);text-align:center;color:var(--dim);font-size:13px}

/* ── Peças da loja (vitrine, produto, checkout) ── */
.lj-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--pp-line)}
.lj-logo{font:700 14px/1 var(--display);color:var(--pp-ink);display:flex;align-items:center;gap:7px}
.lj-logo i{width:18px;height:18px;border-radius:6px;background:var(--loja);display:block}
.lj-menu{display:flex;gap:14px;color:var(--pp-mut);font-size:11.5px}
.lj-img{border-radius:10px;aspect-ratio:1;background:linear-gradient(135deg,#DDE7F3,#C3D3E8);position:relative;overflow:hidden}
.lj-img::after{content:"";position:absolute;inset:22% 18%;border-radius:40% 40% 18% 18%;background:rgba(255,255,255,.55)}
.lj-img.g2{background:linear-gradient(135deg,#F3E2D3,#E8C8A9)}
.lj-img.g2::after{inset:18% 26%;border-radius:18px}
.lj-img.g3{background:linear-gradient(135deg,#DCEFE6,#B8DDCB)}
.lj-img.g3::after{inset:14% 36%;border-radius:999px}
.lj-img.g4{background:linear-gradient(135deg,#ECE1F5,#D3BEE8)}
.lj-img.g4::after{inset:26% 20%;border-radius:50%}
.lj-nome{font-weight:600;font-size:12.5px;margin-top:8px}
.lj-de{color:var(--pp-dim);text-decoration:line-through;font-size:11.5px}
.lj-preco{font:700 15px/1.2 var(--display);color:var(--pp-ink)}
.lj-pix{display:flex;align-items:center;gap:6px;color:var(--pix);font-weight:600;font-size:12px}
.lj-pix svg,.lj-pix .pix-ico{width:13px;height:13px;flex:none}
.lj-parc{color:var(--pp-mut);font-size:11.5px}
.lj-btn{display:block;text-align:center;padding:9px 12px;border-radius:8px;background:var(--loja);color:#fff;font-weight:600;font-size:12px}
.lj-btn.ghost{background:transparent;color:var(--loja);border:1px solid var(--loja)}
.lj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px}
.lj-card{display:flex;flex-direction:column;gap:3px}
.lj-selo{position:absolute;z-index:1;top:8px;left:8px;padding:3px 7px;border-radius:999px;background:var(--pix);color:#fff;font:700 10px/1.2 var(--body)}
.lj-faixa{padding:9px 16px;background:var(--loja-dim);color:var(--loja);font-size:11.5px;display:flex;align-items:center;gap:8px}
.lj-faixa svg{width:14px;height:14px;flex:none}

/* Página do produto */
.pd{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;padding:16px}
.pd h4{font:700 17px/1.2 var(--display);margin:2px 0 6px}
.pd .cat{color:var(--pp-mut);font-size:11px}
.pd-box{border:1px solid var(--pp-line);border-radius:10px;padding:10px 12px;margin-top:8px}
.pd-box.pix{border-color:rgba(37,166,153,.4);background:#EAF7F5}
.pd-box .big{font:700 18px/1.2 var(--display);color:var(--pix)}
.pd-box .eco{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:999px;background:var(--pix);color:#fff;font-size:10.5px;font-weight:600}
.pd-link{color:var(--loja);font-weight:600;font-size:11.5px;text-decoration:underline;text-underline-offset:2px}
.pd .lj-btn{margin-top:10px}

/* Tabela de parcelas (janela da página do produto) */
.parc{border-radius:12px;background:var(--pp);border:1px solid var(--pp-line);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);overflow:hidden}
.parc-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--pp-line);font-weight:700;font-size:12.5px}
.parc-h span{color:var(--pp-dim);font-weight:400}
.parc table{width:100%;border-collapse:collapse;font-size:11.5px}
.parc td{padding:5px 14px;border-bottom:1px solid var(--pp-3)}
.parc td:last-child{text-align:right;color:var(--pp-mut)}
.parc tr.sj td:last-child{color:var(--ok);font-weight:600}
.parc tr:last-child td{border-bottom:0}

/* Checkout */
.ck{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;padding:16px}
.ck h5{font:700 12.5px/1.2 var(--body);margin:0 0 10px}
.ck-op{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--pp-line);border-radius:10px;margin-bottom:8px}
.ck-op .rd{width:14px;height:14px;border-radius:50%;border:2px solid var(--pp-dim);flex:none}
.ck-op.on{border-color:var(--pix);background:#EAF7F5}
.ck-op.on .rd{border:4px solid var(--pix)}
.ck-op small{display:block;color:var(--pp-mut);font-size:11px}
.ck-op .bd{margin-left:auto;padding:3px 8px;border-radius:999px;background:var(--pix);color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap}
.ck-op .bd.mut{background:var(--pp-3);color:var(--pp-mut)}
.ck-res{background:var(--pp-2);border-radius:10px;padding:12px}
.ck-l{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--pp-mut)}
.ck-l.desc{color:var(--pix);font-weight:600}
.ck-l.tot{border-top:1px solid var(--pp-line);margin-top:6px;padding-top:9px;color:var(--pp-ink);font:700 15px/1.2 var(--display)}

/* Resultado do Google */
.gg{padding:18px}
.gg-q{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--pp-line);border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.06);color:var(--pp-ink)}
.gg-q svg{width:14px;height:14px;color:var(--pp-mut)}
.gg-r{display:grid;grid-template-columns:1fr 64px;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--pp-3)}
.gg-site{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--pp-mut)}
.gg-site i{width:22px;height:22px;border-radius:50%;background:var(--loja-dim);display:block;border:4px solid #fff;outline:1px solid var(--pp-line)}
.gg-t{color:#1A0DAB;font-size:15px;margin:6px 0 4px}
.gg-meta{color:var(--pp-mut);font-size:11.5px}
.gg-meta b{color:var(--pp-ink)}
.gg .lj-img{border-radius:8px}

/* ── Painel WordPress do plugin ── */
.wp{display:grid;grid-template-columns:132px 1fr;min-height:330px;background:var(--pp-2)}
.wp-side{background:#1D2327;color:#C3C4C7;font-size:11.5px;padding:10px 0}
.wp-side div{padding:6px 12px;display:flex;align-items:center;gap:7px}
.wp-side div i{width:12px;height:12px;border-radius:3px;background:#3C434A;display:block;flex:none}
.wp-side .on{background:var(--plug);color:#fff}
.wp-side .on i{background:rgba(255,255,255,.5)}
.wp-side .sub{padding:4px 12px 4px 31px;color:#9EA3A8;background:#2C3338}
.wp-side .sub.on{background:#2C3338;color:#fff;font-weight:600}
.wp-main{padding:14px 16px;min-width:0}
.wp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.wp-h h5{font:700 15px/1.2 var(--display);margin:0}
.wp-btn{padding:6px 11px;border-radius:7px;background:var(--plug);color:#fff;font-weight:600;font-size:11.5px;white-space:nowrap}
.wp-btn.ghost{background:#fff;color:var(--plug);border:1px solid #D9C2FF}
.wp-card{background:var(--pp);border:1px solid var(--pp-line);border-radius:10px;padding:12px}
.wp-card + .wp-card{margin-top:10px}
.wp-lbl{color:var(--pp-mut);font-size:11px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--pp-3);color:var(--pp-mut);white-space:nowrap}
.pill.ok{background:var(--ok-dim);color:var(--ok)}
.pill.pl{background:var(--plug-dim);color:var(--plug)}
.pill.lj{background:var(--loja-dim);color:var(--loja)}
.pill.wa{background:#FFF3DC;color:var(--warn)}

/* Indicadores e gráfico */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kpi{background:var(--pp);border:1px solid var(--pp-line);border-radius:10px;padding:10px}
.kpi b{display:block;font:700 17px/1.2 var(--display);margin-top:3px}
.kpi b.pl{color:var(--plug)}
.kpi b.ok{color:var(--ok)}
.bars{display:flex;align-items:flex-end;gap:8px;height:92px;padding-top:6px}
.bars span{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#A866FF,var(--plug));height:var(--h)}
.bars span.lo{background:#D9C2FF}
.bars-x{display:flex;gap:8px;margin-top:5px;color:var(--pp-dim);font-size:10px}
.bars-x span{flex:1;text-align:center}

/* Tabelas do painel */
.tb{width:100%;border-collapse:collapse;font-size:11.5px}
.tb th{font-weight:600;color:var(--pp-mut);text-align:left;padding:6px 8px;border-bottom:1px solid var(--pp-line);white-space:nowrap}
.tb td{padding:7px 8px;border-bottom:1px solid var(--pp-3);vertical-align:middle}
.tb tr:last-child td{border-bottom:0}
.tb .r{text-align:right}
.tb .de{color:var(--pp-dim);text-decoration:line-through}
.tb .por{color:var(--loja);font-weight:700}
.tb .sub{display:block;color:var(--pp-mut);font-size:10.5px}
.tb-wrap{overflow-x:auto}

/* Campos de formulário */
.fld{margin-bottom:10px}
.fld label{display:block;color:var(--pp-mut);font-size:11px;margin-bottom:4px}
.inp{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--pp-line);border-radius:8px;background:#fff;font-size:12px}
.inp em{font-style:normal;color:var(--pp-dim)}
.flds{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--pp-3)}
.tg:first-child{border-top:0}
.tg .sw{width:30px;height:17px;border-radius:999px;background:var(--plug);position:relative;flex:none}
.tg .sw::after{content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.tg .sw.off{background:var(--pp-3)}
.tg .sw.off::after{right:auto;left:2px}

/* ── Construtor de e-mail por blocos ── */
.bld{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.blk{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border:1px solid var(--pp-line);border-radius:9px;margin-bottom:6px;font-size:12px}
.blk .grip{width:8px;height:12px;flex:none;background:radial-gradient(circle,var(--pp-dim) 1.2px,transparent 1.4px) 0 0/4px 4px}
.blk .ti{width:22px;height:22px;border-radius:6px;background:var(--plug-dim);color:var(--plug);display:grid;place-items:center;flex:none;font:700 10px/1 var(--mono)}
.blk small{display:block;color:var(--pp-mut);font-size:10.5px}
.blk.on{border-color:var(--plug);box-shadow:0 0 0 3px var(--plug-dim)}
.blk-add{padding:8px;border:1px dashed #C9A6FF;border-radius:9px;text-align:center;color:var(--plug);font-weight:600;font-size:11.5px}
.bld-prev{background:#fff;border:1px solid var(--pp-line);border-radius:10px;padding:10px;display:grid;gap:7px;align-content:start}
.bld-prev .ln{height:7px;border-radius:4px;background:var(--pp-3)}
.bld-prev .ln.s{width:55%}
.bld-prev .dst{height:64px;border-radius:7px;background:linear-gradient(135deg,#DDE7F3,#C3D3E8);outline:2px solid var(--plug);outline-offset:2px}
.bld-prev .g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bld-prev .g i{display:block;aspect-ratio:1.2;border-radius:6px;background:var(--pp-3)}
.bld-prev .cp{border:1px dashed var(--loja);border-radius:6px;padding:6px;text-align:center;color:var(--loja);font:700 10.5px/1 var(--mono)}
.bld-prev .bt{height:20px;border-radius:6px;background:var(--loja)}

/* ── O e-mail que o cliente recebe ── */
.em-head{padding:10px 14px;border-bottom:1px solid var(--pp-line);font-size:11.5px}
.em-head .ass{font:600 14px/1.3 var(--body);margin-bottom:8px}
.em-from{display:flex;align-items:center;gap:8px}
.em-av{width:28px;height:28px;border-radius:50%;background:var(--loja);color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;flex:none}
.em-from small{display:block;color:var(--pp-mut)}
.em{background:var(--pp-2);padding:12px}
.em-card{background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--pp-line)}
.em-logo{display:flex;justify-content:center;padding:12px;border-bottom:1px solid var(--pp-3)}
.em-in{padding:12px 14px}
.em-in h4{font:700 16px/1.25 var(--display);margin:0 0 4px}
.em-in p{color:var(--pp-mut);font-size:12px}
.em-dest{margin-top:10px;border:1px solid var(--pp-line);border-radius:10px;overflow:hidden}
.em-dest .lj-img{border-radius:0;aspect-ratio:2.1}
.em-dest div.t{padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.em-g{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.em-g .lj-img{aspect-ratio:1.25;border-radius:8px}
.em-g .lj-nome{font-size:11.5px;margin-top:5px}
.em-cupom{margin-top:10px;border:1.5px dashed var(--loja);border-radius:10px;padding:9px;text-align:center;font-size:11.5px;color:var(--pp-mut)}
.em-cupom b{display:block;font:700 15px/1.3 var(--mono);color:var(--loja);letter-spacing:.06em}
.em-pe{padding:10px 14px 14px;text-align:center;color:var(--pp-dim);font-size:10.5px}
.em-pe u{color:var(--pp-mut)}

/* Página de preferências (lado do cliente) */
.pref{padding:18px 18px 20px;max-width:440px;margin-inline:auto}
.pref h4{font:700 17px/1.25 var(--display);margin:0 0 4px}
.pref > p{color:var(--pp-mut);margin-bottom:12px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--pp-line);border-radius:10px;margin-bottom:8px}
.opt .rd{width:14px;height:14px;border-radius:50%;border:2px solid var(--pp-dim);flex:none;margin-top:2px}
.opt.on{border-color:var(--loja);background:var(--loja-dim)}
.opt.on .rd{border:4px solid var(--loja)}
.opt small{display:block;color:var(--pp-mut);font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.chips span{padding:5px 9px;border-radius:999px;border:1px solid var(--pp-line);font-size:11px;color:var(--pp-mut)}
.chips span.on{border-color:var(--loja);color:var(--loja);background:var(--loja-dim);font-weight:600}

/* ── Preços Dinâmicos ── */
.atv{padding:22px 18px;text-align:center}
.atv .av{width:62px;height:62px;border-radius:50%;margin:6px auto 10px;background:linear-gradient(135deg,#FFB3C7,#C08BFF);display:grid;place-items:center;color:#fff;font:700 20px/1 var(--display);border:3px solid #fff;box-shadow:0 0 0 2px var(--loja)}
.atv h4{font:700 17px/1.25 var(--display);margin:0 0 4px}
.atv p{color:var(--pp-mut);font-size:12px}
.atv .cup{display:inline-flex;align-items:center;gap:6px;margin:12px 0 4px;padding:6px 12px;border-radius:999px;background:var(--ok-dim);color:var(--ok);font:700 12px/1 var(--mono)}
.atv .cup svg{width:13px;height:13px}
.atv .lj-btn{margin-top:14px}
.atv .inp{margin-top:12px;font:600 13px/1 var(--mono);letter-spacing:.08em;justify-content:center;padding:11px}
.atv .lock{width:44px;height:44px;border-radius:14px;margin:6px auto 12px;background:var(--pp-3);color:var(--pp-mut);display:grid;place-items:center}
.atv .lock svg{width:20px;height:20px}
.atv .lks{margin-top:14px;display:flex;justify-content:center;gap:14px;font-size:11px;color:var(--pp-mut)}
.atv .lks u{text-underline-offset:2px}
.dp-card{position:relative}
.dp-card .lj-selo{background:var(--loja)}
.ped{display:grid;grid-template-columns:1.1fr .9fr;gap:10px}
.ped-l{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--pp-3)}
.ped-l:last-child{border-bottom:0}
.ped-l span:first-child{color:var(--pp-mut)}
.inf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.inf .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FFB3C7,#C08BFF);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--display);flex:none}
.inf small{display:block;color:var(--pp-mut);font-size:11px}
.tabs{display:inline-flex;gap:3px;padding:3px;border-radius:9px;background:var(--pp-3);margin-bottom:10px;font-size:11px}
.tabs span{padding:4px 9px;border-radius:7px;color:var(--pp-mut)}
.tabs span.on{background:#fff;color:var(--pp-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.portal{padding:14px}
.portal .kpis{grid-template-columns:repeat(3,1fr)}

/* ── Responsivo ── */
@media (max-width:1040px){
  .show,.show--rev{grid-template-columns:1fr;gap:var(--s-6)}
  .show--rev .show-txt{order:0}
  .show-txt{max-width:62ch}
}
@media (max-width:700px){
  .shows{gap:var(--s-12)}
  .mk-float{display:none}
  .passur{grid-template-columns:1fr}
  .wp{grid-template-columns:1fr}
  .wp-side{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .portal .kpis{grid-template-columns:1fr 1fr 1fr}
  .lj-grid{grid-template-columns:1fr 1fr}
  .lj-grid > :nth-child(3){display:none}
  .pd,.ck,.ped,.bld{grid-template-columns:1fr}
  .pd .lj-img{aspect-ratio:2}
  .bld-prev{display:none}
  .lj-menu{display:none}
  .flds{grid-template-columns:1fr}
}
@media (max-width:400px){
  .portal .kpis{grid-template-columns:1fr 1fr}
  .mk-phone .mk-screen{min-height:0}
}
@media (prefers-reduced-motion:reduce){html.motion .mk-float{animation:none}}