{"id":50608,"date":"2026-06-25T08:41:43","date_gmt":"2026-06-25T11:41:43","guid":{"rendered":"https:\/\/ciram.epagri.sc.gov.br\/?page_id=50608"},"modified":"2026-06-26T16:27:48","modified_gmt":"2026-06-26T19:27:48","slug":"elnino-apicultura","status":"publish","type":"page","link":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/elnino-apicultura\/","title":{"rendered":"El Ni\u00f1o Apicultura"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"50608\" class=\"elementor elementor-50608\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-551ad05 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"551ad05\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d3a6b7c\" data-id=\"d3a6b7c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8059598 elementor-widget elementor-widget-shortcode\" data-id=\"8059598\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><!DOCTYPE html>\n<html lang=\"pt-BR\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">  \n  <meta name=\"description\" content=\"Matriz de impacto clim\u00e1tico do El Ni\u00f1o na apicultura catarinense. Monitoramento de clima, florada e produ\u00e7\u00e3o de mel para apicultores de 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  \n    tailwind.config = {\n      theme: {\n        extend: {\n          colors: {\n            'epagri-black': '#000000',\n            'epagri-dark': '#135126',\n            'epagri-light': '#72BC7A',\n            'epagri-muted': '#0a0a0a',\n          },\n          fontFamily: {\n            sans: ['Inter', 'sans-serif'],\n          },\n          boxShadow: {\n            'glow': '0 0 40px rgba(114, 188, 122, 0.25)',\n            'glow-sm': '0 0 20px rgba(114, 188, 122, 0.15)',\n          }\n        }\n      }\n    }\n  <\/script>\n  <style>\n  \n   * { box-sizing: border-box; }\n\n    .apis-grid { display: grid; gap: 18px; }\n    .apis-grid.two { grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr); align-items: start; margin-top: 22px; }\n    .apis-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n    .apis-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n\n    .apis-card { border: 1px solid var(--apis-line); border-radius: var(--apis-radius); background: rgba(255,255,255,.92); box-shadow: var(--apis-shadow-soft); }\n    .apis-card-header { padding: 22px 22px 0; }\n    .apis-card-header h2, .apis-card-header h3 { margin: 0; color: var(--apis-text); line-height: 1.12; letter-spacing: -0.028em; }\n    .apis-card-header p { margin: 8px 0 0; color: var(--apis-muted); font-size: .95rem; }\n    .apis-card-body { padding: 22px; }\n\n    .apis-data-status {\n      display: grid;\n      gap: 9px;\n      padding: 13px;\n      margin-bottom: 16px;\n      border: 1px solid #f1d189;\n      border-radius: 16px;\n      color: #5f3b00;\n      background: #fff8df;\n      font-size: .9rem;\n    }\n\n    .apis-data-status b { color: #3f2500; }\n\n    .apis-controls { display: grid; gap: 16px; }\n    .apis-field { display: grid; gap: 7px; }\n    .apis-field label { color: var(--apis-text); font-size: .92rem; font-weight: 800; }\n    .apis-field small { color: var(--apis-muted); font-size: .82rem; }\n    .apis-field select, .apis-field input[type=\"text\"] {\n      width: 100%;\n      padding: 13px 14px;\n      border: 1px solid var(--apis-line);\n      border-radius: 14px;\n      color: var(--apis-text);\n      background: #fff;\n      font: inherit;\n    }\n.apis-location-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }\n    .apis-status-line { margin-top: 8px; color: var(--apis-muted); font-size: .9rem; }\n\n    .apis-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }\n    .apis-kpi-mini { padding: 14px; border-radius: 18px; background: #72bc7a; border: 1px solid #f1d189; }\n    .apis-kpi-mini strong { display: block; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1; letter-spacing: -.045em; color: var(--apis-brand); }\n    .apis-kpi-mini span { display: block; margin-top: 5px; color: #5f3b00; font-weight: 800; font-size: .85rem; }\n\n    .apis-score-card { position: sticky; top: 14px; }\n    .apis-score-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; }\n    .apis-gauge {\n      --score: 50;      \n      width: 214px;\n      height: 214px;\n      display: grid;\n      place-items: center;\n      border-radius: 50%;\n      background: radial-gradient(circle, #fff 0 58%, transparent 59%), conic-gradient(var(apis-gauge-color, var(--apis-yellow)) calc(var(--score) * 1%), #ece6d8 0);\n      box-shadow: inset 0 0 0 1px var(apis-line), 0 14px 28px rgba(78,46,0,.10);\n    }\n    .apis-gauge-inner { text-align: center; }\n    .apis-gauge-number { display: block; font-size: 25px; font-weight: 950; letter-spacing: -.06px; color: var(--apis-text); line-height: 1; }\n    .apis-gauge-label { display: block; margin-top: 6px; color: var(--apis-muted); font-weight: 850; text-transform: uppercase; letter-spacing: .04em; font-size: 9px; }\n    .apis-status { display: inline-flex; padding: 8px 12px; border-radius: 999px; color: #fff; background: var(--apis-yellow); font-weight: 850; }\n    .apis-score-text { margin: 13px 0 0; color: var(--apis-muted); }\n    .apis-municipio-heading { margin: 0 0 10px; font-size: 19px; color: #72bc7a; letter-spacing: -.02em; font-weight: bold;}\n\n    .apis-bars { display: grid; gap: 14px; margin-top: 18px; }\n    .apis-bar-row { display: grid; gap: 6px; }\n    .apis-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--apis-text); font-size: .9rem; font-weight: 800; }\n    .apis-bar-track { overflow: hidden; height: 12px; border-radius: 999px; background: #72bc7a; }\n    .apis-bar-fill { height: 100%; width: 0%; border-radius: inherit; background: var(--apis-yellow); transition: width .35s ease, background .35s ease; }\n\n    .apis-section { margin-top: 28px; }\n    .apis-section-title { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }\n    .apis-section-title h2 { margin: 0; font-size: clamp(1.45rem, 2.7vw, 2rem); letter-spacing: -.035em; line-height: 1.1; }\n    .apis-section-title p { max-width: 760px; margin: 6px 0 0; color: var(--apis-muted); }\n    \n     .apis-calendar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }\n    .apis-month-card { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--apis-line); border-radius: var(--apis-radius); background: #fff; box-shadow: var(--apis-shadow-soft); }\n    .apis-month-card b { color: var(--apis-brand); }\n    .apis-month-card span { color: var(--apis-text); font-weight: 850; line-height: 1.18; }\n    .apis-month-card p { margin: 0; color: var(--apis-muted); font-size: .91rem; }\n\n    .apis-note { margin-top: 16px; padding: 14px 16px; border: 1px solid #f2d18a; border-radius: 16px; color: #5f3b00; background: #fff8e6; font-size: .93rem; }\n    .apis-api-box { overflow: auto; padding: 18px; border-radius: var(--apis-radius); border: 1px solid #dbeafe; background: #f8fbff; }\n    .apis-api-box code, .apis-api-box pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace; font-size: .86rem; }\n    .apis-api-box pre { margin: 0; white-space: pre-wrap; color: #1e3a8a; }\n@media (max-width: 1020px) {\n      .apis-grid.two, .apis-grid.three, .apis-grid.four, .apis-matrix, .apis-calendar, .apis-indicators { grid-template-columns: 1fr 1fr; }\n      .apis-score-card { position: static; }\n      .apis-score-wrap { grid-template-columns: 1fr; }\n      .apis-gauge { margin: 0 auto; }\n    }\n\n    @media (max-width: 680px) {            \n      .apis-grid.two, .apis-grid.three, .apis-grid.four, .apis-matrix, .apis-calendar, .apis-indicators, .apis-kpi-strip { grid-template-columns: 1fr; }\n      .apis-section-title { display: block; }\n      .apis-gauge { width: 190px; height: 190px; }\n    }\n\t\n  \n    :root {\n      --epagri-dark: #135126;\n      --epagri-light: #72BC7A;\n    }\n    * {\n      scroll-behavior: smooth;\n    }\n    body {\n      font-family: 'Inter', sans-serif;\n      background-color: #000000;\n      color: #ffffff;\n      overflow-x: hidden;\n    }\n    .glass-nav {\n      background: rgba(19, 81, 38, 0.15);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      border-bottom: 1px solid rgba(114, 188, 122, 0.15);\n    }\n    .glass-panel {\n      background: rgba(19, 81, 38, 0.12);\n      backdrop-filter: blur(16px);\n      -webkit-backdrop-filter: blur(16px);\n      border: 1px solid rgba(114, 188, 122, 0.18);\n    }\n    .glass-panel-strong {\n      background: rgba(19, 81, 38, 0.22);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n      border: 1px solid rgba(114, 188, 122, 0.25);\n    }\n    .glow-text {\n      text-shadow: 0 0 30px rgba(114, 188, 122, 0.5), 0 0 60px rgba(114, 188, 122, 0.25);\n    }\n    .text-gradient {\n      background: linear-gradient(135deg, #72BC7A 0%, #ffffff 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      background-clip: text;\n    }\n    .hero-gradient {\n      background: radial-gradient(ellipse at top, rgba(19, 81, 38, 0.6) 0%, transparent 60%),\n                  radial-gradient(ellipse at bottom right, rgba(114, 188, 122, 0.15) 0%, transparent 50%),\n                  #000000;\n    }\n    .grid-pattern {\n      background-image: linear-gradient(rgba(114, 188, 122, 0.03) 1px, transparent 1px),\n                        linear-gradient(90deg, rgba(114, 188, 122, 0.03) 1px, transparent 1px);\n      background-size: 60px 60px;\n    }\n    .progress-bar {\n      position: fixed;\n      top: 0;\n      left: 0;\n      height: 3px;\n      background: linear-gradient(90deg, #135126, #72BC7A, #135126);\n      z-index: 9999;\n      width: 0%;\n      transition: width 0.1s ease-out;\n      box-shadow: 0 0 10px rgba(114, 188, 122, 0.5);\n    }\n    .fade-in {\n      opacity: 0;\n      transform: translateY(30px);\n      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .fade-in.visible {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    .card-hover {\n      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n    .card-hover:hover {\n      transform: translateY(-8px);\n      box-shadow: 0 0 40px rgba(114, 188, 122, 0.2), 0 20px 40px rgba(0, 0, 0, 0.4);\n      border-color: rgba(114, 188, 122, 0.5);\n    }\n    .icon-box {\n      background: linear-gradient(135deg, rgba(19, 81, 38, 0.6), rgba(114, 188, 122, 0.15));\n    }\n    .timeline-line {\n      background: linear-gradient(180deg, #135126 0%, #72BC7A 50%, #135126 100%);\n    }\n    .timeline-dot {\n      box-shadow: 0 0 0 4px rgba(19, 81, 38, 0.5), 0 0 20px rgba(114, 188, 122, 0.4);\n    }\n    .floating-btn {\n      animation: pulse-glow 2s infinite;\n    }\n    @keyframes pulse-glow {\n      0%, 100% { box-shadow: 0 0 15px rgba(114, 188, 122, 0.3); }\n      50% { box-shadow: 0 0 25px rgba(114, 188, 122, 0.6); }\n    }\n    .mobile-menu {\n      transform: translateX(100%);\n      transition: transform 0.3s ease-in-out;\n    }\n    .mobile-menu.open {\n      transform: translateX(0);\n    }\n    .recommendation-card:nth-child(1) { border-left: 3px solid #72BC7A; }\n    .recommendation-card:nth-child(2) { border-left: 3px solid #135126; }\n    .recommendation-card:nth-child(3) { border-left: 3px solid #72BC7A; }\n    .scroll-indicator {\n      animation: bounce 2s infinite;\n    }\n    @keyframes bounce {\n      0%, 100% { transform: translateY(0); opacity: 0.6; }\n      50% { transform: translateY(8px); opacity: 1; }\n    }\n    .hero-particles {\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n      pointer-events: none;\n    }\n    .particle {\n      position: absolute;\n      width: 4px;\n      height: 4px;\n      background: rgba(114, 188, 122, 0.4);\n      border-radius: 50%;\n      animation: float 15s infinite linear;\n    }\n    @keyframes float {\n      0% { transform: translateY(100vh) translateX(0); opacity: 0; }\n      10% { opacity: 1; }\n      90% { opacity: 1; }\n      100% { transform: translateY(-10vh) translateX(50px); opacity: 0; }\n    }\n    @media (max-width: 768px) {\n      .hero-gradient h1 {\n        font-size: 2.5rem;\n      }\n    }\n  <\/style>\n<\/head>\n<body class=\"antialiased\">\n  <!-- Progress Bar -->\n  <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n\n  <!-- Navigation -->\n  <nav class=\"fixed top-0 left-0 w-full z-50 glass-nav transition-all duration-300\" id=\"navbar\">\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=\"#\" class=\"flex items-center gap-2 group\">\n          <div class=\"w-8 h-8 rounded-full icon-box flex items-center justify-center group-hover:shadow-glow-sm transition-all\">\n            <i data-lucide=\"radar\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n          <\/div>\n          <span class=\"font-bold text-white tracking-tight\">El Ni\u00f1o <span class=\"text-epagri-light\">Epagri\/Ciram<\/span><\/span>\n        <\/a>\n        \n        <div class=\"hidden md:flex items-center gap-8\">\n          <a href=\"#impacto\" class=\"text-sm text-gray-300 hover:text-epagri-light transition-colors relative group\">\n            Matriz de Impacto\n            <span class=\"absolute bottom-0 left-0 w-0 h-0.5 bg-epagri-light transition-all duration-300 group-hover:w-full\"><\/span>\n          <\/a>\n          <a href=\"#timeline\" class=\"text-sm text-gray-300 hover:text-epagri-light transition-colors relative group\">\n            Timeline Sazonal\n            <span class=\"absolute bottom-0 left-0 w-0 h-0.5 bg-epagri-light transition-all duration-300 group-hover:w-full\"><\/span>\n          <\/a>\n          <a href=\"#recomendacoes\" class=\"text-sm text-gray-300 hover:text-epagri-light transition-colors relative group\">\n            Recomenda\u00e7\u00f5es\n            <span class=\"absolute bottom-0 left-0 w-0 h-0.5 bg-epagri-light transition-all duration-300 group-hover:w-full\"><\/span>\n          <\/a>\n          <a href=\"#contato\" class=\"text-sm text-gray-300 hover:text-epagri-light transition-colors relative group\">\n            Contato\n            <span class=\"absolute bottom-0 left-0 w-0 h-0.5 bg-epagri-light transition-all duration-300 group-hover:w-full\"><\/span>\n          <\/a>\n        <\/div>\n\n        <button class=\"md:hidden text-white p-2\" id=\"mobileMenuBtn\" aria-label=\"Menu\">\n          <i data-lucide=\"menu\" class=\"w-6 h-6\"><\/i>\n        <\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Menu -->\n    <div class=\"mobile-menu fixed top-0 right-0 h-full w-72 glass-panel-strong z-50 md:hidden p-6\" id=\"mobileMenu\">\n      <div class=\"flex justify-end mb-8\">\n        <button class=\"text-white p-2\" id=\"closeMobileMenu\" aria-label=\"Fechar menu\">\n          <i data-lucide=\"x\" class=\"w-6 h-6\"><\/i>\n        <\/button>\n      <\/div>\n      <div class=\"flex flex-col gap-6\">\n        <a href=\"#impacto\" class=\"text-lg text-white hover:text-epagri-light transition-colors mobile-link\">Matriz de Impacto<\/a>\n        <a href=\"#timeline\" class=\"text-lg text-white hover:text-epagri-light transition-colors mobile-link\">Timeline Sazonal<\/a>\n        <a href=\"#recomendacoes\" class=\"text-lg text-white hover:text-epagri-light transition-colors mobile-link\">Recomenda\u00e7\u00f5es<\/a>\n        <a href=\"#contato\" class=\"text-lg text-white hover:text-epagri-light transition-colors mobile-link\">Contato<\/a>\n      <\/div>\n    <\/div>\n  <\/nav>\n\n  <!-- Hero Section -->\n  <section class=\"relative min-h-screen hero-gradient grid-pattern flex items-center justify-center pt-16\">\n    <div class=\"hero-particles\" id=\"particles\"><\/div>\n    <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10\">\n      <div class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel mb-8 fade-in\">\n        <i data-lucide=\"activity\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n        <span class=\"text-xs sm:text-sm text-epagri-light font-medium tracking-wide uppercase\">Hotsite El Ni\u00f1o \u2014 Epagri\/Ciram<\/span>\n      <\/div>\n      \n      <h1 class=\"text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold mb-6 glow-text fade-in tracking-tight\">\n        Radar <span class=\"text-gradient\">Ap\u00edcola<\/span>\n      <\/h1>\n      \n      <p class=\"text-xl sm:text-2xl md:text-3xl text-gray-300 mb-4 font-light fade-in\" style=\"transition-delay: 0.1s\">\n        Clima, florada e produ\u00e7\u00e3o de mel\n      <\/p>\n      \n      <p class=\"max-w-3xl mx-auto text-base sm:text-lg text-gray-400 mb-10 leading-relaxed fade-in\" style=\"transition-delay: 0.2s\">\n        Matriz de impacto clim\u00e1tico do El Ni\u00f1o na apicultura catarinense. \n        Conectando o fen\u00f4meno clim\u00e1tico \u00e0s pr\u00e1ticas di\u00e1rias do apicultor, \n        com ci\u00eancia, previs\u00e3o e sustentabilidade.\n      <\/p>\n      \n      <div class=\"flex flex-col sm:flex-row gap-4 justify-center fade-in\" style=\"transition-delay: 0.3s\">\n        <a href=\"#impacto\" class=\"inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-epagri-dark to-epagri-light text-white rounded-lg font-semibold hover:shadow-glow transition-all duration-300 group\">\n          <span>Explorar Impactos<\/span>\n          <i data-lucide=\"arrow-down\" class=\"w-4 h-4 group-hover:translate-y-1 transition-transform\"><\/i>\n        <\/a>\n        <a href=\"#recomendacoes\" class=\"inline-flex items-center justify-center gap-2 px-8 py-4 glass-panel text-white rounded-lg font-semibold hover:border-epagri-light transition-all duration-300\">\n          <i data-lucide=\"clipboard-list\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n          <span>Boas Pr\u00e1ticas<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n    \n    <div class=\"absolute bottom-8 left-1\/2 -translate-x-1\/2 scroll-indicator\">\n      <i data-lucide=\"chevron-down\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n    <\/div>\n  <\/section>\n<br><br>\n<!-- Muni Section -->\n<!--h2 class=\"text-3xl sm:text-4xl md:text-5xl font-bold mt-3 mb-4\" style=\"text-align: center;\">\u00cdndice de Aten\u00e7\u00e3o Ap\u00edcola<\/h2><br>\n<section class=\"grid grid-cols-1 md:grid-cols-2 gap-6\" id=\"consulta-apicola\" aria-label=\"Consulta municipal de aten\u00e7\u00e3o clim\u00e1tica para apicultura\">\n\n      <article style=\"width: 175%; margin-left:15%;\" class=\"glass-panel rounded-2xl p-8 card-hover fade-in visible\" aria-live=\"polite\">\n\n        <div class=\"text-2xl font-bold text-white\">\n          <h2>Consulta por munic\u00edpio<\/h2>\n        <\/div>\n        <div>\n          <div class=\"flex items-start gap-3 text-gray-300\" id=\"csvStatus\">\n            <b>Carregando CSV p\u00fablico...<\/b>\n          <\/div><br>\n                    \n<div style=\"display: flex; flex-wrap: wrap; gap: 20px;\">\n\n <div style=\"display: flex; align-items: center; gap: 10px;\">\n    <label for=\"municipioSelect\">Munic\u00edpio<\/label>\n    <select id=\"municipioSelect\" name=\"municipioSelect\" disabled class=\"text-green-300\" style=\"background-color: #90EE90; color: gray; width: 255px;\">\n      <option>Carregando munic\u00edpios...<\/option>\n    <\/select>\n  <\/div>\n\n  <div style=\"display: flex; align-items: center; gap: 10px;\">\n    <label for=\"municipioSearch\">Busca r\u00e1pida<\/label>\n    <input style=\"background-color: #90EE90; width: 255px;\"\n      id=\"municipioSearch\"\n      type=\"text\"\n      placeholder=\"Digite parte do nome do munic\u00edpio\"\n      autocomplete=\"off\"\n    \/>\n  <\/div>\n<\/div>\n                                   \n            <\/div>\n       \n\n        <!--div class=\"text-2xl font-bold text-white\">\n          <h2>\u00cdndice de Aten\u00e7\u00e3o Ap\u00edcola<\/h2>\n        <\/div-->\n        <!--div class=\"flex items-start gap-3 text-gray-300\">\n          <h3 class=\"apis-municipio-heading\" id=\"selectedMunicipio\">Munic\u00edpio n\u00e3o selecionado<\/h3>\n          <div class=\"flex items-start gap-3 text-gray-300\">\n\t<div class=\"flex items-start gap-3 text-gray-300\" id=\"gauge\" class=\"absolute inset-0 rounded-full\"\n       style=\"background: conic-gradient(#72BC7A 0%, #2d3748 0%);\">\n              <div class=\"apis-gauge-inner\">\n                <span class=\"apis-gauge-number\" id=\"score\">--<\/span>\n                <span class=\"apis-gauge-label\">0 a 100<\/span>\n              <\/div>\n        <\/div>\t\t\t\n\n\n\n\n            <div>\n              <span class=\"apis-status\" id=\"status\">Aguardando dados<\/span>\n              <p class=\"apis-score-text\" id=\"scoreText\">\n                Selecione um munic\u00edpio para consultar a condi\u00e7\u00e3o ap\u00edcola estimada.\n              <\/p>\n              <div class=\"apis-kpi-strip\">\n                <div class=\"apis-kpi-mini\"><strong id=\"rainValue\">--<\/strong><span> Chuva acumulada em 7 dias<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"tempValue\">--<\/strong><span> Temperatura m\u00ednima atual<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"dryValue\">--<\/strong><span> Dias sem chuva<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"producerValue\">--<\/strong><span> Produtores no munic\u00edpio<\/span><\/div>\t\t\t\t\n              <\/div>\n              <div class=\"apis-bars\" id=\"riskBars\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div-->\n\t\t<!--div class=\"apis-card-body\">\n          <h3 class=\"apis-municipio-heading\" id=\"selectedMunicipio\">Munic\u00edpio n\u00e3o selecionado<\/h3>\n          <div class=\"apis-score-wrap\">\n            <div class=\"apis-gauge\" id=\"gauge\" style=\"--score: 0; --apis-gauge-color: var(--apis-green);\">\n              <div class=\"apis-gauge-inner\">\n                <span class=\"apis-gauge-number\" id=\"score\">--<\/span>\n                <span class=\"apis-gauge-label\">0 a 100<\/span>\n              <\/div>\n            <\/div>\n            <div>\n              <span class=\"apis-status\" id=\"status\">Aguardando dados<\/span>\n              <p class=\"apis-score-text\" id=\"scoreText\">\n                Selecione um munic\u00edpio para consultar a condi\u00e7\u00e3o ap\u00edcola estimada.\n              <\/p>\n              <div class=\"apis-kpi-strip\">\n                <div class=\"apis-kpi-mini\"><strong id=\"rainValue\">--<\/strong><span>Chuva acumulada em 7 dias<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"tempValue\">--<\/strong><span>Temperatura m\u00ednima atual<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"dryValue\">--<\/strong><span>Dias sem chuva<\/span><\/div>\n                <div class=\"apis-kpi-mini\"><strong id=\"producerValue\">--<\/strong><span>Produtores no munic\u00edpio<\/span><\/div>\t\t\t\t\n              <\/div>\n              <div class=\"apis-bars\" id=\"riskBars\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n    <\/section-->\n\n<!-- Muni Section -->\n\n  <!-- Impact Matrix Section -->\n  <section id=\"impacto\" class=\"py-24 px-4 sm:px-6 lg:px-8 relative\">\n    <div class=\"max-w-7xl mx-auto\">\n      <div class=\"text-center mb-16 fade-in\">\n        <span class=\"text-epagri-light text-sm font-semibold tracking-wider uppercase\">Matriz de Impacto Clim\u00e1tico<\/span>\n        <h2 class=\"text-3xl sm:text-4xl md:text-5xl font-bold mt-3 mb-4\">4 dimens\u00f5es do impacto do El Ni\u00f1o<\/h2>\n        <p class=\"text-gray-400 max-w-2xl mx-auto\">Como as varia\u00e7\u00f5es clim\u00e1ticas afetam a cadeia produtiva do mel em Santa Catarina, desde as abelhas at\u00e9 a qualidade do produto final.<\/p>\n      <\/div>\n      \n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n        <!-- Card 1: Abelhas -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover fade-in\">\n          <div class=\"flex items-start gap-5 mb-6\">\n            <div class=\"w-16 h-16 rounded-2xl icon-box flex items-center justify-center shrink-0\">\n              <i data-lucide=\"bug\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n            <\/div>\n            <div>\n              <h3 class=\"text-2xl font-bold text-white\">Abelhas <\/h3>\n              <p class=\"text-epagri-light text-sm mt-1\">Comportamento e sa\u00fade do enxame<\/p>\n            <\/div>\n          <\/div>\n          <ul class=\"space-y-4\">\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"cloud-rain\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Redu\u00e7\u00e3o do voo em per\u00edodos chuvosos, limitando a coleta de n\u00e9ctar e p\u00f3len.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"cookie\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Maior consumo de reservas alimentares, exigindo monitoramento constante.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"thermometer-snowflake\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Risco por frio intenso e baixa temperatura m\u00ednima, que fragilizam a col\u00f4nia.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Card 2: Plantas e Floradas -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover fade-in\" style=\"transition-delay: 0.1s\">\n          <div class=\"flex items-start gap-5 mb-6\">\n            <div class=\"w-16 h-16 rounded-2xl icon-box flex items-center justify-center shrink-0\">\n              <i data-lucide=\"flower-2\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n            <\/div>\n            <div>\n              <h3 class=\"text-2xl font-bold text-white\">Plantas e Floradas <\/h3>\n              <p class=\"text-epagri-light text-sm mt-1\">Disponibilidade de flora<\/p>\n            <\/div>\n          <\/div>\n          <ul class=\"space-y-4\">\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"snowflake\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Abortamento de flores por frio, geada ou chuva, prejudicando a florada.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"battery-warning\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Menor oferta de n\u00e9ctar e p\u00f3len, reduzindo o estoque alimentar do api\u00e1rio.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"sun-dim\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Risco de estresse h\u00eddrico quando h\u00e1 muitos dias sem chuva.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Card 3: Manejo, Colheita e Transporte -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover fade-in\" style=\"transition-delay: 0.2s\">\n          <div class=\"flex items-start gap-5 mb-6\">\n            <div class=\"w-16 h-16 rounded-2xl icon-box flex items-center justify-center shrink-0\">\n              <i data-lucide=\"wrench\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n            <\/div>\n            <div>\n              <h3 class=\"text-2xl font-bold text-white\">Manejo, Colheita e Transporte <\/h3>\n              <p class=\"text-epagri-light text-sm mt-1\">Opera\u00e7\u00f5es no api\u00e1rio<\/p>\n            <\/div>\n          <\/div>\n          <ul class=\"space-y-4\">\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"calendar-clock\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Atraso de manejo em per\u00edodos chuvosos, com reorganiza\u00e7\u00e3o da rotina produtiva.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"car\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Dificuldade de acesso ao api\u00e1rio em estradas de terra molhadas ou alagadas.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"clock\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Necessidade de planejar janelas operacionais de acordo com a previs\u00e3o do tempo.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Card 4: Qualidade do Mel -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover fade-in\" style=\"transition-delay: 0.3s\">\n          <div class=\"flex items-start gap-5 mb-6\">\n            <div class=\"w-16 h-16 rounded-2xl icon-box flex items-center justify-center shrink-0\">\n              <i data-lucide=\"droplets\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n            <\/div>\n            <div>\n              <h3 class=\"text-2xl font-bold text-white\">Qualidade do Mel <\/h3>\n              <p class=\"text-epagri-light text-sm mt-1\">Padr\u00f5es do produto final<\/p>\n            <\/div>\n          <\/div>\n          <ul class=\"space-y-4\">\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"alert-triangle\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Chuva recente pode indicar maior aten\u00e7\u00e3o \u00e0 colheita e armazenamento.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"gauge\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Risco operacional associado \u00e0 umidade e retirada do mel em condi\u00e7\u00f5es inadequadas.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300\">\n              <i data-lucide=\"package-check\" class=\"w-5 h-5 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Observar opercula\u00e7\u00e3o e condi\u00e7\u00f5es de armazenamento para garantir a qualidade.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Timeline Section -->\n  <section id=\"timeline\" class=\"py-24 px-4 sm:px-6 lg:px-8 bg-epagri-muted\/30 relative\">\n    <div class=\"max-w-6xl mx-auto\">\n      <div class=\"text-center mb-16 fade-in\">\n        <span class=\"text-epagri-light text-sm font-semibold tracking-wider uppercase\">Timeline Sazonal<\/span>\n        <h2 class=\"text-3xl sm:text-4xl md:text-5xl font-bold mt-3 mb-4\">O ciclo do El Ni\u00f1o e a apicultura<\/h2>\n        <p class=\"text-gray-400 max-w-2xl mx-auto\">Recomenda\u00e7\u00f5es pr\u00e1ticas para cada fase do fen\u00f4meno, alinhando previs\u00e3o clim\u00e1tica e manejo ap\u00edcola.<\/p>\n      <\/div>\n\n      <div class=\"relative\">\n        <div class=\"absolute left-4 md:left-1\/2 top-0 bottom-0 w-1 timeline-line rounded-full md:-translate-x-1\/2\"><\/div>\n        \n        <div class=\"space-y-12\">\n          <!-- Fase 1 -->\n          <div class=\"relative flex flex-col md:flex-row items-start md:items-center gap-8 fade-in\">\n            <div class=\"absolute left-4 md:left-1\/2 w-5 h-5 rounded-full bg-epagri-light timeline-dot md:-translate-x-1\/2 top-0\"><\/div>\n            <div class=\"md:w-1\/2 md:pr-12 pl-12 md:pl-0 md:text-right\">\n              <div class=\"glass-panel rounded-2xl p-6 card-hover\">\n                <span class=\"text-epagri-light text-xs font-bold tracking-wider uppercase\">Fase 1<\/span>\n                <h3 class=\"text-xl font-bold mt-2 mb-3\">Aquecimento e Anomalias de Chuva<\/h3>\n                <p class=\"text-gray-400 text-lg leading-relaxed\">In\u00edcio do dist\u00farbio clim\u00e1tico com chuvas irregulares e per\u00edodos de calor acentuado. As abelhas aumentam o consumo de \u00e1gua e as floradas podem antecipar ou atrasar.<\/p>\n                <div class=\"mt-4 flex flex-wrap gap-2 justify-end\">\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Monitorar \u00e1gua<\/span>\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Avaliar floradas<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"md:w-1\/2 pl-12 md:pl-12 hidden md:block\">\n              <div class=\"glass-panel rounded-2xl p-6 border-l-4 border-epagri-light\">\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <i data-lucide=\"binoculars\" class=\"w-5 h-5 text-epagri-light\"><\/i>\n                  <h4 class=\"font-semibold\">A\u00e7\u00e3o do apicultor<\/h4>\n                <\/div>\n                <p class=\"text-gray-300 text-lg\">Refor\u00e7ar o monitoramento semanal das col\u00f4nias, verificar reservas de mel e p\u00f3len, e garantir fontes de \u00e1gua limpa no api\u00e1rio.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Fase 2 -->\n          <div class=\"relative flex flex-col md:flex-row items-start md:items-center gap-8 fade-in\">\n            <div class=\"absolute left-4 md:left-1\/2 w-5 h-5 rounded-full bg-epagri-light timeline-dot md:-translate-x-1\/2 top-0\"><\/div>\n            <div class=\"md:w-1\/2 md:pr-12 pl-12 md:pl-0 md:text-right md:order-1\">\n              <div class=\"glass-panel rounded-2xl p-6 card-hover\">\n                <span class=\"text-epagri-light text-xs font-bold tracking-wider uppercase\">Fase 2<\/span>\n                <h3 class=\"text-xl font-bold mt-2 mb-3\">Pico do El Ni\u00f1o \u2014 Chuvas Intensas<\/h3>\n                <p class=\"text-gray-400 text-lg leading-relaxed\">Per\u00edodo cr\u00edtico com maior volume de chuvas. O voo das abelhas \u00e9 reduzido, o acesso ao api\u00e1rio \u00e9 dificultado e a colheita pode ser adiada.<\/p>\n                <div class=\"mt-4 flex flex-wrap gap-2 justify-end\">\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Adiar colheita<\/span>\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Suplementar alimento<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"md:w-1\/2 pl-12 md:pl-12 hidden md:block md:order-2\">\n              <div class=\"glass-panel rounded-2xl p-6 border-l-4 border-epagri-light\">\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <i data-lucide=\"shield\" class=\"w-5 h-5 text-epagri-light\"><\/i>\n                  <h4 class=\"font-semibold\">A\u00e7\u00e3o do apicultor<\/h4>\n                <\/div>\n                <p class=\"text-gray-300 text-lg\">Adiar interven\u00e7\u00f5es e colheitas para janelas de tempo firme. Oferecer suplementa\u00e7\u00e3o alimentar se as reservas estiverem baixas.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Fase 3 -->\n          <div class=\"relative flex flex-col md:flex-row items-start md:items-center gap-8 fade-in\">\n            <div class=\"absolute left-4 md:left-1\/2 w-5 h-5 rounded-full bg-epagri-light timeline-dot md:-translate-x-1\/2 top-0\"><\/div>\n            <div class=\"md:w-1\/2 md:pr-12 pl-12 md:pl-0 md:text-right md:order-1\">\n              <div class=\"glass-panel rounded-2xl p-6 card-hover\">\n                <span class=\"text-epagri-light text-xs font-bold tracking-wider uppercase\">Fase 3<\/span>\n                <h3 class=\"text-xl font-bold mt-2 mb-3\">Transi\u00e7\u00e3o \u2014 Estiagens e Frio<\/h3>\n                <p class=\"text-gray-400 text-lg leading-relaxed\">Ap\u00f3s o pico, podem ocorrer estiagens prolongadas, geadas tardias e eventos de frio intenso. As floradas ficam estressadas e a produ\u00e7\u00e3o irregular.<\/p>\n                <div class=\"mt-4 flex flex-wrap gap-2 justify-end\">\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Prote\u00e7\u00e3o contra frio<\/span>\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Irriga\u00e7\u00e3o de flora<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"md:w-1\/2 pl-12 md:pl-12 hidden md:block md:order-2\">\n              <div class=\"glass-panel rounded-2xl p-6 border-l-4 border-epagri-light\">\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <i data-lucide=\"sun\" class=\"w-5 h-5 text-epagri-light\"><\/i>\n                  <h4 class=\"font-semibold\">A\u00e7\u00e3o do apicultor<\/h4>\n                <\/div>\n                <p class=\"text-gray-300 text-lg\">Verificar ventila\u00e7\u00e3o e prote\u00e7\u00e3o das colmeias. Aproveitar dias firmes para manejo e colheita. Planejar irriga\u00e7\u00e3o complementar da flora\u00e7\u00e3o pr\u00f3xima.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Fase 4 -->\n          <div class=\"relative flex flex-col md:flex-row items-start md:items-center gap-8 fade-in\">\n            <div class=\"absolute left-4 md:left-1\/2 w-5 h-5 rounded-full bg-epagri-light timeline-dot md:-translate-x-1\/2 top-0\"><\/div>\n            <div class=\"md:w-1\/2 md:pr-12 pl-12 md:pl-0 md:text-right md:order-1\">\n              <div class=\"glass-panel rounded-2xl p-6 card-hover\">\n                <span class=\"text-epagri-light text-xs font-bold tracking-wider uppercase\">Fase 4<\/span>\n                <h3 class=\"text-xl font-bold mt-2 mb-3\">Recupera\u00e7\u00e3o e Reorganiza\u00e7\u00e3o<\/h3>\n                <p class=\"text-gray-400 text-lg leading-relaxed\">Retorno gradual dos padr\u00f5es clim\u00e1ticos. Momento de reorganizar o api\u00e1rio, avaliar perdas e planejar a pr\u00f3xima safra.<\/p>\n                <div class=\"mt-4 flex flex-wrap gap-2 justify-end\">\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Avaliar col\u00f4nias<\/span>\n                  <span class=\"px-3 py-1 rounded-full text-xs bg-epagri-dark\/40 text-epagri-light border border-epagri-light\/20\">Repopula\u00e7\u00e3o<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"md:w-1\/2 pl-12 md:pl-12 hidden md:block md:order-2\">\n              <div class=\"glass-panel rounded-2xl p-6 border-l-4 border-epagri-light\">\n                <div class=\"flex items-center gap-3 mb-3\">\n                  <i data-lucide=\"refresh-cw\" class=\"w-5 h-5 text-epagri-light\"><\/i>\n                  <h4 class=\"font-semibold\">A\u00e7\u00e3o do apicultor<\/h4>\n                <\/div>\n                <p class=\"text-gray-300 text-lg\">Realizar diagn\u00f3stico das col\u00f4nias, promover divis\u00f5es saud\u00e1veis e refor\u00e7ar o estoque gen\u00e9tico adaptado \u00e0s condi\u00e7\u00f5es locais.<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Recommendations Section -->\n  <section id=\"recomendacoes\" class=\"py-24 px-4 sm:px-6 lg:px-8\">\n    <div class=\"max-w-7xl mx-auto\">\n      <div class=\"text-center mb-16 fade-in\">\n        <span class=\"text-epagri-light text-sm font-semibold tracking-wider uppercase\">Recomenda\u00e7\u00f5es de Manejo<\/span>\n        <h2 class=\"text-3xl sm:text-4xl md:text-5xl font-bold mt-3 mb-4\">Boas pr\u00e1ticas por cen\u00e1rio clim\u00e1tico<\/h2>\n        <p class=\"text-gray-400 max-w-2xl mx-auto\">A\u00e7\u00f5es pr\u00e1ticas para o apicultor catarinense enfrentar chuva intensa, estiagem e frio com seguran\u00e7a e efici\u00eancia.<\/p>\n<br><a href=\"https:\/\/ciram.epagri.sc.gov.br\/ciram_arquivos\/site\/elnino\/orientacoes-elnino-apicultura.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-6 py-3 bg-epagri-dark hover:bg-epagri-light text-white rounded-lg font-medium transition-all duration-300 shrink-0\">\n            <span>Orienta\u00e7\u00e3o T\u00e9cnica Epagri<\/span>\n            <i data-lucide=\"external-link\" class=\"w-4 h-4\"><\/i>\n          <\/a>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        <!-- Chuva Intensa -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover recommendation-card fade-in\">\n          <div class=\"w-14 h-14 rounded-2xl icon-box flex items-center justify-center mb-6\">\n            <i data-lucide=\"cloud-rain-wind\" class=\"w-7 h-7 text-epagri-light\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-4\">Chuva Intensa<\/h3>\n          <ul class=\"space-y-3\">\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Adiar colheita e manuseio de quadros at\u00e9 a melhoria do tempo.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Garantir drenagem no api\u00e1rio e evitar alagamentos das bases.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Verificar reservas de alimento e fazer suplementa\u00e7\u00e3o se necess\u00e1rio.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Planejar acesso preferencial por caminhos pavimentados ou firmes.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Estiagem -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover recommendation-card fade-in\" style=\"transition-delay: 0.1s\">\n          <div class=\"w-14 h-14 rounded-2xl icon-box flex items-center justify-center mb-6\">\n            <i data-lucide=\"sun-dim\" class=\"w-7 h-7 text-epagri-light\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-4\">Estiagem<\/h3>\n          <ul class=\"space-y-3\">\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Fornecer \u00e1gua limpa e sombreada permanentemente no api\u00e1rio.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Monitorar flora\u00e7\u00e3o e considerar irriga\u00e7\u00e3o complementar da \u00e1rea.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Reduzir a carga de trabalho das col\u00f4nias fracas durante a seca.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Evitar superenxames e manter controle de swarming.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n\n        <!-- Frio -->\n        <div class=\"glass-panel rounded-2xl p-8 card-hover recommendation-card fade-in\" style=\"transition-delay: 0.2s\">\n          <div class=\"w-14 h-14 rounded-2xl icon-box flex items-center justify-center mb-6\">\n            <i data-lucide=\"snowflake\" class=\"w-7 h-7 text-epagri-light\"><\/i>\n          <\/div>\n          <h3 class=\"text-xl font-bold mb-4\">Frio Intenso<\/h3>\n          <ul class=\"space-y-3\">\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Manter col\u00f4nias fortes e bem alimentadas antes do inverno.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Reduzir entrada de ventos e garantir ventila\u00e7\u00e3o adequada.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Proteger contra geadas com cobertura ou localiza\u00e7\u00e3o favor\u00e1vel.<\/span>\n            <\/li>\n            <li class=\"flex items-start gap-3 text-gray-300 text-lg\">\n              <i data-lucide=\"check\" class=\"w-4 h-4 text-epagri-light shrink-0 mt-0.5\"><\/i>\n              <span>Evitar abertura das colmeias em dias de temperatura baixa.<\/span>\n            <\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <!-- Janelas Operacionais -->\n      <div class=\"mt-12 glass-panel-strong rounded-2xl p-8 md:p-12 fade-in\">\n        <div class=\"flex flex-col md:flex-row items-start md:items-center gap-6\">\n          <div class=\"w-16 h-16 rounded-2xl icon-box flex items-center justify-center shrink-0\">\n            <i data-lucide=\"calendar-check\" class=\"w-8 h-8 text-epagri-light\"><\/i>\n          <\/div>\n          <div class=\"flex-1\">\n            <h3 class=\"text-2xl font-bold mb-2\">Planejamento de Janelas Operacionais<\/h3>\n            <p class=\"text-gray-300 leading-relaxed\">\n              Consulte a previs\u00e3o do tempo de m\u00e9dio prazo da Epagri\/Ciram para programar manejo, divis\u00f5es, transporte e colheita. \n              Prefira per\u00edodos de tempo est\u00e1vel, com temperaturas amenas e aus\u00eancia de chuva forte. Uma boa janela operacional reduz estresse \n              nas col\u00f4nias, melhora a seguran\u00e7a do produtor e a qualidade do mel.\n            <\/p>\n          <\/div>\n          <a href=\"https:\/\/ciram.epagri.sc.gov.br\/index.php\/previsao-municipio-15-dias\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center gap-2 px-6 py-3 bg-epagri-dark hover:bg-epagri-light text-white rounded-lg font-medium transition-all duration-300 shrink-0\">\n            <span>Previs\u00e3o Epagri<\/span>\n            <i data-lucide=\"external-link\" class=\"w-4 h-4\"><\/i>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA Section -->\n  <section class=\"py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden\">\n    <div class=\"absolute inset-0 bg-gradient-to-b from-epagri-dark\/20 to-transparent\"><\/div>\n    <div class=\"max-w-4xl mx-auto text-center relative z-10 fade-in\">\n      <h2 class=\"text-3xl sm:text-4xl font-bold mb-4\">Acompanhe o clima. Proteja a produ\u00e7\u00e3o.<\/h2>\n      <p class=\"text-gray-400 mb-8 text-lg\">O Radar Ap\u00edcola \u00e9 uma ferramenta de apoio ao apicultor catarinense para enfrentar os desafios do El Ni\u00f1o com informa\u00e7\u00e3o t\u00e9cnica.<\/p>\n      <div class=\"flex flex-col sm:flex-row gap-4 justify-center\">\n        <a href=\"https:\/\/ciram.epagri.sc.gov.br\/index.php\/elnino-apicultura\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"inline-flex items-center justify-center gap-2 px-8 py-4 bg-gradient-to-r from-epagri-dark to-epagri-light text-white rounded-lg font-semibold hover:shadow-glow transition-all duration-300\">\n          <span>Conte\u00fado Oficial<\/span>\n          <i data-lucide=\"external-link\" class=\"w-4 h-4\"><\/i>\n        <\/a>\n        <button id=\"shareBtn\" class=\"inline-flex items-center justify-center gap-2 px-8 py-4 glass-panel text-white rounded-lg font-semibold hover:border-epagri-light transition-all duration-300\">\n          <i data-lucide=\"share-2\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n          <span>Compartilhar<\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Footer -->\n  <footer id=\"contato\" class=\"border-t border-epagri-dark\/50 bg-epagri-muted\/50 pt-16 pb-8 px-4 sm:px-6 lg:px-8\">\n    <div class=\"max-w-7xl mx-auto\">\n      <div class=\"grid grid-cols-1 md:grid-cols-4 gap-12 mb-12\">\n        <div class=\"md:col-span-2\">\n          <div class=\"flex items-center gap-2 mb-4\">\n            <div class=\"w-10 h-10 rounded-full icon-box flex items-center justify-center\">\n              <i data-lucide=\"radar\" class=\"w-5 h-5 text-epagri-light\"><\/i>\n            <\/div>\n            <span class=\"font-bold text-xl\">Radar Ap\u00edcola<\/span>\n          <\/div>\n          <p class=\"text-gray-400 text-lg leading-relaxed max-w-md mb-6\">\n            Iniciativa do Hotsite El Ni\u00f1o da Epagri\/Ciram para apoiar a apicultura catarinense com \n            informa\u00e7\u00f5es clim\u00e1ticas e t\u00e9cnicas de manejo. Fortalecendo a cadeia produtiva do mel em Santa Catarina.\n          <\/p>\n          <div class=\"flex gap-4\">\n            <a href=\"https:\/\/www.epagri.sc.gov.br\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-10 h-10 rounded-full glass-panel flex items-center justify-center hover:border-epagri-light transition-all\" aria-label=\"Epagri\">\n              <i data-lucide=\"globe\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/www.facebook.com\/EpagriOficial\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-10 h-10 rounded-full glass-panel flex items-center justify-center hover:border-epagri-light transition-all\" aria-label=\"Facebook\">\n              <i data-lucide=\"facebook\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/www.instagram.com\/epagrioficial\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"w-10 h-10 rounded-full glass-panel flex items-center justify-center hover:border-epagri-light transition-all\" aria-label=\"Instagram\">\n              <i data-lucide=\"instagram\" class=\"w-4 h-4 text-epagri-light\"><\/i>\n            <\/a>\n          <\/div>\n        <\/div>\n\n        <div>\n          <h4 class=\"font-bold text-white mb-4\">Navega\u00e7\u00e3o<\/h4>\n          <ul class=\"space-y-3\">\n            <li><a href=\"#impacto\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Matriz de Impacto<\/a><\/li>\n            <li><a href=\"#timeline\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Timeline Sazonal<\/a><\/li>\n            <li><a href=\"#recomendacoes\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Recomenda\u00e7\u00f5es<\/a><\/li>\n            <li><a href=\"https:\/\/ciram.epagri.sc.gov.br\/index.php\/elnino-apicultura\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">P\u00e1gina Oficial<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div>\n          <h4 class=\"font-bold text-white mb-4\">Institucional<\/h4>\n          <ul class=\"space-y-3\">\n            <li><a href=\"https:\/\/www.epagri.sc.gov.br\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Epagri<\/a><\/li>\n            <li><a href=\"https:\/\/ciram.epagri.sc.gov.br\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Ciram<\/a><\/li>\n            <li><a href=\"https:\/\/ciram.epagri.sc.gov.br\/index.php\/elnino\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Hotsite El Ni\u00f1o<\/a><\/li>\n            <li><a href=\"https:\/\/www.sc.gov.br\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-sm text-gray-400 hover:text-epagri-light transition-colors\">Governo de SC<\/a><\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div class=\"border-t border-epagri-dark\/30 pt-8 flex flex-col md:flex-row justify-between items-center gap-4\">\n        <p class=\"text-xs text-gray-500 text-center md:text-left\">\n          \u00a9 2026 Epagri\/Ciram. Todos os direitos reservados. Conte\u00fado baseado na matriz oficial do Hotsite El Ni\u00f1o.\n        <\/p>\n        <p class=\"text-xs text-gray-500\">\n          Desenvolvido com dados t\u00e9cnicos do <a href=\"https:\/\/ciram.epagri.sc.gov.br\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-epagri-light hover:underline\">Epagri\/Ciram<\/a>.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/footer>\n\n  <!-- Floating Share Button -->\n  <button id=\"floatingShare\" class=\"fixed bottom-6 right-6 z-40 w-14 h-14 rounded-full bg-gradient-to-r from-epagri-dark to-epagri-light text-white flex items-center justify-center shadow-lg floating-btn 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    \/\/ Create hero particles\n    const particlesContainer = document.getElementById('particles');\n    for (let i = 0; i < 30; i++) {\n      const particle = document.createElement('div');\n      particle.className = 'particle';\n      particle.style.left = Math.random() * 100 + '%';\n      particle.style.animationDelay = Math.random() * 15 + 's';\n      particle.style.animationDuration = (10 + Math.random() * 10) + 's';\n      particle.style.opacity = Math.random() * 0.5 + 0.2;\n      particlesContainer.appendChild(particle);\n    }\n\n    \/\/ Reading progress bar\n    const progressBar = document.getElementById('progressBar');\n    window.addEventListener('scroll', () => {\n      const scrollTop = window.scrollY;\n      const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n      const progress = (scrollTop \/ docHeight) * 100;\n      progressBar.style.width = progress + '%';\n    });\n\n    \/\/ Mobile menu\n    const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n    const closeMobileMenu = document.getElementById('closeMobileMenu');\n    const mobileMenu = document.getElementById('mobileMenu');\n    const mobileLinks = document.querySelectorAll('.mobile-link');\n\n    mobileMenuBtn.addEventListener('click', () => {\n      mobileMenu.classList.add('open');\n    });\n\n    closeMobileMenu.addEventListener('click', () => {\n      mobileMenu.classList.remove('open');\n    });\n\n    mobileLinks.forEach(link => {\n      link.addEventListener('click', () => {\n        mobileMenu.classList.remove('open');\n      });\n    });\n\n    \/\/ Fade-in on scroll\n    const observerOptions = {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.1\n    };\n\n    const fadeObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('visible');\n          fadeObserver.unobserve(entry.target);\n        }\n      });\n    }, observerOptions);\n\n    document.querySelectorAll('.fade-in').forEach(el => {\n      fadeObserver.observe(el);\n    });\n\n    \/\/ Navbar background on scroll\n    const navbar = document.getElementById('navbar');\n    window.addEventListener('scroll', () => {\n      if (window.scrollY > 50) {\n        navbar.classList.add('shadow-lg');\n        navbar.style.background = 'rgba(19, 81, 38, 0.25)';\n      } else {\n        navbar.classList.remove('shadow-lg');\n        navbar.style.background = 'rgba(19, 81, 38, 0.15)';\n      }\n    });\n\n    \/\/ Share functionality\n    const shareData = {\n      title: 'Radar Ap\u00edcola \u2014 El Ni\u00f1o Epagri\/Ciram',\n      text: 'Confira a Matriz de Impacto Clim\u00e1tico na Apicultura de Santa Catarina.',\n      url: 'https:\/\/ciram.epagri.sc.gov.br\/index.php\/elnino-apicultura\/'\n    };\n\n    const handleShare = async () => {\n      if (navigator.share) {\n        try {\n          await navigator.share(shareData);\n        } catch (err) {\n          console.log('Compartilhamento cancelado');\n        }\n      } else {\n        try {\n          await navigator.clipboard.writeText(window.location.href);\n          alert('Link copiado para a \u00e1rea de transfer\u00eancia!');\n        } catch (err) {\n          console.log('Erro ao copiar link');\n        }\n      }\n    };\n\n    document.getElementById('shareBtn').addEventListener('click', handleShare);\n    document.getElementById('floatingShare').addEventListener('click', handleShare);\n\n    \/\/ Smooth scroll for anchor links (polyfill for older browsers)\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({\n            behavior: 'smooth',\n            block: 'start'\n          });\n        }\n      });\n    });\n\t\n\tlet dadosCSV = [];\n\n\/\/ muni \n\nconst CSV_URL_PUBLICA = \"https:\/\/ciram.epagri.sc.gov.br\/ciram_arquivos\/site\/elnino\/radar-apicola.csv\";\n    \n    const CONFIG = {\n      csvUrls: [\n        CSV_URL_PUBLICA,\n        \"\/ciram_arquivos\/site\/elnino\/radar-apicola.csv\"\n      ]\n    };\n    const state = {\n      rows: [],\n      filteredRows: [],\n      selectedRow: null,\n      csvSource: \"\",\n      producerRows: [],\n      producersByMunicipio: new Map(),\n      producerCsvSource: \"\",\n      lastMunicipio: \"\"\n    };\n\n\tlet ultimaAtualizacao = \"\";\n\n    const elements = {\n      csvStatus: document.getElementById(\"csvStatus\"),\n      municipioSelect: document.getElementById(\"municipioSelect\"),\n      municipioSearch: document.getElementById(\"municipioSearch\"),\n      selectedMunicipio: document.getElementById(\"selectedMunicipio\"),\n      gauge: document.getElementById(\"gauge\"),\n      score: document.getElementById(\"score\"),\n      status: document.getElementById(\"status\"),\n      scoreText: document.getElementById(\"scoreText\"),\n      rainValue: document.getElementById(\"rainValue\"),\n      tempValue: document.getElementById(\"tempValue\"),\n      dryValue: document.getElementById(\"dryValue\"),\n      riskBars: document.getElementById(\"riskBars\"),\n      recommendations: document.getElementById(\"recommendations\"),\n      \/\/heroMunicipio: document.getElementById(\"heroMunicipio\"),\n\t  \/\/terceiroMunicipio: document.getElementById(\"terceiroMunicipio\"),\n      \/\/heroScore: document.getElementById(\"heroScore\"),\n      \/\/heroRain: document.getElementById(\"heroRain\"),\n      \/\/heroTemp: document.getElementById(\"heroTemp\"),\n      \/\/heroDry: document.getElementById(\"heroDry\"),\n      \/\/heroProducers: document.getElementById(\"heroProducers\"),\n      producerValue: document.getElementById(\"producerValue\")\n    };\n\t\n    function clamp(value, min, max) {\n      return Math.max(min, Math.min(max, value));\n    }\n\n    function normalizeText(value) {\n      return String(value || \"\")\n        .normalize(\"NFD\")\n        .replace(\/[\u0300-\u036f]\/g, \"\")\n        .toLowerCase()\n        .trim();\n    }\n\n    function toNumber(value) {\n      if (value === null || value === undefined || value === \"\") return 0;\n      const parsed = Number(String(value).replace(\".\", \".\").replace(\",\", \".\"));\n      return Number.isFinite(parsed) ? parsed : 0;\n    }\n\n    function parseCsvLine(line, delimiter) {\n      const result = [];\n      let current = \"\";\n      let insideQuotes = false;\n\n      for (let i = 0; i < line.length; i++) {\n        const char = line[i];\n        const next = line[i + 1];\n\n        if (char === '\"' && insideQuotes && next === '\"') {\n          current += '\"';\n          i++;\n        } else if (char === '\"') {\n          insideQuotes = !insideQuotes;\n        } else if (char === delimiter && !insideQuotes) {\n          result.push(current.trim());\n          current = \"\";\n        } else {\n          current += char;\n        }\n      }\n\n      result.push(current.trim());\n      return result;\n    }\n\n    function detectDelimiter(headerLine) {\n      const candidates = [\";\", \",\", \"\t\"];\n      return candidates\n        .map(delimiter => [delimiter, headerLine.split(delimiter).length])\n        .sort((a, b) => b[1] - a[1])[0][0];\n    }\n\n    function parseRadarCsv(text) {\n\t\t\n      const clean = String(text || \"\").replace(\/^\ufeff\/, \"\").trim();\n      if (!clean) return [];\n\n      const lines = clean.split(\/\\r?\\n\/).filter(line => line.trim() !== \"\");\n      const delimiter = detectDelimiter(lines[0]);\n      const headers = parseCsvLine(lines[0], delimiter).map(h => normalizeText(h));\n\n      const idxMuni = headers.indexOf(\"muni\");\n      const idxRain = headers.indexOf(\"total_vlprec\");\n      const idxTemp = headers.indexOf(\"vlmin_atual\");\n      const idxDry = headers.indexOf(\"dias_sem_chuva\");\n\t  const idxProd = headers.indexOf(\"nr_prod\");\n\n      if ([idxMuni, idxRain, idxTemp, idxDry].some(index => index < 0)) {\n        throw new Error(\"CSV inv\u00e1lido. Colunas esperadas: muni;total_vlprec;vlmin_atual;dias_sem_chuva; nr_prod\");\n      }\n\n      return lines.slice(1).map((line, index) => {\n        const cols = parseCsvLine(line, delimiter);\n        return {\n          id: index + 1,\n          muni: cols[idxMuni],\n          muniNorm: normalizeText(cols[idxMuni]),\n          total_vlprec: toNumber(cols[idxRain]),\n          vlmin_atual: toNumber(cols[idxTemp]),\n          dias_sem_chuva: Math.round(toNumber(cols[idxDry])),\n\t\t  nr_prod: Math.round(toNumber(cols[idxProd]))\n        };\n      }).filter(row => row.muni);\n\t  \/\/console.log('manu muni = ' + muni);\n    }\n\n\n    function findHeaderIndex(headers, candidates) {\n      for (const candidate of candidates) {\n        const normalized = normalizeText(candidate);\n        const exactIndex = headers.indexOf(normalized);\n        if (exactIndex >= 0) return exactIndex;\n      }\n\n      for (let i = 0; i < headers.length; i++) {\n        const header = headers[i];\n        if (candidates.some(candidate => header.includes(normalizeText(candidate)))) return i;\n      }\n\n      return -1;\n    }\n\n    function parseProducerCsv(text) {\n      const clean = String(text || \"\").replace(\/^\\uFEFF\/, \"\").trim();\n      if (!clean) return [];\n\n      const lines = clean.split(\/\\r?\\n\/).filter(line => line.trim() !== \"\");\n      const delimiter = detectDelimiter(lines[0]);\n      const rawHeaders = parseCsvLine(lines[0], delimiter);\n      const headers = rawHeaders.map(h => normalizeText(h));\n\n      const idxMuni = findHeaderIndex(headers, [\n        \"muni\", \"municipio\", \"munic\u00edpio\", \"cidade\", \"nome_municipio\", \"nm_municipio\", \"nm_mun\", \"nome\"\n      ]);\n\n      let idxProdutores = findHeaderIndex(headers, [\n        \"produtores\", \"produtor\", \"numero_produtores\", \"n_produtores\", \"num_produtores\",\n        \"qtd_produtores\", \"quantidade_produtores\", \"produtores_apicultura\", \"apicultores\",\n        \"apicultor\", \"numero_apicultores\", \"n_apicultores\", \"qtd_apicultores\", \"cid\"\n      ]);\n\n      if (idxMuni < 0) {\n        throw new Error(\"CSV de produtores sem coluna de munic\u00edpio reconhecida.\");\n      }\n\n      const rows = lines.slice(1).map((line, index) => {\n        const cols = parseCsvLine(line, delimiter);\n        return {\n          id: index + 1,\n          muni: cols[idxMuni],\n          muniNorm: normalizeText(cols[idxMuni]),\n          raw: cols\n        };\n      }).filter(row => row.muni);\n\n      if (idxProdutores < 0) {\n        for (let i = 0; i < rawHeaders.length; i++) {\n          if (i === idxMuni) continue;\n          const hasNumericValues = rows.some(row => Number.isFinite(toNumber(row.raw[i])) && String(row.raw[i] || \"\").trim() !== \"\");\n          if (hasNumericValues) {\n            idxProdutores = i;\n            break;\n          }\n        }\n      }\n\n      if (idxProdutores < 0) {\n        throw new Error(\"CSV de produtores sem coluna num\u00e9rica reconhecida.\");\n      }\n\n      return rows.map(row => ({\n        id: row.id,\n        muni: row.muni,\n        muniNorm: row.muniNorm,\n        produtores: Math.round(toNumber(row.raw[idxProdutores]))\n      })).filter(row => row.muni);\n    }\n\n    function addCacheBuster(url) {\n      const separator = url.includes(\"?\") ? \"&\" : \"?\";\n      return `${url}${separator}_radar=${Date.now()}`;\n    }\n\n    async function fetchCsv(url) {\n      const finalUrl = addCacheBuster(url);\n      const response = await fetch(finalUrl, {\n        cache: \"no-store\",\n        headers: { \"Accept\": \"text\/csv,text\/plain,*\/*\" }\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP ${response.status} ao carregar ${url}`);\n      }\n\n      const text = await response.text();\n      if (!text || !text.trim()) {\n        throw new Error(`CSV vazio em ${url}`);\n      }\n\n      return text;\n    }\n\n    async function loadRadarApicolaFromCsv(urls = CONFIG.csvUrls) {\n      const urlList = Array.isArray(urls) ? urls : [urls];\n      const errors = [];\n\n      setCsvStatus(\"Carregando dados...\");\n\n      for (const url of urlList) {\n        try {\n\t\t\t\t\n\t\t  const response = await fetch(url);\n\n\t\t  const lastModified = response.headers.get(\"Last-Modified\");\n\t\t  const data = new Date(lastModified);\n\n          \/\/ultimaAtualizacao = data.toLocaleDateString(\"pt-BR\") + \" \" +  data.toLocaleTimeString(\"pt-BR\");\t\t  \n\t\t  ultimaAtualizacao = data.toLocaleDateString(\"pt-BR\");\t\t  \n\t      \/\/console.log('data = ' + ultimaAtualizacao);\t\t  \t\t\n\t\t\n          const text = await fetchCsv(url);\n          applyCsv(text, url);\n          return;\n        } catch (error) {\n          console.warn(`Falha ao carregar CSV em ${url}:`, error);\n          errors.push(`${url}: ${error.message}`);\n        }\n      }\n\n      setCsvStatus(\"Dados indispon\u00edveis\", errors.join(\" | \"));\n    }\n\n\n    async function loadProducerCsv(urls = CONFIG.producerCsvUrls) {\t\n      const urlList = Array.isArray(urls) ? urls : [urls];\n      const errors = [];\n\n      for (const url of urlList) {\n        try {\n          const text = await fetchCsv(url);\n          applyProducerCsv(text, url);\n          return;\n        } catch (error) {\n          console.warn(`Falha ao carregar CSV de produtores em ${url}:`, error);\n          errors.push(`${url}: ${error.message}`);\n        }\n      }\n\n      state.producerRows = [];\n      state.producersByMunicipio = new Map();\n      console.warn(\"Produtores indispon\u00edveis:\", errors.join(\" | \"));\n      updateDataStatus();\n      update();\n    }\n\n    function applyCsv(text, sourceLabel) {\n      const rows = parseRadarCsv(text);\n      if (!rows.length) throw new Error(\"CSV sem linhas v\u00e1lidas.\");\n\n      state.rows = rows.sort((a, b) => a.muni.localeCompare(b.muni, \"pt-BR\"));\n      state.filteredRows = state.rows;\n      state.csvSource = sourceLabel;\n\n      populateMunicipioSelect(state.rows);\n\n      const queryMunicipio = new URLSearchParams(window.location.search).get(\"municipio\");\n      const storedMunicipio = localStorage.getItem(\"radarApicolaMunicipio\");\n      const initial = queryMunicipio || storedMunicipio || \"Florian\u00f3polis\";\n\n      const found = findMunicipio(initial) || state.rows[0];\n      selectMunicipio(found.muni);\n\t  \n      updateDataStatus();\n    }\n\n    function setCsvStatus(title, detail = \"\") {\n      elements.csvStatus.innerHTML = detail ? `<b>${title}<\/b><span>${detail}<\/span>` : `<b>${title}<\/b>`;\n    }\n\n    function updateDataStatus() {\n      if (!state.rows.length) return;\n      const produtoresInfo = state.producerRows.length ? ` ` : \"\";\n      \/\/setCsvStatus(\"Dados atualizados\", `${state.rows.length} munic\u00edpios${produtoresInfo}`);\n\t  setCsvStatus(`Dados atualizados em ${ultimaAtualizacao} : `, `${state.rows.length} munic\u00edpios`);\n    }\n\n    function populateMunicipioSelect(rows) {\n      elements.municipioSelect.disabled = false;\n      elements.municipioSelect.innerHTML = rows.map(row => `<option value=\"${row.muni}\">${row.muni}<\/option>`).join(\"\");\n    }\n\n    function filterMunicipios(query) {\n      const normalized = normalizeText(query);\n      const rows = !normalized ? state.rows : state.rows.filter(row => row.muniNorm.includes(normalized));\n      state.filteredRows = rows;\n      populateMunicipioSelect(rows);\n\n      if (rows.length) {\n        selectMunicipio(rows[0].muni, false);\n      } else {\n        elements.municipioSelect.innerHTML = `<option>Nenhum munic\u00edpio encontrado<\/option>`;\n        elements.municipioSelect.disabled = true;\n      }\n    }\n\n    function findMunicipio(name) {\n      const normalized = normalizeText(name);\n      return state.rows.find(row => row.muniNorm === normalized)\n        || state.rows.find(row => row.muniNorm.includes(normalized) || normalized.includes(row.muniNorm));\n    }\n\n    function selectMunicipio(name, persist = true) {\n      const row = findMunicipio(name);\n      if (!row) return false;\n\n      state.selectedRow = row;\n      state.lastMunicipio = row.muni;\n      elements.municipioSelect.value = row.muni;\n\n      if (persist) localStorage.setItem(\"radarApicolaMunicipio\", row.muni);\n      update();\n      return true;\n    }\n\n    function riskColor(value) {\n      if (value >= 75) return \"var(--apis-red)\";\n      if (value >= 55) return \"var(--apis-orange)\";\n      if (value >= 35) return \"var(--apis-yellow)\";\n      return \"var(--apis-green)\";\n    }\n\n    function riskLabel(value) {\n      if (value >= 75) return \"Aten\u00e7\u00e3o cr\u00edtica\";\n      if (value >= 55) return \"Aten\u00e7\u00e3o alta\";\n      if (value >= 35) return \"Aten\u00e7\u00e3o moderada\";\n      return \"Aten\u00e7\u00e3o baixa\";\n    }\n\n    function calculateRisks(row) {\n      const rain = row.total_vlprec;\n      const temp = row.vlmin_atual;\n      const dryDays = row.dias_sem_chuva;\n\n      const rainFactor = clamp(rain \/ 120, 0, 1);\n      const recentRainFactor = clamp((5 - dryDays) \/ 5, 0, 1);\n      const dryFactor = clamp((dryDays - 8) \/ 14, 0, 1);\n      const coldFactor = clamp((8 - temp) \/ 10, 0, 1);\n      const frostFactor = temp <= 2 ? 1 : temp <= 5 ? 0.65 : 0;\n\n      let bees = 10 + rainFactor * 18 + recentRainFactor * 14 + coldFactor * 34 + dryFactor * 12;\n      let plants = 8 + rainFactor * 26 + coldFactor * 22 + frostFactor * 20 + dryFactor * 28;\n      let operations = 8 + rainFactor * 42 + recentRainFactor * 22;\n      let honeyQuality = 8 + rainFactor * 30 + recentRainFactor * 24;\n\n      return {\n        bees: Math.round(clamp(bees, 0, 100)),\n        plants: Math.round(clamp(plants, 0, 100)),\n        operations: Math.round(clamp(operations, 0, 100)),\n        honeyQuality: Math.round(clamp(honeyQuality, 0, 100))\n      };\n    }\n\n    function calculateScore(risks) {\n      return Math.round(\n        risks.bees * 0.30 +\n        risks.plants * 0.28 +\n        risks.operations * 0.22 +\n        risks.honeyQuality * 0.20\n      );\n    }\n\n    function buildBars(risks) {\n \/\/console.log('risk');\n      const items = [\n        [\"Abelhas\", risks.bees],\n        [\"Plantas e floradas\", risks.plants],\n        [\"Manejo, colheita e transporte\", risks.operations],\n        [\"Qualidade do mel\", risks.honeyQuality]\n      ];\n\n      elements.riskBars.innerHTML = items.map(([label, value]) => `\n        <div class=\"apis-bar-row\">\n          <div class=\"apis-bar-top\"><span>${label}<\/span><span>${value}%<\/span><\/div>\n          <div class=\"apis-bar-track\" aria-hidden=\"true\">\n            <div class=\"apis-bar-fill\" style=\"width:${value}%; background:${riskColor(value)}\"><\/div>\n          <\/div>\n        <\/div>\n      `).join(\"\");\n    }\n    \n    function formatMm(value) {\n      return `${Number(value).toLocaleString(\"pt-BR\", { maximumFractionDigits: 1 })} mm`;\n    }\n\n    function formatTemp(value) {\n      return `${Number(value).toLocaleString(\"pt-BR\", { maximumFractionDigits: 1 })}\u00b0C`;\n    }\n\n    function formatInteger(value) {\n      if (!Number.isFinite(Number(value))) return \"--\";\n      return Number(value).toLocaleString(\"pt-BR\", { maximumFractionDigits: 0 });\n    }\n\n    function update() {\n      const row = state.selectedRow;\n      if (!row) return;\n\t\t\/\/console.log(row);\n      const risks = calculateRisks(row);\n      const score = calculateScore(risks);\n      const color = riskColor(score);\n      \/\/console.log('manu row = ' + row.muni);\n      elements.selectedMunicipio.textContent = row.muni;\n      elements.score.textContent = score;      \n      elements.gauge.style.setProperty(\"--score\", score);\n      elements.gauge.style.setProperty(\"--apis-gauge-color\", color);\n      elements.status.textContent = riskLabel(score);\n      elements.status.style.background = color;\n      elements.rainValue.textContent = formatMm(row.total_vlprec);\n      elements.tempValue.textContent = formatTemp(row.vlmin_atual);\n      elements.dryValue.textContent = `${row.dias_sem_chuva}`;         \n\t  elements.producerValue.textContent = row.nr_prod;      \n\n      if (score >= 75) {\n        elements.scoreText.textContent = \"Cen\u00e1rio cr\u00edtico. Priorizar verifica\u00e7\u00e3o de reservas, prote\u00e7\u00e3o das colmeias e planejamento de manejo apenas em janelas seguras.\";\n      } else if (score >= 55) {\n        elements.scoreText.textContent = \"Cen\u00e1rio de aten\u00e7\u00e3o alta. Acompanhar floradas, alimento dispon\u00edvel, chuva acumulada e acesso aos api\u00e1rios.\";\n      } else if (score >= 35) {\n        elements.scoreText.textContent = \"Cen\u00e1rio de aten\u00e7\u00e3o moderada. Monitorar previs\u00e3o local e manter rotina preventiva de observa\u00e7\u00e3o das colmeias.\";\n      } else {\n        elements.scoreText.textContent = \"Cen\u00e1rio de aten\u00e7\u00e3o baixa. Manter monitoramento de rotina e registrar evolu\u00e7\u00e3o das floradas.\";\n      }\n\n      buildBars(risks);      \n    }\n\n    function bindEvents() {\n      elements.municipioSelect.addEventListener(\"change\", event => selectMunicipio(event.target.value));\n      elements.municipioSearch.addEventListener(\"input\", event => filterMunicipios(event.target.value));\n\n    }\n\n    window.selectRadarApicolaMunicipio = selectMunicipio;\n    \n    window.getRadarApicolaSelectedRow = function getRadarApicolaSelectedRow() {\n      return state.selectedRow;\n    };\n\n    async function initRadarApicola() {\n      bindEvents();\n      await Promise.allSettled([        \n        loadRadarApicolaFromCsv(CONFIG.csvUrls)\n      ]);\n      update();\n    }\n\n    initRadarApicola();\n  \n  \/\/ fim muni\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 Epagri\/Ciram Matriz de Impacto Timeline Sazonal Recomenda\u00e7\u00f5es Contato Matriz de Impacto Timeline Sazonal Recomenda\u00e7\u00f5es Contato Hotsite El Ni\u00f1o \u2014 Epagri\/Ciram Radar Ap\u00edcola Clima, florada e produ\u00e7\u00e3o de mel Matriz de impacto clim\u00e1tico do El Ni\u00f1o na apicultura catarinense. Conectando o fen\u00f4meno clim\u00e1tico \u00e0s pr\u00e1ticas di\u00e1rias do apicultor, com ci\u00eancia, previs\u00e3o e sustentabilidade. Explorar [&hellip;]<\/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-50608","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50608","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=50608"}],"version-history":[{"count":234,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50608\/revisions"}],"predecessor-version":[{"id":51337,"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/pages\/50608\/revisions\/51337"}],"wp:attachment":[{"href":"https:\/\/ciram.epagri.sc.gov.br\/index.php\/wp-json\/wp\/v2\/media?parent=50608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}