/* ══════════════════════════════════════════════════════════════
   PALETA DO SITE
   #00e19e verde  ·  #1a202c escuro  ·  #f5fefe claro
   O tema escuro e o claro usam os MESMOS nomes de variável.
   Cada seção decide qual dos dois vale dentro dela: classe .lt
   ══════════════════════════════════════════════════════════════ */
.ecomx{
  /* ═════════ ESCALA — VERDE ═════════
     500 é a cor da marca. Os outros dez degraus saem dela, mesmo matiz. */
  --g50:#D6FFEA;  --g100:#B7FBDA; --g200:#90F5C6; --g300:#6BEEB6; --g400:#48E8AA;
  --g500:#00E19E; --g600:#00C186; --g700:#009E6D; --g800:#007A53; --g900:#00573B;
  --g950:#023B27;

  /* ═════════ ESCALA — NEUTRO ═════════
     50 e 900 são o claro e o escuro da marca. O matiz caminha do ciano
     (topo) ao azul (base), que é o caminho entre as suas duas cores. */
  --n0:#F8FFFF;   --n50:#F5FEFE;  --n100:#EAF3F4; --n200:#D8E2E3; --n300:#C2CDCF;
  --n400:#A2AEB1; --n500:#838F94; --n650:#5C6870; --n600:#657178; --n700:#47525B;
  --n800:#2D3641; --n900:#1A202C; --n950:#0F1521; --n1000:#060B17;

  /* ═════════ SEMÂNTICO — tema escuro ═════════ */
  --bg:var(--n950); --bg-2:var(--n900); --surf:var(--n800); --line:var(--n700);
  --txt:var(--n50); --txt-2:var(--n300); --txt-3:var(--n400);
  --accent:var(--g500); --accent-2:var(--g600);
  --on-brand:var(--n1000);
  --glow: color-mix(in oklab, var(--g500) 16%, transparent);
  --icobg: color-mix(in oklab, var(--g500) 18%, transparent);
  --icoln: color-mix(in oklab, var(--g500) 30%, transparent);
  --trackbg:var(--n900); --feebg:var(--n700); --feestripe:rgba(255,255,255,.16);
  --surf-grad:linear-gradient(180deg,var(--n800),var(--n900));

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --r:16px;
}

/* ═════════ SEMÂNTICO — tema claro ═════════
   Mesmos nomes, outro degrau da mesma escala. */
.ecomx .lt{
  --bg:var(--n50); --bg-2:var(--n100); --surf:var(--n0); --line:var(--n200);
  --txt:var(--n900); --txt-2:var(--n700); --txt-3:var(--n650);
  --accent:var(--g800); --accent-2:var(--g900);
  --glow:transparent;
  --icobg:var(--g100); --icoln:var(--g300);
  --trackbg:var(--n200); --feebg:var(--n300); --feestripe:rgba(0,0,0,.13);
  --surf-grad:linear-gradient(180deg,var(--n0),var(--n50));
}

.ecomx, .ecomx *{box-sizing:border-box;margin:0}
.ecomx{background:var(--bg);color:var(--txt);
  font:17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
  -webkit-font-smoothing:antialiased}
.ecomx .w{max-width:1180px;margin:0 auto;padding:0 var(--s3)}
.ecomx img{max-width:100%;height:auto;display:block}

.ecomx section{padding:var(--s6) 0;position:relative;background:var(--bg);color:var(--txt)}
.ecomx section.alt{background:var(--bg-2)}

/* ═══ A COR ESCALA AO LONGO DA PÁGINA ═══
   Cada seção começa no degrau em que a anterior terminou, então
   não existe emenda visível: a página inteira é uma rampa só.
   As duas únicas quebras duras são as viradas escuro↔claro. */
.ecomx section.e1{background:linear-gradient(180deg,var(--n1000),var(--n950));--accent:var(--g400)}
.ecomx section.e2{background:linear-gradient(180deg,var(--n950),var(--n900))}
.ecomx section.c1{background:linear-gradient(180deg,var(--n0),var(--n50))}
.ecomx section.c2{background:linear-gradient(180deg,var(--n50),var(--n100))}
.ecomx section.c3{background:linear-gradient(180deg,var(--n100),var(--n50))}
.ecomx section.c4{background:linear-gradient(180deg,var(--n50),var(--n100))}
.ecomx section.e3{background:linear-gradient(180deg,var(--n900),var(--n950));--accent:var(--g400)}
.ecomx section.e4{background:linear-gradient(180deg,var(--n950),var(--n1000))}
.ecomx section.e5{background:var(--n1000)}
@media(max-width:760px){.ecomx section{padding:var(--s5) 0}}

/* textura de grade em CSS: zero peso, só nas seções escuras */
.ecomx .mesh::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 75%)}
.ecomx .mesh>*{position:relative;z-index:1}

/* ═══ TÍTULOS SEMPRE EM 2 LINHAS NO DESKTOP ═══
   O <br class="q"> força a quebra. Abaixo de 900px ele some. */
.ecomx br.q{display:none}
@media(min-width:900px){.ecomx br.q{display:block}}

.ecomx h1{font-weight:680;font-size:clamp(32px,3.9vw,48px);line-height:1.12;letter-spacing:-.03em;
  margin-bottom:var(--s3);text-wrap:balance}
.ecomx h2{font-weight:660;font-size:clamp(25px,2.8vw,34px);line-height:1.18;letter-spacing:-.022em;
  margin-bottom:var(--s3);text-wrap:balance}
.ecomx h1 em, .ecomx h2 em{font-style:normal;color:var(--accent)}
.ecomx .deck{font-size:20px;color:var(--txt-2);max-width:58ch;margin-bottom:var(--s4)}
.ecomx .lead{font-size:19px;color:var(--txt-2);max-width:60ch;margin-bottom:var(--s4)}
.ecomx p{color:var(--txt-2);margin-bottom:var(--s2)}


/* HERO */
.ecomx .hero{padding:calc(var(--s6) + 16px) 0 var(--s6);overflow:hidden}
.ecomx .hero::before{content:"";position:absolute;inset:-30% 0 auto 50%;transform:translateX(-50%);
  width:min(1200px,130%);height:760px;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%)}
.ecomx .hero h1{max-width:21em}

/* TEXTO + GRÁFICO: nenhuma lateral vazia */
.ecomx .split{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s5);align-items:center}
.ecomx .split h2{font-size:clamp(25px,2.45vw,31px)}
@media(max-width:980px){.ecomx .split{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .chart{background:var(--surf-grad);border:1px solid var(--line);border-radius:22px;padding:var(--s4)}
.ecomx .chart .ttl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:var(--s4)}
.ecomx .bar{margin-bottom:var(--s4)}
.ecomx .bar:last-of-type{margin-bottom:0}
.ecomx .bar .lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
  font-size:15px}
.ecomx .bar .lbl b{font-weight:620}
.ecomx .bar .lbl i{font-style:normal;font-weight:700;font-size:19px;letter-spacing:-.02em}
.ecomx .track{height:38px;border-radius:10px;overflow:hidden;display:flex;background:var(--trackbg)}
.ecomx .keep{background:linear-gradient(90deg,var(--g600),var(--g400));height:100%}
.ecomx .fee{height:100%;background:repeating-linear-gradient(135deg,var(--feestripe) 0 6px,transparent 6px 12px),
      var(--feebg)}
.ecomx .legend{display:flex;gap:var(--s3);margin-top:var(--s3);font-size:13.5px;color:var(--txt-3);
  flex-wrap:wrap}
.ecomx .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px}
.ecomx .foot{font-size:13px;color:var(--txt-3);margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line)}

/* CARDS 4x2 */
.ecomx .grid{display:grid;gap:var(--s2);grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.ecomx .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ecomx .grid{grid-template-columns:1fr}}
.ecomx .card{position:relative;background:var(--surf-grad);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column;min-height:192px;overflow:hidden}
.ecomx .card::before{content:"";position:absolute;top:-64px;left:50%;transform:translateX(-50%);
  width:190px;height:128px;background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%)}
.ecomx .card>*{position:relative}
.ecomx .card h3{font-weight:620;font-size:16px;line-height:1.35;margin-bottom:6px}
.ecomx .card p{font-size:14.5px;margin:0;color:var(--txt-3)}

/* FOTOS DAS LOJAS */
.ecomx .shots{display:grid;gap:var(--s2);grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.ecomx .shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ecomx .shots{grid-template-columns:1fr}}
.ecomx figure{margin:0;background:var(--surf-grad);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.ecomx figure img{aspect-ratio:4/3;object-fit:cover;object-position:top center;width:100%;height:auto}
.ecomx figcaption{padding:14px var(--s2) 16px;font-size:14px;color:var(--txt-3)}
.ecomx figcaption b{display:block;color:var(--txt);font-weight:600;font-size:15px;margin-bottom:2px}
.ecomx .tile{background:var(--surf-grad);border:1px solid var(--icoln);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column;justify-content:center}
.ecomx .tile b{font-weight:700;font-size:clamp(40px,4vw,54px);line-height:1;letter-spacing:-.04em;
  color:var(--accent)}
.ecomx .tile span{font-size:14.5px;color:var(--txt-3);margin-top:10px;display:block}

/* ETAPAS + PLATAFORMAS */
.ecomx .proc{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:start}
@media(max-width:980px){.ecomx .proc{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .steps{counter-reset:s}
.ecomx .step{counter-increment:s;display:grid;grid-template-columns:58px 1fr;gap:var(--s3);
  padding:var(--s3) 0;border-top:1px solid var(--line)}
.ecomx .step:first-child{border-top:0;padding-top:0}
.ecomx .step::before{content:counter(s,decimal-leading-zero);
  font:640 15px/1 ui-monospace,monospace;color:var(--accent);padding-top:6px}
.ecomx .step h3{font-weight:620;font-size:17px;line-height:1.4;margin-bottom:4px}
.ecomx .step p{font-size:15.5px;margin:0;color:var(--txt-3)}
.ecomx .plat{background:var(--surf-grad);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);margin-bottom:var(--s2)}
.ecomx .plat:last-child{margin-bottom:0}
.ecomx .plat h3{font-weight:620;font-size:16px;margin-bottom:4px}
.ecomx .plat p{font-size:14.5px;margin:0;color:var(--txt-3)}

/* PROVA */
.ecomx .proof{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:var(--s5);align-items:start}
.ecomx .big{font-weight:700;font-size:clamp(58px,9vw,100px);line-height:.92;letter-spacing:-.045em;
  color:var(--accent);background:linear-gradient(160deg,var(--g300),var(--g600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ecomx .big small{-webkit-text-fill-color:var(--txt-3)}
.ecomx .big small{display:block;font-weight:500;font-size:15.5px;line-height:1.45;color:var(--txt-3);
  letter-spacing:0;margin-top:var(--s2)}
@media(max-width:760px){.ecomx .proof{grid-template-columns:1fr;gap:var(--s3)}}

/* O BLOCO VERDE: uma vez na página inteira */
.ecomx .fill{background:linear-gradient(135deg,var(--g400),var(--g600));color:var(--on-brand);border-radius:26px;padding:var(--s5) var(--s4);
  display:grid;grid-template-columns:minmax(240px,1fr) 1.2fr;gap:var(--s5);align-items:center}
.ecomx .fill h2{color:var(--on-brand);margin-bottom:var(--s3)}

.ecomx .tags{display:flex;flex-wrap:wrap;gap:10px}
.ecomx .tag{background:rgba(0,0,0,.07);border:1px solid rgba(0,0,0,.16);color:var(--on-brand);
  border-radius:999px;padding:11px 18px;font-size:14.5px}
.ecomx .tag b{font-weight:600}
.ecomx .tag span{opacity:.68;font-weight:400}
@media(max-width:900px){.ecomx .fill{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4) var(--s3)}}

/* FAQ */
.ecomx .faq-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:start}
@media(max-width:980px){.ecomx .faq-g{grid-template-columns:1fr;gap:var(--s3)}}
.ecomx .faq-g>div:first-child{position:sticky;top:var(--s4)}
.ecomx details{border-top:1px solid var(--line);padding:var(--s3) 0}
.ecomx details:first-of-type{border-top:0;padding-top:0}
.ecomx summary{font-weight:600;font-size:17px;line-height:1.45;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s3)}
.ecomx summary::-webkit-details-marker{display:none}
.ecomx summary::after{content:"+";color:var(--accent);font-weight:400;font-size:24px;line-height:1}
.ecomx details[open] summary::after{content:"−"}
.ecomx details p{margin:var(--s2) 0 0;font-size:16px;max-width:62ch}

.ecomx .btn{display:inline-block;background:linear-gradient(180deg,var(--g400),var(--g600));color:var(--on-brand);transition:background .15s;text-decoration:none;
  padding:17px 32px;border-radius:12px;font-weight:600;font-size:17px}
.ecomx .btn:hover{background:linear-gradient(180deg,var(--g500),var(--g700))}
.ecomx .lt .btn{color:var(--n1000)}
.ecomx .fill .btn, .ecomx .lt .fill .btn{background:var(--n1000);color:var(--n50)}
.ecomx .fill .btn:hover, .ecomx .lt .fill .btn:hover{background:var(--n900)}
.ecomx .cta{text-align:center}
.ecomx .cta h2, .ecomx .cta p{margin-left:auto;margin-right:auto}
.ecomx .cta p{margin-bottom:var(--s4)}

.ecomx .note{font:500 13px/1.6 ui-monospace,monospace;color:var(--txt-3);
  border-left:2px solid var(--accent);padding-left:var(--s2);margin:0}

/* ═══ COMPONENTE: decisão de índice (usado em /servicos/landing-pages) ═══ */
.ecomx .dec{background:var(--surf-grad);border:1px solid var(--line);border-radius:22px;padding:var(--s4)}
.ecomx .dec .ttl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:var(--s4)}
.ecomx .branch{padding:var(--s3) 0;border-top:1px solid var(--line)}
.ecomx .branch:first-of-type{border-top:0;padding-top:0}
.ecomx .branch:last-of-type{padding-bottom:0}
.ecomx .pill{display:inline-block;font:600 11.5px/1 ui-monospace,monospace;letter-spacing:.06em;
  padding:7px 12px;border-radius:999px;margin-bottom:10px;
  background:var(--icobg);border:1px solid var(--icoln);color:var(--accent)}
.ecomx .pill.off{background:var(--feebg);border-color:var(--line);color:var(--txt-3)}
.ecomx .branch b{display:block;font-weight:620;font-size:16px;margin-bottom:4px;color:var(--txt)}
.ecomx .branch p{font-size:14.5px;margin:0;color:var(--txt-3)}

/* prova com número monetário: coluna mais larga e corpo menor */
.ecomx .proof.wide{grid-template-columns:minmax(240px,400px) 1fr}
@media(max-width:760px){.ecomx .proof.wide{grid-template-columns:1fr}}
.ecomx .big.money{font-size:clamp(44px,5.2vw,64px)}


/* ══════════════════════════════════════════════════════════════
   FUNDO VERDE PROFUNDO — hero e CTA
   Não é preto. É o verde da marca levado ao degrau mais escuro,
   com um halo do g600 por cima. O tom da marca continua lendo.
   ══════════════════════════════════════════════════════════════ */
.ecomx section.eco{color:var(--n50);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in oklab,var(--g700) 42%,transparent), transparent 65%),
    linear-gradient(180deg,#071410,#0A1B15);
  /* Eram #B9CFC6 e #8FA79D: cinza puxado para verde, o que o dono chamou de
     "cor meia boca". Corrigido na davila-ecommerce.css em 15/08 e AQUI SO EM
     16/08, porque os dois arquivos sao quase iguais e a correcao nao viaja
     sozinha de um para o outro. */
  --txt:var(--n50); --txt-2:var(--n200); --txt-3:var(--n400);
  --accent:var(--g400); --line:rgba(0,225,158,.16); --surf:rgba(255,255,255,.045)}

/* migalha de pão */
.ecomx .crumb{font:600 11.5px/1 ui-sans-serif,system-ui;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:var(--s4)}
.ecomx .crumb a{color:inherit;text-decoration:none}
.ecomx .crumb a:hover{color:var(--accent)}
.ecomx .crumb span{opacity:.5;margin:0 8px}

/* hero em duas colunas: texto e o formulário */
.ecomx .hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:start}
@media(max-width:980px){.ecomx .hero-g{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .hero-g h1{max-width:none}
.ecomx .kicker{display:block;font-weight:600;font-size:clamp(22px,2.4vw,30px);color:var(--txt-2);
  letter-spacing:-.02em;margin-bottom:6px}

/* ── FORMULÁRIO: o dado importante fica na primeira dobra ── */
.ecomx .form{background:var(--n0);border-radius:20px;padding:var(--s4);color:var(--n900);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ecomx .form .fh{font-weight:660;font-size:20px;line-height:1.35;letter-spacing:-.015em;
  margin:0 0 var(--s3);color:var(--n900)}
.ecomx .form label{display:block;font-weight:600;font-size:13.5px;color:var(--n700);margin-bottom:6px}
.ecomx .form .fld{margin-bottom:var(--s3)}
.ecomx .form input, .ecomx .form textarea{width:100%;font:inherit;font-size:15px;color:var(--n900);
  background:var(--n50);border:1px solid var(--n200);border-radius:10px;padding:13px 14px}
.ecomx .form textarea{min-height:76px;resize:vertical}
.ecomx .form input::placeholder, .ecomx .form textarea::placeholder{color:var(--n500)}
.ecomx .form input:focus, .ecomx .form textarea:focus{outline:2px solid var(--g600);outline-offset:1px;
  border-color:transparent}
.ecomx .form button{width:100%;font:inherit;font-weight:700;font-size:16px;cursor:pointer;
  color:var(--n1000);background:linear-gradient(180deg,var(--g400),var(--g600));
  border:0;border-radius:11px;padding:16px}
.ecomx .form button:hover{background:linear-gradient(180deg,var(--g500),var(--g700))}
.ecomx .form .fine{font-size:12.5px;color:var(--n600);text-align:center;margin:12px 0 0}

/* faixa de tecnologias, em texto: indexável e sem peso de imagem */
.ecomx .tech{border-bottom:1px solid var(--line)}
.ecomx .tech ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:12px var(--s3)}
.ecomx .tech li{font-weight:600;font-size:14.5px;color:var(--txt-2);white-space:nowrap}
.ecomx section.tech-s{padding:var(--s4) 0}

/* ── GRÁFICO DE COLUNAS: a curva de vendas ── */
.ecomx .cols{background:var(--surf-grad);border:1px solid var(--line);border-radius:22px;padding:var(--s4)}
.ecomx .badge{display:inline-block;font-weight:700;font-size:18px;letter-spacing:-.02em;
  color:var(--n1000);background:var(--g500);border-radius:10px;padding:7px 14px;margin-bottom:var(--s4)}
.ecomx .plot{display:flex;align-items:flex-end;gap:2.2%;height:230px}
.ecomx .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.ecomx .col i{display:block;width:100%;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--g400),var(--g700))}
.ecomx .col span{font:600 11.5px/1 ui-monospace,monospace;color:var(--txt-3)}
.ecomx .cols .foot{border-top:1px solid var(--line)}

/* ── PRINTS DAS LOJAS: fila que rola, sem cortar a última ── */
.ecomx .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--s2);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2);
  scrollbar-width:thin}
.ecomx .rail figure{scroll-snap-align:start}
.ecomx .rail figure img{aspect-ratio:3/4}
@media(max-width:760px){.ecomx .rail{grid-auto-columns:minmax(210px,80%)}}

/* ── ARTIGOS ── */
.ecomx .posts{display:grid;gap:var(--s2);grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.ecomx .posts{grid-template-columns:1fr}}
.ecomx .post{background:var(--surf-grad);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);display:flex;flex-direction:column}
.ecomx .post h3{font-weight:640;font-size:17px;line-height:1.35;margin-bottom:10px}
.ecomx .post h3 a{color:var(--txt);text-decoration:none}
.ecomx .post h3 a:hover{color:var(--accent)}
.ecomx .post p{font-size:14.5px;color:var(--txt-3);margin:0 0 var(--s3)}
.ecomx .post .more{margin-top:auto;font-weight:600;font-size:14.5px;color:var(--accent);text-decoration:none}

/* centralizado, como nas seções de fecho */
.ecomx .mid{text-align:center}
.ecomx .mid h2, .ecomx .mid .lead{margin-left:auto;margin-right:auto}
.ecomx .mid .lead{max-width:64ch}

/* FAQ em duas colunas de perguntas (sem título lateral) */
.ecomx .faq-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4);align-items:start}
@media(max-width:900px){.ecomx .faq-2{grid-template-columns:1fr}}
.ecomx .faq-2>div>details:first-of-type{border-top:0;padding-top:0}
@media(max-width:900px){.ecomx .faq-2>div+div>details:first-of-type{border-top:1px solid var(--line);padding-top:var(--s3)}}

/* o hero verde não usa a textura de grade nem o halo do .hero antigo */
.ecomx section.eco.hero::before{display:none}
.ecomx section.eco .btn{background:linear-gradient(180deg,var(--g400),var(--g600));color:var(--n1000)}
.ecomx section.eco a{color:var(--accent)}


/* números do case, sem ícone: só o dado e o rótulo */
.ecomx .facts{background:var(--surf-grad);border:1px solid var(--line);border-radius:22px;padding:var(--s4)}
.ecomx .facts .row{padding:var(--s3) 0;border-top:1px solid var(--line)}
.ecomx .facts .row:first-of-type{border-top:0;padding-top:0}
.ecomx .facts .row:last-of-type{padding-bottom:0}
.ecomx .facts b{display:block;font-weight:700;font-size:clamp(30px,3.2vw,40px);line-height:1;
  letter-spacing:-.035em;color:var(--accent);margin-bottom:8px}
.ecomx .facts span{font-size:14.5px;color:var(--txt-3)}


/* ══════════ BLINDAGENS contra o styles.css global (carrega DEPOIS; empate = global vence) ══════════ */
.ecomx h1,.ecomx h2,.ecomx h3,.ecomx summary{color:var(--txt)}
.ecomx h1 em,.ecomx h2 em{color:var(--accent)}
.ecomx a{color:var(--accent)}
.ecomx a.btn{color:var(--on-brand)}
.ecomx .lt a.btn{color:var(--n1000)}
.ecomx .fill a.btn{color:var(--n50)}
.ecomx .hero h1{font-size:clamp(32px,3.9vw,48px);margin-bottom:var(--s3)} /* o .hero h1 global infla no tablet */
.ecomx .step{border-left:0}
.ecomx .step h3{margin-top:0}
.ecomx .step + .step{border-top:1px solid var(--line)}
.ecomx .card h3,.ecomx .step h3,.ecomx .plat h3{color:var(--txt)}
.ecomx .form{text-align:left}
.ecomx #lead-form{scroll-margin-top:110px}
.ecomx .rail{-webkit-overflow-scrolling:touch}

/* mobile centrado (ordem do dono; FAQ e steps ficam de fora) */
@media(max-width:760px){
  .ecomx .hero .w,.ecomx .split>div:first-child,.ecomx .fill>div:first-child{text-align:center}
  .ecomx h2{text-align:center}
  .ecomx .crumb{text-align:center}
  .ecomx .deck,.ecomx .lead{margin-left:auto;margin-right:auto}
  .ecomx .tags{justify-content:center}
  .ecomx .split h2{font-size:32px}
}
.ecomx section.eco .crumb a{color:inherit} /* a migalha nao vira link verde no hero */
.ecomx .lt .pill.off{color:var(--n700)} /* contraste 4,9:1 sobre o fundo n300 */
.ecomx .btn{white-space:normal;max-width:100%;text-wrap:balance} /* o nowrap do .btn global estoura a coluna a 320px; balance evita a ultima palavra sozinha */

/* ══════════ PADRAO DO E-COMMERCE: H1 em tres pesos, H2 maiores e na cor ══════════ */
.ecomx h1 .hl1{display:block;font-size:clamp(21px,2.3vw,29px);font-weight:600;
  color:var(--txt-2);letter-spacing:-.01em;line-height:1.3}
.ecomx h1 .hl2{display:block;font-size:clamp(37px,4.4vw,52px);font-weight:750;
  color:var(--txt);letter-spacing:-.035em;line-height:1.08;margin:6px 0 8px}
.ecomx h1 .hl2 em{font-style:normal;color:var(--accent)}
.ecomx h1 .hl3{display:block;font-size:clamp(25px,2.9vw,35px);font-weight:650;
  color:var(--accent);letter-spacing:-.02em;line-height:1.15}
.ecomx h2{font-size:clamp(28px,3.4vw,42px)}
.ecomx .split h2{font-size:clamp(27px,3.1vw,38px)}
.ecomx .lt h2{color:var(--g800)}
.ecomx .lt h2 em{color:var(--g700)}

/* tags do bloco verde com fundo branco (padrao do e-commerce) + rodape das barras */
.ecomx .tag{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.55);color:var(--n900)}
.ecomx .bfoot{font-size:13px;color:var(--txt-3);margin:8px 0 0}

/* hero da LP: a frase dominante e mais longa que a do e-commerce; calibra para 1 linha */
.ecomx h1 .hl1{font-size:clamp(19px,2vw,26px)}
.ecomx h1 .hl2{font-size:clamp(31px,3.2vw,38px)}
.ecomx h1 .hl3{font-size:clamp(23px,2.5vw,30px)}
.ecomx .hero-g{align-items:center}

/* H1 da LP a 58px: duas linhas controladas pelo br.q, coluna do texto mais larga */
.ecomx .hero-g{grid-template-columns:1.1fr .9fr}
.ecomx h1 .hl2{font-size:clamp(34px,4.9vw,58px);line-height:1.06}

/* mobile: escala tipografica unica e proporcional (pedido do dono) */
@media(max-width:760px){
  .ecomx h1 .hl1{font-size:20px}
  .ecomx h1 .hl2{font-size:36px}
  .ecomx h2,.ecomx .split h2{font-size:30px}
  .ecomx .deck{font-size:17.5px}
  .ecomx .lead{font-size:17px}
  .ecomx p{font-size:16px}
  .ecomx .form .fh{font-size:19px}
  .ecomx summary{font-size:16.5px}
  .ecomx details p{font-size:15.5px}
  .ecomx .post h3{font-size:16.5px}
  .ecomx .step h3,.ecomx .plat h3{font-size:16.5px}
  .ecomx .facts b{font-size:30px}
}

/* hero mobile: form centrado como card e respiro correto */
@media(max-width:980px){.ecomx .form{max-width:520px;margin-left:auto;margin-right:auto;width:100%}}
@media(max-width:760px){.ecomx .hero{padding:88px 0 72px}.ecomx .form{padding:var(--s3)}}

/* o override 1.1fr/.9fr do H1 58px vinha depois e atropelava o empilhamento mobile */
@media(max-width:980px){.ecomx .hero-g{grid-template-columns:1fr}}

/* links de prosa nas secoes claras: sublinhado (o global tira o underline e a cor sozinha nao separa) */
.ecomx .lt p a{text-decoration:underline;text-underline-offset:3px}

/* linha local acima do H1 (ideia da CL3): servico + Maringá */
.ecomx .loc{font-size:14px;font-weight:650;letter-spacing:.01em;color:var(--accent);margin:0 0 10px}

/* grafico em tela cheia (trafego-pago): numeros maiores, respiro de destaque */
.ecomx .xchart{padding:var(--s5) var(--s4);margin-top:var(--s2)}
.ecomx .xchart .bar .lbl{font-size:17px}
.ecomx .xchart .bar .lbl i{font-size:clamp(22px,2.6vw,30px)}
@media(max-width:760px){.ecomx .xchart{padding:var(--s4) var(--s3)}}

/* ══════════ FONTES DO DONO: Sora 800 nos H1, Inter no conteudo ══════════ */
@font-face{font-family:'Sora';src:url('/fonts/sora-var.woff2') format('woff2');font-weight:100 800;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
.ecomx{font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.ecomx .form,.ecomx .fcard{font-family:inherit}
.ecomx h1{font-family:Sora,ui-sans-serif,sans-serif;font-weight:800}
.ecomx h1 .hl1,.ecomx h1 .hl2,.ecomx h1 .hl3,.ecomx h1 .kicker{font-weight:800}
/* H1 dominante 55-60px e conteudo 17-18px SO no desktop (a regua mobile ja foi calibrada) */
@media(min-width:761px){
  .ecomx h1 .hl2{font-size:clamp(55px,4.9vw,58px)}
  .ecomx .deck,.ecomx .lead{font-size:18px}
  .ecomx p{font-size:17px}
}

/* titulos padronizados: Sora 800 tambem nos H2 (as vars globais ja trocaram a familia) */
.ecomx h2{font-weight:800}

/* ══════════ FUNIL DO ECOSSISTEMA (trafego-pago): visual em CSS puro, animado ══════════ */
.ecomx .funil{background:var(--surf-grad);border:1px solid var(--n100);border-radius:22px;
  padding:var(--s4);margin-top:var(--s4);box-shadow:0 12px 32px -20px rgba(26,32,44,.18)}
.ecomx .funil .ttl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  margin-bottom:var(--s3)}
.ecomx .frow{display:grid;grid-template-columns:180px 1fr;gap:var(--s2);align-items:center;
  padding:7px 0}
.ecomx .frow span{font-size:14.5px;font-weight:600;color:var(--txt-2)}
.ecomx .frow i{display:block;height:30px;width:var(--fw);border-radius:8px;
  background:linear-gradient(90deg,var(--g600),var(--g400));
  animation:fgrow .9s cubic-bezier(.2,.7,.2,1) backwards}
.ecomx .frow:nth-child(3) i{animation-delay:.1s}
.ecomx .frow:nth-child(4) i{animation-delay:.2s}
.ecomx .frow:nth-child(5) i{animation-delay:.3s}
.ecomx .frow:nth-child(6) i{animation-delay:.4s}
@keyframes fgrow{from{width:0}}
@media(prefers-reduced-motion:reduce){.ecomx .frow i{animation:none}}
@media(max-width:640px){.ecomx .frow{grid-template-columns:1fr;gap:4px;padding:9px 0}
  .ecomx .frow i{height:22px}}

/* H1 todo branco (pedido do dono no trafego-pago) */
.ecomx .hwhite .hl1,.ecomx .hwhite .hl2,.ecomx .hwhite .hl2 em,.ecomx .hwhite .hl3{color:var(--n0)}

/* ══════════ RODADA (31/07 noite): form compacto, titulos #181E2A, msteps, pcover, roi, chain ══════════ */
/* form em duas colunas no desktop: hero mais baixo */
.ecomx .frow2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.ecomx .frow2{grid-template-columns:1fr}}
.ecomx .form{padding:28px}
.ecomx .form textarea{min-height:58px}
.ecomx .hero{padding:calc(var(--s5) + 20px) 0 var(--s5)}
/* titulos das secoes claras na cor do fundo escuro (pedido do dono) */
.ecomx .lt h2{color:#181E2A}
.ecomx .lt h2 em{color:#181E2A}
/* metodo: cards com icone circular verde (referencia do dono) */
.ecomx .msplit{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s5);align-items:start}
@media(max-width:980px){.ecomx .msplit{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .msteps{display:grid;gap:12px}
.ecomx .mstep{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;
  background:var(--n0);border:1px solid var(--n100);border-radius:14px;padding:16px 18px;
  box-shadow:0 10px 26px -18px rgba(26,32,44,.16)}
.ecomx .mi{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--g400),var(--g600))}
.ecomx .mi svg{width:19px;height:19px;stroke:var(--n1000);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ecomx .mstep h3{font-size:16px;font-weight:650;margin:2px 0 4px;color:#181E2A}
.ecomx .mstep p{font-size:14px;margin:0;color:var(--txt-3)}
/* blog: capa tipografica (titulo como capa, sem foto) */
.ecomx .pcover{background:radial-gradient(90% 80% at 20% 0%,color-mix(in oklab,var(--g700) 40%,transparent),transparent 60%),
  linear-gradient(160deg,#071410,#0A1B15);border-radius:12px;min-height:128px;
  display:flex;align-items:flex-end;padding:20px 18px;margin-bottom:14px}
.ecomx .pcover h3{margin:0;font-size:16.5px;line-height:1.35}
/* Capa com foto: a mesma imagem que o card do blog usa no resto do site. O
   gradiente verde continua por cima, semitransparente, entao a identidade da
   pagina nao muda e o titulo segue legivel sobre qualquer foto. */
.ecomx .pcover.tem-foto{background:linear-gradient(160deg,rgba(7,20,16,.62),rgba(10,27,21,.92)),var(--capa) center/cover no-repeat}
.ecomx .pcover h3 a{color:var(--n0)}
.ecomx .pcover h3 a:hover{color:var(--g400)}
/* case em tipografia com seta (imagem do dono) */
.ecomx .roi{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,44px);
  align-items:center;margin-top:var(--s4);text-align:center}
.ecomx .rlab{display:block;font:650 12px/1 Inter,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g400);margin-bottom:12px}
.ecomx .rnum{display:block;font-family:Sora,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(30px,4.6vw,56px);line-height:1;color:var(--n0);white-space:nowrap}
.ecomx .rmid{display:grid;gap:8px;justify-items:center;min-width:200px}
.ecomx .rtop,.ecomx .rbot{font:650 11.5px/1 Inter,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-2)}
/* Seta e pontilhado: FICAM NO DESKTOP, SAEM NO CELULAR (ordem do dono, 16/08).
   No desktop as tres colunas ficam lado a lado e a seta e' o que liga a verba
   ao resultado: ela tem funcao. No celular as colunas empilham, a seta era a
   mesma girada 90 graus (girar nao muda o espaco que o elemento ocupa, entao
   ela caia POR CIMA do texto de baixo) e o pontilhado virava mais uma linha
   disputando o mesmo espaco. O padrao aqui e' o celular; o desktop reativa. */
.ecomx .rarrow{display:none}
.ecomx .rbot{padding-top:2px;width:100%;text-align:center}
.ecomx .rmid{gap:14px;padding:6px 0}

@media(min-width:821px){
  .ecomx .rarrow{display:block;width:100%;height:2px;background:var(--g500);position:relative}
  .ecomx .rarrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;
    border-left-color:var(--g500)}
  .ecomx .rbot{border-top:1px dashed var(--txt-3);padding-top:8px}
  .ecomx .rmid{gap:8px;padding:0}
}
.ecomx .rfoot{font-size:13.5px;color:var(--txt-3);text-align:center;margin:var(--s4) auto 0;max-width:64ch}
@media(max-width:820px){.ecomx .roi{grid-template-columns:1fr;gap:18px}
  .ecomx .rmid{min-width:0;width:100%;margin:0 auto;gap:10px;padding:14px 0}
  .ecomx .rnum{white-space:normal}}
/* cadeia do ecossistema em pills (desktop horizontal, mobile em pe) */
.ecomx .ecoflow{margin-top:var(--s4)}
.ecomx .chain{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.ecomx .cnode{border-radius:24px;padding:16px 10px 14px;text-align:center;
  font:600 13px/1.3 Inter,sans-serif;display:grid;gap:8px;justify-items:center;align-content:start}
.ecomx .cnode:nth-child(odd){background:linear-gradient(170deg,var(--g800),var(--g900));color:var(--n0)}
.ecomx .cnode:nth-child(even){background:var(--n0);border:1.5px solid var(--g800);color:#181E2A}
.ecomx .cico{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.14)}
.ecomx .cnode:nth-child(even) .cico{background:var(--g100)}
.ecomx .cico svg{width:19px;height:19px;fill:none;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;stroke:currentColor}
.ecomx .cnode:nth-child(even) .cico svg{stroke:var(--g800)}
.ecomx .cloop{height:36px;border:2px solid var(--g800);border-top:0;
  border-radius:0 0 22px 22px;margin:12px 44px 0;position:relative}
.ecomx .cloop .cico{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);
  background:var(--g100);border:2px solid var(--g800);width:40px;height:40px}
.ecomx .cloop .cico svg{stroke:var(--g800)}
.ecomx .cloop::before{content:"";position:absolute;left:-2px;top:-8px;border:6px solid transparent;
  border-bottom-color:var(--g800)}
.ecomx .cfoot{text-align:center;font-size:16.5px;color:var(--txt-2);margin:calc(var(--s3) + 16px) 0 0}
.ecomx .cfoot b{color:#181E2A;font-weight:700}
@media(max-width:900px){
  /* Linha ligando as pilulas, em pe, como a horizontal do desktop (pedido do
     dono, 16/08). Ela fica ATRAS (z-index 0) e passa pelo centro do icone, que
     tem 38px de coluna: 16px de padding + 19px de meio = 35px da esquerda. */
  .ecomx .chain{grid-template-columns:1fr;gap:14px;position:relative}
  .ecomx .chain::before{content:"";position:absolute;left:35px;top:22px;bottom:22px;width:2px;
    background:linear-gradient(180deg,var(--g500),var(--g200));z-index:0}
  .ecomx .cnode{grid-template-columns:38px 1fr;text-align:left;align-items:center;padding:12px 16px;
    position:relative;z-index:1}
  .ecomx .cloop{display:none}
  .ecomx .cfoot{margin-top:var(--s3)}
}

/* pills da cadeia com a mesma altura e texto centrado */
.ecomx .cnode{align-content:center;min-height:132px}
@media(max-width:900px){.ecomx .cnode{min-height:0}}

/* respiro menor nas secoes + metodo equilibrado + capa do blog em pe */
.ecomx{--s6:88px}
.ecomx .msplit{align-items:center;gap:var(--s4)}
.ecomx .msplit h2{font-size:clamp(27px,3.1vw,38px)}
.ecomx .pcover{aspect-ratio:4/5;min-height:0}

/* metodo em timeline horizontal (trafego): numeros grandes, linha verde conectando */
.ecomx .tline{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin:var(--s4) 0;
  position:relative}
.ecomx .tline::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;
  background:linear-gradient(90deg,var(--g500),var(--g200))}
.ecomx .tstep{position:relative;padding-top:56px}
.ecomx .tnum{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;font-family:Sora,sans-serif;font-weight:800;font-size:16px;
  background:var(--n0);border:2px solid var(--g600);color:#181E2A}
.ecomx .tstep h3{font-size:15.5px;font-weight:700;color:#181E2A;margin-bottom:6px}
.ecomx .tstep p{font-size:13.5px;color:var(--txt-3);margin:0}
.ecomx .tfoot{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:center;
  margin-top:var(--s3)}
@media(max-width:980px){
  .ecomx .tline{grid-template-columns:1fr;gap:18px}
  .ecomx .tline::before{left:21px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:linear-gradient(180deg,var(--g500),var(--g200))}
  .ecomx .tstep{padding:0 0 0 60px;min-height:44px}
  /* nota e botao centrados no celular (pedido do dono): alinhados a esquerda
     eles ficavam soltos embaixo da linha de etapas, que ja e' um bloco largo */
  .ecomx .tfoot{grid-template-columns:1fr;justify-items:center;text-align:center}
  /* o filete a esquerda saiu junto: ele marcava o inicio da linha de texto, e
     com o texto centrado ficava um risco solto na borda */
  .ecomx .tfoot .note{text-align:center;border-left:0;padding-left:0}
}

/* capa do blog na metade da altura (padrao do site) */
.ecomx .pcover{aspect-ratio:16/10}

/* formulario: campos novos e alerta vermelho de validacao */
.ecomx .form select{width:100%;font:inherit;font-size:15px;color:var(--n900);
  background:var(--n50);border:1px solid var(--n200);border-radius:10px;padding:13px 14px;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--n600) 50%),linear-gradient(135deg,var(--n600) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ecomx .form select:focus{outline:2px solid var(--g600);outline-offset:1px;border-color:transparent}
.ecomx .ferr{display:none;font-size:12.5px;font-weight:600;color:#C0392B;margin-top:6px}
.ecomx .fld.bad input,.ecomx .fld.bad select{border-color:#C0392B;background:#FDF2F1}
.ecomx .fld.bad .ferr{display:block}

/* ══════════ CORRECOES DA AUDITORIA (02/08) ══════════ */
/* 16px nos campos: abaixo disso o Safari do iPhone da zoom e a pagina passa a arrastar */
.ecomx .form input,.ecomx .form textarea,.ecomx .form select{font-size:16px}
/* CTA no pico da prova (auditoria: nenhuma pagina fechava a prova com acao) */
.ecomx .pcta{text-align:center;margin:var(--s4) 0 0}
.ecomx .e3 .pcta .btn{background:var(--n0);color:var(--n1000)}
/* mobile: sem o botao do hero (o formulario ja esta logo abaixo) */
@media(max-width:900px){.ecomx .hero .hero-g > div:first-child > .btn{display:none}}
/* agradecimento depois do envio (o form nao abre mais o WhatsApp) */
.ecomx .fdone{background:var(--n0);border-radius:20px;padding:34px 28px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ecomx .fdone-t{font-family:Sora,sans-serif;font-weight:800;font-size:22px;line-height:1.25;
  color:#181E2A;margin:0 0 10px}
.ecomx .fdone-p{font-size:15.5px;color:var(--n650);margin:0 0 22px}

/* ════════════════════════════════════════════════════════════════════════════
   PADRAO DAS PAGINAS DE SERVICO, portado da /servicos/ecommerce em 16/08/2026.

   POR QUE ESTE BLOCO PRECISA EXISTIR AQUI TAMBEM: /servicos/ecommerce carrega
   davila-ecommerce.css; trafego, sites e landing carregam ESTE arquivo. Os dois
   sao quase iguais (922 linhas em comum), entao melhoria feita num nao chega no
   outro. Foi exatamente o que aconteceu: a pagina de trafego ficou sem nada do
   que foi feito na e-commerce. Um dia vale fundir os dois arquivos; enquanto
   isso, MEXEU AQUI, CONFERIR LA.
   ════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/raleway-var.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }

/* --- um tamanho de H2 e so tres cores de titulo (regra do dono) --- */
.ecomx h2, .ecomx .shead h2, .ecomx .bk-etapas h2, .ecomx .split h2,
.ecomx section.e2 h2, .ecomx section.e3 h2, .ecomx .lt h2, .ecomx .e5 h2, .ecomx .cta h2 {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.ecomx .lt h2 { color: #181E2A; }
.ecomx .lt h2 em { color: #007A53; }
.ecomx section.e3 h2, .ecomx section.e5 h2, .ecomx .cta h2 { color: var(--n0); }
.ecomx section.e3 h2 em, .ecomx .cta h2 em { color: var(--g400); }

/* --- formulario do hero mais justo --- */
.ecomx .form { padding: 22px 20px; }
.ecomx .form label { margin-bottom: 2px; }
.ecomx .form input, .ecomx .form select, .ecomx .form textarea { padding: 9px 12px; }
.ecomx .form textarea { min-height: 46px; }
.ecomx .form .frow, .ecomx .form .frow2 { margin-bottom: 10px; }

/* --- celular: H1 e deck centrados, resto do hero a esquerda --- */
@media (max-width: 860px) {
  .ecomx .hero .hero-g > div, .ecomx .hero .crumb { text-align: left; }
  /* o selo acompanha o H1, que ja e' centrado no celular (pedido do dono) */
  .ecomx .hero .loc { text-align: center; }
  .ecomx .hero h1, .ecomx .hero .deck { text-align: center; }
  .ecomx .hero h1 .hl1, .ecomx .hero h1 .hl2, .ecomx .hero h1 .hl3 { display: block; text-align: center; }
  .ecomx .hero .btn { margin-left: 0; }
}

/* --- "ver todos os artigos": texto com filete, nao botao --- */
.ecomx .bs-all { text-align: center; margin-top: clamp(34px, 4vw, 52px); }
.ecomx .bs-all .bs-todos {
  display: inline-block;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: #181E2A; text-decoration: none;
  border-bottom: 2px solid #00E19E; padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.ecomx .bs-all .bs-todos:hover { color: #007A53; border-bottom-color: #007A53; }

/* --- capa de foto atras do gradiente verde, no card proprio destas paginas --- */
.ecomx .pcover.tem-foto {
  background: linear-gradient(160deg, rgba(7,20,16,.62), rgba(10,27,21,.92)), var(--capa) center/cover no-repeat;
}

/* --- foto de fundo do hero: cada pagina passa a sua em --hero-foto no style --- */
.ecomx section.eco.hero[style*="--hero-foto"] {
  /* Mais aberto que na /ecommerce (.76 -> .60 no meio). Motivo medido: com o
     filtro fechado a foto sumia atras do verde profundo da secao, e o contraste
     do texto estava em 9,6:1, muito acima do minimo de 4,5. Havia folga para
     mostrar a imagem sem por a leitura em risco. */
  background-image:
    linear-gradient(180deg, rgba(4,26,19,.90) 0%, rgba(4,26,19,.68) 38%,
      rgba(4,26,19,.80) 72%, rgba(4,26,19,.96) 100%),
    var(--hero-foto);
  background-size: cover;
  background-position: center 40%;
}
@media (max-width: 700px) {
  .ecomx section.eco.hero[style*="--hero-foto-mob"] {
    background-image:
      linear-gradient(180deg, rgba(4,26,19,.90) 0%, rgba(4,26,19,.64) 38%,
        rgba(4,26,19,.80) 72%, rgba(4,26,19,.96) 100%),
      var(--hero-foto-mob);
  }
}

/* ---- cabecalho de secao: mesmo desenho da home (barra verde + Raleway) ---- */
.ecomx .shead { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 5vh, 58px); }
.ecomx .shead h2,
.ecomx .bk-etapas h2 {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
/* a barra de 120x4 e' a assinatura do tema: separa o titulo do texto de apoio */
.ecomx .shead h2::after,
.ecomx .bk-etapas h2::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  background: #00e19e;
  margin: 22px auto 0;
}
.ecomx .shead p,
.ecomx .bk-etapas .lead {
  font-size: 15px;
  line-height: 30px;
  color: #666666;
  /* !important porque parte dos subtitulos tem `style="margin:0"` inline no
     HTML da pagina, e sem o auto nas laterais o texto desalinha do titulo */
  margin: 22px auto 0 !important;
  max-width: 62ch;
}
.bk-eyebrow {
  display: block;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00e19e;
  margin: 0 0 14px;
}

/* ---- etapas em blocos cheios numerados (formato "O que entregamos") ---- */
/* padding proprio removido: a secao usa o mesmo respiro das outras (16/08) */
.bk-steps {
  display: grid;
  /* 6 colunas para caber 3 em cima (span 2) e 2 embaixo com a MESMA largura
     (span 3). Com 3 colunas fixas a segunda fileira ficava torta: um bloco
     largo e um estreito */
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.bk-step { grid-column: span 2; }
.bk-steps .bk-step:nth-child(4),
.bk-steps .bk-step:nth-child(5) { grid-column: span 3; }

.bk-step {
  position: relative;
  overflow: hidden;
  background: #141618;
  padding: clamp(26px, 3.4vh, 38px);
  min-height: clamp(230px, 30vh, 300px);
  display: flex;
  flex-direction: column;
  transition: background 0.35s ease;
}
.bk-step-num {
  position: absolute;
  right: -8px;
  bottom: -38px;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(96px, 13vw, 190px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  transition: color 0.35s ease;
}
.ecomx section.lt.bk-etapas .bk-step h3 {
  position: relative;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  max-width: 16ch;
}
.ecomx section.lt.bk-etapas .bk-step p {
  position: relative;
  font-size: 13.5px;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.62);
  margin: 16px 0 0;
  max-width: 46ch;
}
/* mesma inversao dos cards da home: o bloco inteiro vira verde */
.bk-step:hover { background: #00e19e; }
.ecomx section.lt.bk-etapas .bk-step:hover h3 { color: #313131; }
.ecomx section.lt.bk-etapas .bk-step:hover p { color: rgba(11, 59, 44, 0.86); }
.bk-step:hover .bk-step-num { color: rgba(11, 59, 44, 0.14); }

/* ---- plataformas: faixa de apoio, nao coluna concorrente ---- */
.bk-plats-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(18px, 3vw, 46px);
  align-items: end;
  margin: clamp(46px, 7vh, 80px) 0 26px;
}
.ecomx section.lt.bk-etapas .bk-plats-head h3 {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}
.ecomx .bk-plats-head p { font-size: 14px; line-height: 27px; color: #666666; margin: 0; }
.bk-plats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #e9e9e9;
}
.bk-plat { padding: 26px 26px 26px 0; }
.bk-plat + .bk-plat { padding-left: 26px; border-left: 1px solid #e9e9e9; }
.ecomx section.lt.bk-etapas .bk-plat h3 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #313131;
  margin: 0 0 10px;
}
.ecomx section.lt.bk-etapas .bk-plat p { font-size: 13.5px; line-height: 25px; color: #666666; margin: 0; }

/* ---- blog: o card unico do site, o mesmo da home ---- */
.ecomx .bs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 900px) {
  .bk-steps, .bk-plats, .ecomx .bs-grid { grid-template-columns: 1fr; }
  .bk-steps .bk-step,
  .bk-steps .bk-step:nth-child(4),
  .bk-steps .bk-step:nth-child(5) { grid-column: auto; }
  .bk-plats-head { grid-template-columns: 1fr; align-items: start; }
  .bk-plat, .bk-plat + .bk-plat { padding: 22px 0; border-left: 0; }
  .bk-plat + .bk-plat { border-top: 1px solid #e9e9e9; }
}

/* ═══════ Cards de etapa no celular (ordem do dono, 16/08) ═══════
   Tres coisas, todas medidas:

   1. ALTURA. `min-height: clamp(230px, 30vh, 300px)` dava 270px fixos para todo
      card, e o texto de cada um tem tamanho diferente: sobrava de 33 a 83px de
      vazio embaixo, variando de card para card. Altura fixa com conteudo
      variavel so funciona quando os cards ficam LADO A LADO e precisam alinhar;
      empilhados, como no celular, cada um pode ter a sua altura.

   2. O NUMERO ESTAVA CORTADO. `bottom: -38px` com `overflow: hidden` no card
      jogava 38px do algarismo para fora. Sobe para -14px, entao ele aparece
      quase inteiro e ainda encosta na base, que e' o efeito de marca d'agua.

   3. TAMANHO DO NUMERO. Em 390px de tela o clamp caia no minimo (96px) porque
      13vw da so 50. Passa a ter um minimo proprio no celular. */
@media (max-width: 900px) {
  .bk-step {
    min-height: 0;
    padding-bottom: clamp(34px, 5vh, 46px);
  }
  .bk-step-num {
    bottom: -14px;
    right: -4px;
    font-size: clamp(118px, 30vw, 150px);
  }
  /* o titulo divide as duas linhas por igual em vez de deixar uma palavra sozinha */
  .ecomx section.lt.bk-etapas .bk-step h3 { text-wrap: balance; }
}
/* ═══════ Faixa de plataformas passando (ordem do dono, 16/08) ═══════
   Vale no desktop e no celular. A faixa e' a lista repetida duas vezes; a
   animacao anda 50% da largura do trilho, entao a segunda copia chega
   exatamente onde a primeira comecou e o loop nao tem emenda.

   `width: max-content` no trilho e' o que faz os 50% baterem: sem isso o
   trilho assume a largura do pai e a conta sai errada, com salto no fim. */
.ecomx .logos-marquee {
  overflow: hidden;
  /* a faixa encosta nas bordas da tela, mesmo dentro do container centrado */
  margin-inline: calc(50% - 50vw);
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ecomx .logos-track {
  display: flex;
  width: max-content;
  animation: logos-desliza 38s linear infinite;
}
.ecomx .logos-marquee .logos {
  display: flex;
  flex: none;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  margin: 0;
}
.ecomx .logos-marquee .logos span { white-space: nowrap; }
/* parar no hover deixa quem quer ler conseguir ler */
.ecomx .logos-marquee:hover .logos-track { animation-play-state: paused; }

@keyframes logos-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Quem pediu menos animacao no sistema recebe a lista parada, nao a faixa
   correndo: movimento continuo e um dos gatilhos classicos de enjoo. */
@media (prefers-reduced-motion: reduce) {
  .ecomx .logos-track { animation: none; }
  .ecomx .logos-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* FAQ centralizada no desktop (pedido do dono, 16/08). O acordeao tem largura
   de leitura propria e fica no meio da coluna; as perguntas seguem alinhadas a
   esquerda dentro dele, porque texto de pergunta centralizado nao se le. */
.ecomx .faq-wrap { max-width: 860px; margin-left: auto; margin-right: auto; }

/* Variante de 3 colunas do .grid (o padrao e' 4). Usada na secao de
   rastreamento, que tem 6 cards: 3x2 fecha certinho, 4 deixaria 2 orfaos. */
.ecomx .grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .ecomx .grid.grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ecomx .grid.grid-3 { grid-template-columns: 1fr; } }

/* --- Deck do hero em branco onde existe foto de fundo (pedido do dono, 16/08).
   Sobre foto, cinza tem menos contraste que sobre cor chapada, e neste hero o
   deck virou a RESPOSTA DIRETA da pagina ("gestao de trafego pago e...") — a
   primeira frase que o leitor e a IA pegam. Frase primaria pede peso primario. */
.ecomx section.eco.hero[style*="--hero-foto"] .deck { color: var(--n0); }

/* --- Alinhamento do cabecalho de secao: UMA regra para as quatro paginas de
   servico (16/08). Antes era caso a caso e o resultado era uma pagina com
   quatro secoes a esquerda e tres centradas, sem criterio visivel.

   O criterio agora vem da ESTRUTURA, nao do gosto:
     titulo filho direto de .w  -> o conteudo abaixo ocupa a largura toda
                                   (grade, linha de etapas, FAQ) -> CENTRALIZA
     titulo dentro de .split    -> secao de duas colunas, o texto e' a coluna
                                   da esquerda -> fica a esquerda
   Assim uma secao nova ja nasce alinhada certo, sem precisar de regra propria. */
.ecomx section > .w > h2,
.ecomx section > .w > .lead { text-align: center; }
.ecomx section > .w > .lead { margin-left: auto; margin-right: auto; max-width: 72ch; }

/* --- Primeira linha do H1 em branco (pedido do dono, 16/08). Ela usava --txt-2,
   um cinza claro, enquanto as outras duas linhas eram branco e verde: a frase
   comecava apagada e so ganhava peso no meio. --- */
.ecomx .hero h1 .hl1 { color: var(--n0); }

/* --- H2 maior no celular (pedido do dono, 16/08): 26px era pequeno demais para
   titulo de secao numa tela onde ele e' a unica ancora visual da rolagem. --- */
/* (regra de celular movida para o fim do arquivo) */

/* Secao de duas colunas que ficou com uma so: a coluna que sobrou ocupa a
   largura toda em vez de deixar metade vazia. Nasceu quando o card de numeros
   saiu da secao "mais de 150 sites" (16/08) e o grid continuou reservando os
   470px do lado direito. Quando o dono colocar o carrossel ali, a regra para
   de valer sozinha, porque volta a haver dois filhos. */
.ecomx .split > :only-child { grid-column: 1 / -1; }
.ecomx .split > :only-child > .lead,
.ecomx .split > :only-child > p { max-width: 74ch; }

/* ═══════ Bloco "decisão" (.dec) reorganizado, 16/08 ═══════
   Pedido do dono: os tres itens saem da coluna da direita e vao PARA BAIXO do
   texto, lado a lado e centrados. Feito em CSS e nao remexendo o HTML: as duas
   secoes que usam este bloco (".. o Google precisa ver" e "cada um no seu
   papel") tem a mesma estrutura, entao uma regra resolve as duas e qualquer
   secao futura com o mesmo componente ja nasce certa.

   Vale so no desktop. No celular a coluna ja empilha sozinha, e tres itens lado
   a lado em 390px seria coluna de 110px. */
@media (min-width: 981px) {
  /* a secao vira uma coluna so; o texto no topo, os itens embaixo */
  .ecomx .split:has(> .dec) { grid-template-columns: 1fr; gap: var(--s4); }
  .ecomx .split > .dec { grid-column: 1 / -1; }
  /* o texto acompanha: titulo a esquerda com os itens centrados embaixo deixava
     a secao com dois eixos. E a linha ganha medida de leitura, senao ela vai de
     ponta a ponta dos 1.132px do container. */
  .ecomx .split:has(> .dec) > div:first-child { text-align: center; }
  .ecomx .split:has(> .dec) > div:first-child > p,
  .ecomx .split:has(> .dec) > div:first-child > .lead {
    max-width: 76ch; margin-left: auto; margin-right: auto;
  }

  /* fora a cara de cartao: fundo, borda e canto arredondado eram o que fazia o
     bloco parecer um card solto no meio da secao */
  .ecomx .dec { background: none; border: 0; border-radius: 0; padding: 0; }
  .ecomx .dec .ttl { text-align: center; margin-bottom: var(--s3); }

  .ecomx .dec { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
  .ecomx .dec .ttl { grid-column: 1 / -1; }
  /* o filete passa a separar as colunas, nao as linhas */
  .ecomx .branch { border-top: 0; border-left: 1px solid var(--line);
    padding: 0 var(--s3); text-align: center; }
  .ecomx .branch:first-of-type { border-left: 0; }
  .ecomx .branch:last-of-type { padding-bottom: 0; }
}

/* ═══════ A pilula sai (ordem do dono, 16/08) ═══════
   "tirar esse estilo IA padrao": rotulo minusculo em capsula verde e um dos
   maneirismos que o dono nao quer no site. O texto dela nao se perde, vira
   rotulo em caixa alta acima do titulo, que diz a mesma coisa sem a capsula. */
.ecomx .pill {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 700 11px/1.4 "Raleway", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.ecomx .pill.off { background: none; color: var(--txt-3); }

/* Secao "mais de 150 sites": texto centralizado (pedido do dono, 16/08). Ela
   ficou com uma coluna so quando o card de numeros saiu, e texto a esquerda numa
   caixa de largura cheia fica solto no canto. */
.ecomx section.e3 .split > :only-child { text-align: center; }
.ecomx section.e3 .split > :only-child > p,
.ecomx section.e3 .split > :only-child > .lead {
  max-width: 76ch; margin-left: auto; margin-right: auto;
}

/* ═══════ Respiro da secao de etapas (16/08) ═══════
   Dois desalinhos medidos no celular:
   1. o texto de apoio encostava no primeiro card (0px de gap), porque .bk-steps
      nao tinha margem no topo: o espaco vinha do margin-bottom do H2, e o H2
      desta secao tem margem zero (ele usa o filete verde do ::after no lugar);
   2. a secao usava padding 81px enquanto TODAS as outras usam 64, entao ela
      respirava diferente do resto da pagina. */
.ecomx .bk-etapas .lead { margin-bottom: 0; }
.ecomx .bk-steps { margin-top: clamp(28px, 4vh, 44px); }

/* Variantes de coluna do .grid (o padrao e' 4). O numero de cards varia por
   pagina, e sobra orfao quando a conta nao fecha. */
.ecomx .grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.ecomx .grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
  .ecomx .grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ecomx .grid.grid-2, .ecomx .grid.grid-3 { grid-template-columns: 1fr; }
}

/* Etapas em 4 blocos: a grade padrao e' de 6 colunas pensada para CINCO etapas
   (3 em cima com span 2, 2 embaixo com span 3). Com quatro, o desenho certo e'
   2x2, senao a segunda fileira fica com um bloco solto. */
.bk-steps.bk-steps-4 { grid-template-columns: repeat(2, 1fr); }
.bk-steps.bk-steps-4 .bk-step,
.bk-steps.bk-steps-4 .bk-step:nth-child(4),
.bk-steps.bk-steps-4 .bk-step:nth-child(5) { grid-column: auto; }
@media (max-width: 900px) { .bk-steps.bk-steps-4 { grid-template-columns: 1fr; } }

/* A secao escura precisa das cores invertidas nos cards */
.ecomx section.e3 .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.10); }
.ecomx section.e3 .card h3 { color: var(--n0); }
.ecomx section.e3 .card p { color: var(--n200); }

/* O H2 da secao de etapas tinha tamanho proprio (40px) herdado do bloco que veio
   do tema, enquanto todos os outros ficaram em 38. Um tamanho so' de H2 e' regra
   do dono desde 16/08. */
.ecomx .bk-etapas h2 { font-size: clamp(26px, 2.8vw, 38px); }

/* ═══════ H2 no celular: 30px, UM tamanho so (17/08) ═══════
   Fica NO FIM do arquivo de proposito. Regras posteriores com a mesma
   especificidade ganham, e foi assim que .bk-etapas h2 acabou em 26px enquanto
   os vizinhos estavam em 30: o desktop ficou uniforme e o celular nao.
   Mexeu em tamanho de H2 depois desta linha? Confira os dois CSS. */
@media (max-width: 700px) {
  .ecomx h2,
  .ecomx .shead h2,
  .ecomx .bk-etapas h2,
  .ecomx .split h2,
  .ecomx section.e2 h2,
  .ecomx section.e3 h2,
  .ecomx .lt h2,
  .ecomx .e5 h2,
  .ecomx .cta h2 {
    font-size: 30px;
    line-height: 1.12;
  }
}

/* ═══════ Cards das grades 2 e 3 colunas: altura pelo conteudo (17/08) ═══════
   O .card tem min-height 192px e o <p> dentro dele tem flex-grow: 1, entao o
   paragrafo ESTICAVA para preencher a caixa: texto de 17px de altura dentro de
   um elemento de 114px. Visualmente era um card quase vazio.
   Esse par (altura minima + paragrafo que cresce) existe para cards que tem um
   link no rodape e precisam alinhar a linha de baixo; nestas grades nao ha
   link, entao ele so gera vazio.
   O grid ja iguala a altura dos cards da MESMA fileira sozinho, que era o
   unico motivo real de existir o min-height. */
.ecomx .grid.grid-2 .card,
.ecomx .grid.grid-3 .card { min-height: 0; }
.ecomx .grid.grid-2 .card p,
.ecomx .grid.grid-3 .card p { flex: none; }

/* ═══════ Cor do destaque no CTA final (17/08) ═══════
   O <span class="ital"> do H2 saia em #181E2A (azul quase preto) sobre o verde
   profundo da secao: a palavra em destaque ficava invisivel. As regras de cor
   cobriam <em> mas nao .ital, que e' a classe usada nos ctaFinal de services.js. */
.ecomx .cta h2 .ital,
.ecomx section.eco h2 .ital { color: var(--g400); font-style: normal; }

/* ═══════ H1 maior so' nesta pagina (pedido do dono, 17/08) ═══════
   MEDIDO antes de mexer: aqui a linha mais larga usava 70% da coluna, enquanto
   trafego ja estava em 81% e sites em 83%. Aumentar na regra compartilhada
   levaria as duas para perto de 100% e a linha estouraria.
   Com o aumento abaixo esta pagina vai a ~82%, a mesma folga das irmas. */
.pag-social .hero h1 .hl1 { font-size: clamp(22px, 2.4vw, 31px); }
.pag-social .hero h1 .hl2 { font-size: clamp(44px, 5vw, 68px); }
.pag-social .hero h1 .hl3 { font-size: clamp(26px, 2.8vw, 36px); }


/* ═══════ Respiro entre secoes CLARAS seguidas (17/08) ═══════
   O padrao e' 88px embaixo + 88 em cima = 176px entre o conteudo de uma secao e
   o da proxima. Isso funciona quando a cor de fundo muda no meio (claro ->
   escuro): o vao le como troca de assunto. Entre duas secoes CLARAS seguidas nao
   ha troca nenhuma, e os 176px viram buraco, que foi o que o dono apontou em
   /servicos/social-media (cards -> "Como funciona" e "ver todos" -> FAQ).

   A regra so' encurta o TOPO da segunda: a primeira mantem o respiro dela, e a
   transicao para secao escura continua com o vao inteiro. */
.ecomx section.lt + section.lt { padding-top: clamp(28px, 3.2vw, 44px); }

/* Tabela de comparacao, portada da davila-ecommerce.css em 17/08: a pagina de
   sistemas web usa o mesmo componente e carrega ESTE arquivo. */
/* ═══════ Tabela de comparacao das plataformas (17/08) ═══════
   Substituiu tres blocos de texto lado a lado. Motivo medido: a pagina tinha
   1.265 palavras, 7 H2 e ZERO lista ou tabela. Comparacao de opcoes e o caso em
   que a tabela le melhor que o paragrafo, para a pessoa e para a IA.

   overflow-x: auto + min-width na table e o par que segura tabela larga no
   celular: sem o overflow no PAI, a table de 560px empurra a pagina inteira e
   nasce rolagem lateral (foi o que aconteceu no primeiro teste). */
.ecomx .bk-tabela { overflow-x: auto; margin-top: var(--s3); -webkit-overflow-scrolling: touch; min-width: 0; }
.ecomx .bk-tabela table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ecomx .bk-tabela thead th {
  text-align: left;
  font: 700 11.5px/1.4 "Raleway", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #666666;
  padding: 0 18px 12px 0;
  border-bottom: 2px solid #00e19e;
}
.ecomx .bk-tabela tbody th {
  text-align: left;
  font: 700 16px/1.4 "Raleway", system-ui, sans-serif;
  color: #313131;
  padding: 18px 18px 18px 0;
  vertical-align: top;
  white-space: nowrap;
}
.ecomx .bk-tabela tbody td {
  font-size: 14.5px;
  line-height: 1.6;
  color: #666666;
  padding: 18px 18px 18px 0;
  vertical-align: top;
}
.ecomx .bk-tabela tbody tr + tr th,
.ecomx .bk-tabela tbody tr + tr td { border-top: 1px solid #e9e9e9; }

/* lista dentro da resposta do FAQ (a resposta do preco virou lista de verdade) */
.ecomx .faq-a ul { margin: 10px 0 14px; padding-left: 1.3em; }
.ecomx .faq-a li { margin-bottom: 6px; }
.ecomx .faq-a li::marker { color: #00e19e; font-weight: 700; }

/* legenda so para leitor de tela: a tabela ja tem titulo visivel acima */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════ Comparacao em pe (17/08) ═══════
   Substituiu a tabela de duas linhas. Cada atributo e' um par rotulo/valor:
   o rotulo em caixa alta pequena marca o criterio, o valor fica abaixo. Assim o
   leitor compara descendo o olho por dois blocos, sem precisar cruzar colunas,
   e no celular nao ha rolagem lateral dentro do componente. */
.ecomx .comparo dl { margin: 14px 0 0; }
.ecomx .comparo dt {
  font: 700 11px/1.4 "Raleway", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
}
.ecomx .comparo dt:first-of-type { margin-top: 0; }
.ecomx .comparo dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--txt-3); }

/* ═══════ H1 maior no celular so' nesta pagina (17/08) ═══════
   MEDIDO: aqui as tres linhas usavam 53%, 61% e 67% da coluna, enquanto social
   ja estava em 92% e trafego em 91%. So esta pagina tinha folga para crescer. */
@media (max-width: 700px) {
  .pag-sistemas .hero h1 .hl1 { font-size: 26px; }
  .pag-sistemas .hero h1 .hl2 { font-size: 46px; }
  .pag-sistemas .hero h1 .hl3 { font-size: 30px; }
}