{
  "tarefa": "Desenvolver a PÁGINA INICIAL (index.html) do site institucional da MÉTODO SEGURO SST usando HTML semântico + Tailwind CSS, seguindo rigorosamente o design system do arquivo DESIGN-starbucks.md anexo ao projeto. Produzir código de produção, responsivo, acessível e com micro-interações.",

  "stack": {
    "html": "HTML5 semântico (header, nav, main, section, article, footer)",
    "css": "Tailwind CSS via CDN no <head> (https://cdn.tailwindcss.com) com bloco tailwind.config inline para registrar a paleta, fontes e espaçamentos do design system. Estilos pontuais (parallax, keyframes, variáveis CSS) em uma tag <style> única.",
    "js": "JavaScript vanilla, sem frameworks. Usar IntersectionObserver para reveal-on-scroll e contadores, listeners de scroll para o header sticky e o efeito parallax. Nada de bibliotecas externas.",
    "estrutura_de_arquivos": "Entregar um único index.html autossuficiente (HTML + config Tailwind + <style> + <script>). Comentar cada seção no HTML."
  },

  "marca": {
    "nome": "MÉTODO SEGURO SST",
    "assinatura": "Assessoria em Saúde e Segurança do Trabalho",
    "logo_url": "https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=375,fit=crop,q=95/m7VbDkyKQOfbG3ZN/captura-de-tela-2025-08-28-111757-Awv8D4pPO6hz2MMn.png",
    "uso_da_logo": "Usar a URL acima no header (altura ~40-48px) e no footer (versão maior ou monocromática clara sobre fundo escuro). NÃO recriar a logo em texto."
  },

  "regras_de_cor": {
    "principio": "A paleta é derivada do DESIGN-starbucks.md (sistema de 4 tons com papéis distintos), porém os HEX devem casar com a LOGOMARCA da Método Seguro. Extraia a cor dominante da logo (logo_url) e remapeie os 4 papéis mantendo a mesma função de cada um. Se não for possível amostrar a logo, use a paleta_fallback abaixo sem alterações.",
    "papeis": {
      "marca_titulos": "cor mais saturada da marca — usada em H1 e destaques de título",
      "cta": "tom luminoso da marca — fundo de botões primários e do botão flutuante de WhatsApp",
      "banda_profunda_footer": "tom escuro quase-preto da marca — fundo de footer, bandas de destaque (feature bands) e seção de números",
      "decorativo": "tom intermediário escuro — detalhes e estados de hover sutis"
    },
    "paleta_fallback": {
      "marca_titulos": "#006241",
      "cta": "#00754A",
      "banda_profunda_footer": "#1E3932",
      "decorativo": "#2b5148",
      "wash_claro_marca": "#d4e9e2",
      "canvas_pagina": "#f2f0eb",
      "canvas_secundario": "#edebe9",
      "card": "#ffffff",
      "neutro_frio": "#f9f9f9",
      "texto_sobre_claro": "rgba(0,0,0,0.87)",
      "texto_secundario_sobre_claro": "rgba(0,0,0,0.58)",
      "texto_sobre_escuro": "rgba(255,255,255,1)",
      "texto_secundario_sobre_escuro": "rgba(255,255,255,0.70)",
      "erro": "#c82014",
      "borda_input": "#d6dbde"
    },
    "proibido": [
      "NÃO usar degradê roxo / violeta em hipótese alguma.",
      "NÃO usar gradientes estruturais — o sistema é color-block (blocos de cor sólida). Sombras suaves em camadas substituem qualquer degradê.",
      "NÃO usar branco puro como canvas da página — usar o creme quente (#f2f0eb) como respiro.",
      "NÃO usar preto puro em texto de corpo — usar rgba(0,0,0,0.87)."
    ]
  },

  "tipografia": {
    "fonte_primaria": "Inter (Google Fonts) como substituta da SoDoSans — fonte sans-serif humanista, limpa e corporativa, coerente com a 'Opção 3' escolhida no briefing. Alternativa aceita: Manrope.",
    "import": "Carregar Inter (pesos 400, 500, 600, 700) via Google Fonts.",
    "letter_spacing": "Aplicar tracking apertado -0.01em em praticamente toda a interface (característica do sistema).",
    "regra_de_hierarquia": "Hierarquia vem de PESO + COR, não de mudanças bruscas de tamanho. Ex.: H1 em peso 600 na cor da marca; H2 no mesmo tamanho em peso 400 na cor de texto.",
    "escala_aproximada": {
      "display_hero": "44-64px, peso 600, line-height 1.1-1.2",
      "h1_secao": "28-32px, peso 600",
      "h2_secao": "22-24px, peso 600",
      "corpo": "16px, peso 400, line-height 1.5",
      "small": "14px, peso 400-600 (labels, metadados)"
    },
    "proibido": "NÃO introduzir fontes serifadas nem script (o serif/script do DESIGN-starbucks.md eram exclusivos de contextos Rewards/Careers da Starbucks e NÃO se aplicam aqui)."
  },

  "layout": {
    "regra_critica_do_cliente": "Header e Footer ocupam 100% da largura da viewport (fundo full-bleed, sangrando de borda a borda). PORÉM o CONTEÚDO interno do header, do footer e de TODAS as seções do corpo deve ficar alinhado dentro de um container central com largura máxima. Ou seja: fundo full-width, conteúdo alinhado ao mesmo eixo central do corpo do site.",
    "padrao_de_implementacao": "Cada <section>, o <header> e o <footer> recebem fundo/cor em largura total; dentro de cada um, envolver o conteúdo em <div class='mx-auto w-full max-w-[1200px] px-4 md:px-6 lg:px-10'>. O max-width (1200px) e os gutters (16px mobile / 24px tablet / 40px desktop) são idênticos em todas as faixas para garantir o alinhamento vertical perfeito entre header, corpo e footer.",
    "container": { "max_width": "1200px", "gutter_mobile": "16px", "gutter_tablet": "24px", "gutter_desktop": "40px" },
    "ritmo_de_blocos": "Sequência de cores ao rolar a página: hero sobre creme/imagem -> seções de conteúdo em branco/creme -> banda escura (banda_profunda_footer) com texto branco para diferenciais e números -> seção utilitária creme -> footer escuro. A banda escura funciona como 'zona recolhida' entre os blocos claros.",
    "espacamento_entre_secoes": "Generoso: 64-96px de padding vertical no desktop, reduzindo proporcionalmente no mobile. Separar blocos por whitespace, não por linhas divisórias.",
    "raio_de_borda": { "cards": "12px", "botoes": "50px (pílula completa)", "icones_circulares": "50%" }
  },

  "estrutura_da_pagina": [
    {
      "id": "header",
      "tipo": "Header sticky full-width",
      "comportamento": "Fixo no topo. Começa com fundo translúcido/transparente sobre o hero e, ao rolar (>40px), ganha fundo branco/creme sólido + sombra suave em 3 camadas (0 1px 3px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.06), 0 0 2px rgba(0,0,0,0.07)) com transição suave. Conteúdo alinhado ao container central.",
      "conteudo": {
        "esquerda": "Logo (link para o topo).",
        "centro_direita": "Navegação: Início, Sobre nós, Serviços, Segmentos, Contato (âncoras com scroll suave).",
        "extrema_direita": "Botão pílula primário 'Solicitar orçamento' (CTA, fundo cor da marca, texto branco) + ícones de Instagram e LinkedIn.",
        "mobile": "Colapsar navegação em menu hambúrguer (drawer). Manter logo e CTA visíveis."
      }
    },
    {
      "id": "hero",
      "tipo": "Hero com parallax",
      "conteudo": {
        "fundo": "Imagem de fundo com efeito PARALLAX (movimento mais lento que o scroll) + overlay sólido escuro/creme em baixa opacidade para legibilidade (sem degradê roxo).",
        "titulo": "MÉTODO SEGURO",
        "subtitulo": "Assessoria em Saúde e Segurança do Trabalho",
        "descricao": "Desenvolvemos com alta qualidade todos os serviços de Gerenciamento de Riscos Ocupacionais da sua empresa, atendendo de forma multidisciplinar a todas as exigências legais e regulatórias.",
        "ctas": [
          { "tipo": "primario_filled", "texto": "Solicitar orçamento", "ancora": "#contato" },
          { "tipo": "outlined", "texto": "Nossos serviços", "ancora": "#servicos" }
        ]
      }
    },
    {
      "id": "sobre",
      "tipo": "Seção institucional (sobre nós / por que existimos)",
      "conteudo": {
        "titulo": "Por que a Método Seguro existe",
        "texto": "A Método é especializada em garantir que o ambiente laboral seja seguro, saudável e esteja em conformidade com as leis brasileiras — especificamente as Normas Regulamentadoras (NRs), NBRs e legislações agregadas. Atuamos para reduzir o risco de acidentes, oferecer capacitação de qualidade e dar suporte estratégico às empresas.",
        "pilares": ["Amplitude", "Confiabilidade", "Atendimento de urgência às empresas", "Equipe qualificada e multidisciplinar"],
        "layout": "Split 50/50 (texto + imagem) com reveal-on-scroll."
      }
    },
    {
      "id": "servicos",
      "tipo": "Grid de serviços (cards)",
      "conteudo": {
        "titulo": "Nossos serviços",
        "intro": "Soluções completas para o gerenciamento de riscos ocupacionais.",
        "cards": [
          { "titulo": "Segurança do Trabalho", "descricao": "Elaboração de Programas, Projetos de EPC, Laudos, Perícias, Procedimentos e Relatórios para dominar o gerenciamento dos riscos ocupacionais e atender aos requisitos legais." },
          { "titulo": "Treinamentos", "descricao": "Forme uma equipe de campeões em prevenção de acidentes com os treinamentos de segurança do trabalho adequados aos seus objetivos." },
          { "titulo": "Palestras", "descricao": "Palestras de saúde e segurança do trabalho que promovem um ambiente seguro e saudável por meio da conscientização." },
          { "titulo": "Higiene Ocupacional", "descricao": "Avaliações quantitativas e qualitativas de agentes físicos, químicos e biológicos, identificando exposições prejudiciais e estabelecendo medidas de controle." },
          { "titulo": "SIPAT", "descricao": "Semana Interna de Prevenção de Acidentes do Trabalho: palestras, treinamentos e ações que reforçam a cultura de prevenção, obrigatória para empresas com CIPA." },
          { "titulo": "Capacitação de Líderes", "descricao": "Capacitações práticas para os desafios do dia a dia. Equipes de líderes preparados geram trabalho produtivo, eficiente e humano." },
          { "titulo": "Perícias Judiciais", "descricao": "Mais de 15 anos de expertise em perícias médicas, de insalubridade e periculosidade — da indicação do perito à entrega do Parecer Técnico." },
          { "titulo": "Assessoria Jurídica", "descricao": "Advogados especializados em segurança e medicina do trabalho para uma gestão laboral estratégica com risco controlado." },
          { "titulo": "Projetos de EPC", "descricao": "Projetos de proteção coletiva: Linha de Vida, proteção de periferias e aberturas, SLQA e outros, garantindo as medidas de controle." },
          { "titulo": "eSocial", "descricao": "Apoio completo no cumprimento das obrigações de SST no eSocial: eventos S-2210, S-2220 e S-2240, adequação de processos e prevenção de autuações." }
        ],
        "estilo_card": "Card branco, raio 12px, sombra sussurrada em camadas (0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)). Hover: leve elevação + scale(1.02). SEM ícone decorativo — usar título + descrição (opcionalmente numeração discreta ou foto)."
      }
    },
    {
      "id": "segmentos",
      "tipo": "Segmentos atendidos (cards com imagem + parallax sutil)",
      "conteudo": {
        "titulo": "Segmentos que atendemos",
        "itens": ["Construção Civil", "Logística e Distribuição", "Escolas", "Indústrias", "Escritórios", "Comércios"],
        "estilo": "Cards com foto de fundo (placeholder), título sobreposto em banda escura translúcida. Reveal escalonado (stagger) ao entrar na viewport."
      }
    },
    {
      "id": "numeros",
      "tipo": "Banda escura com números (count-up)",
      "conteudo": {
        "fundo": "banda_profunda_footer (verde escuro / cor escura da marca), texto branco.",
        "metricas": [
          { "valor": "15+", "rotulo": "Anos de experiência em Saúde e Segurança do Trabalho" },
          { "valor": "5.000+", "rotulo": "Trabalhadores treinados e capacitados em SST" },
          { "valor": "99%", "rotulo": "das empresas voltam a contratar nossos serviços" }
        ],
        "efeito": "Contadores que animam de 0 ao valor quando a seção entra na viewport (IntersectionObserver)."
      }
    },
    {
      "id": "diferenciais",
      "tipo": "Diferenciais (3 colunas)",
      "conteudo": {
        "titulo": "Nossos diferenciais",
        "colunas": [
          "Equipe multidisciplinar (engenheiros, advogados e médicos) que garante o equilíbrio entre a normativa técnica e a conformidade legal, reduzindo passivos trabalhistas e previdenciários.",
          "Contato direto com os profissionais responsáveis pelos seus documentos — sem intermediários e sem centrais de atendimento.",
          "Acesso 24/7 aos seus documentos em plataforma online (GED), assinados eletronicamente (certificado digital ICP-Brasil), conforme a Portaria/SEPT nº 211 de 11/04/2019."
        ]
      }
    },
    {
      "id": "depoimentos",
      "tipo": "Depoimentos",
      "conteudo": {
        "titulo": "O que dizem nossos clientes",
        "itens": [
          { "texto": "A metodologia da empresa é excepcional, garantindo segurança e bem-estar no ambiente de trabalho.", "autor": "José Paulo de Souza", "nota": 5 },
          { "texto": "A equipe da Método é diferenciada! Profissionais competentes, sempre prontos para nos auxiliar em qualquer tipo de demanda.", "autor": "Humberto Oliveira", "nota": 5 }
        ],
        "estrelas": "Permitido usar o glifo ★ para a nota (não é ícone decorativo, é dado de avaliação)."
      }
    },
    {
      "id": "contato",
      "tipo": "CTA final + formulário",
      "conteudo": {
        "titulo": "Entre em contato",
        "intro": "Fale com a Método Seguro e tenha uma gestão de SST mais eficiente para a sua empresa.",
        "formulario": {
          "campos": ["Nome completo", "E-mail para contato*", "Telefone / WhatsApp", "Mensagem ou solicitação*"],
          "botao": "Enviar solicitação de serviço",
          "estilo_input": "Input com label flutuante, fundo branco, borda 1px #d6dbde, raio 4px; foco muda a borda para a cor de CTA. Validação visual sutil (válido/erro).",
          "obs": "Formulário sem backend: usar action mailto ou marcar TODO para integração futura."
        }
      }
    },
    {
      "id": "footer",
      "tipo": "Footer full-width escuro",
      "comportamento": "Fundo full-bleed na cor banda_profunda_footer, texto branco/translúcido. Conteúdo alinhado ao MESMO container central de 1200px.",
      "conteudo": {
        "colunas": [
          { "titulo": "Logo + assinatura", "itens": ["Logo (versão clara)", "Assessoria em Saúde e Segurança do Trabalho"] },
          { "titulo": "Navegação", "itens": ["Início", "Sobre nós", "Serviços", "Segmentos", "Contato"] },
          { "titulo": "Contato", "itens": ["Telefone (com ícone)", "WhatsApp (com ícone)", "E-mail (com ícone)", "Região de atuação (com ícone de localização)"] },
          { "titulo": "Redes sociais", "itens": ["Instagram (ícone)", "LinkedIn (ícone)"] }
        ],
        "copyright": "© 2026 Método Seguro SST. Todos os direitos reservados."
      }
    },
    {
      "id": "whatsapp_flutuante",
      "tipo": "Botão flutuante circular (padrão 'Frap' do design system)",
      "conteudo": {
        "descricao": "Botão circular de 56px fixo no canto inferior direito, fundo na cor de CTA, ícone do WhatsApp branco centralizado. Pilha de sombras em camadas (0 0 6px rgba(0,0,0,0.24) + 0 8px 12px rgba(0,0,0,0.14)). Estado ativo: scale(0.95) e a sombra ambiente colapsa. Link abre o WhatsApp comercial.",
        "presente_em": "Visível em toda a rolagem da página."
      }
    }
  ],

  "contatos_oficiais": {
    "fonte": "Valores do briefing (fonte oficial). Há divergência com o site atual — CONFIRMAR com o cliente antes de publicar.",
    "telefone_comercial": "+55 62 98575-9888",
    "whatsapp_comercial": "+55 62 98189-8754",
    "whatsapp_link": "https://wa.me/5562981898754",
    "email_comercial": "Contato@metodoseguroassessoria.com.br",
    "regiao_atuacao": "Centro-Oeste (Goiânia/GO e região)",
    "redes_sociais": { "instagram": "https://www.instagram.com/metodo_engenharia_seg/", "linkedin": "https://www.linkedin.com/" },
    "divergencia_site_atual": "O site atual exibe orcamento@metodosseguro.com e telefones (62) 8189-8755 / (62) 8189-9531 — não usar sem confirmação."
  },

  "tom_e_posicionamento": {
    "persona_da_marca": "Bem vestida, fala coesa, focada e pontual — séria, técnica e confiável.",
    "percepcao_desejada": "A melhor no quesito qualidade.",
    "estilo_visual": ["Corporativo", "Clean", "Moderno"],
    "publico_alvo": "B2B — gestores e empresas (Construção Civil, Indústrias, Logística, Escolas, Escritórios, Comércios).",
    "objetivo_digital": "Amplitude e confiabilidade; atingir o público que o site atual não alcança."
  },

  "efeitos_e_interacoes": {
    "parallax": "Imagem de fundo do hero (e opcionalmente nas bandas de imagem dos segmentos) com deslocamento mais lento que o scroll. Implementar com transform translateY baseado em scrollY, com requestAnimationFrame para performance. Respeitar prefers-reduced-motion (desligar parallax).",
    "reveal_on_scroll": "Seções e cards entram com fade + leve slide-up (translateY 16-24px -> 0) via IntersectionObserver; cards em grid com stagger.",
    "header_sticky": "Transição de transparente para sólido com sombra ao rolar.",
    "count_up": "Animação de contadores na seção de números.",
    "hover": "Cards com elevação/scale sutil; links com transição de cor 0.2s.",
    "botoes": "Estado ativo universal transform: scale(0.95) com transição all 0.2s ease (micro-interação assinatura do design system).",
    "scroll_suave": "Âncoras de navegação com scroll-behavior smooth.",
    "imagens": "Fade-in (opacity 0.3s ease-in) no carregamento das imagens.",
    "acessibilidade_de_movimento": "Envolver todas as animações em @media (prefers-reduced-motion: reduce) para desativá-las."
  },

  "uso_de_icones": {
    "regra": "Ícones SOMENTE onde forem funcionalmente necessários: telefone, WhatsApp, e-mail, endereço/localização e redes sociais (Instagram, LinkedIn). Para isso usar SVGs inline simples e leves (ou heroicons/lucide inline).",
    "proibido": "NÃO usar ícones decorativos em cards de serviços, diferenciais ou segmentos. Esses blocos comunicam por tipografia, hierarquia e imagem. O glifo ★ de avaliação nos depoimentos é permitido por ser dado, não decoração."
  },

  "componentes_do_design_system": {
    "botao_primario": "Fundo cor de CTA, texto branco, borda 1px da mesma cor, raio 50px (pílula), padding ~10px 20px, peso 600, tracking -0.01em, ativo scale(0.95), transição all 0.2s ease.",
    "botao_outlined": "Fundo transparente, texto e borda na cor de CTA; mesmas dimensões/raio/ativo do primário.",
    "botao_sobre_banda_escura": "Sobre fundo escuro usar variante branca preenchida (texto na cor de CTA) para ação primária e variante outline branca para secundária.",
    "card": "Fundo branco, raio 12px, sombra em camadas sussurrada (0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24)), padding 16-24px.",
    "elevacao": "Sempre 2-3 sombras de baixa opacidade empilhadas, nunca uma sombra pesada única. O botão flutuante de WhatsApp é o elemento mais elevado da página."
  },

  "responsividade": {
    "breakpoints": { "mobile": "<768px", "tablet": "768-1023px", "desktop": ">=1024px" },
    "regras": [
      "Mobile-first.",
      "Grid de serviços: 1 coluna (mobile) -> 2 (tablet) -> 3 (desktop).",
      "Segmentos: 1 -> 2 -> 3 colunas.",
      "Hero e splits: empilhar verticalmente no mobile.",
      "Container central (1200px) e gutters consistentes em todas as faixas para manter o alinhamento header/corpo/footer.",
      "Alvos de toque com no mínimo ~44px de altura no mobile (aumentar padding dos botões)."
    ]
  },

  "acessibilidade_seo_performance": {
    "acessibilidade": "Contraste AA, alt em todas as imagens, navegação por teclado, aria-labels em botões/links de ícone, foco visível, prefers-reduced-motion respeitado.",
    "seo": "title e meta description focados em 'Assessoria em Saúde e Segurança do Trabalho', headings hierárquicos (um único H1), lang='pt-BR', dados de contato em texto real.",
    "performance": "loading='lazy' em imagens abaixo da dobra, dimensões definidas para evitar layout shift, JS mínimo com requestAnimationFrame no scroll."
  },

  "checklist_de_aceite": [
    "Header e footer com fundo 100% da largura, mas conteúdo alinhado ao container central de 1200px (mesmo eixo do corpo).",
    "Conteúdo do corpo NÃO ocupa 100% da largura — fica dentro do container central.",
    "Nenhum degradê (especialmente nenhum roxo); sistema color-block com sombras em camadas.",
    "Ícones apenas em contato (telefone, WhatsApp, e-mail, endereço) e redes sociais.",
    "Parallax no hero, reveal-on-scroll, header sticky, contadores e hover funcionando.",
    "Botões em pílula (raio 50px) com estado ativo scale(0.95).",
    "Paleta casada com a logomarca (ou fallback do design system) e tipografia Inter com tracking -0.01em.",
    "Responsivo (mobile/tablet/desktop) e com prefers-reduced-motion respeitado.",
    "Logo carregada da URL fornecida; conteúdo real de serviços, segmentos, números e depoimentos presente."
  ]
}
