Topo Profissional | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class', \/\/ Habilita o modo escuro (noite) via classe no HTML\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n \/\/ Paleta Dia (Frescor \/ Climatiza\u00e7\u00e3o)\r\n dayBg: '#F8FAFC',\r\n dayHeader: 'rgba(255, 255, 255, 0.95)',\r\n daySub: 'rgba(241, 245, 249, 0.9)',\r\n dayText: '#0F172A',\r\n dayAccent: '#0284C7', \/\/ Azul m\u00e9dio\r\n \r\n \/\/ Paleta Noite (Tecnol\u00f3gico \/ Premium)\r\n nightBg: '#0B1120',\r\n nightHeader: 'rgba(15, 23, 42, 0.95)',\r\n nightSub: 'rgba(11, 17, 32, 0.9)',\r\n nightText: '#F8FAFC',\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro\r\n \r\n \/\/ Bot\u00f5es e Destaques Universais\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Transi\u00e7\u00f5es globais suaves para a mudan\u00e7a Dia\/Noite *\/\r\n body {\r\n transition: background-color 0.8s ease, color 0.8s ease;\r\n }\r\n \r\n .theme-transition {\r\n transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;\r\n }\r\n\r\n \/* Efeito premium de underline nos links do menu (Deslize suave) *\/\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 2px;\r\n bottom: -6px;\r\n left: 0;\r\n background-color: currentColor;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);\r\n }\r\n .nav-link:hover::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Efeito Glassmorphism com Sombra Suave para Profundidade do Header *\/\r\n .glass-header {\r\n background-color: rgba(255, 255, 255, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .dark .glass-header {\r\n background-color: rgba(11, 17, 32, 0.85);\r\n box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n \/* Ocultar barra de rolagem neste arquivo apenas para foco visual no header *\/\r\n body { overflow-x: hidden; height: 200vh; \/* Altura fict\u00edcia para permitir scroll e ver o header fixo *\/ }\r\n body.dark { background-color: #0B1120; }\r\n body:not(.dark) { background-color: #F8FAFC; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n \r\n <div id=\"header-wrapper\" class=\"fixed top-0 left-0 w-full z-50 flex flex-col theme-transition\">\r\n \r\n \r\n <header class=\"w-full glass-header border-b border-slate-200\/50 dark:border-slate-800\/50 theme-transition\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div id=\"main-header-inner\" class=\"flex justify-between items-center h-20 lg:h-24 transition-all duration-300\">\r\n \r\n \r\n <div class=\"flex-shrink-0 flex items-center\">\r\n <a href=\"#\" class=\"flex items-center gap-3.5 group\">\r\n \r\n <div class=\"w-11 h-11 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-brand-dayAccent to-blue-900 dark:from-blue-600 dark:to-brand-nightAccent flex items-center justify-center shadow-lg shadow-blue-500\/20 dark:shadow-blue-900\/40 transform group-hover:scale-105 transition-transform duration-500\">\r\n <i class=\"ph ph-wind text-2xl lg:text-3xl text-white\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center mt-0.5\">\r\n <span class=\"font-black text-2xl lg:text-3xl tracking-tighter text-brand-dayText dark:text-brand-nightText leading-none mb-1 group-hover:text-brand-dayAccent dark:group-hover:text-brand-nightAccent transition-colors duration-300\">\r\n HVAC-R\r\n <\/span>\r\n <span class=\"font-medium text-xs tracking-widest text-brand-dayAccent dark:text-brand-nightAccent theme-transition uppercase\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <nav class=\"hidden xl:flex space-x-8 items-center\">\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">In\u00edcio<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">O Evento<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Expositores<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Programa\u00e7\u00e3o<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Patrocinadores<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Not\u00edcias<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Contato<\/a>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden lg:flex items-center gap-5\">\r\n \r\n <a href=\"#\" class=\"px-5 py-2.5 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-dayAccent hover:bg-slate-50 hover:text-brand-dayAccent dark:border-slate-700 dark:text-slate-300 dark:hover:border-brand-nightAccent dark:hover:bg-slate-800\/50 dark:hover:text-brand-nightAccent font-semibold text-sm transition-all duration-300\">\r\n Quero Expor\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"px-6 py-2.5 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-semibold text-sm transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-brand-primary\/40 hover:-translate-y-0.5\">\r\n Quero Participar\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center lg:hidden\">\r\n <button id=\"btn-mobile\" class=\"text-slate-600 dark:text-slate-300 focus:outline-none p-2\">\r\n <i id=\"icon-mobile\" class=\"ph ph-list text-3xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"secondary-bar\" class=\"w-full max-h-[100px] opacity-100 bg-brand-daySub\/80 dark:bg-brand-nightSub\/80 backdrop-blur-md border-b border-slate-200\/50 dark:border-slate-800\/50 theme-transition overflow-hidden transition-all duration-500\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"flex flex-col lg:flex-row items-center justify-between min-h-[48px] py-2 lg:py-0 w-full gap-3 lg:gap-0\">\r\n \r\n \r\n <div class=\"flex flex-wrap items-center justify-center lg:justify-start gap-3 lg:gap-4 text-[11px] font-semibold text-slate-500 dark:text-slate-400 theme-transition uppercase tracking-wider\">\r\n \r\n \r\n <div class=\"flex items-center gap-1.5 hover:text-brand-dayAccent dark:hover:text-brand-nightAccent transition-colors\">\r\n <i class=\"ph ph-calendar-blank text-sm text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>04 e 05 Set 2026<\/span>\r\n <\/div>\r\n \r\n \r\n <span class=\"text-slate-300 dark:text-slate-700 font-light hidden sm:block\">\u2022<\/span>\r\n \r\n \r\n <div class=\"hidden sm:flex items-center gap-1.5 hover:text-brand-dayAccent dark:hover:text-brand-nightAccent transition-colors\">\r\n <i class=\"ph ph-map-pin text-sm text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>Recife Expo Center<\/span>\r\n <\/div>\r\n\r\n \r\n <span class=\"text-slate-300 dark:text-slate-700 font-light hidden lg:block\">\u2022<\/span>\r\n\r\n \r\n <div id=\"weather-widget\" class=\"flex items-center justify-center gap-2 bg-white\/80 dark:bg-slate-800\/80 px-3 py-1.5 rounded-full border border-slate-200\/60 dark:border-slate-700\/60 shadow-sm theme-transition hover:shadow-md transition-all cursor-default\">\r\n \r\n <i id=\"weather-icon\" class=\"ph-fill ph-sun text-sm text-orange-500 drop-shadow-sm\"><\/i>\r\n <span class=\"text-slate-700 dark:text-slate-200 font-bold tracking-wide normal-case text-xs whitespace-nowrap\">\r\n Recife agora: <span id=\"temp-value\" class=\"text-brand-dayAccent dark:text-brand-nightAccent\">29\u00b0C<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-nowrap items-center justify-center lg:justify-end gap-3 xl:gap-5 text-[11px] font-semibold uppercase tracking-wider whitespace-nowrap mt-1 lg:mt-0\">\r\n \r\n <a href=\"#\" class=\"hidden xl:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-identification-card text-sm\"><\/i> Credenciamento\r\n <\/a>\r\n <a href=\"#\" class=\"hidden xl:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-storefront text-sm\"><\/i> Seja Expositor\r\n <\/a>\r\n <a href=\"#\" class=\"hidden lg:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-map-trifold text-sm\"><\/i> Mapa da Feira\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center gap-1.5 bg-brand-dayAccent\/10 dark:bg-brand-nightAccent\/10 text-brand-dayAccent dark:text-brand-nightAccent px-3.5 py-1.5 rounded-full hover:bg-brand-dayAccent hover:text-white dark:hover:bg-brand-nightAccent dark:hover:text-brand-nightBg transition-all duration-300\">\r\n <i class=\"ph ph-user-circle text-sm\"><\/i> \u00c1rea do Expositor\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden lg:hidden bg-white dark:bg-brand-nightHeader border-b border-slate-200 dark:border-slate-800 shadow-xl theme-transition overflow-y-auto max-h-[calc(100vh-80px)]\">\r\n <div class=\"px-4 py-6 space-y-6\">\r\n \r\n \r\n <nav class=\"flex flex-col space-y-4\">\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">In\u00edcio<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">O Evento<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Expositores<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Programa\u00e7\u00e3o<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Patrocinadores<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Not\u00edcias<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Contato<\/a>\r\n <\/nav>\r\n \r\n <hr class=\"border-slate-200 dark:border-slate-800\">\r\n\r\n \r\n <div class=\"flex flex-col gap-3\">\r\n <a href=\"#\" class=\"w-full text-center px-6 py-3 rounded-md bg-brand-primary text-white font-semibold text-sm\">\r\n Quero Participar\r\n <\/a>\r\n <a href=\"#\" class=\"w-full text-center px-5 py-3 rounded-md border-2 border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 font-semibold text-sm\">\r\n Quero Expor\r\n <\/a>\r\n <\/div>\r\n\r\n <hr class=\"border-slate-200 dark:border-slate-800\">\r\n\r\n \r\n <div class=\"flex flex-col space-y-4 text-sm text-slate-600 dark:text-slate-400\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"ph ph-calendar-blank text-lg text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>04 e 05 Set 2026 | Recife Expo Center<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex items-center gap-2 text-brand-dayAccent dark:text-brand-nightAccent font-semibold\">\r\n <i class=\"ph ph-thermometer text-lg\"><\/i>\r\n <span>Recife agora: 29\u00b0C<\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"flex items-center gap-2 pt-2\"><i class=\"ph ph-identification-card text-lg\"><\/i> Credenciamento<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-storefront text-lg\"><\/i> Seja Expositor<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-map-trifold text-lg\"><\/i> Mapa da Feira<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-user-circle text-lg\"><\/i> \u00c1rea do Expositor<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <script>\r\n \/\/ 1. Script de L\u00f3gica do Menu Mobile\r\n const btnMobile = document.getElementById('btn-mobile');\r\n const menuMobile = document.getElementById('mobile-menu');\r\n const iconMobile = document.getElementById('icon-mobile');\r\n\r\n \/\/ 1.5. L\u00f3gica do Header Sticky Inteligente (Comprime e aplica Glassmorphism)\r\n const headerWrapper = document.getElementById('header-wrapper');\r\n const mainHeaderInner = document.getElementById('main-header-inner');\r\n const secondaryBar = document.getElementById('secondary-bar');\r\n\r\n window.addEventListener('scroll', () => {\r\n if (!headerWrapper || !mainHeaderInner || !secondaryBar) return; \/\/ Prote\u00e7\u00e3o contra nulos\r\n\r\n if (window.scrollY > 30) {\r\n \/\/ Ao rolar: Adiciona sombra\/blur, diminui altura do header e oculta submenu\r\n headerWrapper.classList.add('header-scrolled', 'border-slate-200\/50', 'dark:border-slate-800\/50');\r\n \r\n mainHeaderInner.classList.remove('lg:h-24', 'h-20');\r\n mainHeaderInner.classList.add('lg:h-20', 'h-16');\r\n \r\n \/\/ Substitui\u00e7\u00e3o: Usando max-height para proteger o box-model do Flexbox interno\r\n secondaryBar.classList.add('max-h-0', 'opacity-0');\r\n secondaryBar.classList.remove('max-h-[100px]', 'opacity-100');\r\n \r\n \/\/ Limpa resqu\u00edcios das classes antigas se houver\r\n secondaryBar.classList.remove('h-0', 'h-10');\r\n } else {\r\n \/\/ No topo: Remove efeitos e restaura tamanhos\r\n headerWrapper.classList.remove('header-scrolled', 'border-slate-200\/50', 'dark:border-slate-800\/50');\r\n \r\n mainHeaderInner.classList.add('lg:h-24', 'h-20');\r\n mainHeaderInner.classList.remove('lg:h-20', 'h-16');\r\n \r\n \/\/ Restaura o tamanho do container dinamicamente\r\n secondaryBar.classList.remove('max-h-0', 'opacity-0');\r\n secondaryBar.classList.add('max-h-[100px]', 'opacity-100');\r\n \r\n \/\/ Limpa resqu\u00edcios das classes antigas se houver\r\n secondaryBar.classList.remove('h-0', 'h-10');\r\n }\r\n });\r\n\r\n btnMobile.addEventListener('click', () => {\r\n menuMobile.classList.toggle('hidden');\r\n if (menuMobile.classList.contains('hidden')) {\r\n iconMobile.classList.remove('ph-x');\r\n iconMobile.classList.add('ph-list');\r\n } else {\r\n iconMobile.classList.remove('ph-list');\r\n iconMobile.classList.add('ph-x');\r\n }\r\n });\r\n\r\n \/\/ 2. Script do Recurso Visual Dia \/ Noite (Conceito de Climatiza\u00e7\u00e3o)\r\n function aplicarTemaPorHorario() {\r\n \/\/ Pega a hora local do usu\u00e1rio\r\n const horaAtual = new Date().getHours();\r\n const htmlTag = document.documentElement;\r\n const weatherIcon = document.getElementById('weather-icon');\r\n \r\n \/\/ Define que o \"Dia\" ocorre entre 06h e 17h59. Restante \u00e9 \"Noite\".\r\n const isDia = horaAtual >= 6 && horaAtual < 18;\r\n\r\n if (isDia) {\r\n \/\/ Modo Frescor \/ Dia Clean\r\n htmlTag.classList.remove('dark');\r\n \/\/ Ajusta o \u00edcone do term\u00f4metro para um sol preenchido (estilo badge premium)\r\n if(weatherIcon) {\r\n weatherIcon.className = \"ph-fill ph-sun text-sm text-orange-500 drop-shadow-sm transition-colors duration-500\";\r\n }\r\n } else {\r\n \/\/ Modo Tecnol\u00f3gico \/ Noite Deep Navy\r\n htmlTag.classList.add('dark');\r\n \/\/ Ajusta o \u00edcone do term\u00f4metro para lua com estrelas preenchida\r\n if(weatherIcon) {\r\n weatherIcon.className = \"ph-fill ph-moon-stars text-sm text-brand-nightAccent drop-shadow-sm transition-colors duration-500\";\r\n }\r\n }\r\n }\r\n\r\n \/\/ Executa ao carregar a p\u00e1gina\r\n aplicarTemaPorHorario();\r\n\r\n \/\/ Opcional: Verifica a cada hora se virou dia\/noite com o site aberto\r\n setInterval(aplicarTemaPorHorario, 3600000);\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b3c832 e-con-full e-flex e-con e-parent\" data-id=\"7b3c832\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b314874 elementor-widget elementor-widget-html\" data-id=\"b314874\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Pr\u00eamio Destaque HVAC-R | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16',\r\n nightBgAlt: '#081121',\r\n nightAccent: '#38BDF8',\r\n primary: '#059669',\r\n primaryHover: '#047857',\r\n award: '#F59E0B' \/\/ Dourado \u00c2mbar exclusivo para pr\u00eamios\r\n }\r\n },\r\n keyframes: {\r\n gradientShift: {\r\n '0%, 100%': { backgroundPosition: '0% 50%' },\r\n '50%': { backgroundPosition: '100% 50%' },\r\n },\r\n premiumPulse: {\r\n '0%, 100%': { boxShadow: '0 0 15px rgba(245, 158, 11, 0.05)', borderColor: 'rgba(245, 158, 11, 0.2)' },\r\n '50%': { boxShadow: '0 0 25px rgba(245, 158, 11, 0.15)', borderColor: 'rgba(245, 158, 11, 0.4)' },\r\n },\r\n trophyScale: {\r\n '0%, 100%': { transform: 'scale(1)' },\r\n '50%': { transform: 'scale(1.03)' },\r\n },\r\n arrowBounce: {\r\n '0%, 100%': { transform: 'translateY(0)' },\r\n '50%': { transform: 'translateY(2px)' },\r\n }\r\n },\r\n animation: {\r\n 'gradient-shift': 'gradientShift 8s ease infinite',\r\n 'premium-pulse': 'premiumPulse 4s ease-in-out infinite',\r\n 'trophy-scale': 'trophyScale 3s ease-in-out infinite',\r\n 'arrow-bounce': 'arrowBounce 2s ease-in-out infinite',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n\r\n \/* Classes para a anima\u00e7\u00e3o de expans\u00e3o suave (Grid Trick) *\/\r\n .expandable-wrapper {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .expandable-wrapper.is-expanded {\r\n grid-template-rows: 1fr;\r\n }\r\n .expandable-inner {\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n \/* Fade out suave e recolhimento limpo ao fechar *\/\r\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\r\n }\r\n .expandable-wrapper.is-expanded .expandable-inner {\r\n opacity: 1;\r\n transform: translateY(0);\r\n \/* Leve delay ao abrir para a caixa crescer primeiro e o texto surgir suave *\/\r\n transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"premio\" class=\"relative w-full py-10 lg:py-14 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-1\/2 right-0 -translate-y-1\/2 w-full max-w-[800px] h-[500px] bg-brand-award opacity-[0.03] blur-[150px] pointer-events-none rounded-full translate-x-1\/3\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div id=\"toggle-premio\" class=\"reveal-on-scroll relative w-full max-w-4xl mx-auto px-5 py-3.5 sm:px-8 sm:py-4 rounded-2xl bg-brand-nightBg border border-brand-award\/30 cursor-pointer group transition-all duration-300 hover:-translate-y-[2px] hover:shadow-[0_0_20px_rgba(245,158,11,0.2)] hover:border-brand-award\/50 animate-premium-pulse overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-brand-award\/5 via-transparent to-brand-award\/10 bg-[length:200%_200%] animate-gradient-shift opacity-60 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n \r\n \r\n <div class=\"flex items-center gap-3 sm:gap-4 text-center sm:text-left\">\r\n <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br from-brand-award\/20 to-transparent border border-brand-award\/20 flex items-center justify-center flex-shrink-0 animate-trophy-scale shadow-[0_0_15px_rgba(245,158,11,0.3)]\">\r\n <i class=\"ph-fill ph-trophy text-xl sm:text-2xl text-[#FCD34D] drop-shadow-[0_0_5px_rgba(245,158,11,0.8)]\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-base sm:text-lg md:text-xl font-bold text-white tracking-wide\">\r\n Pr\u00eamio Destaque do Nordeste <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#FCD34D] to-brand-award ml-1\">HVAC-R<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-award\/10 border border-brand-award\/20 text-brand-award text-sm font-semibold group-hover:bg-brand-award group-hover:text-brand-nightBg transition-all duration-300 whitespace-nowrap shadow-inner\">\r\n <span id=\"toggle-text\">Ver detalhes<\/span>\r\n \r\n <div class=\"animate-arrow-bounce\">\r\n <i id=\"toggle-icon\" class=\"ph-bold ph-caret-down transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"premio-content\" class=\"expandable-wrapper mt-0\">\r\n <div class=\"expandable-inner\">\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center pt-12 lg:pt-16\">\r\n \r\n \r\n <div class=\"flex flex-col justify-center\">\r\n \r\n \r\n <p class=\"text-slate-400 text-sm sm:text-base font-light leading-[1.6] max-w-[500px] mb-8\">\r\n O Pr\u00eamio Destaque do Nordeste foi criado para valorizar os profissionais que est\u00e3o na linha de frente do setor HVAC-R. Instaladores, vendedores e auxiliares que contribuem diariamente para o crescimento e qualidade do mercado.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col gap-3 max-w-[500px]\">\r\n \r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-wrench text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Instalador Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">Profissionais que se destacam pela qualidade t\u00e9cnica e execu\u00e7\u00e3o em campo.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-handshake text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Vendedor Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">Especialistas que impulsionam os neg\u00f3cios com excel\u00eancia e atendimento.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-users-three text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Auxiliar Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">O apoio fundamental que garante a efici\u00eancia e sucesso nas opera\u00e7\u00f5es di\u00e1rias.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full h-full p-8 sm:p-10 rounded-3xl border border-white\/10 bg-gradient-to-b from-white\/[0.05] to-transparent backdrop-blur-md flex flex-col items-center justify-center text-center shadow-2xl group overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[200px] h-[200px] bg-brand-award opacity-[0.10] blur-[80px] pointer-events-none group-hover:opacity-[0.20] transition-opacity duration-500\"><\/div>\r\n\r\n \r\n <div class=\"absolute top-5 right-5 px-3 py-1 rounded-full bg-brand-award\/10 border border-brand-award\/30 text-brand-award text-[10px] sm:text-xs font-bold uppercase tracking-widest shadow-lg shadow-brand-award\/5 animate-pulse\">\r\n Em breve\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gradient-to-br from-brand-award\/20 to-transparent flex items-center justify-center mb-5 sm:mb-6 border border-brand-award\/30 group-hover:scale-110 transition-all duration-500 shadow-[0_0_25px_rgba(245,158,11,0.25)]\">\r\n \r\n <div class=\"absolute inset-0 bg-brand-award\/20 blur-xl rounded-full\"><\/div>\r\n <i class=\"ph-fill ph-trophy text-4xl sm:text-5xl text-[#FCD34D] relative z-10 drop-shadow-[0_0_15px_rgba(245,158,11,0.6)]\"><\/i>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl sm:text-2xl lg:text-3xl font-bold text-white mb-2.5 relative z-10\">Participe da vota\u00e7\u00e3o<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm sm:text-base leading-relaxed mb-6 max-w-[280px] sm:max-w-xs relative z-10\">\r\n Vote nos profissionais que realmente fazem a diferen\u00e7a no dia a dia do setor.\r\n <\/p>\r\n\r\n \r\n <div class=\"w-full relative z-10 flex flex-col items-center\">\r\n \r\n <button disabled class=\"w-full sm:w-auto min-w-[200px] px-8 py-3 rounded-xl bg-white\/[0.04] border border-slate-600\/50 text-slate-300 opacity-70 font-semibold text-sm sm:text-base flex items-center justify-center gap-2 cursor-not-allowed transition-all shadow-inner\">\r\n <i class=\"ph-bold ph-lock-key text-lg\"><\/i>\r\n Votar agora\r\n <\/button>\r\n \r\n <p class=\"mt-1.5 text-[10px] sm:text-[11px] text-brand-award\/90 font-medium tracking-wide uppercase\">A vota\u00e7\u00e3o ser\u00e1 aberta em breve<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ 1. Intersection Observer (Fade-up inicial)\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n\r\n \/\/ 2. L\u00f3gica de Expans\u00e3o (Ver Detalhes)\r\n const toggleBtn = document.getElementById('toggle-premio');\r\n const toggleText = document.getElementById('toggle-text');\r\n const toggleIcon = document.getElementById('toggle-icon');\r\n const contentWrapper = document.getElementById('premio-content');\r\n \r\n let isExpanded = false;\r\n\r\n toggleBtn.addEventListener('click', () => {\r\n isExpanded = !isExpanded;\r\n \r\n if (isExpanded) {\r\n contentWrapper.classList.add('is-expanded');\r\n toggleText.textContent = 'Fechar';\r\n toggleIcon.classList.remove('ph-caret-down');\r\n toggleIcon.classList.add('ph-caret-up');\r\n } else {\r\n contentWrapper.classList.remove('is-expanded');\r\n toggleText.textContent = 'Ver detalhes';\r\n toggleIcon.classList.remove('ph-caret-up');\r\n toggleIcon.classList.add('ph-caret-down');\r\n }\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5351426 e-con-full e-flex e-con e-parent\" data-id=\"5351426\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a16041e elementor-widget elementor-widget-html\" data-id=\"a16041e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Hero Section | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Azul navy profundo (Fundo base escuro)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques\/Frio)\r\n primary: '#059669', \/\/ Verde corporativo (Bot\u00e3o principal)\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n },\r\n keyframes: {\r\n \/\/ Entrada com leve subida\r\n fadeUp: {\r\n '0%': { opacity: '0', transform: 'translateY(25px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' }\r\n },\r\n \/\/ Entrada com escala sutil (Para Badges)\r\n fadeInScale: {\r\n '0%': { opacity: '0', transform: 'scale(0.95)' },\r\n '100%': { opacity: '1', transform: 'scale(1)' }\r\n },\r\n \/\/ Movimento quase impercept\u00edvel da imagem\r\n slowZoom: {\r\n '0%': { transform: 'scale(1)' },\r\n '100%': { transform: 'scale(1.05)' }\r\n },\r\n \/\/ Simula\u00e7\u00e3o de fluxo de ar\/temperatura no overlay\r\n airFlow: {\r\n '0%': { backgroundPosition: '0% 50%' },\r\n '50%': { backgroundPosition: '100% 50%' },\r\n '100%': { backgroundPosition: '0% 50%' }\r\n }\r\n },\r\n animation: {\r\n \/\/ Classes de anima\u00e7\u00e3o prontas para uso\r\n 'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',\r\n 'fade-up-delay-1': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards',\r\n 'fade-up-delay-2': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards',\r\n 'fade-up-delay-3': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards',\r\n 'fade-in-scale': 'fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards',\r\n 'slow-zoom': 'slowZoom 20s ease-in-out infinite alternate',\r\n 'air-flow': 'airFlow 15s ease infinite',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n <section class=\"relative w-full min-h-[85vh] flex items-center overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 z-0 overflow-hidden\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092162384-8987c1d64718?q=80&w=2070&auto=format&fit=crop\" alt=\"Setor de Climatiza\u00e7\u00e3o Industrial\" class=\"w-full h-full object-cover object-center animate-slow-zoom\" \/>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-brand-nightBg via-brand-nightBg\/95 to-brand-nightBg\/60\"><\/div>\r\n \r\n <div class=\"absolute inset-0 bg-brand-nightBg\/50\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-[linear-gradient(120deg,rgba(56,189,248,0.04)_0%,rgba(4,11,22,0)_50%,rgba(5,150,105,0.03)_100%)] bg-[length:200%_200%] animate-air-flow mix-blend-screen pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28\">\r\n \r\n <div class=\"max-w-4xl flex flex-col items-start text-left\">\r\n \r\n \r\n <h1 class=\"flex flex-col tracking-tight leading-[1] mb-6 opacity-0 animate-fade-up\">\r\n <span class=\"text-xl sm:text-2xl md:text-3xl lg:text-3xl font-extrabold tracking-wide text-white\/80 uppercase mb-1.5\">HVAC-R<\/span>\r\n <span class=\"text-5xl sm:text-6xl md:text-7xl lg:text-[6rem] font-black text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400 pb-1\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/h1>\r\n\r\n \r\n <h2 class=\"text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold text-white mb-5 max-w-4xl leading-snug opacity-0 animate-fade-up-delay-1\">\r\n A maior feira de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o <br class=\"hidden sm:block\" \/> do Norte e Nordeste.\r\n <\/h2>\r\n\r\n \r\n <p class=\"text-base sm:text-lg lg:text-xl text-slate-300 max-w-2xl leading-relaxed mb-12 lg:mb-14 font-light opacity-0 animate-fade-up-delay-2\">\r\n O principal encontro do setor HVAC-R na regi\u00e3o, reunindo empresas, profissionais e inova\u00e7\u00e3o.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5 mb-12 lg:mb-16 opacity-0 animate-fade-in-scale\">\r\n \r\n \r\n <div class=\"flex items-center gap-3.5 px-5 py-3 rounded-xl bg-white\/5 backdrop-blur-md border border-white\/10 shadow-lg hover:bg-white\/10 transition-colors duration-300 cursor-default\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-lg bg-brand-nightAccent\/20 text-brand-nightAccent\">\r\n <i class=\"ph-bold ph-calendar-blank text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-sm md:text-base font-semibold text-white tracking-wide\">04 e 05 de Setembro de 2026<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 px-5 py-3 rounded-xl bg-white\/5 backdrop-blur-md border border-white\/10 shadow-lg hover:bg-white\/10 transition-colors duration-300 cursor-default\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-lg bg-brand-nightAccent\/20 text-brand-nightAccent\">\r\n <i class=\"ph-bold ph-map-pin text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-sm md:text-base font-semibold text-white tracking-wide\">Recife Expo Center<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 sm:gap-6 w-full sm:w-auto opacity-0 animate-fade-up-delay-3\">\r\n \r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center gap-2 w-full sm:w-auto px-9 py-4 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-bold text-base md:text-lg transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-xl hover:shadow-brand-primary\/40 transform hover:-translate-y-[2px]\">\r\n Quero Participar\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n\r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center w-full sm:w-auto px-9 py-4 rounded-lg border border-slate-400 text-white hover:border-brand-nightAccent hover:text-brand-nightAccent hover:bg-brand-nightAccent\/10 font-bold text-base md:text-lg transition-all duration-300 shadow-sm hover:shadow-xl hover:shadow-brand-nightAccent\/10 transform hover:-translate-y-[2px]\">\r\n Quero Expor\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-brand-nightBg to-transparent z-10 pointer-events-none\"><\/div>\r\n\r\n <\/section>\r\n \r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c391cf e-con-full e-flex e-con e-parent\" data-id=\"9c391cf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db652dc elementor-widget elementor-widget-html\" data-id=\"db652dc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Expositores e Marcas | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo (Usado nesta se\u00e7\u00e3o)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para efeito em cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n .delay-400 { transition-delay: 400ms; }\r\n .delay-500 { transition-delay: 500ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"expositores\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-0 right-0 w-full max-w-[600px] h-[600px] bg-brand-nightAccent opacity-[0.02] blur-[150px] pointer-events-none rounded-full translate-x-[30%] translate-y-[-30%]\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <span class=\"reveal-on-scroll text-brand-nightAccent font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 block\">\r\n Marcas Confirmadas\r\n <\/span>\r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight tracking-tight\">\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Expositores<\/span> e <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Marcas<\/span> Confirmadas\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-200 text-slate-400 text-base sm:text-lg font-light leading-relaxed\">\r\n Empresas que fazem parte do principal encontro do setor HVAC-R.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n\r\n \r\n <div class=\"w-full\">\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+1\" alt=\"Logo Expositor 1\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-100 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+2\" alt=\"Logo Expositor 2\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+3\" alt=\"Logo Expositor 3\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+4\" alt=\"Logo Expositor 4\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+5\" alt=\"Logo Expositor 5\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+6\" alt=\"Logo Expositor 6\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+7\" alt=\"Logo Expositor 7\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+8\" alt=\"Logo Expositor 8\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-500 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+9\" alt=\"Logo Expositor 9\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <a href=\"#\" class=\"reveal-on-scroll delay-500 col-span-1 sm:col-span-1 lg:col-span-2 xl:col-span-1 flex flex-col items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl border-2 border-dashed border-white\/20 bg-brand-nightBgAlt hover:border-brand-primary\/50 hover:bg-brand-primary\/5 transition-all duration-300 group text-center gap-2 relative overflow-hidden\">\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-primary\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center gap-1 z-10 transition-transform duration-300 group-hover:-translate-y-2\">\r\n <i class=\"ph-bold ph-plus text-xl text-slate-400 group-hover:text-brand-primary transition-colors\"><\/i>\r\n <span class=\"text-xs sm:text-sm font-medium text-slate-400 group-hover:text-white transition-colors\">Sua marca pode estar aqui<\/span>\r\n <\/div>\r\n \r\n \r\n <div class=\"absolute bottom-4 opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 z-10\">\r\n <span class=\"inline-flex items-center justify-center px-4 py-1.5 rounded-md bg-brand-primary text-white text-xs font-semibold shadow-lg\">\r\n Quero Expor\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Ativa quando 15% do elemento aparece\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const targetEl = entry.target;\r\n targetEl.classList.add('reveal-visible');\r\n observer.unobserve(targetEl);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Inicia a observa\u00e7\u00e3o de todos os elementos revel\u00e1veis\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6dff2f7 e-con-full e-flex e-con e-parent\" data-id=\"6dff2f7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a08bd98 elementor-widget elementor-widget-html\" data-id=\"a08bd98\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Sobre o Evento | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base (Usado na Hero)\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo (Para separar se\u00e7\u00f5es sutilmente)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para criar efeito cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"sobre\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-0 left-0 w-full max-w-[600px] h-[600px] bg-brand-nightAccent opacity-[0.03] blur-[150px] pointer-events-none rounded-full translate-x-[-30%] translate-y-[-30%]\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-28 items-center\">\r\n \r\n \r\n <div class=\"flex flex-col\">\r\n \r\n \r\n <span class=\"reveal-on-scroll text-brand-nightAccent font-bold uppercase tracking-widest text-xs sm:text-sm mb-5\">\r\n Sobre o Evento\r\n <\/span>\r\n\r\n \r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-10 leading-[1.15] tracking-tight\">\r\n O principal encontro do setor HVAC-R no <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Norte e Nordeste<\/span>\r\n <\/h2>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 space-y-6 text-slate-300 text-base sm:text-lg font-light leading-[1.7] max-w-xl mb-10\">\r\n <p>\r\n O <strong class=\"font-semibold text-white\">HVAC-R Norte Nordeste<\/strong> \u00e9 uma feira dedicada aos profissionais, empresas e especialistas do setor de climatiza\u00e7\u00e3o, refrigera\u00e7\u00e3o, ventila\u00e7\u00e3o e tecnologias relacionadas.\r\n <\/p>\r\n <p>\r\n O evento re\u00fane fabricantes, distribuidores, instaladores, engenheiros e especialistas em um ambiente voltado para neg\u00f3cios, inova\u00e7\u00e3o e networking qualificado.\r\n <\/p>\r\n <p>\r\n Durante os dois dias de evento, os participantes ter\u00e3o acesso a lan\u00e7amentos, solu\u00e7\u00f5es tecnol\u00f3gicas, conte\u00fado t\u00e9cnico e oportunidades reais de conex\u00e3o com o mercado.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 relative w-full h-[400px] sm:h-[500px] lg:h-[600px] rounded-2xl overflow-hidden shadow-2xl shadow-black\/40 group\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540575467063-178a50c2df87?q=80&w=2070&auto=format&fit=crop\" alt=\"Vis\u00e3o de um grande evento de neg\u00f3cios e tecnologia\" class=\"w-full h-full object-cover object-center transition-transform duration-[800ms] ease-out group-hover:scale-[1.03]\" \/>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-[#040B16]\/40 mix-blend-multiply pointer-events-none\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-nightBg via-transparent to-transparent opacity-80 pointer-events-none\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 border border-white\/10 rounded-2xl pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n \r\n <div class=\"mt-24 lg:mt-32 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n \r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-users-three text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Networking Qualificado<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Conecte-se com l\u00edderes, fabricantes e especialistas renomados do mercado.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-cpu text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Inova\u00e7\u00e3o e Tecnologia<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Acesso em primeira m\u00e3o aos principais lan\u00e7amentos e tend\u00eancias globais.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-handshake text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Oportunidade de Neg\u00f3cios<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Um ambiente imersivo desenhado especificamente para fechar grandes acordos.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-graduation-cap text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Conte\u00fado T\u00e9cnico<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Palestras, capacita\u00e7\u00f5es e workshops com grandes autoridades do setor.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Dispara quando 15% do elemento estiver vis\u00edvel\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target); \/\/ Para a anima\u00e7\u00e3o ap\u00f3s acontecer a 1\u00aa vez\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Seleciona todos os elementos com a classe 'reveal-on-scroll'\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29ba572 e-con-full e-flex e-con e-parent\" data-id=\"29ba572\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27d2a97 elementor-widget elementor-widget-html\" data-id=\"27d2a97\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>N\u00fameros do Evento | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para efeito em cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n .delay-400 { transition-delay: 400ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n <section id=\"numeros\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBg\">\r\n \r\n \r\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-[800px] h-[400px] bg-brand-nightAccent opacity-[0.03] blur-[120px] pointer-events-none rounded-full\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <span class=\"reveal-on-scroll text-brand-primary font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 block\">\r\n Impacto e Alcance\r\n <\/span>\r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight tracking-tight\">\r\n Um evento de <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-brand-primary\">grande impacto<\/span>\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-200 text-slate-400 text-base sm:text-lg font-light leading-relaxed\">\r\n Conectando milhares de profissionais e empresas do setor HVAC-R.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"text-brand-nightAccent text-lg lg:text-xl font-bold mr-2\">+ de<\/span>\r\n \r\n <span class=\"counter tabular-nums inline-block min-w-[110px] lg:min-w-[140px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"5000\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Visitantes<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Profissionais do setor<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-primary\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"counter tabular-nums inline-block min-w-[50px] lg:min-w-[60px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"2\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Dias de Evento<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Imers\u00e3o completa<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"text-brand-nightAccent text-lg lg:text-xl font-bold mr-2\">+ de<\/span>\r\n <span class=\"counter tabular-nums inline-block min-w-[70px] lg:min-w-[85px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"20\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Expositores<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Apresentando solu\u00e7\u00f5es<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-primary\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n \r\n <span class=\"text-4xl lg:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\">Grandes<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Marcas do Setor<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Reunidas em um s\u00f3 lugar<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \r\n \/\/ 1. Fun\u00e7\u00e3o de Count-Up (Anima\u00e7\u00e3o dos N\u00fameros)\r\n const animateCounters = (counterElement) => {\r\n const target = +counterElement.getAttribute('data-target');\r\n const duration = 2000; \/\/ Tempo total da anima\u00e7\u00e3o em milissegundos\r\n const frameRate = 30; \/\/ Atualiza a cada 30ms\r\n const totalFrames = Math.round(duration \/ frameRate);\r\n const increment = target \/ totalFrames;\r\n \r\n let currentCount = 0;\r\n\r\n const timer = setInterval(() => {\r\n currentCount += increment;\r\n \r\n if (currentCount >= target) {\r\n \/\/ Garante que o n\u00famero final seja exato\r\n counterElement.innerText = target.toLocaleString('pt-BR');\r\n clearInterval(timer);\r\n } else {\r\n \/\/ Atualiza o texto formatando com ponto de milhar\r\n counterElement.innerText = Math.ceil(currentCount).toLocaleString('pt-BR');\r\n }\r\n }, frameRate);\r\n };\r\n\r\n \/\/ 2. Intersection Observer (Controla Fade-up e Count-Up simultaneamente)\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Ativa quando 15% do elemento aparece\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const targetEl = entry.target;\r\n \r\n \/\/ Executa o fade-up\r\n targetEl.classList.add('reveal-visible');\r\n \r\n \/\/ Se for um card e tiver um contador dentro, inicia o count-up\r\n const counterInside = targetEl.querySelector('.counter');\r\n if (counterInside && !counterInside.classList.contains('counted')) {\r\n animateCounters(counterInside);\r\n counterInside.classList.add('counted'); \/\/ Trava para animar apenas uma vez\r\n }\r\n\r\n observer.unobserve(targetEl);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Inicia a observa\u00e7\u00e3o de todos os elementos que devem aparecer suavemente\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc33675 e-con-full e-flex e-con e-parent\" data-id=\"cc33675\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a5dbb9 elementor-widget elementor-widget-html\" data-id=\"5a5dbb9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>CTA | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16',\r\n nightBgAlt: '#081121',\r\n nightAccent: '#38BDF8',\r\n primary: '#059669',\r\n primaryHover: '#047857'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n \r\n <section id=\"cta\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#0a1930] via-brand-nightBg to-brand-nightBg\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-full max-w-[1000px] h-[400px] bg-brand-nightAccent opacity-[0.04] blur-[120px] pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1200px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <h2 class=\"reveal-on-scroll text-3xl sm:text-4xl md:text-5xl lg:text-[54px] font-black text-white mb-6 leading-[1.15] tracking-tight\">\r\n Fa\u00e7a parte do <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">maior evento<\/span> de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o da regi\u00e3o.\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-100 text-slate-300 text-base sm:text-lg lg:text-xl font-light leading-relaxed\">\r\n Garanta sua participa\u00e7\u00e3o ou posicione sua marca no evento que conecta profissionais, empresas e inova\u00e7\u00e3o.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 mb-16\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col items-center text-center p-8 lg:p-12 rounded-3xl bg-white\/[0.02] border border-white\/10 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 hover:bg-white\/[0.04] hover:shadow-[0_20px_40px_-15px_rgba(5,150,105,0.2)] group relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-primary\/0 to-brand-primary\/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"w-16 h-16 rounded-2xl bg-brand-primary\/10 text-brand-primary flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-ticket text-3xl\"><\/i>\r\n <\/div>\r\n \r\n <h3 class=\"text-2xl lg:text-3xl font-bold text-white mb-4\">Quero participar<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm lg:text-base leading-relaxed mb-10 flex-grow max-w-sm\">\r\n Participe de dois dias de conte\u00fado t\u00e9cnico, networking e oportunidades no maior encontro do setor HVAC-R da regi\u00e3o.\r\n <\/p>\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-10 py-4 rounded-xl bg-brand-primary hover:bg-brand-primaryHover text-white font-bold text-lg transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-xl hover:shadow-brand-primary\/40 transform hover:-translate-y-1 flex items-center justify-center gap-2\">\r\n Garantir minha vaga\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col items-center text-center p-8 lg:p-12 rounded-3xl bg-white\/[0.02] border border-white\/10 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 hover:bg-white\/[0.04] hover:shadow-[0_20px_40px_-15px_rgba(56,189,248,0.2)] group relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-nightAccent\/0 to-brand-nightAccent\/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"w-16 h-16 rounded-2xl bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-storefront text-3xl\"><\/i>\r\n <\/div>\r\n \r\n <h3 class=\"text-2xl lg:text-3xl font-bold text-white mb-4\">Quero expor minha marca<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm lg:text-base leading-relaxed mb-10 flex-grow max-w-sm\">\r\n Apresente seus produtos, gere neg\u00f3cios e conecte sua empresa com milhares de profissionais do setor.\r\n <\/p>\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-10 py-4 rounded-xl bg-brand-nightAccent hover:bg-[#20a7e0] text-brand-nightBg font-bold text-lg transition-all duration-300 shadow-lg shadow-brand-nightAccent\/25 hover:shadow-xl hover:shadow-brand-nightAccent\/40 transform hover:-translate-y-1 flex items-center justify-center gap-2\">\r\n Quero ser expositor\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 pt-8 border-t border-white\/10\">\r\n <div class=\"flex items-center gap-2.5 text-slate-300\">\r\n <i class=\"ph-bold ph-calendar-blank text-brand-nightAccent text-lg\"><\/i>\r\n <span class=\"font-medium tracking-wide\">04 e 05 de Setembro de 2026<\/span>\r\n <\/div>\r\n <div class=\"hidden sm:block text-slate-600\">\u2022<\/div>\r\n <div class=\"flex items-center gap-2.5 text-slate-300\">\r\n <i class=\"ph-bold ph-map-pin text-brand-primary text-lg\"><\/i>\r\n <span class=\"font-medium tracking-wide\">Recife Expo Center<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41fefc0 e-con-full e-flex e-con e-parent\" data-id=\"41fefc0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d6208a elementor-widget elementor-widget-html\" data-id=\"0d6208a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Rodap\u00e9 Profissional | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Azul navy muito profundo (Premium)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro vibrante\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style>\r\n \/* Estilo apenas para empurrar o footer para o final da tela na visualiza\u00e7\u00e3o isolada *\/\r\n body {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 100vh;\r\n background-color: #f8fafc;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n \r\n <footer class=\"w-full bg-brand-nightBg border-t border-slate-800\/60 flex flex-col relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-full max-w-[800px] h-32 bg-brand-nightAccent opacity-5 blur-[120px] pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"w-full border-b border-slate-800\/60 relative z-10\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-8 text-center lg:text-left\">\r\n \r\n \r\n <h2 class=\"text-2xl lg:text-3xl font-bold text-white max-w-2xl leading-tight tracking-tight\">\r\n Participe do maior evento de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o do <span class=\"text-brand-nightAccent\">Norte<\/span> e <span class=\"text-brand-nightAccent\">Nordeste<\/span>\r\n <\/h2>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto\">\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-6 py-3 rounded-lg border border-slate-600 text-slate-300 hover:border-brand-nightAccent hover:text-brand-nightAccent hover:bg-brand-nightAccent\/5 font-semibold text-sm transition-all duration-300 whitespace-nowrap\">\r\n Quero Expor\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-8 py-3 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-semibold text-sm transition-all duration-300 shadow-lg shadow-brand-primary\/20 hover:shadow-brand-primary\/40 hover:-translate-y-0.5 whitespace-nowrap\">\r\n Quero Participar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16\">\r\n \r\n \r\n <div class=\"flex flex-col\">\r\n <a href=\"#\" class=\"flex items-center gap-3.5 group mb-6 w-fit\">\r\n <div class=\"w-11 h-11 rounded-xl bg-gradient-to-br from-blue-600 to-brand-nightAccent flex items-center justify-center shadow-md\">\r\n <i class=\"ph ph-wind text-2xl text-white\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center mt-0.5\">\r\n <span class=\"font-black text-2xl tracking-tighter text-white leading-none mb-1\">\r\n HVAC-R\r\n <\/span>\r\n <span class=\"font-bold text-[9px] tracking-[0.25em] text-slate-400 uppercase leading-none\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n <p class=\"text-slate-400 text-sm leading-relaxed max-w-xs pr-4\">\r\n Evento focado em climatiza\u00e7\u00e3o, refrigera\u00e7\u00e3o, inova\u00e7\u00e3o e neg\u00f3cios no Norte e Nordeste.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col\">\r\n <h3 class=\"text-brand-nightAccent font-bold uppercase tracking-widest text-xs mb-6\">\u00c1rea Comercial<\/h3>\r\n <ul class=\"flex flex-col space-y-3\">\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">Seja Expositor<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">\u00c1rea do Expositor<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">Credenciamento<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col\">\r\n <h3 class=\"text-brand-nightAccent font-bold uppercase tracking-widest text-xs mb-6\">Contato<\/h3>\r\n <ul class=\"flex flex-col space-y-4\">\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-envelope text-lg text-slate-500 mt-0.5\"><\/i>\r\n <a href=\"mailto:contato@hvacrnortenordeste.com.br\" class=\"text-slate-400 hover:text-white text-sm transition-colors break-all\">contato@hvacrnortenordeste.com.br<\/a>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-whatsapp text-lg text-slate-500 mt-0.5\"><\/i>\r\n <a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-colors\">(00) 00000-0000<\/a>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-map-pin text-lg text-slate-500 mt-0.5\"><\/i>\r\n <span class=\"text-slate-400 text-sm\">Recife - PE<\/span>\r\n <\/li>\r\n <\/ul>\r\n \r\n \r\n <div class=\"flex items-center gap-3 mt-8\">\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-instagram-logo text-lg\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-linkedin-logo text-lg\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-youtube-logo text-lg\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full border-t border-slate-800\/60 bg-[#02060D] relative z-10\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-5\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-4 text-[11px] text-slate-500 uppercase tracking-wider font-medium text-center lg:text-left\">\r\n \r\n <span>© 2026 HVAC-R Norte Nordeste. Todos os direitos reservados.<\/span>\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-2 sm:gap-6\">\r\n <span>Realiza\u00e7\u00e3o: Parceiros do Clima<\/span>\r\n <span class=\"hidden sm:block text-slate-700\">\u2022<\/span>\r\n <span>\r\n Desenvolvido por \r\n <a href=\"#\" target=\"_blank\" class=\"text-brand-nightAccent hover:text-white transition-colors duration-300 ml-1\">GO84<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n \r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Topo Profissional | HVAC-R Norte Nordeste HVAC-R Norte Nordeste In\u00edcio O Evento Expositores Programa\u00e7\u00e3o Patrocinadores Not\u00edcias Contato Quero Expor Quero Participar 04 e 05 Set 2026 \u2022 Recife Expo Center \u2022 Recife agora: 29\u00b0C Credenciamento Seja Expositor Mapa da Feira \u00c1rea do Expositor In\u00edcio O Evento Expositores Programa\u00e7\u00e3o Patrocinadores Not\u00edcias Contato Quero Participar Quero Expor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1386","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1386"}],"version-history":[{"count":34,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386\/revisions"}],"predecessor-version":[{"id":1421,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386\/revisions\/1421"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Topo Profissional | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n darkMode: 'class', \/\/ Habilita o modo escuro (noite) via classe no HTML\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n \/\/ Paleta Dia (Frescor \/ Climatiza\u00e7\u00e3o)\r\n dayBg: '#F8FAFC',\r\n dayHeader: 'rgba(255, 255, 255, 0.95)',\r\n daySub: 'rgba(241, 245, 249, 0.9)',\r\n dayText: '#0F172A',\r\n dayAccent: '#0284C7', \/\/ Azul m\u00e9dio\r\n \r\n \/\/ Paleta Noite (Tecnol\u00f3gico \/ Premium)\r\n nightBg: '#0B1120',\r\n nightHeader: 'rgba(15, 23, 42, 0.95)',\r\n nightSub: 'rgba(11, 17, 32, 0.9)',\r\n nightText: '#F8FAFC',\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro\r\n \r\n \/\/ Bot\u00f5es e Destaques Universais\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Transi\u00e7\u00f5es globais suaves para a mudan\u00e7a Dia\/Noite *\/\r\n body {\r\n transition: background-color 0.8s ease, color 0.8s ease;\r\n }\r\n \r\n .theme-transition {\r\n transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;\r\n }\r\n\r\n \/* Efeito premium de underline nos links do menu (Deslize suave) *\/\r\n .nav-link::after {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 2px;\r\n bottom: -6px;\r\n left: 0;\r\n background-color: currentColor;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);\r\n }\r\n .nav-link:hover::after {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Efeito Glassmorphism com Sombra Suave para Profundidade do Header *\/\r\n .glass-header {\r\n background-color: rgba(255, 255, 255, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n .dark .glass-header {\r\n background-color: rgba(11, 17, 32, 0.85);\r\n box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n \/* Ocultar barra de rolagem neste arquivo apenas para foco visual no header *\/\r\n body { overflow-x: hidden; height: 200vh; \/* Altura fict\u00edcia para permitir scroll e ver o header fixo *\/ }\r\n body.dark { background-color: #0B1120; }\r\n body:not(.dark) { background-color: #F8FAFC; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n \r\n <div id=\"header-wrapper\" class=\"fixed top-0 left-0 w-full z-50 flex flex-col theme-transition\">\r\n \r\n \r\n <header class=\"w-full glass-header border-b border-slate-200\/50 dark:border-slate-800\/50 theme-transition\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div id=\"main-header-inner\" class=\"flex justify-between items-center h-20 lg:h-24 transition-all duration-300\">\r\n \r\n \r\n <div class=\"flex-shrink-0 flex items-center\">\r\n <a href=\"#\" class=\"flex items-center gap-3.5 group\">\r\n \r\n <div class=\"w-11 h-11 lg:w-12 lg:h-12 rounded-xl bg-gradient-to-br from-brand-dayAccent to-blue-900 dark:from-blue-600 dark:to-brand-nightAccent flex items-center justify-center shadow-lg shadow-blue-500\/20 dark:shadow-blue-900\/40 transform group-hover:scale-105 transition-transform duration-500\">\r\n <i class=\"ph ph-wind text-2xl lg:text-3xl text-white\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center mt-0.5\">\r\n <span class=\"font-black text-2xl lg:text-3xl tracking-tighter text-brand-dayText dark:text-brand-nightText leading-none mb-1 group-hover:text-brand-dayAccent dark:group-hover:text-brand-nightAccent transition-colors duration-300\">\r\n HVAC-R\r\n <\/span>\r\n <span class=\"font-medium text-xs tracking-widest text-brand-dayAccent dark:text-brand-nightAccent theme-transition uppercase\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <nav class=\"hidden xl:flex space-x-8 items-center\">\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">In\u00edcio<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">O Evento<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Expositores<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Programa\u00e7\u00e3o<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Patrocinadores<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Not\u00edcias<\/a>\r\n <a href=\"#\" class=\"nav-link relative text-sm font-medium text-slate-600 hover:text-brand-dayAccent dark:text-slate-300 dark:hover:text-brand-nightAccent theme-transition\">Contato<\/a>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden lg:flex items-center gap-5\">\r\n \r\n <a href=\"#\" class=\"px-5 py-2.5 rounded-lg border border-slate-300 text-slate-600 hover:border-brand-dayAccent hover:bg-slate-50 hover:text-brand-dayAccent dark:border-slate-700 dark:text-slate-300 dark:hover:border-brand-nightAccent dark:hover:bg-slate-800\/50 dark:hover:text-brand-nightAccent font-semibold text-sm transition-all duration-300\">\r\n Quero Expor\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"px-6 py-2.5 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-semibold text-sm transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-brand-primary\/40 hover:-translate-y-0.5\">\r\n Quero Participar\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center lg:hidden\">\r\n <button id=\"btn-mobile\" class=\"text-slate-600 dark:text-slate-300 focus:outline-none p-2\">\r\n <i id=\"icon-mobile\" class=\"ph ph-list text-3xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"secondary-bar\" class=\"w-full max-h-[100px] opacity-100 bg-brand-daySub\/80 dark:bg-brand-nightSub\/80 backdrop-blur-md border-b border-slate-200\/50 dark:border-slate-800\/50 theme-transition overflow-hidden transition-all duration-500\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"flex flex-col lg:flex-row items-center justify-between min-h-[48px] py-2 lg:py-0 w-full gap-3 lg:gap-0\">\r\n \r\n \r\n <div class=\"flex flex-wrap items-center justify-center lg:justify-start gap-3 lg:gap-4 text-[11px] font-semibold text-slate-500 dark:text-slate-400 theme-transition uppercase tracking-wider\">\r\n \r\n \r\n <div class=\"flex items-center gap-1.5 hover:text-brand-dayAccent dark:hover:text-brand-nightAccent transition-colors\">\r\n <i class=\"ph ph-calendar-blank text-sm text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>04 e 05 Set 2026<\/span>\r\n <\/div>\r\n \r\n \r\n <span class=\"text-slate-300 dark:text-slate-700 font-light hidden sm:block\">\u2022<\/span>\r\n \r\n \r\n <div class=\"hidden sm:flex items-center gap-1.5 hover:text-brand-dayAccent dark:hover:text-brand-nightAccent transition-colors\">\r\n <i class=\"ph ph-map-pin text-sm text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>Recife Expo Center<\/span>\r\n <\/div>\r\n\r\n \r\n <span class=\"text-slate-300 dark:text-slate-700 font-light hidden lg:block\">\u2022<\/span>\r\n\r\n \r\n <div id=\"weather-widget\" class=\"flex items-center justify-center gap-2 bg-white\/80 dark:bg-slate-800\/80 px-3 py-1.5 rounded-full border border-slate-200\/60 dark:border-slate-700\/60 shadow-sm theme-transition hover:shadow-md transition-all cursor-default\">\r\n \r\n <i id=\"weather-icon\" class=\"ph-fill ph-sun text-sm text-orange-500 drop-shadow-sm\"><\/i>\r\n <span class=\"text-slate-700 dark:text-slate-200 font-bold tracking-wide normal-case text-xs whitespace-nowrap\">\r\n Recife agora: <span id=\"temp-value\" class=\"text-brand-dayAccent dark:text-brand-nightAccent\">29\u00b0C<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-nowrap items-center justify-center lg:justify-end gap-3 xl:gap-5 text-[11px] font-semibold uppercase tracking-wider whitespace-nowrap mt-1 lg:mt-0\">\r\n \r\n <a href=\"#\" class=\"hidden xl:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-identification-card text-sm\"><\/i> Credenciamento\r\n <\/a>\r\n <a href=\"#\" class=\"hidden xl:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-storefront text-sm\"><\/i> Seja Expositor\r\n <\/a>\r\n <a href=\"#\" class=\"hidden lg:flex items-center gap-1.5 text-slate-500 hover:text-brand-dayAccent dark:text-slate-400 dark:hover:text-brand-nightAccent transition-all hover:-translate-y-0.5\">\r\n <i class=\"ph ph-map-trifold text-sm\"><\/i> Mapa da Feira\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center gap-1.5 bg-brand-dayAccent\/10 dark:bg-brand-nightAccent\/10 text-brand-dayAccent dark:text-brand-nightAccent px-3.5 py-1.5 rounded-full hover:bg-brand-dayAccent hover:text-white dark:hover:bg-brand-nightAccent dark:hover:text-brand-nightBg transition-all duration-300\">\r\n <i class=\"ph ph-user-circle text-sm\"><\/i> \u00c1rea do Expositor\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden lg:hidden bg-white dark:bg-brand-nightHeader border-b border-slate-200 dark:border-slate-800 shadow-xl theme-transition overflow-y-auto max-h-[calc(100vh-80px)]\">\r\n <div class=\"px-4 py-6 space-y-6\">\r\n \r\n \r\n <nav class=\"flex flex-col space-y-4\">\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">In\u00edcio<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">O Evento<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Expositores<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Programa\u00e7\u00e3o<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Patrocinadores<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Not\u00edcias<\/a>\r\n <a href=\"#\" class=\"text-base font-semibold text-slate-800 dark:text-slate-200\">Contato<\/a>\r\n <\/nav>\r\n \r\n <hr class=\"border-slate-200 dark:border-slate-800\">\r\n\r\n \r\n <div class=\"flex flex-col gap-3\">\r\n <a href=\"#\" class=\"w-full text-center px-6 py-3 rounded-md bg-brand-primary text-white font-semibold text-sm\">\r\n Quero Participar\r\n <\/a>\r\n <a href=\"#\" class=\"w-full text-center px-5 py-3 rounded-md border-2 border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 font-semibold text-sm\">\r\n Quero Expor\r\n <\/a>\r\n <\/div>\r\n\r\n <hr class=\"border-slate-200 dark:border-slate-800\">\r\n\r\n \r\n <div class=\"flex flex-col space-y-4 text-sm text-slate-600 dark:text-slate-400\">\r\n <div class=\"flex items-center gap-2\">\r\n <i class=\"ph ph-calendar-blank text-lg text-brand-dayAccent dark:text-brand-nightAccent\"><\/i>\r\n <span>04 e 05 Set 2026 | Recife Expo Center<\/span>\r\n <\/div>\r\n \r\n <div class=\"flex items-center gap-2 text-brand-dayAccent dark:text-brand-nightAccent font-semibold\">\r\n <i class=\"ph ph-thermometer text-lg\"><\/i>\r\n <span>Recife agora: 29\u00b0C<\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"flex items-center gap-2 pt-2\"><i class=\"ph ph-identification-card text-lg\"><\/i> Credenciamento<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-storefront text-lg\"><\/i> Seja Expositor<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-map-trifold text-lg\"><\/i> Mapa da Feira<\/a>\r\n <a href=\"#\" class=\"flex items-center gap-2\"><i class=\"ph ph-user-circle text-lg\"><\/i> \u00c1rea do Expositor<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n \r\n <script>\r\n \/\/ 1. Script de L\u00f3gica do Menu Mobile\r\n const btnMobile = document.getElementById('btn-mobile');\r\n const menuMobile = document.getElementById('mobile-menu');\r\n const iconMobile = document.getElementById('icon-mobile');\r\n\r\n \/\/ 1.5. L\u00f3gica do Header Sticky Inteligente (Comprime e aplica Glassmorphism)\r\n const headerWrapper = document.getElementById('header-wrapper');\r\n const mainHeaderInner = document.getElementById('main-header-inner');\r\n const secondaryBar = document.getElementById('secondary-bar');\r\n\r\n window.addEventListener('scroll', () => {\r\n if (!headerWrapper || !mainHeaderInner || !secondaryBar) return; \/\/ Prote\u00e7\u00e3o contra nulos\r\n\r\n if (window.scrollY > 30) {\r\n \/\/ Ao rolar: Adiciona sombra\/blur, diminui altura do header e oculta submenu\r\n headerWrapper.classList.add('header-scrolled', 'border-slate-200\/50', 'dark:border-slate-800\/50');\r\n \r\n mainHeaderInner.classList.remove('lg:h-24', 'h-20');\r\n mainHeaderInner.classList.add('lg:h-20', 'h-16');\r\n \r\n \/\/ Substitui\u00e7\u00e3o: Usando max-height para proteger o box-model do Flexbox interno\r\n secondaryBar.classList.add('max-h-0', 'opacity-0');\r\n secondaryBar.classList.remove('max-h-[100px]', 'opacity-100');\r\n \r\n \/\/ Limpa resqu\u00edcios das classes antigas se houver\r\n secondaryBar.classList.remove('h-0', 'h-10');\r\n } else {\r\n \/\/ No topo: Remove efeitos e restaura tamanhos\r\n headerWrapper.classList.remove('header-scrolled', 'border-slate-200\/50', 'dark:border-slate-800\/50');\r\n \r\n mainHeaderInner.classList.add('lg:h-24', 'h-20');\r\n mainHeaderInner.classList.remove('lg:h-20', 'h-16');\r\n \r\n \/\/ Restaura o tamanho do container dinamicamente\r\n secondaryBar.classList.remove('max-h-0', 'opacity-0');\r\n secondaryBar.classList.add('max-h-[100px]', 'opacity-100');\r\n \r\n \/\/ Limpa resqu\u00edcios das classes antigas se houver\r\n secondaryBar.classList.remove('h-0', 'h-10');\r\n }\r\n });\r\n\r\n btnMobile.addEventListener('click', () => {\r\n menuMobile.classList.toggle('hidden');\r\n if (menuMobile.classList.contains('hidden')) {\r\n iconMobile.classList.remove('ph-x');\r\n iconMobile.classList.add('ph-list');\r\n } else {\r\n iconMobile.classList.remove('ph-list');\r\n iconMobile.classList.add('ph-x');\r\n }\r\n });\r\n\r\n \/\/ 2. Script do Recurso Visual Dia \/ Noite (Conceito de Climatiza\u00e7\u00e3o)\r\n function aplicarTemaPorHorario() {\r\n \/\/ Pega a hora local do usu\u00e1rio\r\n const horaAtual = new Date().getHours();\r\n const htmlTag = document.documentElement;\r\n const weatherIcon = document.getElementById('weather-icon');\r\n \r\n \/\/ Define que o \"Dia\" ocorre entre 06h e 17h59. Restante \u00e9 \"Noite\".\r\n const isDia = horaAtual >= 6 && horaAtual < 18;\r\n\r\n if (isDia) {\r\n \/\/ Modo Frescor \/ Dia Clean\r\n htmlTag.classList.remove('dark');\r\n \/\/ Ajusta o \u00edcone do term\u00f4metro para um sol preenchido (estilo badge premium)\r\n if(weatherIcon) {\r\n weatherIcon.className = \"ph-fill ph-sun text-sm text-orange-500 drop-shadow-sm transition-colors duration-500\";\r\n }\r\n } else {\r\n \/\/ Modo Tecnol\u00f3gico \/ Noite Deep Navy\r\n htmlTag.classList.add('dark');\r\n \/\/ Ajusta o \u00edcone do term\u00f4metro para lua com estrelas preenchida\r\n if(weatherIcon) {\r\n weatherIcon.className = \"ph-fill ph-moon-stars text-sm text-brand-nightAccent drop-shadow-sm transition-colors duration-500\";\r\n }\r\n }\r\n }\r\n\r\n \/\/ Executa ao carregar a p\u00e1gina\r\n aplicarTemaPorHorario();\r\n\r\n \/\/ Opcional: Verifica a cada hora se virou dia\/noite com o site aberto\r\n setInterval(aplicarTemaPorHorario, 3600000);\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b3c832 e-con-full e-flex e-con e-parent\" data-id=\"7b3c832\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b314874 elementor-widget elementor-widget-html\" data-id=\"b314874\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Pr\u00eamio Destaque HVAC-R | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16',\r\n nightBgAlt: '#081121',\r\n nightAccent: '#38BDF8',\r\n primary: '#059669',\r\n primaryHover: '#047857',\r\n award: '#F59E0B' \/\/ Dourado \u00c2mbar exclusivo para pr\u00eamios\r\n }\r\n },\r\n keyframes: {\r\n gradientShift: {\r\n '0%, 100%': { backgroundPosition: '0% 50%' },\r\n '50%': { backgroundPosition: '100% 50%' },\r\n },\r\n premiumPulse: {\r\n '0%, 100%': { boxShadow: '0 0 15px rgba(245, 158, 11, 0.05)', borderColor: 'rgba(245, 158, 11, 0.2)' },\r\n '50%': { boxShadow: '0 0 25px rgba(245, 158, 11, 0.15)', borderColor: 'rgba(245, 158, 11, 0.4)' },\r\n },\r\n trophyScale: {\r\n '0%, 100%': { transform: 'scale(1)' },\r\n '50%': { transform: 'scale(1.03)' },\r\n },\r\n arrowBounce: {\r\n '0%, 100%': { transform: 'translateY(0)' },\r\n '50%': { transform: 'translateY(2px)' },\r\n }\r\n },\r\n animation: {\r\n 'gradient-shift': 'gradientShift 8s ease infinite',\r\n 'premium-pulse': 'premiumPulse 4s ease-in-out infinite',\r\n 'trophy-scale': 'trophyScale 3s ease-in-out infinite',\r\n 'arrow-bounce': 'arrowBounce 2s ease-in-out infinite',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n\r\n \/* Classes para a anima\u00e7\u00e3o de expans\u00e3o suave (Grid Trick) *\/\r\n .expandable-wrapper {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .expandable-wrapper.is-expanded {\r\n grid-template-rows: 1fr;\r\n }\r\n .expandable-inner {\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n \/* Fade out suave e recolhimento limpo ao fechar *\/\r\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\r\n }\r\n .expandable-wrapper.is-expanded .expandable-inner {\r\n opacity: 1;\r\n transform: translateY(0);\r\n \/* Leve delay ao abrir para a caixa crescer primeiro e o texto surgir suave *\/\r\n transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"premio\" class=\"relative w-full py-10 lg:py-14 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-1\/2 right-0 -translate-y-1\/2 w-full max-w-[800px] h-[500px] bg-brand-award opacity-[0.03] blur-[150px] pointer-events-none rounded-full translate-x-1\/3\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div id=\"toggle-premio\" class=\"reveal-on-scroll relative w-full max-w-4xl mx-auto px-5 py-3.5 sm:px-8 sm:py-4 rounded-2xl bg-brand-nightBg border border-brand-award\/30 cursor-pointer group transition-all duration-300 hover:-translate-y-[2px] hover:shadow-[0_0_20px_rgba(245,158,11,0.2)] hover:border-brand-award\/50 animate-premium-pulse overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-brand-award\/5 via-transparent to-brand-award\/10 bg-[length:200%_200%] animate-gradient-shift opacity-60 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n \r\n \r\n <div class=\"flex items-center gap-3 sm:gap-4 text-center sm:text-left\">\r\n <div class=\"w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br from-brand-award\/20 to-transparent border border-brand-award\/20 flex items-center justify-center flex-shrink-0 animate-trophy-scale shadow-[0_0_15px_rgba(245,158,11,0.3)]\">\r\n <i class=\"ph-fill ph-trophy text-xl sm:text-2xl text-[#FCD34D] drop-shadow-[0_0_5px_rgba(245,158,11,0.8)]\"><\/i>\r\n <\/div>\r\n <h2 class=\"text-base sm:text-lg md:text-xl font-bold text-white tracking-wide\">\r\n Pr\u00eamio Destaque do Nordeste <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-[#FCD34D] to-brand-award ml-1\">HVAC-R<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-award\/10 border border-brand-award\/20 text-brand-award text-sm font-semibold group-hover:bg-brand-award group-hover:text-brand-nightBg transition-all duration-300 whitespace-nowrap shadow-inner\">\r\n <span id=\"toggle-text\">Ver detalhes<\/span>\r\n \r\n <div class=\"animate-arrow-bounce\">\r\n <i id=\"toggle-icon\" class=\"ph-bold ph-caret-down transition-transform duration-300\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"premio-content\" class=\"expandable-wrapper mt-0\">\r\n <div class=\"expandable-inner\">\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center pt-12 lg:pt-16\">\r\n \r\n \r\n <div class=\"flex flex-col justify-center\">\r\n \r\n \r\n <p class=\"text-slate-400 text-sm sm:text-base font-light leading-[1.6] max-w-[500px] mb-8\">\r\n O Pr\u00eamio Destaque do Nordeste foi criado para valorizar os profissionais que est\u00e3o na linha de frente do setor HVAC-R. Instaladores, vendedores e auxiliares que contribuem diariamente para o crescimento e qualidade do mercado.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col gap-3 max-w-[500px]\">\r\n \r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-wrench text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Instalador Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">Profissionais que se destacam pela qualidade t\u00e9cnica e execu\u00e7\u00e3o em campo.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-handshake text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Vendedor Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">Especialistas que impulsionam os neg\u00f3cios com excel\u00eancia e atendimento.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 p-3.5 rounded-xl bg-white\/[0.02] border border-white\/5 hover:bg-white\/[0.04] transition-colors group\">\r\n <div class=\"w-10 h-10 rounded-lg bg-brand-award\/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-users-three text-brand-award text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-semibold text-sm sm:text-base mb-0.5\">Auxiliar Destaque<\/h4>\r\n <p class=\"text-slate-400 text-xs sm:text-sm font-light leading-snug\">O apoio fundamental que garante a efici\u00eancia e sucesso nas opera\u00e7\u00f5es di\u00e1rias.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-full h-full p-8 sm:p-10 rounded-3xl border border-white\/10 bg-gradient-to-b from-white\/[0.05] to-transparent backdrop-blur-md flex flex-col items-center justify-center text-center shadow-2xl group overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-[200px] h-[200px] bg-brand-award opacity-[0.10] blur-[80px] pointer-events-none group-hover:opacity-[0.20] transition-opacity duration-500\"><\/div>\r\n\r\n \r\n <div class=\"absolute top-5 right-5 px-3 py-1 rounded-full bg-brand-award\/10 border border-brand-award\/30 text-brand-award text-[10px] sm:text-xs font-bold uppercase tracking-widest shadow-lg shadow-brand-award\/5 animate-pulse\">\r\n Em breve\r\n <\/div>\r\n\r\n \r\n <div class=\"relative w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gradient-to-br from-brand-award\/20 to-transparent flex items-center justify-center mb-5 sm:mb-6 border border-brand-award\/30 group-hover:scale-110 transition-all duration-500 shadow-[0_0_25px_rgba(245,158,11,0.25)]\">\r\n \r\n <div class=\"absolute inset-0 bg-brand-award\/20 blur-xl rounded-full\"><\/div>\r\n <i class=\"ph-fill ph-trophy text-4xl sm:text-5xl text-[#FCD34D] relative z-10 drop-shadow-[0_0_15px_rgba(245,158,11,0.6)]\"><\/i>\r\n <\/div>\r\n\r\n <h3 class=\"text-xl sm:text-2xl lg:text-3xl font-bold text-white mb-2.5 relative z-10\">Participe da vota\u00e7\u00e3o<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm sm:text-base leading-relaxed mb-6 max-w-[280px] sm:max-w-xs relative z-10\">\r\n Vote nos profissionais que realmente fazem a diferen\u00e7a no dia a dia do setor.\r\n <\/p>\r\n\r\n \r\n <div class=\"w-full relative z-10 flex flex-col items-center\">\r\n \r\n <button disabled class=\"w-full sm:w-auto min-w-[200px] px-8 py-3 rounded-xl bg-white\/[0.04] border border-slate-600\/50 text-slate-300 opacity-70 font-semibold text-sm sm:text-base flex items-center justify-center gap-2 cursor-not-allowed transition-all shadow-inner\">\r\n <i class=\"ph-bold ph-lock-key text-lg\"><\/i>\r\n Votar agora\r\n <\/button>\r\n \r\n <p class=\"mt-1.5 text-[10px] sm:text-[11px] text-brand-award\/90 font-medium tracking-wide uppercase\">A vota\u00e7\u00e3o ser\u00e1 aberta em breve<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \/\/ 1. Intersection Observer (Fade-up inicial)\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n\r\n \/\/ 2. L\u00f3gica de Expans\u00e3o (Ver Detalhes)\r\n const toggleBtn = document.getElementById('toggle-premio');\r\n const toggleText = document.getElementById('toggle-text');\r\n const toggleIcon = document.getElementById('toggle-icon');\r\n const contentWrapper = document.getElementById('premio-content');\r\n \r\n let isExpanded = false;\r\n\r\n toggleBtn.addEventListener('click', () => {\r\n isExpanded = !isExpanded;\r\n \r\n if (isExpanded) {\r\n contentWrapper.classList.add('is-expanded');\r\n toggleText.textContent = 'Fechar';\r\n toggleIcon.classList.remove('ph-caret-down');\r\n toggleIcon.classList.add('ph-caret-up');\r\n } else {\r\n contentWrapper.classList.remove('is-expanded');\r\n toggleText.textContent = 'Ver detalhes';\r\n toggleIcon.classList.remove('ph-caret-up');\r\n toggleIcon.classList.add('ph-caret-down');\r\n }\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5351426 e-con-full e-flex e-con e-parent\" data-id=\"5351426\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a16041e elementor-widget elementor-widget-html\" data-id=\"a16041e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Hero Section | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Azul navy profundo (Fundo base escuro)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques\/Frio)\r\n primary: '#059669', \/\/ Verde corporativo (Bot\u00e3o principal)\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n },\r\n keyframes: {\r\n \/\/ Entrada com leve subida\r\n fadeUp: {\r\n '0%': { opacity: '0', transform: 'translateY(25px)' },\r\n '100%': { opacity: '1', transform: 'translateY(0)' }\r\n },\r\n \/\/ Entrada com escala sutil (Para Badges)\r\n fadeInScale: {\r\n '0%': { opacity: '0', transform: 'scale(0.95)' },\r\n '100%': { opacity: '1', transform: 'scale(1)' }\r\n },\r\n \/\/ Movimento quase impercept\u00edvel da imagem\r\n slowZoom: {\r\n '0%': { transform: 'scale(1)' },\r\n '100%': { transform: 'scale(1.05)' }\r\n },\r\n \/\/ Simula\u00e7\u00e3o de fluxo de ar\/temperatura no overlay\r\n airFlow: {\r\n '0%': { backgroundPosition: '0% 50%' },\r\n '50%': { backgroundPosition: '100% 50%' },\r\n '100%': { backgroundPosition: '0% 50%' }\r\n }\r\n },\r\n animation: {\r\n \/\/ Classes de anima\u00e7\u00e3o prontas para uso\r\n 'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',\r\n 'fade-up-delay-1': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards',\r\n 'fade-up-delay-2': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards',\r\n 'fade-up-delay-3': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards',\r\n 'fade-in-scale': 'fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards',\r\n 'slow-zoom': 'slowZoom 20s ease-in-out infinite alternate',\r\n 'air-flow': 'airFlow 15s ease infinite',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n <section class=\"relative w-full min-h-[85vh] flex items-center overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 z-0 overflow-hidden\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581092162384-8987c1d64718?q=80&w=2070&auto=format&fit=crop\" alt=\"Setor de Climatiza\u00e7\u00e3o Industrial\" class=\"w-full h-full object-cover object-center animate-slow-zoom\" \/>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-r from-brand-nightBg via-brand-nightBg\/95 to-brand-nightBg\/60\"><\/div>\r\n \r\n <div class=\"absolute inset-0 bg-brand-nightBg\/50\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-[linear-gradient(120deg,rgba(56,189,248,0.04)_0%,rgba(4,11,22,0)_50%,rgba(5,150,105,0.03)_100%)] bg-[length:200%_200%] animate-air-flow mix-blend-screen pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28\">\r\n \r\n <div class=\"max-w-4xl flex flex-col items-start text-left\">\r\n \r\n \r\n <h1 class=\"flex flex-col tracking-tight leading-[1] mb-6 opacity-0 animate-fade-up\">\r\n <span class=\"text-xl sm:text-2xl md:text-3xl lg:text-3xl font-extrabold tracking-wide text-white\/80 uppercase mb-1.5\">HVAC-R<\/span>\r\n <span class=\"text-5xl sm:text-6xl md:text-7xl lg:text-[6rem] font-black text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400 pb-1\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/h1>\r\n\r\n \r\n <h2 class=\"text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold text-white mb-5 max-w-4xl leading-snug opacity-0 animate-fade-up-delay-1\">\r\n A maior feira de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o <br class=\"hidden sm:block\" \/> do Norte e Nordeste.\r\n <\/h2>\r\n\r\n \r\n <p class=\"text-base sm:text-lg lg:text-xl text-slate-300 max-w-2xl leading-relaxed mb-12 lg:mb-14 font-light opacity-0 animate-fade-up-delay-2\">\r\n O principal encontro do setor HVAC-R na regi\u00e3o, reunindo empresas, profissionais e inova\u00e7\u00e3o.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5 mb-12 lg:mb-16 opacity-0 animate-fade-in-scale\">\r\n \r\n \r\n <div class=\"flex items-center gap-3.5 px-5 py-3 rounded-xl bg-white\/5 backdrop-blur-md border border-white\/10 shadow-lg hover:bg-white\/10 transition-colors duration-300 cursor-default\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-lg bg-brand-nightAccent\/20 text-brand-nightAccent\">\r\n <i class=\"ph-bold ph-calendar-blank text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-sm md:text-base font-semibold text-white tracking-wide\">04 e 05 de Setembro de 2026<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-3.5 px-5 py-3 rounded-xl bg-white\/5 backdrop-blur-md border border-white\/10 shadow-lg hover:bg-white\/10 transition-colors duration-300 cursor-default\">\r\n <div class=\"flex items-center justify-center w-10 h-10 rounded-lg bg-brand-nightAccent\/20 text-brand-nightAccent\">\r\n <i class=\"ph-bold ph-map-pin text-xl\"><\/i>\r\n <\/div>\r\n <span class=\"text-sm md:text-base font-semibold text-white tracking-wide\">Recife Expo Center<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 sm:gap-6 w-full sm:w-auto opacity-0 animate-fade-up-delay-3\">\r\n \r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center gap-2 w-full sm:w-auto px-9 py-4 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-bold text-base md:text-lg transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-xl hover:shadow-brand-primary\/40 transform hover:-translate-y-[2px]\">\r\n Quero Participar\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n\r\n \r\n \r\n <a href=\"#\" class=\"flex items-center justify-center w-full sm:w-auto px-9 py-4 rounded-lg border border-slate-400 text-white hover:border-brand-nightAccent hover:text-brand-nightAccent hover:bg-brand-nightAccent\/10 font-bold text-base md:text-lg transition-all duration-300 shadow-sm hover:shadow-xl hover:shadow-brand-nightAccent\/10 transform hover:-translate-y-[2px]\">\r\n Quero Expor\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-brand-nightBg to-transparent z-10 pointer-events-none\"><\/div>\r\n\r\n <\/section>\r\n \r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c391cf e-con-full e-flex e-con e-parent\" data-id=\"9c391cf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db652dc elementor-widget elementor-widget-html\" data-id=\"db652dc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Expositores e Marcas | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo (Usado nesta se\u00e7\u00e3o)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para efeito em cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n .delay-400 { transition-delay: 400ms; }\r\n .delay-500 { transition-delay: 500ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"expositores\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-0 right-0 w-full max-w-[600px] h-[600px] bg-brand-nightAccent opacity-[0.02] blur-[150px] pointer-events-none rounded-full translate-x-[30%] translate-y-[-30%]\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <span class=\"reveal-on-scroll text-brand-nightAccent font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 block\">\r\n Marcas Confirmadas\r\n <\/span>\r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight tracking-tight\">\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Expositores<\/span> e <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Marcas<\/span> Confirmadas\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-200 text-slate-400 text-base sm:text-lg font-light leading-relaxed\">\r\n Empresas que fazem parte do principal encontro do setor HVAC-R.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n\r\n \r\n <div class=\"w-full\">\r\n \r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+1\" alt=\"Logo Expositor 1\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-100 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+2\" alt=\"Logo Expositor 2\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+3\" alt=\"Logo Expositor 3\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+4\" alt=\"Logo Expositor 4\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+5\" alt=\"Logo Expositor 5\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+6\" alt=\"Logo Expositor 6\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+7\" alt=\"Logo Expositor 7\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+8\" alt=\"Logo Expositor 8\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-500 flex items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:bg-white\/[0.04] hover:shadow-xl hover:shadow-brand-nightAccent\/10 group cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/300x100\/transparent\/FFFFFF?text=MARCA+9\" alt=\"Logo Expositor 9\" class=\"max-w-full max-h-full object-contain opacity-60 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 group-hover:scale-105\" \/>\r\n <\/div>\r\n\r\n \r\n <a href=\"#\" class=\"reveal-on-scroll delay-500 col-span-1 sm:col-span-1 lg:col-span-2 xl:col-span-1 flex flex-col items-center justify-center p-6 sm:p-8 h-28 sm:h-32 rounded-xl border-2 border-dashed border-white\/20 bg-brand-nightBgAlt hover:border-brand-primary\/50 hover:bg-brand-primary\/5 transition-all duration-300 group text-center gap-2 relative overflow-hidden\">\r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-primary\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300\"><\/div>\r\n\r\n \r\n <div class=\"flex flex-col items-center gap-1 z-10 transition-transform duration-300 group-hover:-translate-y-2\">\r\n <i class=\"ph-bold ph-plus text-xl text-slate-400 group-hover:text-brand-primary transition-colors\"><\/i>\r\n <span class=\"text-xs sm:text-sm font-medium text-slate-400 group-hover:text-white transition-colors\">Sua marca pode estar aqui<\/span>\r\n <\/div>\r\n \r\n \r\n <div class=\"absolute bottom-4 opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 z-10\">\r\n <span class=\"inline-flex items-center justify-center px-4 py-1.5 rounded-md bg-brand-primary text-white text-xs font-semibold shadow-lg\">\r\n Quero Expor\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Ativa quando 15% do elemento aparece\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const targetEl = entry.target;\r\n targetEl.classList.add('reveal-visible');\r\n observer.unobserve(targetEl);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Inicia a observa\u00e7\u00e3o de todos os elementos revel\u00e1veis\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6dff2f7 e-con-full e-flex e-con e-parent\" data-id=\"6dff2f7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a08bd98 elementor-widget elementor-widget-html\" data-id=\"a08bd98\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Sobre o Evento | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base (Usado na Hero)\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo (Para separar se\u00e7\u00f5es sutilmente)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para criar efeito cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBgAlt\">\r\n\r\n \r\n <section id=\"sobre\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBgAlt\">\r\n \r\n \r\n <div class=\"absolute top-0 left-0 w-full max-w-[600px] h-[600px] bg-brand-nightAccent opacity-[0.03] blur-[150px] pointer-events-none rounded-full translate-x-[-30%] translate-y-[-30%]\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-28 items-center\">\r\n \r\n \r\n <div class=\"flex flex-col\">\r\n \r\n \r\n <span class=\"reveal-on-scroll text-brand-nightAccent font-bold uppercase tracking-widest text-xs sm:text-sm mb-5\">\r\n Sobre o Evento\r\n <\/span>\r\n\r\n \r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-10 leading-[1.15] tracking-tight\">\r\n O principal encontro do setor HVAC-R no <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">Norte e Nordeste<\/span>\r\n <\/h2>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 space-y-6 text-slate-300 text-base sm:text-lg font-light leading-[1.7] max-w-xl mb-10\">\r\n <p>\r\n O <strong class=\"font-semibold text-white\">HVAC-R Norte Nordeste<\/strong> \u00e9 uma feira dedicada aos profissionais, empresas e especialistas do setor de climatiza\u00e7\u00e3o, refrigera\u00e7\u00e3o, ventila\u00e7\u00e3o e tecnologias relacionadas.\r\n <\/p>\r\n <p>\r\n O evento re\u00fane fabricantes, distribuidores, instaladores, engenheiros e especialistas em um ambiente voltado para neg\u00f3cios, inova\u00e7\u00e3o e networking qualificado.\r\n <\/p>\r\n <p>\r\n Durante os dois dias de evento, os participantes ter\u00e3o acesso a lan\u00e7amentos, solu\u00e7\u00f5es tecnol\u00f3gicas, conte\u00fado t\u00e9cnico e oportunidades reais de conex\u00e3o com o mercado.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 relative w-full h-[400px] sm:h-[500px] lg:h-[600px] rounded-2xl overflow-hidden shadow-2xl shadow-black\/40 group\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540575467063-178a50c2df87?q=80&w=2070&auto=format&fit=crop\" alt=\"Vis\u00e3o de um grande evento de neg\u00f3cios e tecnologia\" class=\"w-full h-full object-cover object-center transition-transform duration-[800ms] ease-out group-hover:scale-[1.03]\" \/>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-[#040B16]\/40 mix-blend-multiply pointer-events-none\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-t from-brand-nightBg via-transparent to-transparent opacity-80 pointer-events-none\"><\/div>\r\n \r\n \r\n <div class=\"absolute inset-0 border border-white\/10 rounded-2xl pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n \r\n <div class=\"mt-24 lg:mt-32 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n \r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-users-three text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Networking Qualificado<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Conecte-se com l\u00edderes, fabricantes e especialistas renomados do mercado.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-cpu text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Inova\u00e7\u00e3o e Tecnologia<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Acesso em primeira m\u00e3o aos principais lan\u00e7amentos e tend\u00eancias globais.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-handshake text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Oportunidade de Neg\u00f3cios<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Um ambiente imersivo desenhado especificamente para fechar grandes acordos.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col p-8 rounded-2xl bg-white\/[0.03] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.06] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group\">\r\n <div class=\"w-12 h-12 rounded-lg bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-graduation-cap text-2xl\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg mb-3\">Conte\u00fado T\u00e9cnico<\/h3>\r\n <p class=\"text-slate-400 text-sm font-light leading-[1.6]\">Palestras, capacita\u00e7\u00f5es e workshops com grandes autoridades do setor.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Dispara quando 15% do elemento estiver vis\u00edvel\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target); \/\/ Para a anima\u00e7\u00e3o ap\u00f3s acontecer a 1\u00aa vez\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Seleciona todos os elementos com a classe 'reveal-on-scroll'\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-29ba572 e-con-full e-flex e-con e-parent\" data-id=\"29ba572\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27d2a97 elementor-widget elementor-widget-html\" data-id=\"27d2a97\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>N\u00fameros do Evento | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Fundo Base\r\n nightBgAlt: '#081121', \/\/ Fundo Alternativo\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro (Destaques)\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n \/* Classes auxiliares para a anima\u00e7\u00e3o de scroll (Reveal) *\/\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \/* Delays para efeito em cascata *\/\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n .delay-400 { transition-delay: 400ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n <section id=\"numeros\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-brand-nightBg\">\r\n \r\n \r\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full max-w-[800px] h-[400px] bg-brand-nightAccent opacity-[0.03] blur-[120px] pointer-events-none rounded-full\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <span class=\"reveal-on-scroll text-brand-primary font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 block\">\r\n Impacto e Alcance\r\n <\/span>\r\n <h2 class=\"reveal-on-scroll delay-100 text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 leading-tight tracking-tight\">\r\n Um evento de <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-brand-primary\">grande impacto<\/span>\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-200 text-slate-400 text-base sm:text-lg font-light leading-relaxed\">\r\n Conectando milhares de profissionais e empresas do setor HVAC-R.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"text-brand-nightAccent text-lg lg:text-xl font-bold mr-2\">+ de<\/span>\r\n \r\n <span class=\"counter tabular-nums inline-block min-w-[110px] lg:min-w-[140px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"5000\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Visitantes<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Profissionais do setor<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-primary\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"counter tabular-nums inline-block min-w-[50px] lg:min-w-[60px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"2\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Dias de Evento<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Imers\u00e3o completa<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-nightAccent\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n <span class=\"text-brand-nightAccent text-lg lg:text-xl font-bold mr-2\">+ de<\/span>\r\n <span class=\"counter tabular-nums inline-block min-w-[70px] lg:min-w-[85px] text-center text-5xl lg:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\" data-target=\"20\">0<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Expositores<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Apresentando solu\u00e7\u00f5es<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-400 flex flex-col items-center justify-center p-8 lg:p-10 rounded-2xl bg-white\/[0.02] border border-white\/10 backdrop-blur-sm transition-all duration-300 hover:-translate-y-[5px] hover:bg-white\/[0.04] hover:shadow-2xl hover:shadow-brand-primary\/10 group text-center\">\r\n <div class=\"mb-2 flex items-center justify-center\">\r\n \r\n <span class=\"text-4xl lg:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300\">Grandes<\/span>\r\n <\/div>\r\n <h3 class=\"text-white font-semibold text-lg tracking-wide mb-1\">Marcas do Setor<\/h3>\r\n <p class=\"text-slate-500 text-sm font-light\">Reunidas em um s\u00f3 lugar<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n \r\n \/\/ 1. Fun\u00e7\u00e3o de Count-Up (Anima\u00e7\u00e3o dos N\u00fameros)\r\n const animateCounters = (counterElement) => {\r\n const target = +counterElement.getAttribute('data-target');\r\n const duration = 2000; \/\/ Tempo total da anima\u00e7\u00e3o em milissegundos\r\n const frameRate = 30; \/\/ Atualiza a cada 30ms\r\n const totalFrames = Math.round(duration \/ frameRate);\r\n const increment = target \/ totalFrames;\r\n \r\n let currentCount = 0;\r\n\r\n const timer = setInterval(() => {\r\n currentCount += increment;\r\n \r\n if (currentCount >= target) {\r\n \/\/ Garante que o n\u00famero final seja exato\r\n counterElement.innerText = target.toLocaleString('pt-BR');\r\n clearInterval(timer);\r\n } else {\r\n \/\/ Atualiza o texto formatando com ponto de milhar\r\n counterElement.innerText = Math.ceil(currentCount).toLocaleString('pt-BR');\r\n }\r\n }, frameRate);\r\n };\r\n\r\n \/\/ 2. Intersection Observer (Controla Fade-up e Count-Up simultaneamente)\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15 \/\/ Ativa quando 15% do elemento aparece\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const targetEl = entry.target;\r\n \r\n \/\/ Executa o fade-up\r\n targetEl.classList.add('reveal-visible');\r\n \r\n \/\/ Se for um card e tiver um contador dentro, inicia o count-up\r\n const counterInside = targetEl.querySelector('.counter');\r\n if (counterInside && !counterInside.classList.contains('counted')) {\r\n animateCounters(counterInside);\r\n counterInside.classList.add('counted'); \/\/ Trava para animar apenas uma vez\r\n }\r\n\r\n observer.unobserve(targetEl);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Inicia a observa\u00e7\u00e3o de todos os elementos que devem aparecer suavemente\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc33675 e-con-full e-flex e-con e-parent\" data-id=\"cc33675\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a5dbb9 elementor-widget elementor-widget-html\" data-id=\"5a5dbb9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>CTA | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16',\r\n nightBgAlt: '#081121',\r\n nightAccent: '#38BDF8',\r\n primary: '#059669',\r\n primaryHover: '#047857'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .delay-100 { transition-delay: 100ms; }\r\n .delay-200 { transition-delay: 200ms; }\r\n .delay-300 { transition-delay: 300ms; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-nightBg\">\r\n\r\n \r\n \r\n <section id=\"cta\" class=\"relative w-full py-24 lg:py-32 overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-[#0a1930] via-brand-nightBg to-brand-nightBg\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-full max-w-[1000px] h-[400px] bg-brand-nightAccent opacity-[0.04] blur-[120px] pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-[1200px] w-full mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-16 lg:mb-20\">\r\n <h2 class=\"reveal-on-scroll text-3xl sm:text-4xl md:text-5xl lg:text-[54px] font-black text-white mb-6 leading-[1.15] tracking-tight\">\r\n Fa\u00e7a parte do <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-brand-nightAccent to-blue-400\">maior evento<\/span> de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o da regi\u00e3o.\r\n <\/h2>\r\n <p class=\"reveal-on-scroll delay-100 text-slate-300 text-base sm:text-lg lg:text-xl font-light leading-relaxed\">\r\n Garanta sua participa\u00e7\u00e3o ou posicione sua marca no evento que conecta profissionais, empresas e inova\u00e7\u00e3o.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 mb-16\">\r\n \r\n \r\n <div class=\"reveal-on-scroll delay-100 flex flex-col items-center text-center p-8 lg:p-12 rounded-3xl bg-white\/[0.02] border border-white\/10 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 hover:bg-white\/[0.04] hover:shadow-[0_20px_40px_-15px_rgba(5,150,105,0.2)] group relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-primary\/0 to-brand-primary\/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"w-16 h-16 rounded-2xl bg-brand-primary\/10 text-brand-primary flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-ticket text-3xl\"><\/i>\r\n <\/div>\r\n \r\n <h3 class=\"text-2xl lg:text-3xl font-bold text-white mb-4\">Quero participar<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm lg:text-base leading-relaxed mb-10 flex-grow max-w-sm\">\r\n Participe de dois dias de conte\u00fado t\u00e9cnico, networking e oportunidades no maior encontro do setor HVAC-R da regi\u00e3o.\r\n <\/p>\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-10 py-4 rounded-xl bg-brand-primary hover:bg-brand-primaryHover text-white font-bold text-lg transition-all duration-300 shadow-lg shadow-brand-primary\/25 hover:shadow-xl hover:shadow-brand-primary\/40 transform hover:-translate-y-1 flex items-center justify-center gap-2\">\r\n Garantir minha vaga\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-200 flex flex-col items-center text-center p-8 lg:p-12 rounded-3xl bg-white\/[0.02] border border-white\/10 backdrop-blur-md transition-all duration-500 hover:-translate-y-2 hover:bg-white\/[0.04] hover:shadow-[0_20px_40px_-15px_rgba(56,189,248,0.2)] group relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute inset-0 bg-gradient-to-b from-brand-nightAccent\/0 to-brand-nightAccent\/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none\"><\/div>\r\n\r\n <div class=\"w-16 h-16 rounded-2xl bg-brand-nightAccent\/10 text-brand-nightAccent flex items-center justify-center mb-6 group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300\">\r\n <i class=\"ph-fill ph-storefront text-3xl\"><\/i>\r\n <\/div>\r\n \r\n <h3 class=\"text-2xl lg:text-3xl font-bold text-white mb-4\">Quero expor minha marca<\/h3>\r\n \r\n <p class=\"text-slate-400 text-sm lg:text-base leading-relaxed mb-10 flex-grow max-w-sm\">\r\n Apresente seus produtos, gere neg\u00f3cios e conecte sua empresa com milhares de profissionais do setor.\r\n <\/p>\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-10 py-4 rounded-xl bg-brand-nightAccent hover:bg-[#20a7e0] text-brand-nightBg font-bold text-lg transition-all duration-300 shadow-lg shadow-brand-nightAccent\/25 hover:shadow-xl hover:shadow-brand-nightAccent\/40 transform hover:-translate-y-1 flex items-center justify-center gap-2\">\r\n Quero ser expositor\r\n <i class=\"ph-bold ph-arrow-right text-xl\"><\/i>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"reveal-on-scroll delay-300 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 pt-8 border-t border-white\/10\">\r\n <div class=\"flex items-center gap-2.5 text-slate-300\">\r\n <i class=\"ph-bold ph-calendar-blank text-brand-nightAccent text-lg\"><\/i>\r\n <span class=\"font-medium tracking-wide\">04 e 05 de Setembro de 2026<\/span>\r\n <\/div>\r\n <div class=\"hidden sm:block text-slate-600\">\u2022<\/div>\r\n <div class=\"flex items-center gap-2.5 text-slate-300\">\r\n <i class=\"ph-bold ph-map-pin text-brand-primary text-lg\"><\/i>\r\n <span class=\"font-medium tracking-wide\">Recife Expo Center<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n \r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observerOptions = {\r\n root: null,\r\n rootMargin: '0px',\r\n threshold: 0.15\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('reveal-visible');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.reveal-on-scroll').forEach((el) => {\r\n observer.observe(el);\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-41fefc0 e-con-full e-flex e-con e-parent\" data-id=\"41fefc0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d6208a elementor-widget elementor-widget-html\" data-id=\"0d6208a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Rodap\u00e9 Profissional | HVAC-R Norte Nordeste<\/title>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@phosphor-icons\/web\"><\/script>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\r\n\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Inter', 'sans-serif'],\r\n },\r\n colors: {\r\n brand: {\r\n nightBg: '#040B16', \/\/ Azul navy muito profundo (Premium)\r\n nightAccent: '#38BDF8', \/\/ Ciano\/Azul claro vibrante\r\n primary: '#059669', \/\/ Verde corporativo\r\n primaryHover: '#047857' \/\/ Verde escuro hover\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style>\r\n \/* Estilo apenas para empurrar o footer para o final da tela na visualiza\u00e7\u00e3o isolada *\/\r\n body {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 100vh;\r\n background-color: #f8fafc;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n \r\n <footer class=\"w-full bg-brand-nightBg border-t border-slate-800\/60 flex flex-col relative overflow-hidden\">\r\n \r\n \r\n <div class=\"absolute top-0 left-1\/2 -translate-x-1\/2 w-full max-w-[800px] h-32 bg-brand-nightAccent opacity-5 blur-[120px] pointer-events-none\"><\/div>\r\n\r\n \r\n <div class=\"w-full border-b border-slate-800\/60 relative z-10\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-8 text-center lg:text-left\">\r\n \r\n \r\n <h2 class=\"text-2xl lg:text-3xl font-bold text-white max-w-2xl leading-tight tracking-tight\">\r\n Participe do maior evento de climatiza\u00e7\u00e3o e refrigera\u00e7\u00e3o do <span class=\"text-brand-nightAccent\">Norte<\/span> e <span class=\"text-brand-nightAccent\">Nordeste<\/span>\r\n <\/h2>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto\">\r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-6 py-3 rounded-lg border border-slate-600 text-slate-300 hover:border-brand-nightAccent hover:text-brand-nightAccent hover:bg-brand-nightAccent\/5 font-semibold text-sm transition-all duration-300 whitespace-nowrap\">\r\n Quero Expor\r\n <\/a>\r\n \r\n \r\n <a href=\"#\" class=\"w-full sm:w-auto px-8 py-3 rounded-lg bg-brand-primary hover:bg-brand-primaryHover text-white font-semibold text-sm transition-all duration-300 shadow-lg shadow-brand-primary\/20 hover:shadow-brand-primary\/40 hover:-translate-y-0.5 whitespace-nowrap\">\r\n Quero Participar\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"max-w-[1400px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16\">\r\n \r\n \r\n <div class=\"flex flex-col\">\r\n <a href=\"#\" class=\"flex items-center gap-3.5 group mb-6 w-fit\">\r\n <div class=\"w-11 h-11 rounded-xl bg-gradient-to-br from-blue-600 to-brand-nightAccent flex items-center justify-center shadow-md\">\r\n <i class=\"ph ph-wind text-2xl text-white\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center mt-0.5\">\r\n <span class=\"font-black text-2xl tracking-tighter text-white leading-none mb-1\">\r\n HVAC-R\r\n <\/span>\r\n <span class=\"font-bold text-[9px] tracking-[0.25em] text-slate-400 uppercase leading-none\">\r\n Norte Nordeste\r\n <\/span>\r\n <\/div>\r\n <\/a>\r\n <p class=\"text-slate-400 text-sm leading-relaxed max-w-xs pr-4\">\r\n Evento focado em climatiza\u00e7\u00e3o, refrigera\u00e7\u00e3o, inova\u00e7\u00e3o e neg\u00f3cios no Norte e Nordeste.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col\">\r\n <h3 class=\"text-brand-nightAccent font-bold uppercase tracking-widest text-xs mb-6\">\u00c1rea Comercial<\/h3>\r\n <ul class=\"flex flex-col space-y-3\">\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">Seja Expositor<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">\u00c1rea do Expositor<\/a><\/li>\r\n <li><a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-all duration-300 hover:translate-x-1 inline-flex w-fit\">Credenciamento<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-col\">\r\n <h3 class=\"text-brand-nightAccent font-bold uppercase tracking-widest text-xs mb-6\">Contato<\/h3>\r\n <ul class=\"flex flex-col space-y-4\">\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-envelope text-lg text-slate-500 mt-0.5\"><\/i>\r\n <a href=\"mailto:contato@hvacrnortenordeste.com.br\" class=\"text-slate-400 hover:text-white text-sm transition-colors break-all\">contato@hvacrnortenordeste.com.br<\/a>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-whatsapp text-lg text-slate-500 mt-0.5\"><\/i>\r\n <a href=\"#\" class=\"text-slate-400 hover:text-white text-sm transition-colors\">(00) 00000-0000<\/a>\r\n <\/li>\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"ph ph-map-pin text-lg text-slate-500 mt-0.5\"><\/i>\r\n <span class=\"text-slate-400 text-sm\">Recife - PE<\/span>\r\n <\/li>\r\n <\/ul>\r\n \r\n \r\n <div class=\"flex items-center gap-3 mt-8\">\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-instagram-logo text-lg\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-linkedin-logo text-lg\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"w-9 h-9 rounded-full bg-slate-800\/80 border border-slate-700\/50 flex items-center justify-center text-slate-400 hover:bg-brand-primary hover:border-brand-primary hover:text-white transition-all duration-300 hover:-translate-y-1\">\r\n <i class=\"ph ph-youtube-logo text-lg\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full border-t border-slate-800\/60 bg-[#02060D] relative z-10\">\r\n <div class=\"max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-5\">\r\n <div class=\"flex flex-col lg:flex-row items-center justify-between gap-4 text-[11px] text-slate-500 uppercase tracking-wider font-medium text-center lg:text-left\">\r\n \r\n <span>© 2026 HVAC-R Norte Nordeste. Todos os direitos reservados.<\/span>\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-2 sm:gap-6\">\r\n <span>Realiza\u00e7\u00e3o: Parceiros do Clima<\/span>\r\n <span class=\"hidden sm:block text-slate-700\">\u2022<\/span>\r\n <span>\r\n Desenvolvido por \r\n <a href=\"#\" target=\"_blank\" class=\"text-brand-nightAccent hover:text-white transition-colors duration-300 ml-1\">GO84<\/a>\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n \r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Topo Profissional | HVAC-R Norte Nordeste HVAC-R Norte Nordeste In\u00edcio O Evento Expositores Programa\u00e7\u00e3o Patrocinadores Not\u00edcias Contato Quero Expor Quero Participar 04 e 05 Set 2026 \u2022 Recife Expo Center \u2022 Recife agora: 29\u00b0C Credenciamento Seja Expositor Mapa da Feira \u00c1rea do Expositor In\u00edcio O Evento Expositores Programa\u00e7\u00e3o Patrocinadores Not\u00edcias Contato Quero Participar Quero Expor […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1386","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=1386"}],"version-history":[{"count":34,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386\/revisions"}],"predecessor-version":[{"id":1421,"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/pages\/1386\/revisions\/1421"}],"wp:attachment":[{"href":"https:\/\/get84.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=1386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}