/* ========================================================================== MGX — COMPACTA: composição no celular para as quatro seções compridas O dono reprovou com "sem intuitividade e responsividade ainda". Esta folha responde à parte de responsividade e de uso: quatro seções passavam de 2,5 telas em TODAS as larguras, havia pilha morta (bloco atrás de bloco, sem nada vivo), alvo de toque de 16px e texto abaixo de 14px. PRINCÍPIO — e é o que separa esta folha da rodada anterior: a altura sai por COMPOSIÇÃO (largura recuperada, vão, respiro, linha vazia, bloco que gruda), NUNCA por tipo menor. Tipo menor foi uma das reprovações, e o piso de 14px da `mgx-escala.css` fica de pé. Nenhuma regra daqui encolhe letra. COMO ESTA FOLHA VENCE A CASCATA SEM `!important` O construtor de página (Elementor) grava tudo em propriedade personalizada — `--padding-top`, `--gap`, `--e-con-grid-template-rows` — sob o seletor `.elementor-3386 .elementor-element.elementor-element-XXXX`, que tem peso 0,3,0. Repetindo esse mesmo seletor aqui, e carregando DEPOIS, a regra ganha pelo empate de peso. Por isso esta folha tem ZERO `!important` em cima do construtor. Se algum dia ela carregar antes, aí sim precisará. O único `!important` da folha está no §12 e é contra a `mgx-arrasto.css`, que já usa `!important` nas mesmas propriedades — está comentado na linha. MEDIDO ANTES (360px, cache limpo, com a escala nova já aplicada): #4 entregáveis 2.996px 3,75 telas #6 rotina 4.781px 5,98 telas #9 bônus 3.696px 4,62 telas #11 comparativo 5.082px 6,35 telas página inteira 33.609px 42,0 telas Convive com `mgx-respiro.js`, que roda depois do load e SÓ ENCOLHE respiro acima do teto (40px de padding, 30px de vão em 360px). Todo valor desta folha já nasce abaixo do teto, então o script não mexe. ========================================================================== */ /* ========================================================================== 1. LINHA FANTASMA — 811px de nada no meio da seção "O que muda na rotina" MEDIDO: a grade `b61aee0` tem `--e-con-grid-template-rows: repeat(2, 1fr)` e UM único filho. Computado: `grid-template-rows: 796.875px 796.875px`. A segunda linha não tem nada dentro e mesmo assim ocupa 797px, mais 14px de vão. Sobrou de quando ali havia seis caixas de depoimento; cinco saíram e a linha ficou. É o maior ganho isolado da página e não custa nada em conteúdo: a grade passa a dimensionar a linha pelo que existe nela. ========================================================================== */ .elementor-3386 .elementor-element.elementor-element-b61aee0 { --e-con-grid-template-rows: auto; --e-con-grid-template-columns: 1fr; /* filho único: coluna dupla não tem função */ } /* ========================================================================== 2. TEXTO DE CARTÃO ESTRANGULADO A 20ch MEDIDO: o construtor marca o CORPO do cartão como `

`. A régua de leitura da `mgx-escala.css` (`:where(h1, h2) { max-inline-size: 20ch }`) é certa para título e errada para corpo: em Montserrat, 20ch dá 217px, e o texto fica preso em 217px dentro de uma caixa de 320px. Resultado medido: sobra de 103px por cartão de bônus (32% da largura jogada fora) e de 41px por cartão de entregável. O mesmo texto em largura cheia é ~30% mais baixo, com a MESMA letra. `:where()` tem peso zero, então um seletor comum já vence — sem `!important`. O alcance é só o miolo das quatro seções, para não soltar a medida de leitura dos títulos de verdade da página. ========================================================================== */ .elementor-element-b9a9da3 .elementor-heading-title, .elementor-element-c04a76a .elementor-heading-title, .elementor-element-62aeb3b .elementor-heading-title { max-inline-size: none; } /* ========================================================================== 3. LARGURA RECUPERADA NO CELULAR MEDIDO, cadeia de 360px até a letra: entregáveis 360 → 20/20 → 30/30 = texto em 258px (28% de perda) tabela 360 → 20/20 → 16/16 = texto em 288px (20% de perda) bônus 360 → 20/20 = texto em 320px Largura perdida vira altura: cada 10% de largura a menos custa ~11% de linhas a mais. Recuperar 60px de largura na tabela vale mais do que qualquer corte de respiro — e não tira nada da tela. O respiro lateral de 8–10px continua suficiente porque cada bloco tem superfície própria (borda ou fundo) marcando onde começa. ========================================================================== */ @media (max-width: 47.99rem) { .elementor-3386 .elementor-element.elementor-element-62aeb3b, .elementor-3386 .elementor-element.elementor-element-c04a76a, .elementor-3386 .elementor-element.elementor-element-f3335d5 { --padding-left: 10px; --padding-right: 10px; } .elementor-3386 .elementor-element.elementor-element-ebcb730 { --padding-left: 8px; --padding-right: 8px; } } /* ========================================================================== 4. SEÇÃO #4 — "O que você recebe no primeiro dia" 3,75 telas DE ONDE VINHA A ALTURA (medido em 360px): cabeçalho ................ 271px 6 cartões ................ 2.505px (396 · 396 · 473 · 422 · 396 · 422) vão entre cartões ........ 150px (30 × 5) margem final ............. 40px Dentro de cada cartão: 80px de respiro vertical (40+40), 24px de vão, título 62px e descrição 205–282px — a descrição presa em 217px. DIREÇÃO ESCOLHIDA: **uma coluna, respiro cortado e largura devolvida**. Duas colunas foi descartado com número: a descrição tem 230–330 caracteres e a doutrina põe o teto em 160 para texto lado a lado no celular; em colunas de 153px cada descrição dobraria de altura e a economia viria de texto ilegível. O ganho honesto aqui é o respiro (80px por cartão, 480px no total) e a largura (217 → 304px de linha). ========================================================================== */ @media (max-width: 47.99rem) { /* os seis cartões: respiro de 40px em cima e embaixo é respiro de desktop */ .elementor-3386 .elementor-element.elementor-element-7672b5f, .elementor-3386 .elementor-element.elementor-element-3fe0815, .elementor-3386 .elementor-element.elementor-element-f01a8f8, .elementor-3386 .elementor-element.elementor-element-bb8ceaf, .elementor-3386 .elementor-element.elementor-element-57a28bc, .elementor-3386 .elementor-element.elementor-element-f4fd3c9 { --padding-top: 18px; --padding-bottom: 18px; --padding-left: 16px; --padding-right: 16px; --gap: 10px 10px; --row-gap: 10px; } /* vão entre cartões: 30px repetido cinco vezes é meia tela */ .elementor-3386 .elementor-element.elementor-element-b9a9da3 { --gap: 14px 14px; --row-gap: 14px; } /* a linha de apoio do cabeçalho carregava 40px de margem embaixo */ .elementor-element-62aeb3b .elementor-element-3498aad .elementor-widget-container { margin-block-end: 14px; } .elementor-3386 .elementor-element.elementor-element-62aeb3b { --gap: 12px 12px; --row-gap: 12px; } } /* ========================================================================== 5. SEÇÃO #9 — "BÔNUS! VOCÊ TAMBÉM LEVA 7 BÔNUS…" 4,62 telas DE ONDE VINHA A ALTURA (medido em 360px): cabeçalho ................ 229px 5 cartões ................ 3.237px (725 · 643 · 648 · 626 · 595) vão ...................... 150px Dentro do cartão de 725px: bloco de ILUSTRAÇÃO ...... 275px ← 38% do cartão, sem uma palavra vão ...................... 30px rótulo "Bônus #01" ....... 47px título ................... 31px descrição ................ 302px ← presa em 217px de 320 disponíveis Cinco ilustrações de 275px são 1.375px — 1,7 tela de decoração pura no celular. DIREÇÃO ESCOLHIDA: **agrupar (direção 3)**, em dois movimentos. a) a ilustração deixa de ser um bloco de altura cheia e vira uma peça de 88px ao lado do rótulo — continua na tela, para de custar meia tela; b) rótulo e título, que são curtos, passam a dividir a MESMA linha em vez de gastarem duas (é o "lado a lado em 360px" da doutrina aplicado ao que de fato cabe lado a lado). A descrição, que é o que decide, fica inteira e em largura cheia. ========================================================================== */ @media (max-width: 47.99rem) { /* --- a) a ilustração para de ocupar uma tela inteira ------------------ */ .elementor-3386 .elementor-element.elementor-element-11f7e4c, .elementor-3386 .elementor-element.elementor-element-197a408, .elementor-3386 .elementor-element.elementor-element-9454999, .elementor-3386 .elementor-element.elementor-element-3fd943e, .elementor-3386 .elementor-element.elementor-element-816df07 { --width: 100%; --gap: 8px 8px; --align-items: center; --justify-content: center; --flex-direction: row; } .elementor-element-11f7e4c img, .elementor-element-197a408 img, .elementor-element-9454999 img, .elementor-element-3fd943e img, .elementor-element-816df07 img { max-block-size: 88px; inline-size: auto; /* o segundo desenho de cada par sobe 100px por margem negativa: sem esta trava ele volta a puxar a caixa para 275px */ margin-block: 0; } /* a caixa da ilustração acompanha o desenho, não o contrário */ .elementor-element-11f7e4c > .elementor-element, .elementor-element-197a408 > .elementor-element, .elementor-element-9454999 > .elementor-element, .elementor-element-3fd943e > .elementor-element, .elementor-element-816df07 > .elementor-element { block-size: auto; max-block-size: 92px; } /* --- b) rótulo e título dividem a linha ------------------------------- */ .elementor-3386 .elementor-element.elementor-element-cba5dfc, .elementor-3386 .elementor-element.elementor-element-71ba686, .elementor-3386 .elementor-element.elementor-element-1a0e5b0, .elementor-3386 .elementor-element.elementor-element-63a2281, .elementor-3386 .elementor-element.elementor-element-73f1662 { --display: grid; --e-con-grid-template-columns: auto minmax(0, 1fr); --gap: 6px 10px; --row-gap: 6px; --column-gap: 10px; --align-items: center; } /* o rótulo fica na coluna 1; o título toma a coluna 2; a descrição, a linha inteira logo abaixo. Sem trocar uma linha do HTML. */ .elementor-element-cba5dfc > .elementor-widget-text-editor, .elementor-element-cba5dfc > .elementor-element:nth-child(3), .elementor-element-71ba686 > .elementor-element:nth-child(3), .elementor-element-1a0e5b0 > .elementor-element:nth-child(3), .elementor-element-63a2281 > .elementor-element:nth-child(3), .elementor-element-73f1662 > .elementor-element:nth-child(3) { grid-column: 1 / -1; } /* --- vãos do cartão e da seção ---------------------------------------- */ .elementor-3386 .elementor-element.elementor-element-705192e, .elementor-3386 .elementor-element.elementor-element-5fc3a09, .elementor-3386 .elementor-element.elementor-element-0dc920f, .elementor-3386 .elementor-element.elementor-element-5592165, .elementor-3386 .elementor-element.elementor-element-e57288b { --gap: 12px 12px; --row-gap: 12px; --padding-top: 14px; --padding-bottom: 14px; --padding-left: 12px; --padding-right: 12px; } .elementor-3386 .elementor-element.elementor-element-c04a76a { --gap: 14px 14px; --row-gap: 14px; --padding-top: 28px; --padding-bottom: 28px; } .elementor-3386 .elementor-element.elementor-element-6463957 { --gap: 10px 10px; --row-gap: 10px; } } /* ========================================================================== 6. SEÇÃO #6 — "O que muda na rotina de quem entra…" 5,98 telas DE ONDE VINHA A ALTURA (medido em 360px): cabeçalho ................ 177px grade da prova ........... 1.608px ← 811px disso é a LINHA VAZIA (§1) simulador ................ 2.561px marcas + botão + vãos .... 435px Dentro do simulador de 2.561px: cabeça ................... 224px painel ................... 182px 5 controles .............. 1.190px ← 238px por controle "a conta, aberta" ........ 327px aviso legal .............. 491px O DEFEITO DENTRO DO CONTROLE (medido): `.mgxsim-ctrl` é uma grade `minmax(0, 1fr) auto`. O campo de valor tem conteúdo mínimo largo, come a linha toda, e a coluna do RÓTULO fecha em **0px**. O rótulo então quebra letra a letra e ocupa **86px de altura** onde 22px bastariam. São ~64px perdidos por controle, 320px nos cinco — e na tela o rótulo aparece espremido, que é exatamente a queixa de intuitividade. DIREÇÃO ESCOLHIDA: **consertar a grade do controle (direção 1, duas colunas de verdade onde hoje há uma coluna de zero)** e devolver a linha vazia ao chão. Nada é escondido: acordeão foi descartado porque o aviso legal e a conta aberta são justamente o que sustenta o número simulado. ========================================================================== */ @media (max-width: 47.99rem) { /* o rótulo volta a ter coluna; o campo para de tomar a linha inteira */ .mgxsim .mgxsim-ctrl { grid-template-columns: minmax(6.5rem, 1fr) minmax(0, auto); column-gap: 0.5rem; } .mgxsim .mgxsim-ctrl__valor { max-inline-size: 9.5rem; } /* respiro do simulador: a seção é protegida do `mgx-respiro.js`, então o valor tem de vir daqui */ .mgxsim.mgxsim--motor { padding-block: 24px; padding-inline: 10px; } .mgxsim .mgxsim-ctrl { padding-block: 10px 8px; } .mgxsim .mgxsim__controles { row-gap: 10px; } .mgxsim .mgxsim__cabeca { margin-block-end: 14px; } .mgxsim .mgxsim-conta, .mgxsim .mgxsim__aviso { padding: 12px 12px; row-gap: 6px; } /* a prova social também é protegida do script */ .mgxprova { padding-block: 26px; padding-inline: 12px; } .elementor-3386 .elementor-element.elementor-element-f3335d5 { --gap: 16px 16px; --row-gap: 16px; --padding-top: 28px; --padding-bottom: 28px; } } /* ========================================================================== 7. SEÇÃO #11 — "Quatro caminhos para vender no TikTok Shop" 6,35 telas É a mais grave, e o número engana: este contêiner do construtor guarda DUAS seções diferentes. tabela comparativa .... 3.836px bloco de preço #valor . 1.246px Mesmo uma tabela perfeita de 750px deixaria o contêiner acima de 2,5 telas, porque o bloco de preço vem junto. Está dito no relatório. DE ONDE VINHA A ALTURA DA TABELA (medido, linha de 310px): critério ............... 49px célula da MGX .......... 143px ← 46% da linha faixa das 3 alternativas 64px respiro + vão + margem . 54px Dez linhas de 191 a 426px, mais 255px só de legenda. DIREÇÃO ESCOLHIDA: **largura devolvida + respiro cortado**, mantendo a composição de cartão por linha, que já é a certa. Descartados, com motivo: · trilho lateral — vetado pela doutrina; · esconder a coluna da MGX — vetado no pedido; · acordeão por linha — é a tabela que decide a compra, e um acordeão exigiria mexer no HTML, que não é meu; · tipo menor — era a reprovação anterior. A tabela é texto: 10 critérios × 4 respostas com prosa na coluna da MGX não descem abaixo de ~2.900px sem esconder o que decide. ========================================================================== */ @media (max-width: 47.99rem) { .mgxcmp { padding-block: 26px; padding-inline: 8px; } .mgxcmp .mgxcmp-tabela tr.mgxcmp-tr { padding: 12px 10px 12px; column-gap: 0.5rem; row-gap: 0.5rem; margin-block-end: 8px; } .mgxcmp .mgxcmp-tabela th.mgxcmp-td-crit { padding-block-end: 8px; } .mgxcmp .mgxcmp-tabela td.mgxcmp-td--mgx, .mgxcmp .mgxcmp-tabela td.mgxcmp-td--perde { padding: 10px 11px; } .mgxcmp .mgxcmp-tabela__legenda { padding: 12px 12px; margin-block-end: 12px; } .mgxcmp .mgxcmp__topo { margin-block-end: 16px; gap: 0.5rem; } /* o bloco de preço, que divide o contêiner com a tabela */ .elementor-3386 .elementor-element.elementor-element-d1e9c40 { --padding-top: 22px; --padding-bottom: 22px; --padding-left: 14px; --padding-right: 14px; --gap: 14px 14px; --row-gap: 14px; } .elementor-3386 .elementor-element.elementor-element-ebcb730 { --padding-top: 26px; --padding-bottom: 26px; } } /* ========================================================================== 8. PILHA MORTA — três blocos empilhados sem nada vivo A doutrina separa duas coisas opostas que a palavra "empilhar" esconde: pilha MORTA (blocos de 100% um atrás do outro, porque ninguém decidiu a composição) e pilha que GRUDA (decisão de design: o bloco de cima segura enquanto o de baixo passa). O portão acusou três pilhas mortas em 360 e 390px. A saída aqui não é enfeite: é dar função ao que já está na tela. .mgxprova__miolo ........ o título segura enquanto as regras passam .e-con-inner do bônus ... cada bônus ganha superfície própria, e assim se vê onde um termina e o outro começa #valor (d1e9c40) ........ a chamada segura enquanto o preço sobe Bloco que gruda é o padrão registrado na doutrina (Central Palace, 17/09) e resolve as duas queixas ao mesmo tempo: some a pilha morta e a pessoa deixa de perder o contexto do que está lendo. ========================================================================== */ @media (max-width: 47.99rem) { /* --- a) o título da prova gruda -------------------------------------- */ .mgxprova__miolo > .mgxprova__titulo { position: sticky; top: 0.5rem; z-index: 2; padding-block: 0.375rem; /* o fundo evita que o texto que passa por baixo encoste na letra */ background: linear-gradient(180deg, rgba(8, 10, 14, 0.96) 72%, rgba(8, 10, 14, 0) 100%); } /* --- b) cada bônus com superfície própria ---------------------------- */ .elementor-element-c04a76a > .e-con-inner > .e-con.e-child { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--r-cartao, 16px); background: rgba(255, 255, 255, 0.025); } /* o cabeçalho da seção não é cartão: não ganha moldura */ .elementor-element-c04a76a > .e-con-inner > .elementor-element-6463957 { border: 0; background: none; } /* --- c) a chamada do bloco de preço gruda ---------------------------- */ .elementor-element-d1e9c40 > .elementor-element:first-child { position: sticky; top: 0.5rem; z-index: 2; } } /* --- d) entrada escalonada: movimento é entrega, não enfeite ------------ Feito com linha do tempo de rolagem nativa (`animation-timeline: view()`), sem script e sem dependência. O `@supports` garante que, onde o navegador não entender, o conteúdo nasça visível — conteúdo nunca depende de efeito para aparecer. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { @media (max-width: 47.99rem) { .elementor-element-c04a76a > .e-con-inner > .e-con.e-child, .elementor-element-b9a9da3 > .e-con.e-child { animation: mgxcompacta-entra linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } } } } @keyframes mgxcompacta-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ========================================================================== 9. ALVO DE TOQUE — "Política · Termos · Contato" com 16,5px MEDIDO em 360 e 390px: os três links do rodapé são `` em fluxo de texto dentro de um ``, com 16,5px de altura. O mínimo é 44px, e três alvos de 16px colados são três erros de toque esperando acontecer. A `mgx-escala.css` já atacou isto; o `` entre o `
` e o `` é que atrapalha, porque continua em fluxo de linha. Aqui o `` também vira caixa flexível, e aí o `min-block-size` do link passa a valer. O tamanho da LETRA não muda — cresce só a área do dedo. ========================================================================== */ footer .container.mini > div > font { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; } footer .container.mini a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 0.5rem; } footer .container.mini a:first-of-type { margin-inline-start: -0.5rem; } /* ========================================================================== 10. TEXTO ABAIXO DE 14px O piso de 14px da `mgx-escala.css` pegou o texto corrido. Sobraram peças que o piso não alcança porque não são `

`/`

  • `: aviso em `

    ` dentro de componente próprio e rótulo de número. Rótulo curto pode ficar em 12px (é etiqueta, não leitura); o que é FRASE sobe para 14px. ========================================================================== */ @media (max-width: 47.99rem) { .mgxprova__aviso, .mgx-aviso-resultado, .mgx-preco__total, .mgxcmp .mgxcmp-tabela__legenda-t { font-size: 0.875rem; /* 14px — degrau `--t-pequeno` da escala */ } } /* ========================================================================== ========================================================================== 11. DESKTOP — o dono disse "não está valendo de nada, está péssimo" MEDIDO POR PIXEL (1440×727, 26 faixas, contando preto puro — pela imagem renderizada, não pela árvore): média da página ............... 73,1% de preto telas acima de 70% ............ 22 de 26 pior faixa .................... 93,6% (início de "O que muda na rotina") melhor faixa .................. 4,6% (a tabela comparativa) As duas causas que a medição aponta, com número: A) COLUNA DE CONTEÚDO ESTREITA. O padrão do construtor é `--content-width: min(100%, var(--container-max-width, 1140px))`. Em 1440px sobram **150px de preto de cada lado em TODA a página** — 21% de cada tela é moldura vazia antes de qualquer conteúdo. Medido por seção: herói 922/1440 (64%), "Sobre a MGX" 1152 (80%), comparativo 1248 (87%), bônus 1280 (89%). B) VÃO VERTICAL DENTRO DA SEÇÃO. Medido, soma de faixas sem nada pintado: "O que muda na rotina" 1.393px, com um vão único de **846px** (é a linha fantasma do §1, que também aparece aqui); "O que você recebe no primeiro dia" 518px de vão numa seção de 727px. ========================================================================== */ @media (min-width: 75rem) { /* --- A) a página passa a usar a largura que tem ---------------------- A declaração tem de cair NO PRÓPRIO `.e-con`: o construtor grava `.e-con { --container-max-width: 1140px }`, e valor declarado no elemento sempre vence valor herdado do ancestral — por isso a primeira tentativa, em `.elementor`, não pegou (medido: continuava 1140px). */ .elementor .e-con { --container-max-width: 1360px; } /* quem declarou a própria largura não escuta a variável acima */ .elementor-3386 .elementor-element.elementor-element-f3335d5, .elementor-3386 .elementor-element.elementor-element-c04a76a { --content-width: 1360px; } .elementor-3386 .elementor-element.elementor-element-ff8fac5 { --content-width: 1320px; } /* --- B) vão interno: 60–80px repetido por filho é meia tela de preto -- */ .elementor-3386 .elementor-element.elementor-element-f3335d5, .elementor-3386 .elementor-element.elementor-element-c04a76a, .elementor-3386 .elementor-element.elementor-element-ebcb730 { --gap: 40px 40px; --row-gap: 40px; } .elementor-3386 .elementor-element.elementor-element-705192e, .elementor-3386 .elementor-element.elementor-element-5fc3a09, .elementor-3386 .elementor-element.elementor-element-0dc920f, .elementor-3386 .elementor-element.elementor-element-5592165, .elementor-3386 .elementor-element.elementor-element-e57288b { --gap: 40px 40px; --row-gap: 40px; } } /* ========================================================================== 12. DESKTOP — a seção presa dos entregáveis: 6 telas a 80% de preto MEDIDO: `.mgx-moldura` tem 4.924px em 1440px — 6,8 telas — e as faixas 3 a 8 da medição por pixel dão 78,1 · 80,5 · 81,6 · 82,4 · 79,5 · 82,4%. É a pior região contígua da página inteira. ERRO MEU, REGISTRADO: a primeira versão deste bloco mirou `.mgxq__fita` / `.mgxq-cartao`, do `mgx-entregaveis.js`. Esse script não é o que roda — quem monta a moldura é o `mgx-arrasto.js`, com `.mgx-palco`, `.mgx-fita` e `.mgx-cabeca`. As regras caíram no vazio e a medição não mexeu (73,1 → 72,0%). Sondei o DOM renderizado e refiz. Lição: conferir a classe no navegador antes de escrever o seletor, não no script que parece ser o dono. POR QUE A SEÇÃO É TÃO ALTA (lido no `mgx-arrasto.js`): excedente = fita.scrollWidth − largura da tela curso = excedente × 114/60 (passo da roda ÷ px por clique = 1,9) altura = 1 tela + curso Com cartão de 26vw (374px), respiro de 6vw (86px) e vão de 2,2vw (32px), a fita mede 3.649px em 1440 → excedente 2.209 → curso 4.197 → 4.924px. Encolhendo cartão, respiro e vão, a MESMA conta dá uma seção bem menor. Nenhuma linha de script mudou: ele lê a medida do CSS. POR QUE ELA É TÃO PRETA: o palco é `grid-template-rows: auto 1fr` com a fita centrada (`align-self: center`) e os cartões alinhados no topo (`align-items: start`). Os cartões têm ~300px numa faixa de ~510px: sobram ~210px de preto em cima e embaixo, na tela inteira, durante TODO o curso — e como o palco é `sticky`, é a MESMA imagem nas seis telas. Esticar o cartão até a faixa resolve as seis de uma vez: a superfície do cartão é pixel pintado. `!important` aqui é obrigatório e é o único da folha: a `mgx-arrasto.css` declara estas mesmas propriedades com `!important` para vencer o construtor, e sem ele nada desta seção se aplica. ========================================================================== */ @media (min-width: 64.01rem) { /* o script só monta a moldura acima de 1024px */ /* --- a fita encolhe, e com ela o curso da rolagem -------------------- */ .mgx-fita { padding-inline: 2.5rem !important; /* era 6vw ≈ 86px */ gap: 1.25rem !important; /* era 2,2vw ≈ 32px */ align-items: stretch !important; /* cartões irmãos com a MESMA altura */ } /* SEGUNDO ERRO MEU, REGISTRADO: `inline-size: … !important` em `.mgx-fita > *` não mudou nada — medido, o cartão continuou com 553px. Quem dimensiona estes cartões é `--width: 560px` do construtor, lido por `.e-con { width: var(--width) }`. Mexer na propriedade personalizada é o que funciona, e precisa do peso 0,3,0 do construtor para vencer. */ .elementor-3386 .mgx-fita > .elementor-element { --width: 21rem; /* 336px; era 560px */ inline-size: 21rem !important; /* TERCEIRO ERRO, e é o da doutrina: item de flex nasce com `min-width: auto` e não encolhe abaixo do min-content do que tem dentro. Medido: mesmo com `--width: 21rem` o cartão continuava em 553px, que é o min-content dele. Sem este `min-inline-size: 0` a largura declarada é ignorada. */ min-inline-size: 0 !important; max-inline-size: 21rem !important; } .elementor-3386 .mgx-fita > .elementor-element :is(img, svg, video) { max-inline-size: 100%; block-size: auto; } /* --- o cartão preenche a faixa em vez de boiar no preto -------------- */ .mgx-palco { padding-block: 1.5rem; } .mgx-palco > .mgx-fita { align-self: stretch; } .mgx-cabeca { padding-inline: 2.5rem !important; } /* o conteúdo continua ancorado no topo do cartão: quem estica é a superfície, não o texto — texto centrado verticalmente flutua */ .mgx-fita > * > * { align-self: start; } }