El Ni\u00f1o - Entenda o Fen\u00f4meno | Epagri\/Ciram<\/title>\n <meta name=\"description\" content=\"Hotsite cient\u00edfico sobre o fen\u00f4meno El Ni\u00f1o, monitoramento e impactos em Santa Catarina.\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'eno-green': '#72BC7A',\n 'eno-dark-green': '#135126',\n 'eno-black': '#000000',\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style>\n body { font-family: 'Inter', sans-serif; background-color: #000000; color: #ffffff; }\n .glow-text { text-shadow: 0 0 40px rgba(114, 188, 122, 0.5), 0 0 80px rgba(19, 81, 38, 0.4); }\n .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }\n .glass-nav { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(114, 188, 122, 0.15); }\n .radial-hero { background: radial-gradient(circle at 50% 30%, rgba(19, 81, 38, 0.4) 0%, rgba(0, 0, 0, 0.95) 60%, #000000 100%); }\n .grid-overlay { background-image: linear-gradient(rgba(114, 188, 122, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 188, 122, 0.05) 1px, transparent 1px); background-size: 60px 60px; }\n .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }\n .reveal.active { opacity: 1; transform: translateY(0); }\n .tab-active { background: rgba(114, 188, 122, 0.15); border-color: #72BC7A; color: #72BC7A; }\n .timeline-dot { box-shadow: 0 0 0 4px rgba(114, 188, 122, 0.2); }\n .timeline-dot.active { box-shadow: 0 0 0 6px rgba(114, 188, 122, 0.3); background-color: #72BC7A; }\n .share-fab { background: linear-gradient(135deg, #135126, #72BC7A); }\n \/* Walker SVG animations *\/\n @keyframes flowRight { 0% { transform: translateX(-10px); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translateX(10px); opacity: 0.4; } }\n @keyframes flowLeft { 0% { transform: translateX(10px); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translateX(-10px); opacity: 0.4; } }\n @keyframes rise { 0% { transform: translateY(8px); opacity: 0.5; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0.5; } }\n @keyframes sink { 0% { transform: translateY(-8px); opacity: 0.5; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0.5; } }\n .anim-right { animation: flowRight 2.5s ease-in-out infinite; }\n .anim-left { animation: flowLeft 2.5s ease-in-out infinite; }\n .anim-rise { animation: rise 2.5s ease-in-out infinite; }\n .anim-sink { animation: sink 2.5s ease-in-out infinite; }\n .cloud-pulse { animation: rise 3s ease-in-out infinite; }\n <\/style>\n<\/head>\n<body class=\"antialiased overflow-x-hidden\">\n\n \n <div id=\"progressBar\" class=\"fixed top-0 left-0 h-1 bg-gradient-to-r from-eno-dark-green to-eno-green z-[100] transition-all duration-100\" style=\"width: 0%;\"><\/div>\n\n \n <nav id=\"mainNav\" class=\"fixed top-0 w-full z-50 glass-nav transition-all duration-300\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <a href=\"#hero\" class=\"flex items-center gap-2 group\">\n <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-eno-dark-green to-eno-green flex items-center justify-center\">\n <i data-lucide=\"waves\" class=\"w-4 h-4 text-white\"><\/i>\n <\/div>\n <span class=\"font-bold tracking-tight text-white group-hover:text-eno-green transition-colors\">El Ni\u00f1o<\/span>\n <\/a>\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-gray-300\">\n <a href=\"#o-que-e\" class=\"hover:text-eno-green transition-colors\">O que \u00e9<\/a>\n <a href=\"#monitoramento\" class=\"hover:text-eno-green transition-colors\">Monitoramento<\/a>\n <a href=\"#impactos\" class=\"hover:text-eno-green transition-colors\">Impactos<\/a>\n <a href=\"#mitos\" class=\"hover:text-eno-green transition-colors\">Perguntas Frequentes<\/a>\n <a href=\"#serie-historica\" class=\"hover:text-eno-green transition-colors\">Eventos de El Ni\u00f1o<\/a>\n <\/div>\n <button id=\"mobileMenuBtn\" class=\"md:hidden text-white hover:text-eno-green\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"mobileMenu\" class=\"hidden md:hidden glass-nav border-t border-white\/10\">\n <div class=\"px-4 py-4 space-y-3 text-sm\">\n <a href=\"#o-que-e\" class=\"block text-gray-300 hover:text-eno-green\">O que \u00e9<\/a>\n <a href=\"#monitoramento\" class=\"block text-gray-300 hover:text-eno-green\">Monitoramento<\/a>\n <a href=\"#impactos\" class=\"block text-gray-300 hover:text-eno-green\">Impactos<\/a>\n <a href=\"#mitos\" class=\"block text-gray-300 hover:text-eno-green\">Perguntas Frequentes<\/a>\n <a href=\"#serie-historica\" class=\"block text-gray-300 hover:text-eno-green\">S\u00e9rie Hist\u00f3rica<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section id=\"hero\" class=\"relative min-h-screen flex items-center justify-center radial-hero grid-overlay overflow-hidden pt-16\">\n <div id=\"heroParallax\" class=\"absolute inset-0 pointer-events-none\">\n <div class=\"absolute top-1\/4 left-1\/4 w-96 h-96 bg-eno-dark-green\/20 rounded-full blur-[120px]\"><\/div>\n <div class=\"absolute bottom-1\/4 right-1\/4 w-80 h-80 bg-eno-green\/10 rounded-full blur-[100px]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"text-center lg:text-left\">\n \n <h1 class=\"text-6xl sm:text-7xl lg:text-8xl font-extrabold tracking-tight text-white glow-text mb-6\">\n El Ni\u00f1o\n <\/h1>\n <p class=\"text-xl sm:text-2xl text-gray-300 font-light mb-4\">\n Entenda o Fen\u00f4meno\n <\/p>\n <p class=\"text-gray-400 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed\">\n Uma an\u00e1lise cient\u00edfica sobre o El Ni\u00f1o-Oscila\u00e7\u00e3o Sul (ENOS), seus mecanismos, \u00edndices de monitoramento e impactos no Sul do Brasil.\n <\/p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\n <a href=\"#o-que-e\" class=\"inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-eno-dark-green hover:bg-eno-green text-white font-medium transition-all duration-300 hover:shadow-[0_0_30px_rgba(114,188,122,0.3)]\">\n Explorar o fen\u00f4meno\n <i data-lucide=\"arrow-down\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#monitoramento\" class=\"inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg glass-panel hover:bg-white\/5 text-white font-medium transition-all duration-300\">\n <i data-lucide=\"activity\" class=\"w-4 h-4 text-eno-green\"><\/i>\n \u00cdndices t\u00e9cnicos\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <div class=\"glass-panel rounded-2xl p-8 relative\">\n <h3 class=\"text-lg font-semibold text-white mb-6 flex items-center gap-2\">\n <i data-lucide=\"git-branch\" class=\"w-5 h-5 text-eno-green\"><\/i>\n Fases do Fen\u00f4meno\n <\/h3>\n <div class=\"relative pl-8\">\n <div class=\"absolute left-3 top-0 bottom-0 w-0.5 bg-gradient-to-b from-eno-green via-eno-dark-green to-gray-700\"><\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"0\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-eno-green timeline-dot active transition-all group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Neutra<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"1\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Aquecimento<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Anomalias positivas de TSM come\u00e7am a se organizar.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"2\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">El Ni\u00f1o<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Aquecimento an\u00f4malo consolidado no Pac\u00edfico Equatorial.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer group\" data-stage=\"3\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Impactos<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global e regional.<\/p>\n <\/div>\n <\/div>\n <div id=\"stageInfo\" class=\"mt-6 p-4 rounded-xl bg-eno-dark-green\/20 border border-eno-green\/20\">\n <p class=\"text-sm text-eno-green font-medium\">Selecione uma fase para visualizar detalhes<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"o-que-e\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div class=\"reveal\">\n <div class=\"flex items-center gap-3 mb-6\">\n <div class=\"w-10 h-10 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center border border-eno-green\/30\">\n <i data-lucide=\"info\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white\">O que \u00e9 o El Ni\u00f1o?<\/h2>\n <\/div>\n <div class=\"space-y-6 text-gray-300 leading-relaxed text-lg\">\n <p>\n El Ni\u00f1o representa uma das fases de manifesta\u00e7\u00e3o do fen\u00f4meno atmosf\u00e9rico-oce\u00e2nico El Ni\u00f1o-Oscila\u00e7\u00e3o Sul (ENOS). De maneira geral, o ENOS altera padr\u00f5es de temperatura da superf\u00edcie do mar (TSM) e circula\u00e7\u00e3o atmosf\u00e9rica global, apresentando tr\u00eas fases principais:\n <\/p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-eno-green flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase El Ni\u00f1o:<\/strong> caracterizada pelo aquecimento an\u00f4malo das \u00e1guas superficiais do Pac\u00edfico Equatorial central e leste.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-blue-400 flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase La Ni\u00f1a:<\/strong> identificada pelo resfriamento an\u00f4malo nessas mesmas regi\u00f5es oce\u00e2nicas.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-gray-400 flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase Neutra:<\/strong> quando n\u00e3o h\u00e1 anomalias significativas nessas \u00e1reas, mantendo-se condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n \n\t\t\t\t\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"monitoramento\" class=\"relative py-24 bg-gradient-to-b from-black to-eno-dark-green\/10\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">\u00cdndices de Monitoramento do ENOS<\/h2>\n <p class=\"text-gray-400\">Acompanhamento t\u00e9cnico dos principais \u00edndices utilizados para caracterizar as fases do fen\u00f4meno.<\/p>\n <\/div>\n\n <div class=\"reveal\">\n \n <div class=\"flex flex-col sm:flex-row gap-3 mb-8\">\n <button class=\"tab-btn tab-active flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left transition-all duration-300 hover:bg-white\/5\" data-tab=\"oni\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice ONI<\/span>\n <i data-lucide=\"thermometer\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <\/button>\n <button class=\"tab-btn flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left text-gray-400 transition-all duration-300 hover:bg-white\/5 hover:text-white\" data-tab=\"soi\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice SOI<\/span>\n <i data-lucide=\"wind\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <\/button>\n <button class=\"tab-btn flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left text-gray-400 transition-all duration-300 hover:bg-white\/5 hover:text-white\" data-tab=\"roni\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice RONI<\/span>\n <i data-lucide=\"trending-up\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <\/button>\n <\/div>\n\n \n <div class=\"glass-panel rounded-2xl p-8 sm:p-10 min-h-[260px]\">\n <div id=\"tab-oni\" class=\"tab-content\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"thermometer\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Ni\u00f1o Oce\u00e2nico (ONI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Ni\u00f1o Oce\u00e2nico (Oceanic Ni\u00f1o Index \u2013 ONI) \u00e9 calculado a partir da m\u00e9dia m\u00f3vel trimestral da anomalia da temperatura da superf\u00edcie do mar (TSM) na regi\u00e3o Ni\u00f1o 3.4 do Pac\u00edfico Equatorial, sendo que anomalias superiores a 0,5\u00b0C ou inferiores a -0,5\u00b0C, mantidas por pelo menos cinco meses consecutivos, indicam ocorr\u00eancia de El Ni\u00f1o ou La Ni\u00f1a, respectivamente.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"tab-soi\" class=\"tab-content hidden\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Oscila\u00e7\u00e3o Sul (SOI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Oscila\u00e7\u00e3o Sul (Southern Oscillation Index \u2013 SOI) representa a diferen\u00e7a da press\u00e3o atmosf\u00e9rica reduzida ao n\u00edvel m\u00e9dio do mar entre Taiti e Darwin. Valores negativos do \u00edndice est\u00e3o associados ao fen\u00f4meno El Ni\u00f1o, enquanto valores positivos indicam a ocorr\u00eancia de La Ni\u00f1a.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"tab-roni\" class=\"tab-content hidden\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"trending-up\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Ni\u00f1o Oce\u00e2nico Relativo (RONI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Ni\u00f1o Oce\u00e2nico Relativo (Relative Oceanic Ni\u00f1o Index \u2013 RONI) tem sido recentemente utilizado no monitoramento do ENOS de forma a reduzir a influ\u00eancia do aquecimento global, calculando-se a anomalia de TSM na regi\u00e3o Ni\u00f1o 3.4 e subtraindo a anomalia m\u00e9dia de TSM tropical.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"impactos\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">Impactos no Sul do Brasil<\/h2>\n <p class=\"text-gray-400\">Compreenda os principais impactos no clima em epis\u00f3dios de El Ni\u00f1o.<\/p>\n <\/div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-4 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"cloud-rain\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Aumento das Chuvas<\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">A chuva aumenta no Sul do Brasil, com valores acima da m\u00e9dia climatol\u00f3gica em toda ou parte da regi\u00e3o, especialmente na primavera.<\/p>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\" style=\"transition-delay: 100ms;\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-4 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Intensifica\u00e7\u00e3o de sistemas atmosf\u00e9ricos <\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">As frentes frias podem ficar semi-estacionadas por v\u00e1rios dias. O jato subtropical fica mais intenso sobre o Sul do Brasil, contribuindo para gera\u00e7\u00e3o de instabilidades atmosf\u00e9ricas.<\/p>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\" style=\"transition-delay: 200ms;\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-3 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"thermometer\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Invernos menos rigorosos<\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Em rela\u00e7\u00e3o \u00e0 temperatura do ar, a tend\u00eancia \u00e9 de aumento, com massas de ar frio menos frequentes e duradouras no inverno.<\/p>\n <\/div>\n\n \n <\/div>\n\n <div class=\"mt-12 reveal glass-panel rounded-2xl p-8 border-l-4 border-l-eno-green\">\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n <strong class=\"text-white\">Monitoramento Constante:<\/strong> Acompanhe os boletins da Epagri\/Ciram para orienta\u00e7\u00f5es t\u00e9cnicas e alertas meteorol\u00f3gicos durante os per\u00edodos cr\u00edticos.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"mitos\" class=\"relative py-24 bg-gradient-to-b from-eno-dark-green\/10 to-black\">\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-12 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white\">Perguntas Frequentes<\/h2>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-8 sm:p-10 border border-eno-green\/20 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-eno-green\/5 rounded-full blur-[80px] -translate-y-1\/2 translate-x-1\/2\"><\/div>\n \n <div class=\"relative z-10\">\n <div class=\"flex items-start gap-4 mb-6\">\n <div class=\"w-10 h-10 rounded-full bg-eno-green\/20 flex items-center justify-center flex-shrink-0\">\n <i data-lucide=\"help-circle\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-eno-green font-semibold uppercase tracking-wider mb-2\">Pergunta<\/p>\n <h3 class=\"text-xl sm:text-2xl font-bold text-white\">Chuva abundante, enchentes e deslizamentos s\u00f3 ocorrem em anos de El Ni\u00f1o?<\/h3>\n <\/div>\n <\/div>\n\n <div class=\"pl-0 sm:pl-14\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"px-3 py-1 rounded-full bg-eno-green\/20 text-eno-green text-sm font-bold uppercase\">Resposta<\/span>\n <span class=\"text-white font-bold text-lg\">N\u00e3o.<\/span>\n <\/div>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O fen\u00f4meno El Ni\u00f1o \u00e9 de escala global, mas n\u00e3o \u00e9 o \u00fanico que determina as condi\u00e7\u00f5es do tempo e clima no Sul do Brasil. Um bom exemplo \u00e9 a enchente em novembro de 2008 no Vale do Itaja\u00ed, que registrou o maior n\u00famero de mortos da hist\u00f3ria de Santa Catarina. Ela ocorreu sob atua\u00e7\u00e3o do fen\u00f4meno La Ni\u00f1a. Naquele ano, a chuva ocorreu de forma frequente desde setembro, encharcando o solo, resultando em graves deslizamentos. Por\u00e9m, enquanto chovia sem parar na faixa Leste, no Oeste do Estado a situa\u00e7\u00e3o era de grave estiagem, com problemas no abastecimento de \u00e1gua. Essa situa\u00e7\u00e3o \u2014 mais chuva no Litoral e Vale do Itaja\u00ed, e falta nas demais regi\u00f5es \u2014 \u00e9 bem t\u00edpica durante epis\u00f3dios de La Ni\u00f1a.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"serie-historica\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-12 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">EVENTOS DE EL NI\u00d1O<\/h2>\n <p class=\"text-gray-400\">Alguns casos de El Ni\u00f1o expressivos.<\/p>\n <\/div>\n\n <div class=\"reveal overflow-x-auto pb-6 -mx-4 px-4\">\n <div class=\"flex gap-6 min-w-max\">\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">1982\/83 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Enchentes graduais de longa dura\u00e7\u00e3o (semanas). Novembro de 82 e Maio de 83 muito cr\u00edtico no Oeste de SC. Junho de 83 ainda muita umidade no solo de SC, culminando em Julho com volumes de chuva excepcionais e inunda\u00e7\u00f5es severas em todas as regi\u00f5es. Colapso total da capacidade de drenagem h\u00eddrica da Bacia do Itaja\u00ed, bem como da infraestrutura urbana e isolamento tempor\u00e1rio de cidades.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">1997\/98 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Grandes volumes de chuva acumulados, mas com picos de cheia ligeiramente mais espa\u00e7ados no tempo se comparados a 1983. Outubro de 97 em todo o Estado e Novembro do Oeste aos Planaltos tiveram grandes volumes. O final do ver\u00e3o 97\/98 e in\u00edcio do outono de 98 foram cr\u00edticos no Oeste Catarinense com forte resposta hidrol\u00f3gica.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">2015\/16 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Maiores volumes de chuva em Julho de 2015 do Meio-Oeste ao Oeste de SC com quase 500 mm e forte resposta hidrol\u00f3gica. Alguns outros meses como Outubro de 2015 tamb\u00e9m causaram impactos no Planalto Norte e algum impacto no Vale do Itaja\u00ed. Alto impacto em perdas de solo na agricultura de SC.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">2023\/24 - Forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Diversos eventos de chuva volumosa, principalmente in\u00edcio de Outubro de 2023. Acumulados mensais > 400 mm no Estado; do Oeste aos Planaltos e Vale > 600 mm; sucess\u00e3o de inunda\u00e7\u00f5es com destaque para o Alto Vale. Mais de 50 mil propriedades rurais e pesqueiras atingidas em Outubro: quase R$ 2 bilh\u00f5es em danos. Outono de 2024 com repique na Grande Florian\u00f3polis e no Litoral Sul.<\/p>\n <\/div>\n\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"relative py-12 border-t border-white\/10 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid md:grid-cols-3 gap-10 mb-10\">\n <div>\n <div class=\"flex items-center gap-2 mb-4\">\n <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-eno-dark-green to-eno-green flex items-center justify-center\">\n <i data-lucide=\"waves\" class=\"w-4 h-4 text-white\"><\/i>\n <\/div>\n <span class=\"font-bold text-white\">El Ni\u00f1o - Entenda o Fen\u00f4meno<\/span>\n <\/div>\n <p class=\"text-gray-500 text-sm leading-relaxed\">\n Hotsite cient\u00edfico desenvolvido para disseminar informa\u00e7\u00f5es t\u00e9cnicas sobre o fen\u00f4meno El Ni\u00f1o e seus impactos.\n <\/p>\n <\/div>\n <div>\n <h4 class=\"text-white font-semibold mb-4\">Links R\u00e1pidos<\/h4>\n <ul class=\"space-y-2 text-sm text-gray-400\">\n <li><a href=\"#o-que-e\" class=\"hover:text-eno-green transition-colors\">O que \u00e9 o El Ni\u00f1o<\/a><\/li>\n <li><a href=\"#monitoramento\" class=\"hover:text-eno-green transition-colors\">\u00cdndices de Monitoramento<\/a><\/li>\n <li><a href=\"#impactos\" class=\"hover:text-eno-green transition-colors\">Impactos em SC<\/a><\/li>\n <li><a href=\"#mitos\" class=\"hover:text-eno-green transition-colors\">Perguntas Frequentes<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"text-white font-semibold mb-4\">Epagri\/Ciram<\/h4>\n <p class=\"text-gray-500 text-sm leading-relaxed mb-4\">\n Empresa de Pesquisa Agropecu\u00e1ria e Extens\u00e3o Rural de Santa Catarina \/ Centro de Informa\u00e7\u00f5es de Recursos Ambientais e Hidrometeorologia.\n <\/p>\n <div class=\"flex items-center gap-3\">\n <a href=\"#\" class=\"w-9 h-9 rounded-lg glass-panel flex items-center justify-center text-gray-400 hover:text-eno-green hover:bg-white\/5 transition-colors\">\n <i data-lucide=\"globe\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-9 h-9 rounded-lg glass-panel flex items-center justify-center text-gray-400 hover:text-eno-green hover:bg-white\/5 transition-colors\">\n <i data-lucide=\"mail\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"pt-8 border-t border-white\/10 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-gray-600 text-sm\">\u00a9 2026 Epagri\/Ciram. Todos os direitos reservados.<\/p>\n <p class=\"text-gray-600 text-sm\">Conte\u00fado cient\u00edfico elaborado para fins educativos.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <button id=\"shareBtn\" class=\"fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full share-fab text-white shadow-lg flex items-center justify-center hover:scale-110 transition-transform duration-300\" aria-label=\"Compartilhar\">\n <i data-lucide=\"share-2\" class=\"w-5 h-5\"><\/i>\n <\/button>\n\n <script>\n \/\/ Initialize Lucide icons\n lucide.createIcons();\n\n \/\/ Progress bar\n const progressBar = document.getElementById('progressBar');\n window.addEventListener('scroll', () => {\n const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\n const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\n const scrolled = (winScroll \/ height) * 100;\n progressBar.style.width = scrolled + '%';\n });\n\n \/\/ Mobile menu\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n mobileMenuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n\n \/\/ Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n mobileMenu.classList.add('hidden');\n }\n });\n });\n\n \/\/ Parallax effect on hero\n const hero = document.getElementById('hero');\n const heroParallax = document.getElementById('heroParallax');\n hero.addEventListener('mousemove', (e) => {\n const x = (e.clientX \/ window.innerWidth - 0.5) * 30;\n const y = (e.clientY \/ window.innerHeight - 0.5) * 30;\n heroParallax.style.transform = `translate(${x}px, ${y}px)`;\n });\n\n \/\/ Hero interactive timeline\n const stageData = [\n { title: 'Neutra', desc: 'Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica. N\u00e3o h\u00e1 anomalias significativas de temperatura da superf\u00edcie do mar no Pac\u00edfico Equatorial.' },\n { title: 'Aquecimento', desc: 'Anomalias positivas de temperatura da superf\u00edcie do mar come\u00e7am a se organizar na regi\u00e3o Ni\u00f1o 3.4.' },\n { title: 'El Ni\u00f1o', desc: 'Aquecimento an\u00f4malo consolidado no Pac\u00edfico Equatorial central e leste, com altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global.' },\n { title: 'Impactos', desc: 'Altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global e regional, com efeitos sobre o clima no Sul do Brasil.' }\n ];\n\n const stageInfo = document.getElementById('stageInfo');\n const timelineStages = document.querySelectorAll('.timeline-stage');\n\n timelineStages.forEach(stage => {\n stage.addEventListener('click', () => {\n const index = stage.getAttribute('data-stage');\n const data = stageData[index];\n \n timelineStages.forEach(s => {\n const dot = s.querySelector('.timeline-dot');\n dot.classList.remove('active', 'border-eno-green');\n dot.classList.add('border-gray-600');\n });\n \n const activeDot = stage.querySelector('.timeline-dot');\n activeDot.classList.add('active', 'border-eno-green');\n activeDot.classList.remove('border-gray-600');\n \n stageInfo.innerHTML = `<p class=\"text-eno-green font-semibold mb-1\">${data.title}<\/p><p class=\"text-gray-300 text-lg\">${data.desc}<\/p>`;\n });\n });\n\n \/\/ Initialize first stage info\n stageInfo.innerHTML = `<p class=\"text-eno-green font-semibold mb-1\">${stageData[0].title}<\/p><p class=\"text-gray-300 text-lg\">${stageData[0].desc}<\/p>`;\n\n \/\/ Tabs\n const tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tab = btn.getAttribute('data-tab');\n \n tabBtns.forEach(b => {\n b.classList.remove('tab-active');\n b.classList.add('text-gray-400');\n b.querySelector('[data-lucide]').classList.remove('text-eno-green');\n });\n \n btn.classList.add('tab-active');\n btn.classList.remove('text-gray-400');\n btn.querySelector('[data-lucide]').classList.add('text-eno-green');\n \n tabContents.forEach(content => content.classList.add('hidden'));\n document.getElementById(`tab-${tab}`).classList.remove('hidden');\n });\n });\n\n \/\/ Reveal on scroll\n const revealElements = document.querySelectorAll('.reveal');\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n revealObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n revealElements.forEach(el => revealObserver.observe(el));\n\n \/\/ Share button\n const shareBtn = document.getElementById('shareBtn');\n shareBtn.addEventListener('click', async () => {\n const shareData = {\n title: 'El Ni\u00f1o - Entenda o Fen\u00f4meno | Epagri\/Ciram',\n text: 'Entenda o fen\u00f4meno El Ni\u00f1o, seus \u00edndices de monitoramento e impactos no Sul do Brasil.',\n url: window.location.href\n };\n\n if (navigator.share) {\n try {\n await navigator.share(shareData);\n } catch (err) {\n console.log('Share canceled');\n }\n } else {\n try {\n await navigator.clipboard.writeText(window.location.href);\n const originalHTML = shareBtn.innerHTML;\n shareBtn.innerHTML = '<i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>';\n lucide.createIcons();\n setTimeout(() => {\n shareBtn.innerHTML = originalHTML;\n lucide.createIcons();\n }, 2000);\n } catch (err) {\n console.error('Failed to copy:', err);\n }\n }\n });\n\n \/\/ Nav background on scroll\n const nav = document.getElementById('mainNav');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n nav.classList.add('bg-black\/90');\n } else {\n nav.classList.remove('bg-black\/90');\n }\n });\n <\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>El Ni\u00f1o – Entenda o Fen\u00f4meno | Epagri\/Ciram El Ni\u00f1o O que \u00e9 Monitoramento Impactos Perguntas Frequentes Eventos de El Ni\u00f1o O que \u00e9 Monitoramento Impactos Perguntas Frequentes S\u00e9rie Hist\u00f3rica Fases do Fen\u00f4meno Neutra Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica. Aquecimento Anomalias positivas de TSM come\u00e7am a se organizar. El Ni\u00f1o Aquecimento an\u00f4malo consolidado no Pac\u00edfico […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/landing.php","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-50473","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/comments?post=50473"}],"version-history":[{"count":164,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473\/revisions"}],"predecessor-version":[{"id":51376,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473\/revisions\/51376"}],"wp:attachment":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/media?parent=50473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\n \n \n El Ni\u00f1o - Entenda o Fen\u00f4meno | Epagri\/Ciram<\/title>\n <meta name=\"description\" content=\"Hotsite cient\u00edfico sobre o fen\u00f4meno El Ni\u00f1o, monitoramento e impactos em Santa Catarina.\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'eno-green': '#72BC7A',\n 'eno-dark-green': '#135126',\n 'eno-black': '#000000',\n },\n fontFamily: {\n inter: ['Inter', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style>\n body { font-family: 'Inter', sans-serif; background-color: #000000; color: #ffffff; }\n .glow-text { text-shadow: 0 0 40px rgba(114, 188, 122, 0.5), 0 0 80px rgba(19, 81, 38, 0.4); }\n .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }\n .glass-nav { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(114, 188, 122, 0.15); }\n .radial-hero { background: radial-gradient(circle at 50% 30%, rgba(19, 81, 38, 0.4) 0%, rgba(0, 0, 0, 0.95) 60%, #000000 100%); }\n .grid-overlay { background-image: linear-gradient(rgba(114, 188, 122, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 188, 122, 0.05) 1px, transparent 1px); background-size: 60px 60px; }\n .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }\n .reveal.active { opacity: 1; transform: translateY(0); }\n .tab-active { background: rgba(114, 188, 122, 0.15); border-color: #72BC7A; color: #72BC7A; }\n .timeline-dot { box-shadow: 0 0 0 4px rgba(114, 188, 122, 0.2); }\n .timeline-dot.active { box-shadow: 0 0 0 6px rgba(114, 188, 122, 0.3); background-color: #72BC7A; }\n .share-fab { background: linear-gradient(135deg, #135126, #72BC7A); }\n \/* Walker SVG animations *\/\n @keyframes flowRight { 0% { transform: translateX(-10px); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translateX(10px); opacity: 0.4; } }\n @keyframes flowLeft { 0% { transform: translateX(10px); opacity: 0.4; } 50% { opacity: 1; } 100% { transform: translateX(-10px); opacity: 0.4; } }\n @keyframes rise { 0% { transform: translateY(8px); opacity: 0.5; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0.5; } }\n @keyframes sink { 0% { transform: translateY(-8px); opacity: 0.5; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0.5; } }\n .anim-right { animation: flowRight 2.5s ease-in-out infinite; }\n .anim-left { animation: flowLeft 2.5s ease-in-out infinite; }\n .anim-rise { animation: rise 2.5s ease-in-out infinite; }\n .anim-sink { animation: sink 2.5s ease-in-out infinite; }\n .cloud-pulse { animation: rise 3s ease-in-out infinite; }\n <\/style>\n<\/head>\n<body class=\"antialiased overflow-x-hidden\">\n\n \n <div id=\"progressBar\" class=\"fixed top-0 left-0 h-1 bg-gradient-to-r from-eno-dark-green to-eno-green z-[100] transition-all duration-100\" style=\"width: 0%;\"><\/div>\n\n \n <nav id=\"mainNav\" class=\"fixed top-0 w-full z-50 glass-nav transition-all duration-300\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <a href=\"#hero\" class=\"flex items-center gap-2 group\">\n <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-eno-dark-green to-eno-green flex items-center justify-center\">\n <i data-lucide=\"waves\" class=\"w-4 h-4 text-white\"><\/i>\n <\/div>\n <span class=\"font-bold tracking-tight text-white group-hover:text-eno-green transition-colors\">El Ni\u00f1o<\/span>\n <\/a>\n <div class=\"hidden md:flex items-center gap-8 text-sm font-medium text-gray-300\">\n <a href=\"#o-que-e\" class=\"hover:text-eno-green transition-colors\">O que \u00e9<\/a>\n <a href=\"#monitoramento\" class=\"hover:text-eno-green transition-colors\">Monitoramento<\/a>\n <a href=\"#impactos\" class=\"hover:text-eno-green transition-colors\">Impactos<\/a>\n <a href=\"#mitos\" class=\"hover:text-eno-green transition-colors\">Perguntas Frequentes<\/a>\n <a href=\"#serie-historica\" class=\"hover:text-eno-green transition-colors\">Eventos de El Ni\u00f1o<\/a>\n <\/div>\n <button id=\"mobileMenuBtn\" class=\"md:hidden text-white hover:text-eno-green\">\n <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div id=\"mobileMenu\" class=\"hidden md:hidden glass-nav border-t border-white\/10\">\n <div class=\"px-4 py-4 space-y-3 text-sm\">\n <a href=\"#o-que-e\" class=\"block text-gray-300 hover:text-eno-green\">O que \u00e9<\/a>\n <a href=\"#monitoramento\" class=\"block text-gray-300 hover:text-eno-green\">Monitoramento<\/a>\n <a href=\"#impactos\" class=\"block text-gray-300 hover:text-eno-green\">Impactos<\/a>\n <a href=\"#mitos\" class=\"block text-gray-300 hover:text-eno-green\">Perguntas Frequentes<\/a>\n <a href=\"#serie-historica\" class=\"block text-gray-300 hover:text-eno-green\">S\u00e9rie Hist\u00f3rica<\/a>\n <\/div>\n <\/div>\n <\/nav>\n\n \n <section id=\"hero\" class=\"relative min-h-screen flex items-center justify-center radial-hero grid-overlay overflow-hidden pt-16\">\n <div id=\"heroParallax\" class=\"absolute inset-0 pointer-events-none\">\n <div class=\"absolute top-1\/4 left-1\/4 w-96 h-96 bg-eno-dark-green\/20 rounded-full blur-[120px]\"><\/div>\n <div class=\"absolute bottom-1\/4 right-1\/4 w-80 h-80 bg-eno-green\/10 rounded-full blur-[100px]\"><\/div>\n <\/div>\n\n <div class=\"relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"text-center lg:text-left\">\n \n <h1 class=\"text-6xl sm:text-7xl lg:text-8xl font-extrabold tracking-tight text-white glow-text mb-6\">\n El Ni\u00f1o\n <\/h1>\n <p class=\"text-xl sm:text-2xl text-gray-300 font-light mb-4\">\n Entenda o Fen\u00f4meno\n <\/p>\n <p class=\"text-gray-400 max-w-xl mx-auto lg:mx-0 mb-8 leading-relaxed\">\n Uma an\u00e1lise cient\u00edfica sobre o El Ni\u00f1o-Oscila\u00e7\u00e3o Sul (ENOS), seus mecanismos, \u00edndices de monitoramento e impactos no Sul do Brasil.\n <\/p>\n <div class=\"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start\">\n <a href=\"#o-que-e\" class=\"inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-eno-dark-green hover:bg-eno-green text-white font-medium transition-all duration-300 hover:shadow-[0_0_30px_rgba(114,188,122,0.3)]\">\n Explorar o fen\u00f4meno\n <i data-lucide=\"arrow-down\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#monitoramento\" class=\"inline-flex items-center justify-center gap-2 px-6 py-3 rounded-lg glass-panel hover:bg-white\/5 text-white font-medium transition-all duration-300\">\n <i data-lucide=\"activity\" class=\"w-4 h-4 text-eno-green\"><\/i>\n \u00cdndices t\u00e9cnicos\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"relative\">\n <div class=\"glass-panel rounded-2xl p-8 relative\">\n <h3 class=\"text-lg font-semibold text-white mb-6 flex items-center gap-2\">\n <i data-lucide=\"git-branch\" class=\"w-5 h-5 text-eno-green\"><\/i>\n Fases do Fen\u00f4meno\n <\/h3>\n <div class=\"relative pl-8\">\n <div class=\"absolute left-3 top-0 bottom-0 w-0.5 bg-gradient-to-b from-eno-green via-eno-dark-green to-gray-700\"><\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"0\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-eno-green timeline-dot active transition-all group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Neutra<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"1\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Aquecimento<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Anomalias positivas de TSM come\u00e7am a se organizar.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer mb-8 group\" data-stage=\"2\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">El Ni\u00f1o<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Aquecimento an\u00f4malo consolidado no Pac\u00edfico Equatorial.<\/p>\n <\/div>\n \n <div class=\"timeline-stage cursor-pointer group\" data-stage=\"3\">\n <div class=\"absolute left-0 w-6 h-6 rounded-full bg-black border-2 border-gray-600 timeline-dot transition-all group-hover:border-eno-green group-hover:scale-110\"><\/div>\n <h4 class=\"text-white font-semibold group-hover:text-eno-green transition-colors\">Impactos<\/h4>\n <p class=\"text-lg text-gray-400 mt-1\">Altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global e regional.<\/p>\n <\/div>\n <\/div>\n <div id=\"stageInfo\" class=\"mt-6 p-4 rounded-xl bg-eno-dark-green\/20 border border-eno-green\/20\">\n <p class=\"text-sm text-eno-green font-medium\">Selecione uma fase para visualizar detalhes<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"o-que-e\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div class=\"reveal\">\n <div class=\"flex items-center gap-3 mb-6\">\n <div class=\"w-10 h-10 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center border border-eno-green\/30\">\n <i data-lucide=\"info\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <h2 class=\"text-3xl sm:text-4xl font-bold text-white\">O que \u00e9 o El Ni\u00f1o?<\/h2>\n <\/div>\n <div class=\"space-y-6 text-gray-300 leading-relaxed text-lg\">\n <p>\n El Ni\u00f1o representa uma das fases de manifesta\u00e7\u00e3o do fen\u00f4meno atmosf\u00e9rico-oce\u00e2nico El Ni\u00f1o-Oscila\u00e7\u00e3o Sul (ENOS). De maneira geral, o ENOS altera padr\u00f5es de temperatura da superf\u00edcie do mar (TSM) e circula\u00e7\u00e3o atmosf\u00e9rica global, apresentando tr\u00eas fases principais:\n <\/p>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-eno-green flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase El Ni\u00f1o:<\/strong> caracterizada pelo aquecimento an\u00f4malo das \u00e1guas superficiais do Pac\u00edfico Equatorial central e leste.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-blue-400 flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase La Ni\u00f1a:<\/strong> identificada pelo resfriamento an\u00f4malo nessas mesmas regi\u00f5es oce\u00e2nicas.<\/span>\n <\/li>\n <li class=\"flex items-start gap-3\">\n <span class=\"w-2 h-2 mt-2 rounded-full bg-gray-400 flex-shrink-0\"><\/span>\n <span><strong class=\"text-white\">Fase Neutra:<\/strong> quando n\u00e3o h\u00e1 anomalias significativas nessas \u00e1reas, mantendo-se condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica.<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n \n \n\t\t\t\t\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"monitoramento\" class=\"relative py-24 bg-gradient-to-b from-black to-eno-dark-green\/10\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">\u00cdndices de Monitoramento do ENOS<\/h2>\n <p class=\"text-gray-400\">Acompanhamento t\u00e9cnico dos principais \u00edndices utilizados para caracterizar as fases do fen\u00f4meno.<\/p>\n <\/div>\n\n <div class=\"reveal\">\n \n <div class=\"flex flex-col sm:flex-row gap-3 mb-8\">\n <button class=\"tab-btn tab-active flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left transition-all duration-300 hover:bg-white\/5\" data-tab=\"oni\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice ONI<\/span>\n <i data-lucide=\"thermometer\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <\/button>\n <button class=\"tab-btn flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left text-gray-400 transition-all duration-300 hover:bg-white\/5 hover:text-white\" data-tab=\"soi\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice SOI<\/span>\n <i data-lucide=\"wind\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <\/button>\n <button class=\"tab-btn flex-1 py-4 px-6 rounded-xl border border-white\/10 text-left text-gray-400 transition-all duration-300 hover:bg-white\/5 hover:text-white\" data-tab=\"roni\">\n <div class=\"flex items-center justify-between\">\n <span class=\"font-semibold\">\u00cdndice RONI<\/span>\n <i data-lucide=\"trending-up\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <\/button>\n <\/div>\n\n \n <div class=\"glass-panel rounded-2xl p-8 sm:p-10 min-h-[260px]\">\n <div id=\"tab-oni\" class=\"tab-content\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"thermometer\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Ni\u00f1o Oce\u00e2nico (ONI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Ni\u00f1o Oce\u00e2nico (Oceanic Ni\u00f1o Index \u2013 ONI) \u00e9 calculado a partir da m\u00e9dia m\u00f3vel trimestral da anomalia da temperatura da superf\u00edcie do mar (TSM) na regi\u00e3o Ni\u00f1o 3.4 do Pac\u00edfico Equatorial, sendo que anomalias superiores a 0,5\u00b0C ou inferiores a -0,5\u00b0C, mantidas por pelo menos cinco meses consecutivos, indicam ocorr\u00eancia de El Ni\u00f1o ou La Ni\u00f1a, respectivamente.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"tab-soi\" class=\"tab-content hidden\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Oscila\u00e7\u00e3o Sul (SOI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Oscila\u00e7\u00e3o Sul (Southern Oscillation Index \u2013 SOI) representa a diferen\u00e7a da press\u00e3o atmosf\u00e9rica reduzida ao n\u00edvel m\u00e9dio do mar entre Taiti e Darwin. Valores negativos do \u00edndice est\u00e3o associados ao fen\u00f4meno El Ni\u00f1o, enquanto valores positivos indicam a ocorr\u00eancia de La Ni\u00f1a.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div id=\"tab-roni\" class=\"tab-content hidden\">\n <div class=\"flex items-start gap-4\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/40 flex items-center justify-center flex-shrink-0 border border-eno-green\/30\">\n <i data-lucide=\"trending-up\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold text-white mb-4\">\u00cdndice Ni\u00f1o Oce\u00e2nico Relativo (RONI)<\/h3>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O \u00cdndice Ni\u00f1o Oce\u00e2nico Relativo (Relative Oceanic Ni\u00f1o Index \u2013 RONI) tem sido recentemente utilizado no monitoramento do ENOS de forma a reduzir a influ\u00eancia do aquecimento global, calculando-se a anomalia de TSM na regi\u00e3o Ni\u00f1o 3.4 e subtraindo a anomalia m\u00e9dia de TSM tropical.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"impactos\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-16 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">Impactos no Sul do Brasil<\/h2>\n <p class=\"text-gray-400\">Compreenda os principais impactos no clima em epis\u00f3dios de El Ni\u00f1o.<\/p>\n <\/div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-4 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"cloud-rain\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Aumento das Chuvas<\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">A chuva aumenta no Sul do Brasil, com valores acima da m\u00e9dia climatol\u00f3gica em toda ou parte da regi\u00e3o, especialmente na primavera.<\/p>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\" style=\"transition-delay: 100ms;\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-4 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Intensifica\u00e7\u00e3o de sistemas atmosf\u00e9ricos <\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">As frentes frias podem ficar semi-estacionadas por v\u00e1rios dias. O jato subtropical fica mais intenso sobre o Sul do Brasil, contribuindo para gera\u00e7\u00e3o de instabilidades atmosf\u00e9ricas.<\/p>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\" style=\"transition-delay: 200ms;\">\n <div class=\"w-12 h-12 rounded-xl bg-eno-dark-green\/30 flex items-center justify-center mb-3 group-hover:bg-eno-green\/20 transition-colors\">\n <i data-lucide=\"thermometer\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-semibold text-white mb-3\">Invernos menos rigorosos<\/h3>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Em rela\u00e7\u00e3o \u00e0 temperatura do ar, a tend\u00eancia \u00e9 de aumento, com massas de ar frio menos frequentes e duradouras no inverno.<\/p>\n <\/div>\n\n \n <\/div>\n\n <div class=\"mt-12 reveal glass-panel rounded-2xl p-8 border-l-4 border-l-eno-green\">\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n <strong class=\"text-white\">Monitoramento Constante:<\/strong> Acompanhe os boletins da Epagri\/Ciram para orienta\u00e7\u00f5es t\u00e9cnicas e alertas meteorol\u00f3gicos durante os per\u00edodos cr\u00edticos.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"mitos\" class=\"relative py-24 bg-gradient-to-b from-eno-dark-green\/10 to-black\">\n <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-12 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white\">Perguntas Frequentes<\/h2>\n <\/div>\n\n <div class=\"reveal glass-panel rounded-2xl p-8 sm:p-10 border border-eno-green\/20 relative overflow-hidden\">\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-eno-green\/5 rounded-full blur-[80px] -translate-y-1\/2 translate-x-1\/2\"><\/div>\n \n <div class=\"relative z-10\">\n <div class=\"flex items-start gap-4 mb-6\">\n <div class=\"w-10 h-10 rounded-full bg-eno-green\/20 flex items-center justify-center flex-shrink-0\">\n <i data-lucide=\"help-circle\" class=\"w-5 h-5 text-eno-green\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-eno-green font-semibold uppercase tracking-wider mb-2\">Pergunta<\/p>\n <h3 class=\"text-xl sm:text-2xl font-bold text-white\">Chuva abundante, enchentes e deslizamentos s\u00f3 ocorrem em anos de El Ni\u00f1o?<\/h3>\n <\/div>\n <\/div>\n\n <div class=\"pl-0 sm:pl-14\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"px-3 py-1 rounded-full bg-eno-green\/20 text-eno-green text-sm font-bold uppercase\">Resposta<\/span>\n <span class=\"text-white font-bold text-lg\">N\u00e3o.<\/span>\n <\/div>\n <p class=\"text-gray-300 leading-relaxed text-lg\">\n O fen\u00f4meno El Ni\u00f1o \u00e9 de escala global, mas n\u00e3o \u00e9 o \u00fanico que determina as condi\u00e7\u00f5es do tempo e clima no Sul do Brasil. Um bom exemplo \u00e9 a enchente em novembro de 2008 no Vale do Itaja\u00ed, que registrou o maior n\u00famero de mortos da hist\u00f3ria de Santa Catarina. Ela ocorreu sob atua\u00e7\u00e3o do fen\u00f4meno La Ni\u00f1a. Naquele ano, a chuva ocorreu de forma frequente desde setembro, encharcando o solo, resultando em graves deslizamentos. Por\u00e9m, enquanto chovia sem parar na faixa Leste, no Oeste do Estado a situa\u00e7\u00e3o era de grave estiagem, com problemas no abastecimento de \u00e1gua. Essa situa\u00e7\u00e3o \u2014 mais chuva no Litoral e Vale do Itaja\u00ed, e falta nas demais regi\u00f5es \u2014 \u00e9 bem t\u00edpica durante epis\u00f3dios de La Ni\u00f1a.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"serie-historica\" class=\"relative py-24 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"text-center max-w-3xl mx-auto mb-12 reveal\">\n \n <h2 class=\"text-3xl sm:text-4xl font-bold text-white mb-4\">EVENTOS DE EL NI\u00d1O<\/h2>\n <p class=\"text-gray-400\">Alguns casos de El Ni\u00f1o expressivos.<\/p>\n <\/div>\n\n <div class=\"reveal overflow-x-auto pb-6 -mx-4 px-4\">\n <div class=\"flex gap-6 min-w-max\">\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">1982\/83 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Enchentes graduais de longa dura\u00e7\u00e3o (semanas). Novembro de 82 e Maio de 83 muito cr\u00edtico no Oeste de SC. Junho de 83 ainda muita umidade no solo de SC, culminando em Julho com volumes de chuva excepcionais e inunda\u00e7\u00f5es severas em todas as regi\u00f5es. Colapso total da capacidade de drenagem h\u00eddrica da Bacia do Itaja\u00ed, bem como da infraestrutura urbana e isolamento tempor\u00e1rio de cidades.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">1997\/98 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Grandes volumes de chuva acumulados, mas com picos de cheia ligeiramente mais espa\u00e7ados no tempo se comparados a 1983. Outubro de 97 em todo o Estado e Novembro do Oeste aos Planaltos tiveram grandes volumes. O final do ver\u00e3o 97\/98 e in\u00edcio do outono de 98 foram cr\u00edticos no Oeste Catarinense com forte resposta hidrol\u00f3gica.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">2015\/16 - Muito forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-orange-400\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Maiores volumes de chuva em Julho de 2015 do Meio-Oeste ao Oeste de SC com quase 500 mm e forte resposta hidrol\u00f3gica. Alguns outros meses como Outubro de 2015 tamb\u00e9m causaram impactos no Planalto Norte e algum impacto no Vale do Itaja\u00ed. Alto impacto em perdas de solo na agricultura de SC.<\/p>\n <\/div>\n\n <div class=\"w-72 glass-panel rounded-2xl p-6 hover:bg-white\/5 transition-all duration-300 hover:-translate-y-1 group\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-3xl font-bold text-eno-green\">2023\/24 - Forte<\/span>\n <i data-lucide=\"\" class=\"w-6 h-6 text-eno-green\"><\/i>\n <\/div>\n <p class=\"text-gray-400 text-lg leading-relaxed\">Diversos eventos de chuva volumosa, principalmente in\u00edcio de Outubro de 2023. Acumulados mensais > 400 mm no Estado; do Oeste aos Planaltos e Vale > 600 mm; sucess\u00e3o de inunda\u00e7\u00f5es com destaque para o Alto Vale. Mais de 50 mil propriedades rurais e pesqueiras atingidas em Outubro: quase R$ 2 bilh\u00f5es em danos. Outono de 2024 com repique na Grande Florian\u00f3polis e no Litoral Sul.<\/p>\n <\/div>\n\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"relative py-12 border-t border-white\/10 bg-black\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid md:grid-cols-3 gap-10 mb-10\">\n <div>\n <div class=\"flex items-center gap-2 mb-4\">\n <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-eno-dark-green to-eno-green flex items-center justify-center\">\n <i data-lucide=\"waves\" class=\"w-4 h-4 text-white\"><\/i>\n <\/div>\n <span class=\"font-bold text-white\">El Ni\u00f1o - Entenda o Fen\u00f4meno<\/span>\n <\/div>\n <p class=\"text-gray-500 text-sm leading-relaxed\">\n Hotsite cient\u00edfico desenvolvido para disseminar informa\u00e7\u00f5es t\u00e9cnicas sobre o fen\u00f4meno El Ni\u00f1o e seus impactos.\n <\/p>\n <\/div>\n <div>\n <h4 class=\"text-white font-semibold mb-4\">Links R\u00e1pidos<\/h4>\n <ul class=\"space-y-2 text-sm text-gray-400\">\n <li><a href=\"#o-que-e\" class=\"hover:text-eno-green transition-colors\">O que \u00e9 o El Ni\u00f1o<\/a><\/li>\n <li><a href=\"#monitoramento\" class=\"hover:text-eno-green transition-colors\">\u00cdndices de Monitoramento<\/a><\/li>\n <li><a href=\"#impactos\" class=\"hover:text-eno-green transition-colors\">Impactos em SC<\/a><\/li>\n <li><a href=\"#mitos\" class=\"hover:text-eno-green transition-colors\">Perguntas Frequentes<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"text-white font-semibold mb-4\">Epagri\/Ciram<\/h4>\n <p class=\"text-gray-500 text-sm leading-relaxed mb-4\">\n Empresa de Pesquisa Agropecu\u00e1ria e Extens\u00e3o Rural de Santa Catarina \/ Centro de Informa\u00e7\u00f5es de Recursos Ambientais e Hidrometeorologia.\n <\/p>\n <div class=\"flex items-center gap-3\">\n <a href=\"#\" class=\"w-9 h-9 rounded-lg glass-panel flex items-center justify-center text-gray-400 hover:text-eno-green hover:bg-white\/5 transition-colors\">\n <i data-lucide=\"globe\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <a href=\"#\" class=\"w-9 h-9 rounded-lg glass-panel flex items-center justify-center text-gray-400 hover:text-eno-green hover:bg-white\/5 transition-colors\">\n <i data-lucide=\"mail\" class=\"w-4 h-4\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"pt-8 border-t border-white\/10 flex flex-col sm:flex-row items-center justify-between gap-4\">\n <p class=\"text-gray-600 text-sm\">\u00a9 2026 Epagri\/Ciram. Todos os direitos reservados.<\/p>\n <p class=\"text-gray-600 text-sm\">Conte\u00fado cient\u00edfico elaborado para fins educativos.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <button id=\"shareBtn\" class=\"fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full share-fab text-white shadow-lg flex items-center justify-center hover:scale-110 transition-transform duration-300\" aria-label=\"Compartilhar\">\n <i data-lucide=\"share-2\" class=\"w-5 h-5\"><\/i>\n <\/button>\n\n <script>\n \/\/ Initialize Lucide icons\n lucide.createIcons();\n\n \/\/ Progress bar\n const progressBar = document.getElementById('progressBar');\n window.addEventListener('scroll', () => {\n const winScroll = document.body.scrollTop || document.documentElement.scrollTop;\n const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\n const scrolled = (winScroll \/ height) * 100;\n progressBar.style.width = scrolled + '%';\n });\n\n \/\/ Mobile menu\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n mobileMenuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n\n \/\/ Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n mobileMenu.classList.add('hidden');\n }\n });\n });\n\n \/\/ Parallax effect on hero\n const hero = document.getElementById('hero');\n const heroParallax = document.getElementById('heroParallax');\n hero.addEventListener('mousemove', (e) => {\n const x = (e.clientX \/ window.innerWidth - 0.5) * 30;\n const y = (e.clientY \/ window.innerHeight - 0.5) * 30;\n heroParallax.style.transform = `translate(${x}px, ${y}px)`;\n });\n\n \/\/ Hero interactive timeline\n const stageData = [\n { title: 'Neutra', desc: 'Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica. N\u00e3o h\u00e1 anomalias significativas de temperatura da superf\u00edcie do mar no Pac\u00edfico Equatorial.' },\n { title: 'Aquecimento', desc: 'Anomalias positivas de temperatura da superf\u00edcie do mar come\u00e7am a se organizar na regi\u00e3o Ni\u00f1o 3.4.' },\n { title: 'El Ni\u00f1o', desc: 'Aquecimento an\u00f4malo consolidado no Pac\u00edfico Equatorial central e leste, com altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global.' },\n { title: 'Impactos', desc: 'Altera\u00e7\u00f5es na circula\u00e7\u00e3o atmosf\u00e9rica global e regional, com efeitos sobre o clima no Sul do Brasil.' }\n ];\n\n const stageInfo = document.getElementById('stageInfo');\n const timelineStages = document.querySelectorAll('.timeline-stage');\n\n timelineStages.forEach(stage => {\n stage.addEventListener('click', () => {\n const index = stage.getAttribute('data-stage');\n const data = stageData[index];\n \n timelineStages.forEach(s => {\n const dot = s.querySelector('.timeline-dot');\n dot.classList.remove('active', 'border-eno-green');\n dot.classList.add('border-gray-600');\n });\n \n const activeDot = stage.querySelector('.timeline-dot');\n activeDot.classList.add('active', 'border-eno-green');\n activeDot.classList.remove('border-gray-600');\n \n stageInfo.innerHTML = `<p class=\"text-eno-green font-semibold mb-1\">${data.title}<\/p><p class=\"text-gray-300 text-lg\">${data.desc}<\/p>`;\n });\n });\n\n \/\/ Initialize first stage info\n stageInfo.innerHTML = `<p class=\"text-eno-green font-semibold mb-1\">${stageData[0].title}<\/p><p class=\"text-gray-300 text-lg\">${stageData[0].desc}<\/p>`;\n\n \/\/ Tabs\n const tabBtns = document.querySelectorAll('.tab-btn');\n const tabContents = document.querySelectorAll('.tab-content');\n\n tabBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n const tab = btn.getAttribute('data-tab');\n \n tabBtns.forEach(b => {\n b.classList.remove('tab-active');\n b.classList.add('text-gray-400');\n b.querySelector('[data-lucide]').classList.remove('text-eno-green');\n });\n \n btn.classList.add('tab-active');\n btn.classList.remove('text-gray-400');\n btn.querySelector('[data-lucide]').classList.add('text-eno-green');\n \n tabContents.forEach(content => content.classList.add('hidden'));\n document.getElementById(`tab-${tab}`).classList.remove('hidden');\n });\n });\n\n \/\/ Reveal on scroll\n const revealElements = document.querySelectorAll('.reveal');\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n revealObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1 });\n\n revealElements.forEach(el => revealObserver.observe(el));\n\n \/\/ Share button\n const shareBtn = document.getElementById('shareBtn');\n shareBtn.addEventListener('click', async () => {\n const shareData = {\n title: 'El Ni\u00f1o - Entenda o Fen\u00f4meno | Epagri\/Ciram',\n text: 'Entenda o fen\u00f4meno El Ni\u00f1o, seus \u00edndices de monitoramento e impactos no Sul do Brasil.',\n url: window.location.href\n };\n\n if (navigator.share) {\n try {\n await navigator.share(shareData);\n } catch (err) {\n console.log('Share canceled');\n }\n } else {\n try {\n await navigator.clipboard.writeText(window.location.href);\n const originalHTML = shareBtn.innerHTML;\n shareBtn.innerHTML = '<i data-lucide=\"check\" class=\"w-5 h-5\"><\/i>';\n lucide.createIcons();\n setTimeout(() => {\n shareBtn.innerHTML = originalHTML;\n lucide.createIcons();\n }, 2000);\n } catch (err) {\n console.error('Failed to copy:', err);\n }\n }\n });\n\n \/\/ Nav background on scroll\n const nav = document.getElementById('mainNav');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n nav.classList.add('bg-black\/90');\n } else {\n nav.classList.remove('bg-black\/90');\n }\n });\n <\/script>\n<\/body>\n<\/html><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>El Ni\u00f1o – Entenda o Fen\u00f4meno | Epagri\/Ciram El Ni\u00f1o O que \u00e9 Monitoramento Impactos Perguntas Frequentes Eventos de El Ni\u00f1o O que \u00e9 Monitoramento Impactos Perguntas Frequentes S\u00e9rie Hist\u00f3rica Fases do Fen\u00f4meno Neutra Condi\u00e7\u00f5es pr\u00f3ximas \u00e0 m\u00e9dia hist\u00f3rica. Aquecimento Anomalias positivas de TSM come\u00e7am a se organizar. El Ni\u00f1o Aquecimento an\u00f4malo consolidado no Pac\u00edfico […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/landing.php","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-50473","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/comments?post=50473"}],"version-history":[{"count":164,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473\/revisions"}],"predecessor-version":[{"id":51376,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50473\/revisions\/51376"}],"wp:attachment":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/media?parent=50473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}