/* MercaBot, home (direção aprovada em 05/11/2026). Celular primeiro.
   Só a home usa esta folha: não acrescente regra de outra página aqui. */
@font-face{font-family:"Cabinet Grotesk";src:url(fonts/cabinet-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url(fonts/cabinet-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url(fonts/cabinet-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cabinet Grotesk";src:url(fonts/cabinet-grotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Clash Display";src:url(fonts/clash-display-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;

  /* ── do unificado, sem mudança ── */
  --bg:#080c09;
  --bg2:#0d120e;
  --bg3:#111810;
  --line:#232d26;
  --text:#eaf2eb;
  --muted:#bac7bd;
  --brand:#00e676;
  --action:#00e676;
  --action-hover:#3df297;
  --on-action:#06140b;

  /* ── correção obrigatória de 8-cruzada/a (§2): #97a69b falha em Lc ── */
  --faint:#aab9ae;

  /* ── novos: campo de marca (8-cruzada/a §2, os 3 tokens exigidos para C/B) ── */
  --on-brand:#04200f;          /* tinta sobre o campo: 10,32:1 */
  --action-on-brand:#04200f;   /* CTA sobre o campo é o inverso */
  --on-action-on-brand:#ffffff;
  --focus-on-brand:#04200f;
  --focus:#7df5b5;

  /* ── novos: o gesto. Verde é o bot, âmbar é o dono. Sempre com palavra ao lado ── */
  --bot:#00e676;
  --dono:#e3b341;              /* --warn-fg de 1-cor, mínimo 6,8:1 em tinta */
  --dono-fundo:#231c0a;        /* bolha e faixa do dono */
  --bot-fundo:#10241a;         /* bolha do bot, a do 6-produto sem borda */
  --cli-fundo:#161d18;         /* bolha do cliente */

  /* ── superfícies da tela do produto (6-produto, nomes novos) ── */
  --sup:#0f1511;
  --sup2:#151c17;
  --sup3:#1c251f;

  /* ── tipo: 2 famílias, 7 tamanhos no total; 6 em cada largura ──
     celular 13 15 18 24 32 40 · computador 13 15 18 24 40 64 */
  --ui:"Cabinet Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --logo:"Clash Display","Cabinet Grotesk",system-ui,sans-serif;
  --t13:.8125rem;--t15:.9375rem;--t18:1.125rem;--t24:1.5rem;--t32:2rem;--t40:2.5rem;--t64:4rem;

  /* ── espaço: só múltiplos de 8 (mais 4 dentro da tela do produto) ── */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px;--s16:128px;

  /* ── um único raio, mais o círculo do avatar ── */
  --r:8px;

  /* ── barra do gesto ── */
  --barra:4px;
  --barra-g:8px;
}

.sprite{position:absolute}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 var(--t18)/1.5 var(--ui);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit}
ul,ol{padding:0;list-style:none}
img,svg{display:block}
.nw{white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.campo :focus-visible,.fim :focus-visible{outline-color:var(--focus-on-brand)}
.pular{position:absolute;left:16px;top:-64px;z-index:30;padding:8px 16px;background:var(--text);color:var(--bg);border-radius:var(--r);font-weight:700}
.pular:focus{top:8px}

/* ── grade: 4 colunas no celular, 12 no computador ── */
.g{width:100%;max-width:1232px;margin-inline:auto;padding-inline:var(--s2)}
.sec{padding-block:var(--s8)}
.sec + .sec{border-top:1px solid var(--line)}

/* ── tipo ── */
h1,h2,h3{font-weight:800;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:var(--t40);line-height:1.04}
h2{font-size:var(--t32);line-height:1.08}
h3{font-size:var(--t24);line-height:1.2;letter-spacing:-.015em}
.lead{font-size:var(--t18);line-height:1.5;color:var(--muted);text-wrap:pretty}
.txt{font-size:var(--t15);line-height:1.55;color:var(--muted);text-wrap:pretty}
.rot{font-size:var(--t15);font-weight:700;line-height:1.4;color:var(--muted)}
.leg{font-size:var(--t13);line-height:1.4;color:var(--faint)}
.num{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.lk{font-weight:700;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lk:hover{text-decoration-thickness:2px}

/* ── botão ── */
.b{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s3);border-radius:var(--r);font:700 var(--t18)/1 var(--ui);text-decoration:none;white-space:nowrap;transition:background-color .12s}
.b-p{background:var(--action);color:var(--on-action)}
.b-p:hover{background:var(--action-hover)}
.b-i{background:var(--action-on-brand);color:var(--on-action-on-brand)}
.b-i:hover{background:#0c3a1e}
.b-s{border:1px solid #76867b;color:var(--text)}
.b-s:hover{background:var(--sup2)}
.b-c{min-height:40px;padding:0 var(--s2);font-size:var(--t15)}

/* ── cabeçalho ── */
.cab{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.cab .g{display:flex;align-items:center;gap:var(--s3);height:56px}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:700 1.3125rem/1 var(--logo);letter-spacing:-.04em;color:var(--text);text-decoration:none}
.logo img{width:26px;height:26px}
.logo span{color:var(--brand)}
.cab nav{display:none}
.cab-dir{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.cab-dir a:not(.b){display:inline-flex;align-items:center;min-height:44px;font-size:var(--t15);font-weight:500;color:var(--muted);text-decoration:none}
.cab-dir a:not(.b):hover{color:var(--text)}
.cab-cta{display:none}
.cab.pos .cab-cta{display:inline-flex}
@media (max-width:440px){.cab.pos .cab-dir a:not(.b){display:none}.cab.pos .cab-cta{padding:0 12px}}
@media (max-width:340px){.cab .g{gap:var(--s1)}.cab-cta{font-size:var(--t13)}.cab.pos .cab-cta{padding:0 8px}}

/* ── primeira dobra: campo de marca + tela real por cima da borda ── */
.campo{background:var(--brand);color:var(--on-brand);padding-block:var(--s2) 112px}
.campo .rot{display:none}
.campo h1{margin-top:0}
.campo .rot{color:var(--on-brand)}
.campo .sub{margin-top:var(--s2);font-size:var(--t18);line-height:1.35;font-weight:500;text-wrap:pretty}
.campo .acao{margin-top:var(--s2)}
.campo .b{width:100%}
.campo .cartao{margin-top:var(--s1);font-size:var(--t15);line-height:1.4;font-weight:500;text-wrap:pretty}
.audio-l{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:var(--t15);font-weight:700;color:var(--on-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.audio-l:hover{text-decoration-thickness:2px}
.hero-tela{margin-top:-96px;position:relative}
.legenda{margin-top:var(--s1)}

/* ── fatos sob a tela ── */
.fatos{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s4);border-top:1px solid var(--line)}
.fatos li{padding-block:var(--s2);border-bottom:1px solid var(--line);font-size:var(--t15);font-weight:700;line-height:1.3}
.fatos li:nth-child(odd){padding-right:var(--s2)}
.fatos li:nth-child(even){padding-left:var(--s2);border-left:1px solid var(--line)}
.fatos small{display:block;font-size:var(--t13);font-weight:400;color:var(--faint)}

/* ══ tela do produto: fiel a 6-produto/prototipos, com as correções de 8-cruzada/a §6 ══ */
.tela{display:block;background:var(--sup);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px;line-height:1.45;color:var(--text)}
.tela svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-grade{display:block}
.t-lat,.t-lista{display:none}
.ava{width:40px;height:40px;border-radius:50%;background:var(--sup3);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.t-logo{display:flex;align-items:center;gap:8px;padding:4px 8px 16px;font:700 18px/1 var(--logo);letter-spacing:-.04em}
.t-logo img{width:24px;height:24px}
.t-logo span{color:var(--brand)}
.t-nav{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:var(--r);color:var(--muted);font-weight:500}
.t-nav.on{background:var(--sup3);color:var(--text);font-weight:700}
.t-nav b{margin-left:auto;font-size:13px;font-weight:700;color:var(--dono)}
.t-conv{display:flex;flex-direction:column;background:var(--bg);min-width:0}
.t-cc{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:56px;background:var(--sup);border-bottom:1px solid var(--line)}
.t-cc .ava{display:none}
.t-q{min-width:0;flex:1;line-height:1.25}
.t-q strong{display:block;font-size:15px}
.t-q small{font-size:13px;color:var(--faint);white-space:nowrap}
.t-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid #76867b;border-radius:var(--r);font-size:13px;font-weight:700;white-space:nowrap}
.t-vt{margin-left:-4px;color:var(--muted)}
.so-pc{display:none}
.t-falas{padding:8px 12px 8px 0;display:flex;flex-direction:column}
/* o gesto: a barra lateral da conversa muda de dono */
.tr{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 0 8px 24px}
.tr::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:var(--barra);background:var(--bot)}
.tr.dono::before{background:var(--dono)}
.tr.dono{padding-bottom:4px}
.fala{max-width:88%;padding:8px 12px;border-radius:var(--r);font-size:15px;line-height:1.35;background:var(--cli-fundo);align-self:flex-start}
.fala i{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
.fala i time{font-weight:400;color:var(--faint);margin-left:6px}
.fala.bot{background:var(--bot-fundo);align-self:flex-end}
.fala.eu{background:var(--dono-fundo);align-self:flex-end}
.marco{position:relative;display:flex;align-items:center;min-height:36px;padding-left:24px;font-size:13px;font-weight:700;color:var(--dono)}
.marco::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:var(--barra);background:linear-gradient(var(--bot) 50%,var(--dono) 50%)}
.marco::after{content:"";position:absolute;left:4px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--dono);border:3px solid var(--bg)}
.t-esc{display:grid;grid-template-columns:1fr 44px;gap:8px;padding:0 12px 8px}
.t-campo{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid #3a4840;border-radius:var(--r);background:var(--sup);font-size:15px;color:var(--faint)}
.t-env{width:44px;height:44px;border-radius:var(--r);background:var(--action);color:var(--on-action);display:grid;place-items:center}
.t-nota{grid-column:1/-1;font-size:13px;color:var(--faint);line-height:1.35}
.t-it{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);position:relative;min-width:0}
.t-it.on{background:var(--sup3)}
.t-it.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--barra);background:var(--dono)}
.t-it .m{min-width:0;flex:1}
.t-it .l1{display:flex;align-items:baseline;gap:8px}
.t-it .l1 strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-it .h{font-size:13px;color:var(--faint)}
.t-it .l2{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-it .l3{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--dono)}
.t-gr{padding:12px 16px 4px;font-size:13px;font-weight:700;color:var(--faint)}
.t-lh{padding:16px 16px 8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.t-bu{display:flex;align-items:center;gap:8px;margin:0 16px 8px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sup2);color:var(--faint);font-size:14px}
.t-fi{display:flex;gap:4px;padding:0 12px 8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.t-fi span{display:flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:var(--r);white-space:nowrap}
.t-fi .on{background:var(--sup3);color:var(--text);font-weight:700}
.t-fi b{color:var(--dono)}

/* Início do painel */
.i-topo{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;border-bottom:1px solid var(--line)}
.i-topo .t-logo{padding:0}
.i-topo .ava{margin-left:auto;width:32px;height:32px;font-size:12px}
.i-pag{padding:16px;min-width:0}
.i-pag h3{font-size:20px;letter-spacing:-.02em}
.i-est{display:flex;align-items:center;gap:8px;margin-top:4px;color:var(--muted);font-size:13px}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--bot);flex:none}
.i-gr{display:grid;gap:16px;margin-top:16px}
.i-bl{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);min-width:0;overflow:hidden}
.i-bc{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.i-bc u{font-size:13px;text-underline-offset:3px}
.i-li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);min-width:0}
.i-li:last-child{border-bottom:0}
.i-li .m{min-width:0;flex:1}
.i-li strong{display:block}
.i-li .x{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-li .e{display:block;font-size:13px;font-weight:700;color:var(--dono)}
.i-li .h{font-size:13px;color:var(--faint);white-space:nowrap}
.i-sub{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;background:var(--bg2)}
.i-num{display:grid;grid-template-columns:1fr 1fr}
.i-num div{padding:16px;border-right:1px solid var(--line)}
.i-num div:last-child{border-right:0}
.i-num b{display:block;font-size:28px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.i-num span{font-size:13px;color:var(--muted)}
.i-cota{padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.i-cota b{color:var(--text)}
.t-bx{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.t-bx span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font-size:12px;color:var(--muted);font-weight:500}
.t-bx .on{color:var(--text);font-weight:700}

/* ══ o momento: o horário da conversa, em grande ══ */
.mom-cab{display:grid;gap:var(--s2)}
.lin{margin-top:var(--s6)}
.lin li{position:relative;display:grid;grid-template-columns:var(--barra-g) 1fr;column-gap:var(--s3);}
.lin .bar{grid-row:1/3;background:var(--bot)}
.lin .dono-l .bar{background:var(--dono)}
.lin .cont{padding-block:var(--s3)}
.lin .dono-l{background:var(--dono-fundo);box-shadow:0 0 0 100vmax var(--dono-fundo);clip-path:inset(0 -100vmax)}
.lin .hora{display:block;font-size:var(--t40);line-height:1}
.lin h3{margin-top:var(--s1);font-size:var(--t24)}
.lin p{margin-top:var(--s1)}
.lin .quem{display:block;font-size:var(--t15);font-weight:700;margin-top:0}
.lin .dono-l .hora,.lin .dono-l .quem{color:var(--dono)}
.lin .quem{color:var(--muted)}
.cond{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}

/* ══ número: lista de condições, sem cartões ══ */
.par{display:grid;gap:var(--s4)}
.par .lead{margin-top:var(--s2)}
.cond-l{border-top:1px solid var(--line)}
.cond-l div{padding-block:var(--s3);border-bottom:1px solid var(--line)}
.cond-l dt{font-size:var(--t18);font-weight:800;letter-spacing:-.01em;line-height:1.3}
.fig-n{margin-top:var(--s3)}
.n-cab{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.n-ok{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.n-lin{display:flex;gap:12px;align-items:center;padding:16px}
.n-lin strong{display:block;font-size:15px}
.n-lin small{font-size:13px;color:var(--faint)}
.n-rod{display:grid;gap:8px;justify-items:start;padding:12px 16px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.cond-l dd{margin-top:4px;font-size:var(--t18);line-height:1.45;color:var(--muted);margin-inline-start:0;text-wrap:pretty}

/* ══ painel ══ */
.pn-cab{display:grid;gap:var(--s2);margin-bottom:var(--s4)}

/* ══ áudio + passos ══ */
.aud-f{background:var(--bot-fundo);padding-block:var(--s8)}
.aud{display:grid;gap:var(--s3)}
.aud-f + .sec{border-top:0}
.aud-t .lead{margin-block:var(--s2) var(--s3);color:var(--text)}
.aud-t .b{width:100%}
.aud-falas{display:flex;flex-direction:column;gap:var(--s1)}
.b-aud{display:grid;grid-template-columns:32px 1fr auto;gap:4px var(--s1);align-items:center;align-self:flex-end;width:min(100%,320px);padding:var(--s1) 12px;border-radius:var(--r);background:var(--bg)}
.play{width:32px;height:32px;border-radius:50%;background:var(--sup3);display:grid;place-items:center}
.play svg{width:16px;height:16px;fill:var(--text)}
.onda{display:flex;align-items:center;gap:3px;height:24px;overflow:hidden}
.onda i{flex:none;width:3px;background:var(--muted)}
.onda i:nth-child(1){height:6px}.onda i:nth-child(2){height:14px}.onda i:nth-child(3){height:10px}.onda i:nth-child(4){height:20px}.onda i:nth-child(5){height:12px}.onda i:nth-child(6){height:24px}.onda i:nth-child(7){height:16px}.onda i:nth-child(8){height:8px}.onda i:nth-child(9){height:18px}.onda i:nth-child(10){height:22px}.onda i:nth-child(11){height:10px}.onda i:nth-child(12){height:14px}.onda i:nth-child(13){height:6px}.onda i:nth-child(14){height:16px}.onda i:nth-child(15){height:20px}.onda i:nth-child(16){height:8px}.onda i:nth-child(17){height:12px}.onda i:nth-child(18){height:6px}
.dur{font-size:var(--t13);color:var(--muted);font-variant-numeric:tabular-nums}
.tr-aud{grid-column:1/-1;font-size:var(--t13);color:var(--muted)}
.b-res{align-self:flex-start;max-width:88%;padding:var(--s1) 12px;border-radius:var(--r);background:var(--bg);font-size:var(--t15);line-height:1.4}
.b-res i{display:block;font-style:normal;font-size:var(--t13);font-weight:700;color:var(--muted);margin-bottom:2px}
.aud-c .legenda{color:var(--muted)}
.pas{margin-top:var(--s4);counter-reset:p}
.pas li{counter-increment:p;display:flex;flex-direction:column;padding-block:var(--s3);border-top:1px solid var(--line)}
.pas img{order:-1;width:100%;max-width:384px;height:auto;margin-bottom:var(--s3);border:1px solid var(--line);border-radius:var(--r)}
.pas-leg{margin-top:var(--s2)}
.pas li::before{content:counter(p);display:block;font-size:var(--t40);letter-spacing:-.025em;font-weight:800;line-height:1;margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.pas h3{font-size:var(--t24);line-height:1.2}
.pas p{margin-top:4px}
.prep{padding-top:var(--s3);border-top:1px solid var(--line)}

/* ══ planos: uma tabela, não quatro cartões ══ */
.pl-cab{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.pl{border-top:1px solid #76867b}
.pl>li{display:grid;gap:var(--s1) var(--s2);padding-block:var(--s3);border-bottom:1px solid var(--line)}
.pl .nom{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.pl .nom h3{font-size:var(--t24)}
.pl .pr{font-size:var(--t32);line-height:1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl .pr small{font-size:var(--t15);font-weight:500;letter-spacing:0;color:var(--muted)}
.pl .an{margin-top:4px;font-size:var(--t13);color:var(--faint);line-height:1.4}
.pl .pq{font-size:var(--t15);line-height:1.45;color:var(--muted)}
.pl .it{margin-top:var(--s1);font-size:var(--t15);line-height:1.45}
.pl .it li{padding-left:16px;position:relative}
.pl .it li + li{margin-top:2px}
.pl .it li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--faint)}
.pl .it .fx{font-weight:700}
.pl .b{width:100%;min-height:48px;margin-top:var(--s1);font-size:var(--t15)}
.pl-pe{display:grid;gap:var(--s4);margin-top:var(--s4)}
.pl-pe h3{font-size:var(--t18);letter-spacing:-.01em;line-height:1.3}
.pl-pe p,.pl-pe li{font-size:var(--t15);line-height:1.55;color:var(--muted)}
.pl-pe p{margin-top:4px}
.pl-pe .ico li + li{margin-top:var(--s1)}


/* ══ dúvidas ══ */
.fq{margin-top:var(--s4);border-top:1px solid var(--line)}
.fq details{border-bottom:1px solid var(--line)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px;padding-block:var(--s2);font-size:var(--t18);font-weight:700;line-height:1.3;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";flex:none;width:12px;height:12px;background:
  linear-gradient(var(--muted),var(--muted)) center/12px 2px no-repeat,
  linear-gradient(var(--muted),var(--muted)) center/2px 12px no-repeat}
.fq details[open] summary::after{background:linear-gradient(var(--muted),var(--muted)) center/12px 2px no-repeat}
.fq .r{padding-bottom:var(--s3);font-size:var(--t18);line-height:1.5;color:var(--muted);max-width:68ch}
.fq .r p + p{margin-top:var(--s1)}
.fq strong{color:var(--text)}

/* ══ fim ══ */
.fim{background:var(--brand);color:var(--on-brand);padding-block:var(--s8)}
.fim h2{font-size:var(--t40);line-height:1.04}
.fim .b{width:100%;margin-top:var(--s3)}
.fim p{margin-top:var(--s2);font-size:var(--t15);font-weight:500;line-height:1.4;text-wrap:pretty}
.fim .lk{color:inherit}

.rod{padding-block:var(--s6) var(--s4);font-size:var(--t15);color:var(--muted)}
.rod .mar .txt{margin-top:8px}
.rod .col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s2);margin-top:var(--s4)}
.rod h3{font-size:var(--t13);letter-spacing:0;font-weight:700;color:var(--faint);margin-bottom:var(--s1)}
.rod ul a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;color:var(--muted)}
.rod ul a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.rod .sol{margin-top:var(--s4)}
.rod .sol ul{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s2)}
.rod .leg{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}

/* ══ movimento: a dobra conta o momento uma vez; a última imagem é a mesma foto parada ══ */
@media (prefers-reduced-motion:no-preference){
  .anima .tr.bot-seg::before{animation:cresce .5s ease-out both}
  .anima .marco{animation:entra .4s ease-out 1.1s both}
  .anima .tr.dono .fala.so-pc{animation:none!important}
  .anima .tr.dono .fala{animation:entra .4s ease-out 1.5s both}
  .anima .tr.dono::before{animation:cresce .4s ease-out 1.5s both;transform-origin:top}
  @keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes cresce{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .tr.bot-seg::before{transform-origin:top}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* ══ tablet ══ */
@media (min-width:768px){
  .g{padding-inline:var(--s4)}
  .cab nav{display:flex;gap:var(--s4);margin-left:var(--s3)}
  .cab nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t15);font-weight:500;color:var(--muted);text-decoration:none}
  .cab nav a:hover{color:var(--text)}
  .cab-pr{display:none!important}
  h1{font-size:var(--t64);line-height:1.02;letter-spacing:-.03em}
  .campo .b,.pl .b{width:auto}
  .campo .rot{display:block}
  .campo h1{margin-top:var(--s2)}
  .fatos{grid-template-columns:repeat(4,1fr)}
  .fatos li,.fatos li:nth-child(odd),.fatos li:nth-child(even){padding:var(--s2) var(--s2) var(--s2) var(--s2);border-left:1px solid var(--line)}
  .fatos li:first-child{border-left:0;padding-left:0}
  .t-grade{display:grid;grid-template-columns:300px minmax(0,1fr)}
  .t-lista{display:block;border-right:1px solid var(--line);min-width:0;overflow:hidden}
  .t-vt{display:none}
  .t-cc .ava{display:grid}
  .t-falas{flex:1;padding:16px 16px 16px 0}
  .t-esc{padding-inline:16px}
  .tr{padding-left:32px}
  .tr::before{left:14px}
  .marco{padding-left:32px}
  .marco::before{left:14px}
  .marco::after{left:8px}
  .fala{max-width:min(78%,520px)}
  .tela-ini .t-grade{display:block}
  .i-gr{grid-template-columns:1.4fr 1fr;align-items:start}
  .pas{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--s3)}
  .aud-t .b{width:auto}
  .pl-pe{grid-template-columns:repeat(2,1fr);column-gap:var(--s3)}
}

/* ══ computador: 12 colunas, escala 13 15 18 24 40 64 ══ */
@media (min-width:1024px){
  html{scroll-padding-top:88px}
  .g{padding-inline:var(--s2)}
  .sec{padding-block:var(--s16)}
  .cab .g{height:64px}
  .cab-dir{gap:var(--s3)}
  h1{font-size:var(--t64);line-height:1.02;letter-spacing:-.03em}
  h2{font-size:var(--t40);line-height:1.05;letter-spacing:-.025em}
  .campo{padding-block:var(--s4) 232px}
  .campo .rot{display:block}
  .campo h1{margin-top:var(--s2);max-width:18em}
  .hero-l{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s3);margin-top:var(--s2)}
  .hero-l .sub{grid-column:1/8;text-wrap:pretty;margin-top:0;font-size:var(--t24);line-height:1.3;font-weight:500;letter-spacing:-.01em}
  .hero-l .acao{grid-column:8/13;margin-top:0}
  .campo .b{width:auto}
  .campo .cartao{margin-top:var(--s1);font-size:var(--t15);line-height:1.35}
  .hero-tela{margin-top:-208px}
  .tela-hero .t-grade{grid-template-columns:200px 300px minmax(0,1fr);height:560px}
  .t-lat{display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:var(--sup);border-right:1px solid var(--line);min-height:0}
  .t-lat .esp{flex:1}
  .t-conv{height:100%}
  .so-pc{display:block}
  .t-falas{flex:1;justify-content:flex-start}
  .t-esc{margin-top:auto}
  .fatos{margin-top:var(--s6)}

  .mom-cab{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);row-gap:var(--s3)}
  .mom-cab h2{grid-column:1/11;font-size:var(--t64);line-height:1.02;letter-spacing:-.03em}
  .mom-cab .lead{grid-column:1/8}
  .lin{margin-top:var(--s8)}
  .lin li{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);position:relative;align-items:baseline}
  .lin .bar{grid-column:4;grid-row:1;width:var(--barra-g);margin-left:-32px;align-self:stretch}
  .lin .cont{display:contents}
  .lin .hora{grid-column:1/4;grid-row:1;font-size:var(--t64);line-height:1;padding-block:var(--s4)}
  .lin h3{grid-column:4/9;grid-row:1;margin-top:0;padding-block:var(--s4);line-height:1.2}
  .lin p{grid-column:9/13;grid-row:1;margin-top:0;padding-block:var(--s4)}

  .par{grid-template-columns:repeat(12,1fr);column-gap:var(--s3)}
  .par>:first-child{grid-column:1/6}
  .par>:last-child{grid-column:7/13}
  .par h2{font-size:var(--t40)}
  .fig-n{margin-top:var(--s4)}
  .par>:first-child{position:sticky;top:96px;align-self:start}
  .cond-l dt{font-size:var(--t24);line-height:1.2;letter-spacing:-.015em}
  .cond-l dd{margin-top:var(--s1)}
  .n-rod{grid-template-columns:1fr auto;align-items:center}

  .pn-cab{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);margin-bottom:var(--s6);align-items:end}
  .pn-cab h2{grid-column:1/8}
  .pn-cab p{grid-column:8/13}
  .i-topo,.t-bx{display:none}
  .tela-ini .t-grade{display:grid;grid-template-columns:200px minmax(0,1fr)}
  .i-pag{padding:24px 32px 32px}
  .i-pag h3{font-size:24px}

  .aud-f{padding-block:var(--s12)}
  .aud{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);align-items:end}
  .aud-t{grid-column:1/8}
  .aud h2{font-size:var(--t64);line-height:1.02;letter-spacing:-.03em}
  .aud-c{grid-column:8/13}
  #comecar h2{max-width:16em}
  .pas{margin-top:var(--s6)}

  .pl-cab{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);margin-bottom:var(--s6);align-items:end}
  .pl-cab h2{grid-column:1/7}
  .pl-cab p{grid-column:7/13}
  .pl>li{grid-template-columns:repeat(12,1fr);column-gap:var(--s3);align-items:start;padding-block:var(--s4)}
  .pl .nom{display:contents}
  .pl .nom h3{grid-column:1/3;line-height:40px}
  .pl .col-pr{grid-column:3/6}
  .pl .col-pr .pr{font-size:var(--t40)}
  .pl .an{text-align:left;margin-top:4px}
  .pl .pq{grid-column:6/8;display:none}
  .pl .col-it{grid-column:6/10}
  .pl .col-it .pq{display:block;margin-bottom:var(--s1);color:var(--text);font-weight:500}
  .pl .col-bt{grid-column:10/13}
  .pl .b{width:100%;min-height:48px;margin-top:0;padding:0 var(--s2)}
  .pl-pe{margin-top:var(--s6)}


  .fqw{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s3)}
  .fqw h2{grid-column:1/6}
  .fq{grid-column:6/13;margin-top:0}

  .fim{padding-block:var(--s16)}
  .fim .g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s3);align-items:end}
  .fim h2{grid-column:1/8;font-size:var(--t64);line-height:1.02;letter-spacing:-.03em}
  .fim .d{grid-column:8/13}
  .fim .b{width:auto;margin-top:0}

  .rod .g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s3)}
  .rod .mar{grid-column:1/5}
  .rod .col{grid-column:7/13;grid-template-columns:repeat(3,1fr);margin-top:0}
  .rod .sol{grid-column:1/13;margin-top:var(--s6)}
  .rod .sol ul{grid-template-columns:repeat(3,1fr);column-gap:var(--s3)}
  .rod .leg{grid-column:1/13;margin-top:var(--s6)}
}

/* ══ chat de vendas no celular ══
   whatsapp-sales.css esconde o rótulo com display:none até 720 px, e o botão
   fica sem nome para leitor de tela (axe: button-name). Aqui ele só sai da
   vista: o desenho é o mesmo. */
@media (max-width:720px){
  .mbwa-launcher .mbwa-label{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}