Esc Node

Você vai criar uma landing page em HTML para ser compilada pelo Esc Node (Do HTML à estrutura nativa do Elementor). O compilador converte o HTML em containers e widgets NATIVOS e editáveis do Elementor — por isso o código precisa seguir o contrato abaixo à risca.

REGRAS ESTRUTURAIS (Esc Node HTML Contract v1.0.0):

1. Responda SOMENTE com o código HTML. Sem markdown, sem crases, sem explicações antes ou depois.
2. Não use React, Vue, Angular, nem nenhum framework. Não use JavaScript para layout. Não dependa de Tailwind ou CSS externo (nada de <link>, <style> ou CDN).
3. Todo estilo vai em style inline, com valores explícitos. Todo elemento estilizado inclui box-sizing:border-box.
4. Cada bloco principal da página é uma tag <section> com background e padding no style (espelhados em data-bg e data-padding). O background pode ser cor sólida (#hex / rgb) ou linear-gradient(ângulo, cor parada%, …) — ambos são convertidos para o fundo nativo do container.
5. Cada <section> tem EXATAMENTE um filho direto: <div class="inner-container" style="box-sizing:border-box; display:flex; flex-direction:column; width:100%; max-width:1240px; margin:0 auto;"> que envolve todo o conteúdo da seção.
6. Layout SEMPRE com Flexbox (display:flex, flex-direction, gap, justify-content, align-items, flex-wrap). Proibido: float, position:absolute para colunas, display:inline-block para grid.
7. Grids são flex com flex-wrap:wrap. Largura de cada coluna usa a fórmula: largura = (100% / colunas) - (gap × (colunas - 1) / colunas), aplicada em width, min-width e max-width.
   Exemplos com gap 24px: 2 colunas → width:calc(50% - 12px); 3 colunas → width:calc(33.333% - 16px); 4 colunas → width:calc(25% - 18px).
   O container do grid declara data-layout="grid", data-columns e data-gap.
8. Tipografia: h1–h6 para títulos (um único h1), <p> para textos. Todo heading e parágrafo declara margin explícito (ex.: margin:0) — nunca depender da margem padrão do navegador. Espelhe cor, tamanho, fonte, peso e line-height nos atributos data-color, data-size (só número), data-font, data-weight, data-line-height, data-align.
9. Botões são <a> dentro de <div class="button-wrapper" style="box-sizing:border-box; display:flex;">, com display:inline-flex, background, color, padding, border-radius e text-decoration:none no style, espelhados em data-btn-bg, data-btn-color e data-radius. Links usam âncoras (#secao) ou URLs completas.
10. Cards: <div class="card"> em coluna; o primeiro texto relevante do card é um heading (h3/h4).
11. Imagens: <img> com src em URL ABSOLUTA https:// real e acessível, alt descritivo, width/height ou max-width no style e object-fit quando fizer sentido. Nunca caminhos relativos.
12. SVG: apenas inline, estático e seguro — sem <script>, sem event handlers, sem referências externas.
13. Responsividade pelos atributos oficiais: data-tablet-direction, data-tablet-width, data-tablet-padding, data-tablet-margin, data-tablet-gap, data-tablet-size, data-tablet-align, data-mobile-direction, data-mobile-width, data-mobile-padding, data-mobile-margin, data-mobile-gap, data-mobile-size, data-mobile-align, data-hide-tablet, data-hide-mobile. Exemplo: um grid de 3 colunas ganha data-tablet-direction="column" e data-mobile-direction="column" nas colunas com data-tablet-width="100%" e data-mobile-width="100%".
14. Tags estruturais permitidas: section, main, header, footer, article, div. Headings: h1, h2, h3, h4, h5, h6. Proibido: script, style, link, iframe, form, input, canvas, table para layout.
15. Atributos data-* oficiais: data-bg, data-padding, data-layout, data-columns, data-gap, data-color, data-size, data-font, data-weight, data-line-height, data-letter-spacing, data-align, data-transform, data-btn-bg, data-btn-color, data-btn-hover-bg, data-radius, data-btn-align, data-object-fit, data-node-type.

REGRAS DE CONTEÚDO:

16. Adapte design, cores, tipografia e copy ao briefing do cliente. Não use nicho, marca ou paleta pré-definida — tudo nasce do briefing.
17. Não invente preço, garantia, bônus, datas ou promessas que não estejam no briefing. Não altere a proposta central do briefing.
18. Estruture a página com as seções que o objetivo pedir (hero, benefícios, prova social, oferta, FAQ, CTA final...), sempre uma <section> por bloco.

BRIEFING DO CLIENTE:

[COLE AQUI O BRIEFING COMPLETO]

Você vai ADAPTAR um HTML existente para o contrato do Esc Node (Do HTML à estrutura nativa do Elementor), SEM alterar o resultado visual. O objetivo é reestruturar a marcação para que o compilador converta o layout em elementos nativos e editáveis do Elementor.

O QUE NÃO PODE MUDAR (fidelidade visual total):

1. Não altere cores, fontes, tamanhos, espaçamentos, textos, imagens, links, nem a ordem dos elementos.
2. Não redesenhe, não adicione seções novas, não remova conteúdo.
3. Corrija SOMENTE marcação, estilos e metadados.

O QUE VOCÊ DEVE FAZER:

4. Transformar cada bloco principal em <section> com um único <div class="inner-container"> interno (max-width + margin:0 auto).
5. Converter qualquer grid (CSS grid, float, inline-block) em Flexbox com flex-wrap:wrap e larguras pela fórmula: largura = (100% / colunas) - (gap × (colunas - 1) / colunas) em width, min-width e max-width.
6. Converter classes utilitárias (Tailwind e afins) nos valores equivalentes em style inline — o compilador NÃO interpreta classes.
7. Explicitar margin em todos os headings e parágrafos (a margem padrão do navegador não é levada).
8. Incluir box-sizing:border-box em todos os elementos estilizados.
9. Espelhar os estilos nos atributos data-* oficiais e aplicar os atributos responsivos quando o original tiver breakpoints.
10. Remover <script>, <style>, comentários e atributos de evento (onclick etc.) — sem alterar o visual.
11. Garantir imagens com URL absoluta https:// e alt.

REGRAS ESTRUTURAIS (Esc Node HTML Contract v1.0.0):

1. Responda SOMENTE com o código HTML. Sem markdown, sem crases, sem explicações antes ou depois.
2. Não use React, Vue, Angular, nem nenhum framework. Não use JavaScript para layout. Não dependa de Tailwind ou CSS externo (nada de <link>, <style> ou CDN).
3. Todo estilo vai em style inline, com valores explícitos. Todo elemento estilizado inclui box-sizing:border-box.
4. Cada bloco principal da página é uma tag <section> com background e padding no style (espelhados em data-bg e data-padding). O background pode ser cor sólida (#hex / rgb) ou linear-gradient(ângulo, cor parada%, …) — ambos são convertidos para o fundo nativo do container.
5. Cada <section> tem EXATAMENTE um filho direto: <div class="inner-container" style="box-sizing:border-box; display:flex; flex-direction:column; width:100%; max-width:1240px; margin:0 auto;"> que envolve todo o conteúdo da seção.
6. Layout SEMPRE com Flexbox (display:flex, flex-direction, gap, justify-content, align-items, flex-wrap). Proibido: float, position:absolute para colunas, display:inline-block para grid.
7. Grids são flex com flex-wrap:wrap. Largura de cada coluna usa a fórmula: largura = (100% / colunas) - (gap × (colunas - 1) / colunas), aplicada em width, min-width e max-width.
   Exemplos com gap 24px: 2 colunas → width:calc(50% - 12px); 3 colunas → width:calc(33.333% - 16px); 4 colunas → width:calc(25% - 18px).
   O container do grid declara data-layout="grid", data-columns e data-gap.
8. Tipografia: h1–h6 para títulos (um único h1), <p> para textos. Todo heading e parágrafo declara margin explícito (ex.: margin:0) — nunca depender da margem padrão do navegador. Espelhe cor, tamanho, fonte, peso e line-height nos atributos data-color, data-size (só número), data-font, data-weight, data-line-height, data-align.
9. Botões são <a> dentro de <div class="button-wrapper" style="box-sizing:border-box; display:flex;">, com display:inline-flex, background, color, padding, border-radius e text-decoration:none no style, espelhados em data-btn-bg, data-btn-color e data-radius. Links usam âncoras (#secao) ou URLs completas.
10. Cards: <div class="card"> em coluna; o primeiro texto relevante do card é um heading (h3/h4).
11. Imagens: <img> com src em URL ABSOLUTA https:// real e acessível, alt descritivo, width/height ou max-width no style e object-fit quando fizer sentido. Nunca caminhos relativos.
12. SVG: apenas inline, estático e seguro — sem <script>, sem event handlers, sem referências externas.
13. Responsividade pelos atributos oficiais: data-tablet-direction, data-tablet-width, data-tablet-padding, data-tablet-margin, data-tablet-gap, data-tablet-size, data-tablet-align, data-mobile-direction, data-mobile-width, data-mobile-padding, data-mobile-margin, data-mobile-gap, data-mobile-size, data-mobile-align, data-hide-tablet, data-hide-mobile. Exemplo: um grid de 3 colunas ganha data-tablet-direction="column" e data-mobile-direction="column" nas colunas com data-tablet-width="100%" e data-mobile-width="100%".
14. Tags estruturais permitidas: section, main, header, footer, article, div. Headings: h1, h2, h3, h4, h5, h6. Proibido: script, style, link, iframe, form, input, canvas, table para layout.
15. Atributos data-* oficiais: data-bg, data-padding, data-layout, data-columns, data-gap, data-color, data-size, data-font, data-weight, data-line-height, data-letter-spacing, data-align, data-transform, data-btn-bg, data-btn-color, data-btn-hover-bg, data-radius, data-btn-align, data-object-fit, data-node-type.

RESPOSTA: somente o HTML adaptado, nada mais.

HTML ATUAL:

[COLE AQUI O HTML]