/* ══════════════════════════════════════════════════════════════
   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));
  --ico-grad:linear-gradient(180deg,color-mix(in oklab,var(--g500) 26%,transparent),
                                     color-mix(in oklab,var(--g500) 10%,transparent));

  --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));
  --ico-grad:linear-gradient(180deg,var(--g100),var(--g50));
}

.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 .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--ico-grad);border:1px solid var(--icoln);margin-bottom:var(--s3)}
.ecomx .ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7}
.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}

/* white-space:normal mata o nowrap do .btn global: sem isso o CTA longo vira uma linha
   maior que a tela, sai do enquadramento no celular e o Safari encolhe a pagina inteira
   pra tentar caber (dai o texto sair borrado). Mesmo fix que a davila-paginas.css ja tem. */
.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;white-space:normal;max-width:100%;
  text-wrap:balance} /* balance: sem ele o CTA longo deixa "negocio" sozinho na 2a linha */
.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}

/* ── convivencia com o CSS global do site ── */
.ecomx h1,.ecomx h2,.ecomx h3{font-family:var(--font-display,'Space Grotesk',sans-serif)}
.ecomx{font-family:var(--font-ui,Manrope,ui-sans-serif,system-ui,sans-serif)}
.ecomx .breadcrumb{margin-bottom:18px}

/* ══════════ RODADA 3 (31/07): clean de volta; fica só contraste + centro ══════════ */
/* contraste: headings e links nunca herdam cor do tema global do site */
.ecomx h1,.ecomx h2,.ecomx h3,.ecomx summary{color:var(--txt)}
.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 h1 em,.ecomx h2 em{color:var(--accent)}
/* cabecalho centrado apenas em secao de largura cheia (cards, lojas, faq) */
.ecomx .shead{text-align:center;max-width:72ch;margin:0 auto var(--s4)}
.ecomx .shead .lead,.ecomx .shead .deck{margin-left:auto;margin-right:auto;margin-bottom:0}
.ecomx .shead h2{margin-bottom:var(--s2)}
/* blindagem contra o .step/.card do CSS global do site (mesmos nomes de classe) */
.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)}

/* ══════════ RODADA 4 (31/07): formato da referencia do dono, amarelo→verde ══════════ */
/* pagina clara: rampa pastel→branco, unico bloco intenso segue o .fill verde */
.ecomx section.e1{background:linear-gradient(180deg,var(--g100),var(--g50))}
.ecomx section.e2{background:var(--n0)}
.ecomx section.e3{background:linear-gradient(180deg,var(--n50),var(--n0))}
.ecomx section.e4{background:linear-gradient(180deg,var(--n0),var(--n100))}
.ecomx section.e5{background:linear-gradient(180deg,var(--g100),var(--g200))}
.ecomx section.e3{--accent:var(--g800)} /* apaga o g400 do tema escuro antigo */
/* headings na cor, como a referencia usa o dourado */
.ecomx h1{color:var(--g900)}
.ecomx h1 em{color:var(--g800)}
.ecomx h2{color:var(--g800)}
.ecomx h2 em{color:var(--g700)}
.ecomx .e5 h2 em{color:var(--g800)}
.ecomx .fill h2{color:var(--on-brand)}
/* hero pastel: texto + lojas reais na lateral, breadcrumb blindado do tema dark global */
.ecomx .hero::before{background:radial-gradient(50% 50% at 50% 50%,
  color-mix(in oklab,var(--g300) 32%,transparent),transparent 70%)}
.ecomx .breadcrumb a{color:var(--n650)}
.ecomx .breadcrumb a:hover{color:var(--n900)}
.ecomx .breadcrumb .sep{color:var(--n400)}
.ecomx .breadcrumb [aria-current]{color:var(--n700)}
.ecomx .hero h1{font-size:clamp(32px,5vw,58px);margin-bottom:var(--s3)} /* 58px no desktop; o clamp desce antes de virar 3 linhas */
/* barra de plataformas */
.ecomx section.strip{padding:30px 0;background:var(--n0);border-bottom:1px solid var(--n100)}
.ecomx .logos{display:flex;justify-content:center;align-items:center;
  gap:clamp(20px,4.5vw,60px);flex-wrap:wrap}
.ecomx .logos span{font-weight:700;font-size:15.5px;letter-spacing:.02em;color:var(--n400)}
/* cards da referencia: brancos, sombra suave, icone discreto no canto */
.ecomx .card,.ecomx .plat,.ecomx .chart{border-color:var(--n100);
  box-shadow:0 12px 32px -20px rgba(26,32,44,.18)}
.ecomx .card{min-height:170px}
.ecomx .ico{position:absolute;top:22px;right:22px;width:30px;height:30px;margin:0;
  background:transparent;border:0}
.ecomx .ico svg{width:24px;height:24px;stroke:var(--g700)}
.ecomx .card h3{padding-right:44px}
.ecomx .case{max-width:66ch}
/* FAQ em duas colunas de cards, como a referencia */
.ecomx .faqcols{columns:2;column-gap:var(--s2)}
@media(max-width:900px){.ecomx .faqcols{columns:1}}
.ecomx .faqcols details{break-inside:avoid;background:var(--n0);border:1px solid var(--n100);
  border-radius:14px;padding:18px 22px;margin-bottom:var(--s2);
  box-shadow:0 10px 28px -20px rgba(26,32,44,.15)}
.ecomx .faqcols details:first-of-type{border-top:1px solid var(--n100);padding-top:18px}

/* ══════════ RODADA 5 (31/07): hero escuro com mosaico real, H2 maiores, cards escuros, grafico do case ══════════ */
/* hero: imagem de fundo inteira (mosaico das lojas), sem grade, texto claro */
.ecomx section.e1{background:linear-gradient(180deg,rgba(6,11,23,.82),rgba(2,59,39,.88)),
  url('/img/lojas/hero-bg.webp') center/cover no-repeat}
.ecomx .hero::before{content:none}
.ecomx .e1 h1{color:var(--n0)}
.ecomx .e1 h1 em{color:var(--g400)}
.ecomx .e1 .deck{color:var(--n200)}
.ecomx .e1 .breadcrumb a{color:var(--n300)}
.ecomx .e1 .breadcrumb a:hover{color:var(--n0)}
.ecomx .e1 .breadcrumb .sep{color:var(--n500)}
.ecomx .e1 .breadcrumb [aria-current]{color:var(--n100)}
/* titulos de secao maiores, pedido do dono */
.ecomx h2{font-size:clamp(28px,3.4vw,42px)}
.ecomx .split h2{font-size:clamp(27px,3.1vw,38px)}
/* barra de plataformas: uma linha so no desktop */
.ecomx .logos{flex-wrap:nowrap;gap:clamp(14px,2.4vw,44px)}
.ecomx .logos span{font-size:clamp(13px,1.65vw,19.5px);color:var(--n500);white-space:nowrap}
@media(max-width:760px){.ecomx .logos{flex-wrap:wrap;gap:12px 22px}
  .ecomx .logos span{font-size:15px}}
/* grafico de crescimento do case, com o 10x dentro */
.ecomx .gcard{position:relative;background:var(--surf-grad);border:1px solid var(--n100);
  border-radius:22px;padding:var(--s4);box-shadow:0 12px 32px -20px rgba(26,32,44,.18)}
.ecomx .gx{position:absolute;top:24px;left:28px;background:linear-gradient(160deg,var(--g500),var(--g700));
  color:var(--n0);font-weight:700;font-size:22px;letter-spacing:-.02em;padding:10px 18px;border-radius:12px;
  box-shadow:0 10px 24px -10px color-mix(in oklab,var(--g700) 60%,transparent)}
.ecomx .gbars{display:flex;align-items:flex-end;gap:clamp(6px,1.1vw,14px);height:240px;margin-top:56px}
.ecomx .gbar{flex:1;min-height:24px;position:relative;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--g400),var(--g600))}
.ecomx .gbar i{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:12.5px;font-weight:600;color:var(--n650);white-space:nowrap}
.ecomx .gbar:last-child{background:linear-gradient(180deg,var(--g500),var(--g800))}
.ecomx .gbar:last-child i{color:var(--g800);font-weight:700}
.ecomx .gfoot{font-size:13px;color:var(--n650);margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--n100)}

/* ══════════ RODADA 6 (31/07): prova escura no lugar do incluso; card do grafico segue claro ══════════ */
.ecomx section.e3{background:linear-gradient(180deg,var(--n950),var(--n900));--accent:var(--g400)}
.ecomx .e3 h2{color:var(--n0)}
.ecomx .e3 h2 em{color:var(--g400)}
.ecomx .e3 .gcard{background:linear-gradient(180deg,var(--n0),var(--n50));border-color:transparent;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}

/* ══════════ RODADA 7 (31/07): hero mais alto, fundo gradiente verde do dono ══════════ */
.ecomx section.e1{background:linear-gradient(180deg,rgba(6,11,23,.34),rgba(6,11,23,.52)),
  url('/img/hero-verde.webp') center/cover no-repeat}
.ecomx .hero{padding:clamp(130px,17vh,190px) 0 clamp(110px,15vh,170px)}
@media(max-width:760px){.ecomx .hero{padding:96px 0 84px}}

/* ══════════ RODADA 8 (31/07): mobile centrado; desktop intacto ══════════ */
@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 .split h2{font-size:32px}
  .ecomx .breadcrumb{justify-content:center}
  .ecomx .deck,.ecomx .lead{margin-left:auto;margin-right:auto}
  .ecomx .tags{justify-content:center}
  .ecomx .gfoot{text-align:center}
}

/* tags dos segmentos: fundo claro sobre o bloco verde (pedido do dono) */
.ecomx .tag{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.55);color:var(--n900)}

/* hero com formulario: texto | card, H1 em 3 linhas na coluna */
.ecomx .herog{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s5);align-items:center}
.ecomx .herog h1{font-size:clamp(30px,3.5vw,46px)}
/* H1 editorial: cada linha com um peso, o 15% domina */
.ecomx h1 .hl1{display:block;font-size:clamp(21px,2.3vw,29px);font-weight:600;
  color:var(--n0);letter-spacing:-.01em;line-height:1.3}
.ecomx h1 .hl2{display:block;font-size:clamp(37px,4.4vw,52px);font-weight:750;
  color:var(--n0);letter-spacing:-.035em;line-height:1.08;margin:6px 0 8px}
.ecomx h1 .hl2 em{font-style:normal;color:var(--g400)}
.ecomx h1 .hl3{display:block;font-size:clamp(25px,2.9vw,35px);font-weight:650;
  color:var(--g400);letter-spacing:-.02em;line-height:1.15}
/* secao do bloco verde: fundo escuro do dono, corta o branco em volta */
.ecomx section.c4{background:#131925}

/* guias do blog antes do FAQ */
.ecomx section.b1{background:linear-gradient(180deg,var(--n100),var(--n0))}
.ecomx .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
@media(max-width:900px){.ecomx .bgrid{grid-template-columns:1fr}}
.ecomx .bcard{display:flex;flex-direction:column;gap:10px;background:var(--n0);
  border:1px solid var(--n100);border-radius:16px;padding:var(--s3);text-decoration:none;
  box-shadow:0 12px 32px -20px rgba(26,32,44,.18)}
.ecomx .bcard:hover{border-color:var(--g600)}
.ecomx .bcard h3{font-size:17.5px;line-height:1.35;color:var(--n900);margin:0}
.ecomx .bcard p{font-size:14.5px;color:var(--n650);margin:0;flex:1}
.ecomx .bcard .bcta{font-size:14.5px;font-weight:650;color:var(--g800)}

/* ancoras dos CTAs descem ate o formulario sem sumir sob o header */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.ecomx #lead-form{scroll-margin-top:110px}
@media(max-width:940px){.ecomx .herog{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .fcard{background:var(--n0);border-radius:20px;padding:28px;text-align:left;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6)}
.ecomx .ftit{font-weight:650;font-size:19px;color:var(--n900);margin:0 0 18px;
  font-family:var(--font-display,'Space Grotesk',sans-serif)}
.ecomx .ffield{margin-bottom:14px}
.ecomx .ffield label{display:block;font-size:13px;font-weight:600;color:var(--n650);margin-bottom:5px}
.ecomx .ffield input,.ecomx .ffield textarea{width:100%;background:var(--n50);color:var(--n900);
  border:1px solid var(--n200);border-radius:10px;padding:12px 14px;font:15px/1.4 inherit;
  font-family:inherit;resize:vertical}
.ecomx .ffield input:focus,.ecomx .ffield textarea:focus{outline:2px solid var(--g600);outline-offset:0;border-color:var(--g600)}
.ecomx .ffield input::placeholder,.ecomx .ffield textarea::placeholder{color:var(--n400)}
.ecomx .btn.fbtn{width:100%;text-align:center;padding:15px 20px}
.ecomx .fnote{font-size:12.5px;color:var(--n650);margin:12px 0 0;text-align:center}

/* CTA final: mesmo fundo verde do hero, textos brancos */
.ecomx section.e5{background:linear-gradient(180deg,rgba(6,11,23,.38),rgba(6,11,23,.55)),
  url('/img/hero-verde.webp') center/cover no-repeat}
.ecomx .e5 h2{color:var(--n0)}
.ecomx .e5 h2 em{color:var(--g400)}
.ecomx .e5 p{color:var(--n200)}

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

/* ══════════ 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}

/* ══════════ HERO IGUAL AS OUTRAS PAGINAS (eco verde profundo + form compartilhado) ══════════ */
.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". Regra dele (16/08): so branco, verde da marca ou cinza.
     Agora saem da escala neutra da propria pagina, e de quebra o contraste
     sobre a foto do hero sobe. */
  --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)}
.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)}
.ecomx section.eco .crumb a{color:inherit}
.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}
.ecomx .hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:center}
@media(max-width:980px){.ecomx .hero-g{grid-template-columns:1fr;gap:var(--s4)}}
.ecomx .hero-g h1{max-width:none}
.ecomx .hero{padding:calc(var(--s5) + 20px) 0 var(--s5)}
.ecomx .form{background:var(--n0);border-radius:20px;padding:28px;color:var(--n900);text-align:left;
  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 .frow2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.ecomx .frow2{grid-template-columns:1fr}}
.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:58px;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}
.ecomx #lead-form{scroll-margin-top:110px}
/* titulos verdes das secoes claras -> escuro (padrao do site) */
.ecomx .lt h2{color:#181E2A}
.ecomx .lt h2 em{color:#181E2A}

/* capa tipografica nos guias + hl2 em uma linha */
.ecomx .bcard .pcover{aspect-ratio:4/5;border-radius:12px;display:flex;align-items:flex-end;
  padding:20px 18px;margin-bottom:2px;
  background:radial-gradient(90% 80% at 20% 0%,color-mix(in oklab,var(--g700) 40%,transparent),transparent 60%),
  linear-gradient(160deg,#071410,#0A1B15)}
.ecomx .bcard .pcover h3{color:var(--n0);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 h1 .hl2{font-size:clamp(33px,3.9vw,46px)}

/* como funciona em stage de scroll (sem JS: passos empilhados normais) */
.ecomx .spanel{padding:16px 0;border-top:1px solid var(--line)}
.ecomx .spanel:first-of-type{border-top:0;padding-top:0}
.ecomx .snum{display:inline-block;font-family:Sora,sans-serif;font-weight:800;
  font-size:clamp(34px,3.4vw,48px);line-height:1;color:#181E2A;
  border-bottom:3px solid var(--g500);padding-bottom:6px;margin-bottom:10px}
.ecomx .spanel h3{font-size:21px;font-weight:750;color:#181E2A;margin:0 0 8px}
.ecomx .spanel p{font-size:16px;margin:0;max-width:46ch}
.ecomx .sdots{display:none}
.ecomx .sscroll.js{height:270vh}
.ecomx .sscroll.js .sstage{position:sticky;top:64px;padding-bottom:var(--s4)}
.ecomx .sscroll.js .spanel{display:none;border-top:0;padding:6px 0 0}
.ecomx .sscroll.js .spanel.on{display:block;animation:sfade .35s ease}
@keyframes sfade{from{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.ecomx .sscroll.js .spanel.on{animation:none}}
.ecomx .sscroll.js .sdots{display:flex;gap:8px;margin-top:22px}
.ecomx .sdots i{width:28px;height:4px;border-radius:99px;background:var(--n200)}
.ecomx .sdots i.on{background:var(--g600)}
/* capa do blog na metade da altura (padrao do site) */
.ecomx .bcard .pcover{aspect-ratio:16/10}

/* CTA final: H2 inteiro em branco (o destaque verde saiu, ordem do dono) */
.ecomx .e5 h2,.ecomx .e5 h2 em{color:var(--n0)}
/* stage de scroll: painel com mais presenca e coluna centrada (mata o vazio embaixo) */
.ecomx .sscroll.js .proc{align-items:center}
.ecomx .sscroll.js .spanel{min-height:232px}
.ecomx .sscroll.js .snum{font-size:clamp(46px,4.8vw,66px);border-bottom-width:4px;
  padding-bottom:8px;margin-bottom:16px}
.ecomx .sscroll.js .spanel h3{font-size:clamp(23px,2.5vw,31px);margin-bottom:12px}
.ecomx .sscroll.js .spanel p{font-size:17.5px;line-height:1.6;max-width:42ch}
.ecomx .sscroll.js .sdots{margin-top:28px}
@media(max-width:980px){.ecomx .sscroll.js .spanel{min-height:186px}}

/* stage: H2 no topo da coluna (alinha com o 1o card) e passos ate a base do texto */
.ecomx .sscroll.js .proc{align-items:stretch}
.ecomx .scol{display:flex;flex-direction:column;height:100%}
.ecomx .scol h2{margin-bottom:var(--s4)}
.ecomx .sscroll.js .scol .spanel{flex:1;display:none;align-content:center}
.ecomx .sscroll.js .scol .spanel.on{display:grid}
.ecomx .sscroll.js .scol .sdots{margin-top:auto;padding-top:var(--s3)}
@media(max-width:980px){.ecomx .scol{height:auto}.ecomx .sscroll.js .scol .spanel{flex:none}}

/* 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 (regra do pan lateral) */
.ecomx .form input,.ecomx .form textarea,.ecomx .form select{font-size:16px}
/* stage: sticky abaixo do nav de 72px e DESLIGADO no mobile (2,7 telas presas no iPhone) */
.ecomx .sscroll.js .sstage{top:88px}
@media(max-width:900px){
  .ecomx .sscroll.js{height:auto}
  .ecomx .sscroll.js .sstage{position:static}
  .ecomx .sscroll.js .spanel{display:block;border-top:1px solid var(--line);padding:16px 0}
  .ecomx .sscroll.js .spanel:first-of-type{border-top:0}
  .ecomx .sscroll.js .sdots{display:none}
}
/* strip: quebra antes de vazar o viewport (nowrap so ate 1050px) */
@media(max-width:1050px){.ecomx .logos{flex-wrap:wrap;gap:12px 22px}}
/* regua tipografica igual as irmas: 55-58px no desktop, escala unica no mobile */
@media(min-width:761px){.ecomx h1 .hl2{font-size:clamp(46px,4.6vw,56px)}}
@media(max-width:760px){
  .ecomx h1 .hl1{font-size:20px}
  .ecomx h1 .hl2{font-size:36px}
  .ecomx h1 .hl3{font-size:23px}
  .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 .spanel h3{font-size:19px}
}
.ecomx .logolbl{text-align:center;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--n500);margin:0 0 14px}
/* CTA no pico da prova */
.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 */
.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}

/* hero do e-commerce: a linha dos 18% e o argumento, entao ela domina */
@media(min-width:761px){
  .ecomx .hero h1 .hl2{font-size:clamp(52px,5.4vw,66px);line-height:1.02}
}
@media(max-width:760px){.ecomx .hero h1 .hl2{font-size:40px;line-height:1.06}}
/* respiro entre as tres linhas do H1 (pouca coisa, so para elas nao colarem) */
.ecomx .hero h1 .hl1{margin-bottom:12px}
.ecomx .hero h1 .hl2{margin:0 0 12px}
/* "Loja virtual que economiza" em branco (era cinza claro) */
.ecomx .e1 h1 .hl1{color:var(--n0)}
/* CTA da prova: respiro lateral igual ao das outras secoes no celular */
.ecomx .pcta{padding:0 var(--s3)}
.ecomx .pcta .btn{max-width:100%}
@media(max-width:560px){.ecomx .pcta .btn{width:100%;text-align:center}}

/* o 18% e o numero que vende a pagina: maior ainda, com respiro proporcional */
@media(min-width:761px){
  .ecomx .hero h1 .hl2{font-size:clamp(62px,6.6vw,84px);line-height:.98;letter-spacing:-.04em}
  .ecomx .hero h1 .hl1{font-size:clamp(22px,2.3vw,30px)}
  .ecomx .hero h1 .hl3{font-size:clamp(26px,2.9vw,36px)}
}
@media(max-width:760px){.ecomx .hero h1 .hl2{font-size:48px;line-height:1.02;letter-spacing:-.035em}}

/* mais impacto no numero: a coluna do texto ganha espaco para a frase nao picar */
@media(min-width:1100px){
  .ecomx .hero .hero-g{grid-template-columns:1.25fr .75fr;gap:var(--s4)}
  .ecomx .hero h1 .hl2{font-size:clamp(74px,7.6vw,96px);line-height:.96}
}
@media(min-width:761px) and (max-width:1099px){
  .ecomx .hero h1 .hl2{font-size:clamp(56px,6.4vw,74px)}
}
@media(max-width:760px){.ecomx .hero h1 .hl2{font-size:52px;line-height:1}}

/* ═══════════════ ajustes pedidos pelo dono em 15/08/2026 ═══════════════ */

/* 1. FOTO DE FUNDO NO HERO, no mesmo espirito da home. O verde profundo da
   pagina continua por cima como filtro, entao a identidade nao muda: a foto
   entra como textura, nao como assunto. O gradiente e mais fechado embaixo,
   onde encosta na faixa de plataformas. */
.ecomx .hero.eco {
  background-image:
    linear-gradient(180deg, rgba(4, 26, 19, .92) 0%, rgba(4, 26, 19, .76) 38%,
      rgba(4, 26, 19, .88) 72%, rgba(4, 26, 19, .97) 100%),
    url("/img/eco-hero-bg.webp?v=1");
  background-size: cover;
  background-position: center 40%;
}
@media (max-width: 700px) {
  /* no celular o hero fica em pe: recorte vertical proprio, menor e melhor enquadrado */
  .ecomx .hero.eco { background-image:
    linear-gradient(180deg, rgba(4, 26, 19, .92) 0%, rgba(4, 26, 19, .78) 38%,
      rgba(4, 26, 19, .90) 72%, rgba(4, 26, 19, .97) 100%),
    url("/img/eco-hero-bg-mob.webp?v=1"); }
}

/* 2. TEXTO DO HERO SEMPRE A ESQUERDA (ordem do dono). No desktop ja era; era o
   celular que centralizava tudo, inclusive o H1 de tres linhas, e texto grande
   centralizado em tela estreita fica com o miolo desalinhado a cada linha. */
@media (max-width: 860px) {
  .ecomx .hero .hero-g > div,
  .ecomx .hero h1,
  .ecomx .hero .deck,
  .ecomx .hero .loc,
  .ecomx .hero .crumb { text-align: left; }
  .ecomx .hero .btn { margin-left: 0; }
}

/* 3. FORMULARIO MENOR: ele dividia o hero com a copy e ficava mais alto que
   ela, o que puxava a altura do hero inteiro para baixo. Menos respiro por
   campo, mesma area de toque no celular (44px de altura util). */
.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; }

/* (os dois clamps daqui sairam: eram do formato antigo de "Como funciona"
   e do card .bcard, os dois substituidos na promocao de 16/08) */

/* (os dois clamps daqui sairam: eram do formato antigo de "Como funciona"
   e do card .bcard, os dois substituidos na promocao de 16/08) */

/* 6. CTA FINAL MENOR (ordem do dono, 15/08): 42 -> 38px.
   O tamanho saiu daqui e virou a escala unica de H2 no fim do arquivo, senao
   as duas regras brigam e a ultima ganha. */

/* ══════════════ "Como funciona" e blog no formato aprovado no preview ══════════════
   Promovido do preview para a pagina oficial em 16/08/2026, a pedido do dono.
   O desenho e' o mesmo dos cards da home: bloco preto cheio, numero gigante como
   marca d'agua, nada de contorno.

   POR QUE ESTAS REGRAS MUDARAM DE ARQUIVO: elas nasceram em brooklyn.css, que so'
   carrega nas paginas do tema. Esta pagina carrega davila-ecommerce.css. Promovido
   o HTML sem mover o CSS, a secao sairia sem estilo nenhum, que foi exatamente o
   que aconteceu com o card do blog na rodada de 14/08.

   Os var(--bk-*) viraram valor literal porque esses tokens sao do tema e nao
   existem aqui. Mudou a paleta do tema? Esta copia NAO acompanha.

   AS FONTES VAO JUNTO: o bloco pede Raleway (titulos) e Poppins (rotulos), e esta
   pagina so' carregava Sora e Inter. Sem o @font-face abaixo o texto cai em fonte
   de sistema, que e' aquele visual "largo e fino" que denuncia fonte nao carregada.
   Custo: 22 KB da Raleway + 8 KB do Poppins 700. */
@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'); }
/* ---- 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 em 16/08: a secao usava 90px enquanto as vizinhas
   usavam 64 no celular e 104 no desktop, entao ela respirava diferente do resto
   da pagina. Agora herda o mesmo respiro das demais. */
.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; }
}

/* ══════════════ tipografia dos titulos, rodada de 16/08 ══════════════
   A promocao de ontem trouxe Raleway para as secoes com .shead e deixou o resto
   em Sora: a pagina ficou com DUAS fontes de titulo e tres tamanhos de H2
   (38, 40 e 42). Aqui os H2 viram um so desenho, na familia que o dono aprovou
   no preview e que a home ja usa. */
.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 {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  /* 38px e nao 40: e o tamanho que o dono escolheu para a CTA em 15/08, e ter
     UM tamanho de H2 e o pedido de 16/08. `.split h2` entra na lista porque as
     secoes e2/e3 usam essa classe e a regra dela e mais especifica que .ecomx h2. */
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Cor dos titulos: so as tres que o dono permite.
   Secao clara -> cinza escuro. Secao escura -> branco. Destaque -> verde. */
.ecomx .lt h2 { color: #181E2A; }
.ecomx .lt h2 em { color: #007A53; }
.ecomx section.e3 h2, .ecomx section.e5 h2 { color: var(--n0); }
.ecomx section.e3 h2 em { color: var(--g400); }

/* H1: o hero continua em Sora (desenho aprovado pelo dono em 15/08), mas o
   tamanho passa a ser uma escala unica em vez de valor solto. */
.ecomx .hero h1 {
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.08;
  /* herdava var(--g900), um verde escuro (#00573B) que o dono chamou de meia
     boca. Hoje ele nao aparece porque os tres spans do hero cobrem o H1 inteiro,
     mas qualquer texto novo solto ali sairia nessa cor. */
  color: var(--n0);
}

/* H1 centralizado no celular (pedido do dono, 16/08). So o H1: o resto do hero
   continua a esquerda, como ele pediu ontem. */
@media (max-width: 860px) {
  .ecomx .hero h1 { text-align: center; }
  .ecomx .hero h1 .hl1,
  .ecomx .hero h1 .hl2,
  .ecomx .hero h1 .hl3 { display: block; text-align: center; }
}

/* Botao "ver todos os artigos" embaixo da grade do blog, igual ao da home. */
.ecomx .bs-all { text-align: center; margin-top: clamp(34px, 4vw, 52px); }

/* Link de "ver todos os artigos": texto com linha, nao botao (ordem do dono,
   16/08: "apenas um texto com linha sem ser esse botao exagerado"). Botao cheio
   ali competia com o CTA de verdade da pagina, que e falar com a agencia. */
.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; }

/* O deck do hero acompanha o H1 no celular: com o titulo centralizado e o
   paragrafo a esquerda, o bloco ficava torto. No desktop os dois seguem a
   esquerda, que e a coluna de texto do hero. */
@media (max-width: 860px) {
  .ecomx .hero .deck { text-align: center; }
}

/* ═══════ H1 do hero: "os 18% que você perde" em UMA linha no desktop ═══════
   (ordem do dono, 16/08: "ajustar no modelo desktop mas manter o destaque")

   O DEFEITO, medido: a linha estava em 96px e precisava de 1040px para caber.
   A coluna do H1 tem 683px, entao ela quebrava como "os 18% que / voce perde",
   com o "que" pendurado sozinho.

   CUIDADO AO MEXER: existem SETE regras de font-size disputando .hl2 neste
   arquivo (restos de ajustes antigos, linhas 361, 419, 485, 556, 601, 610, 613).
   Esta e a ultima do arquivo, entao e' ela que vale. Mudar qualquer uma das
   outras nao surte efeito nenhum no desktop.

   O DESTAQUE FICA: o "18%" e' o <em> e continua maior que o resto da linha, em
   verde. O que encolheu foram as palavras em volta. */
@media (min-width: 861px) {
  .ecomx .hero h1 .hl2 {
    /* 54 e nao 58. Em 58 o texto media 658px numa coluna de 683: cabia, mas com
       25px de folga, ou seja 4%. Uma linha que depende de 96% da coluna PARECE
       que vai escapar, e qualquer diferenca de renderizacao entre maquinas
       empurra para fora de verdade. Em 54 a folga vai para ~70px (10%).
       Nao da para resolver alargando a coluna: o formulario ao lado ja esta em
       410px e os campos em duas colunas nao aguentam menos que isso. */
    font-size: clamp(44px, 3.7vw, 54px);
    line-height: 1.02;
    letter-spacing: -.035em;
  }
  .ecomx .hero h1 .hl2 em { font-size: 1.2em; line-height: 1; }
}

/* ═══════ 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; }
}

/* ═══════ 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; }
}

/* O texto de apoio da secao de etapas encostava nos cards: .bk-steps nao tinha
   margem no topo e o H2 desta secao tem margem zero (usa o filete do ::after). */
.ecomx .bk-etapas .lead { margin-bottom: 0; }
.ecomx .bk-steps { margin-top: clamp(28px, 4vh, 44px); }


/* ═══════ 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;
}

/* ═══════ 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;
  }
}


/* ═══════ 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); }