:root {
    /* ============================
       CORES DE MARCA - MEELION
       ============================ */
  
    /* Azul petróleo (header, navbar, footer) */
    --bulma-primary-h: 197;
    --bulma-primary-s: 100%;
    --bulma-primary-l: 24%;   /* #005a78 */
  
    /* Azul médio (hero, destaques intermediários) */
    --bulma-info-h: 197;
    --bulma-info-s: 100%;
    --bulma-info-l: 30%;      /* #006689 */
  
    /* Verde limão (CTA principal) */
    --bulma-link-h: 76;
    --bulma-link-s: 90%;
    --bulma-link-l: 60%;      /* #C3F53C */

    /* Cores Dark Customizadas */
    --bulma-primary-dark-l: 14%;   /* #003D4C - Primary Dark customizado */
    --bulma-link-dark-l: 30%;      /* #6B8C00 - Link Dark customizado */
  
    /* Sucesso, Aviso, Erro → cores padrão Bulma adaptadas */
    --bulma-success-h: 153;
    --bulma-success-s: 53%;
    --bulma-success-l: 72%;   /* verde suave */
  
    --bulma-warning-h: 42;
    --bulma-warning-s: 100%;
    --bulma-warning-l: 73%;   /* amarelo */
  
    --bulma-danger-h: 348;
    --bulma-danger-s: 100%;
    --bulma-danger-l: 79%;    /* vermelho */
  
    /* ============================
       BACKGROUND E TEXTO (Scheme)
       ============================ */
  
    /* Fundo geral → cinza mais claro */
    --bulma-scheme-h: 210;
    --bulma-scheme-s: 10%;
    --bulma-scheme-main-l: 96%;    /* #e6ebed */
  
    /* Variantes mais escuras → seções */
    --bulma-scheme-main-bis-l: 92%;
    --bulma-scheme-main-ter-l: 88%;
    --bulma-scheme-10: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 10%);
    --bulma-scheme-25: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 25%);
    --bulma-scheme-95: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 95%);
    --bulma-scheme-100: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), 100%);
    --bulma-scheme-main: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));
    --bulma-scheme-main-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));
    --bulma-scheme-main-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));
  
    /* Texto principal escuro */
    --bulma-scheme-invert-l: 10%;
    
    /* ============================
       CORES DE TEXTO
       ============================ */
    
    /* Texto principal - preto forte */
    --bulma-text-h: 0;
    --bulma-text-s: 0%;
    --bulma-text-l: 15%;          /* #262626 - texto principal */
    
    /* Texto secundário - cinza médio para subtítulos */
    --bulma-text-weak-h: 0;
    --bulma-text-weak-s: 0%;
    --bulma-text-weak-l: 45%;     /* #737373 - subtítulos e texto secundário */
    
    /* Texto forte - preto puro para títulos */
    --bulma-text-strong-h: 0;
    --bulma-text-strong-s: 0%;
    --bulma-text-strong-l: 10%;   /* #1a1a1a - títulos e texto forte */
    
    /* ============================
       ELEMENTOS DE CÓDIGO
       ============================ */
    
    /* Code inline - fundo claro para contraste com texto escuro */
    --bulma-code-h: 210;
    --bulma-code-s: 10%;
    --bulma-code-l: 92%;          /* #ebebed - fundo claro para code inline */
    
    /* Pre block - fundo escuro com texto claro */
    --bulma-pre-h: 0;
    --bulma-pre-s: 0%;
    --bulma-pre-l: 14%;           /* #242424 - fundo escuro para pre */
    
    /* Texto do pre - claro sobre fundo escuro */
    --bulma-pre-color-h: 0;
    --bulma-pre-color-s: 0%;
    --bulma-pre-color-l: 90%;     /* #e6e6e6 - texto claro no pre */
    
    /* Blockquote - citações com fundo escuro */
    --bulma-blockquote-h: 0;
    --bulma-blockquote-s: 0%;
    --bulma-blockquote-l: 14%;    /* #242424 - fundo escuro para blockquote */
    
    /* Texto do blockquote - claro sobre fundo escuro */
    --bulma-blockquote-color-h: 0;
    --bulma-blockquote-color-s: 0%;
    --bulma-blockquote-color-l: 90%; /* #e6e6e6 - texto claro no blockquote */
    
    /* Progress bars - background customizado */
    --bulma-progress-bar-background-color: #EBEBED;
    
    /* ============================
       MENU LATERAL
       ============================ */
    
    /* Menu ativo - cinza médio da paleta */
    --bulma-menu-active-h: 210;
    --bulma-menu-active-s: 10%;
    --bulma-menu-active-l: 88%;   /* #e1e2e4 - cinza claro */
    
    /* Menu hover - cinza mais claro */
    --bulma-menu-hover-h: 210;
    --bulma-menu-hover-s: 10%;
    --bulma-menu-hover-l: 92%;    /* #ebebed - cinza muito claro */
    
    /* ============================
       HERO SECTION CONTEXTUAL
       ============================ */
    
    /* Hero info - textos brancos sobre fundo azul */
    --bulma-hero-info-text-h: 0;
    --bulma-hero-info-text-s: 0%;
    --bulma-hero-info-text-l: 100%; /* #ffffff - branco puro */
    
    /* Hero info - botão principal verde limão */
    --bulma-hero-info-button-h: 76;
    --bulma-hero-info-button-s: 90%;
    --bulma-hero-info-button-l: 60%;  /* #c3f53c - verde limão */
    
    /* ============================
       HEADER CONTEXTUAL
       ============================ */
    
    /* Header primary - título verde limão */
    --bulma-header-primary-title-h: 76;
    --bulma-header-primary-title-s: 90%;
    --bulma-header-primary-title-l: 60%; /* #c3f53c - verde limão */
    
    /* Header primary - botão outline branco */
    --bulma-header-primary-button-h: 0;
    --bulma-header-primary-button-s: 0%;
    --bulma-header-primary-button-l: 100%; /* #ffffff - branco */
    
    /* Header primary - hover do título (lightening) */
    --bulma-header-primary-title-hover-h: 76;
    --bulma-header-primary-title-hover-s: 90%;
    --bulma-header-primary-title-hover-l: 70%; /* #d4f74a - verde limão mais claro */
    
    /* ============================
       PADRÃO DE TEXTO EM COMPONENTES
       ============================ */
    
    /* Texto para fundos azuis (primary, info) */
    --bulma-primary-invert-h: 0;
    --bulma-primary-invert-s: 0%;
    --bulma-primary-invert-l: 100%; /* #ffffff - branco */
    
    --bulma-info-invert-h: 0;
    --bulma-info-invert-s: 0%;
    --bulma-info-invert-l: 100%; /* #ffffff - branco */
    
    /* Texto para fundo verde limão (link) */
    --bulma-link-invert-h: 197;
    --bulma-link-invert-s: 100%;
    --bulma-link-invert-l: 24%; /* #00597c - azul petróleo escuro */
  
    /* ============================
       TIPOGRAFIA
       ============================ */
    --bulma-family-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* ============================
       PESOS DE FONTE ELEGANTES - MEELION
       ============================ */
    
    /* Override das variáveis nativas do Bulma para peso elegante */
    --bulma-title-weight: 400;           /* Override Bulma - peso elegante para títulos */
    --bulma-subtitle-weight: 400;        /* Override Bulma - peso elegante para subtítulos */
    
    /* Pesos contextuais para casos específicos */
    --meelion-title-weight-hero: 600;    /* Títulos em hero sections */
    --meelion-title-weight-emphasis: 500; /* Títulos com ênfase média */
    --meelion-title-weight-light: 300;   /* Títulos ultra-leves */
    --meelion-title-weight-bold: 700;    /* Títulos em destaque */
  }
  
  /* ============================
     CORREÇÕES ESPECÍFICAS PARA ELEMENTOS DE CÓDIGO
     ============================ */
  
  /* Code inline - fundo claro com texto escuro */
  code {
    background-color: hsl(210, 10%, 92%) !important;
    color: hsl(0, 0%, 15%) !important;
    padding: 0.125em 0.25em;
    border-radius: 0.25em;
  }
  
  /* Pre block - fundo escuro com texto claro */
  pre {
    background-color: hsl(0, 0%, 14%) !important;
    color: hsl(0, 0%, 90%) !important;
    padding: 1rem;
    border-radius: 0.375em;
  }
  
  /* Code dentro de pre - herda cor do pre */
  pre code {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0;
  }
  
  /* Blockquote - citações com fundo escuro e texto claro */
  blockquote {
    background-color: hsl(0, 0%, 14%) !important;
    color: hsl(0, 0%, 90%) !important;
    border-left: 4px solid hsl(197, 100%, 30%) !important; /* Azul info da Meelion */
    padding: 1rem 1.5rem !important;
    margin: 1rem 0 !important;
    border-radius: 0.375em;
    font-style: italic;
  }
  
  /* Outros elementos com fundo escuro que podem ter problemas */
  .content blockquote {
    background-color: hsl(0, 0%, 14%) !important;
    color: hsl(0, 0%, 90%) !important;
    border-left: 4px solid hsl(197, 100%, 30%) !important;
  }
  
  /* Tags com fundo escuro */
  .tag.is-dark {
    background-color: hsl(0, 0%, 14%) !important;
    color: hsl(0, 0%, 90%) !important;
  }
  
  /* Navbar escura */
  .navbar.is-dark {
    background-color: hsl(0, 0%, 14%) !important;
    color: hsl(0, 0%, 90%) !important;
  }
  
  .navbar.is-dark .navbar-item {
    color: hsl(0, 0%, 90%) !important;
  }
  
  /* ============================
     MENU LATERAL - DESIGN SYSTEM
     ============================ */
  
  /* Item ativo do menu - cinza médio ao invés do verde limão */
  .menu-list a.is-active {
    background-color: hsl(210, 10%, 88%) !important; /* Cinza claro da paleta */
    color: hsl(0, 0%, 15%) !important; /* Texto escuro */
    border-radius: 0.375em;
  }
  
  /* Hover no menu - cinza mais claro */
  .menu-list a:hover {
    background-color: hsl(210, 10%, 92%) !important; /* Cinza muito claro */
    color: hsl(0, 0%, 15%) !important; /* Texto escuro */
    border-radius: 0.375em;
  }
  
  /* Item ativo com hover - manter o cinza médio */
  .menu-list a.is-active:hover {
    background-color: hsl(210, 10%, 85%) !important; /* Cinza um pouco mais escuro */
    color: hsl(0, 0%, 10%) !important; /* Texto mais escuro */
  }
  
  /* ============================
     HERO SECTION - DESIGN SYSTEM
     ============================ */
  
  /* Hero info específica do Design System - textos brancos */
  .hero.is-info .title,
  .hero.is-info .subtitle {
    color: hsl(0, 0%, 100%) !important; /* Branco puro para títulos */
  }
  
  /* Ícones na hero - branco por padrão */
  .hero.is-info .icon {
    color: hsl(0, 0%, 100%) !important; /* Branco puro para ícones */
  }
  
  /* Exceção: Ícones das tecnologias na hero - verde limão */
  .hero.is-info .icon.has-text-link {
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão da Meelion */
  }
  
  /* Botão principal na hero - verde limão da Meelion */
  .hero.is-info .button.is-link {
    background-color: hsl(76, 90%, 60%) !important; /* Verde limão */
    color: hsl(197, 100%, 24%) !important; /* Azul petróleo para contraste */
    border: none;
    transition: all 0.2s ease; /* Transição suave */
  }
  
  /* Ícone do botão principal - mesma cor do texto */
  .hero.is-info .button.is-link .icon {
    color: hsl(197, 100%, 24%) !important; /* Azul petróleo igual ao texto */
  }
  
  /* Botão principal hover - verde limão mais claro (mais visível) */
  .hero.is-info .button.is-link:hover {
    background-color: hsl(76, 90%, 70%) !important; /* Verde limão mais claro e visível */
    color: hsl(197, 100%, 24%) !important; /* Mantém cor do texto */
    transform: translateY(-1px); /* Sutil elevação */
    transition: all 0.2s ease;
  }
  
  /* Ícone do botão principal hover - mesma cor do texto */
  .hero.is-info .button.is-link:hover .icon {
    color: hsl(197, 100%, 24%) !important; /* Mantém cor do texto */
  }
  
  /* Botão secundário na hero - branco com borda */
  .hero.is-info .button.is-light {
    background-color: transparent !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
    border: 1px solid hsl(0, 0%, 100%) !important; /* Borda branca mais fina */
    transition: all 0.2s ease; /* Transição suave */
    height: auto !important; /* Garantir mesma altura */
    min-height: 48px !important; /* Altura mínima igual ao botão verde */
  }
  
  /* Ícone do botão secundário - branco */
  .hero.is-info .button.is-light .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícone branco */
  }
  
  /* Botão secundário hover - fundo branco transparente suave */
  .hero.is-info .button.is-light:hover {
    background-color: hsla(0, 0%, 100%, 0.15) !important; /* Branco transparente clarinho */
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
    border: 1px solid hsl(0, 0%, 100%) !important; /* Mantém borda branca mais fina */
    transform: translateY(-1px); /* Sutil elevação */
    transition: all 0.2s ease;
  }
  
  /* Ícone do botão secundário hover - mantém branco */
  .hero.is-info .button.is-light:hover .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícone continua branco */
  }
  
  /* ============================
     HEADER - DESIGN SYSTEM
     ============================ */
  
  
  
  /* Botão "Voltar ao Sistema" - outline branco */
  .navbar.is-primary .button.is-light {
    background-color: transparent !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
    border: 1px solid hsl(0, 0%, 100%) !important; /* Borda branca mais fina */
    transition: all 0.2s ease; /* Transição suave */
  }
  
  /* Ícone do botão "Voltar ao Sistema" - branco */
  .navbar.is-primary .button.is-light .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícone branco */
  }
  
  /* Botão "Voltar ao Sistema" hover - fundo branco transparente suave */
  .navbar.is-primary .button.is-light:hover {
    background-color: hsla(0, 0%, 100%, 0.15) !important; /* Branco transparente clarinho */
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
    border: 1px solid hsl(0, 0%, 100%) !important; /* Mantém borda branca mais fina */
    transform: translateY(-1px); /* Sutil elevação */
    transition: all 0.2s ease;
  }
  
  /* Ícone do botão "Voltar ao Sistema" hover - mantém branco */
  .navbar.is-primary .button.is-light:hover .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícone continua branco */
  }
  
  /* ============================
     SCROLL BEHAVIOR - DESIGN SYSTEM
     ============================ */
  
  /* Main content com scroll elegante */
  .main-content {
    scroll-margin-top: 20px; /* Espaçamento ao fazer scroll para o elemento */
  }
  
  /* Smooth scroll para toda a página */
  html {
    scroll-behavior: smooth;
  }
  
  /* ============================
     PADRÃO DE CORES - DESIGN SYSTEM
     ============================ */
  
  /* REGRA DE CONTRASTE MEELION:
     - Azuis escuros (primary, info): texto branco
     - Azuis claros (primary-light, info-light): texto escuro (azul petróleo)
     - Verde limão (link): texto escuro (azul petróleo)
  */
  
  /* Botões com fundo azul escuro (primary, info) - texto branco */
  .button.is-primary,
  .button.is-info {
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }
  
  /* Botões com fundo verde limão (link) - texto escuro */
  .button.is-link {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* Notificações com fundo azul escuro (primary, info) - texto branco */
  .notification.is-primary,
  .notification.is-info {
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }
  
  /* Notificações com fundo verde limão (link) - texto escuro */
  .notification.is-link {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* Notificações light - texto escuro para melhor contraste */
  .notification.is-light {
    color: hsl(0, 0%, 20%) !important; /* Texto escuro para contraste */
  }
  
  .notification.is-light a {
    color: hsl(0, 0%, 30%) !important; /* Links um pouco mais claros mas ainda escuros */
  }
  
  .notification.is-light a:hover {
    color: hsl(0, 0%, 10%) !important; /* Links mais escuros no hover */
  }
  
  .notification.is-info.is-light,
  .notification.is-primary.is-light {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  .notification.is-link.is-light {
    color: hsl(76, 90%, 30%) !important; /* Texto verde escuro */
  }
  
  .notification.is-success.is-light {
    color: hsl(141, 53%, 31%) !important; /* Texto verde escuro */
  }
  
  .notification.is-warning.is-light {
    color: hsl(48, 96%, 20%) !important; /* Texto amarelo escuro */
  }
  
  .notification.is-danger.is-light {
    color: hsl(348, 86%, 31%) !important; /* Texto vermelho escuro */
  }
  
  /* Botão delete em notificações light - contraste adequado */
  .notification.is-light .delete {
    background-color: rgba(10, 10, 10, 0.3) !important; /* Fundo escuro transparente */
  }
  
  .notification.is-light .delete:hover {
    background-color: rgba(10, 10, 10, 0.5) !important; /* Hover mais escuro */
  }
  
  /* Garantir que o botão delete não interfira com o texto */
  .notification .delete {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  /* Garantir padding adequado para o conteúdo quando há botão delete */
  .notification {
    padding-right: 2.5rem !important; /* Espaço para o botão delete */
  }
  
  /* Botões light (azuis claros) - texto escuro para melhor contraste */
  .button.is-info.is-light,
  .button.is-primary.is-light {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* Tags e badges light (azuis claros) - texto escuro para melhor contraste */
  .tag.is-info.is-light,
  .tag.is-primary.is-light {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* Mensagens light (azuis claros) - fundo claro e texto escuro para melhor contraste */
  .message.is-info.is-light {
    background-color: hsl(197, 100%, 95%) !important; /* Fundo azul muito claro */
  }
  
  .message.is-info.is-light .message-header {
    background-color: hsl(197, 100%, 85%) !important; /* Header azul claro */
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  .message.is-info.is-light .message-body {
    background-color: hsl(197, 100%, 95%) !important; /* Fundo azul muito claro */
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  .message.is-primary.is-light .message-body {
    background-color: hsl(197, 100%, 95%) !important; /* Fundo azul muito claro */
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* Mensagens link (verde limão) - texto verde escuro para melhor contraste */
  .message.is-link .message-body {
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) - 30%)) !important; /* Verde mais escuro para contraste */
  }
  
  .message.is-link .message-header {
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 10%) !important; /* Texto muito escuro no header verde */
  }
  
  /* Elementos light em geral - garantir contraste adequado */
  .box.is-info.is-light,
  .box.is-primary.is-light,
  .hero.is-info.is-light .hero-body,
  .hero.is-primary.is-light .hero-body {
    color: hsl(197, 100%, 24%) !important; /* Texto azul petróleo (escuro) */
  }
  
  /* ============================
     TIPOGRAFIA ELEGANTE - SISTEMA MEELION
     Atualizado: $(date) - Peso 400 forçado
     ============================ */

  /* Override padrão Bulma - Títulos elegantes com peso 400 */
  /* Seletores específicos para garantir precedência sobre Bulma */
  html .title,
  html .title.is-1,
  html .title.is-2,
  html .title.is-3,
  html .title.is-4,
  html .title.is-5,
  html .title.is-6,
  html h1.title,
  html h2.title,
  html h3.title,
  html h4.title,
  html h5.title,
  html h6.title {
    font-weight: 400 !important; /* 400 - elegante por padrão */
  }

  html .subtitle,
  html .subtitle.is-1,
  html .subtitle.is-2,
  html .subtitle.is-3,
  html .subtitle.is-4,
  html .subtitle.is-5,
  html .subtitle.is-6,
  html h1.subtitle,
  html h2.subtitle,
  html h3.subtitle,
  html h4.subtitle,
  html h5.subtitle,
  html h6.subtitle,
  html p.subtitle {
    font-weight: 400 !important; /* 400 - consistente */
  }

  /* ============================
     CLASSES UTILITÁRIAS DE PESO - PADRÃO BULMA
     ============================ */

  /* Pesos contextuais seguindo nomenclatura Bulma */
  .has-text-weight-hero {
    font-weight: var(--meelion-title-weight-hero) !important; /* 600 - hero sections */
  }

  .has-text-weight-emphasis {
    font-weight: var(--meelion-title-weight-emphasis) !important; /* 500 - ênfase média */
  }

  .has-text-weight-ultralight {
    font-weight: var(--meelion-title-weight-light) !important; /* 300 - ultra-leve */
  }

  /* Peso semibold para substituir bold em textos - padrão Meelion */
  .has-text-weight-semibold {
    font-weight: 600 !important; /* Semibold para textos que seriam bold */
  }

  /* Padrão Meelion - texto semibold ao invés de bold em content */
  .content strong {
    font-weight: 600 !important; /* Semibold ao invés de bold */
  }

  /* ============================
     TIPOGRAFIA ELEGANTE EM CONTENT - ELEMENTOS HTML SEMÂNTICOS
     ============================ */

  /* Títulos HTML semânticos dentro de .content - peso 400 elegante */
  .content h1,
  .content h2,
  .content h3,
  .content h4,
  .content h5,
  .content h6 {
    font-weight: 400 !important; /* 400 - elegante por padrão Meelion */
  }

  /* ============================
     CORES CONTEXTUAIS PARA TÍTULOS - PADRÃO BULMA
     ============================ */

  /* Títulos com cores específicas da Meelion */
  .title.has-text-hero-white {
    color: hsl(0, 0%, 100%) !important; /* Branco para hero */
    font-weight: var(--meelion-title-weight-hero) !important;
  }

  .title.has-text-section-primary {
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Azul petróleo */
  }

  .title.has-text-section-info {
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important; /* Azul médio */
  }

  .title.has-text-accent-link {
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
  }

  /* Subtítulos com cores específicas */
  .subtitle.has-text-light-grey {
    color: hsl(0, 0%, 60%) !important; /* Cinza claro */
  }

  .subtitle.has-text-medium-grey {
    color: hsl(0, 0%, 45%) !important; /* Cinza médio */
  }

  .subtitle.has-text-dark-grey {
    color: hsl(0, 0%, 30%) !important; /* Cinza escuro */
  }

  /* ============================
     COMBINAÇÕES CONTEXTUAIS - MEELION
     ============================ */

  /* Hero section - títulos brancos com peso adequado */
  .hero .title.is-hero {
    color: hsl(0, 0%, 100%) !important;
    font-weight: var(--meelion-title-weight-hero) !important;
  }

  .hero .subtitle.is-hero {
    color: hsl(0, 0%, 95%) !important; /* Branco levemente transparente */
    font-weight: var(--bulma-subtitle-weight) !important;
  }

  /* Hero title com bold específico - máxima especificidade */
  .hero.is-info .hero-body .title.has-text-white.has-text-weight-bold,
  .hero.is-primary .hero-body .title.has-text-white.has-text-weight-bold,
  .hero .hero-body .title.has-text-white.has-text-weight-bold {
    font-weight: 700 !important; /* Bold forçado */
    color: hsl(0, 0%, 100%) !important; /* Branco forçado */
  }

  /* Seções com fundo branco - títulos elegantes */
  .section .title.is-elegant {
    font-weight: var(--bulma-title-weight) !important; /* 400 - elegante */
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  }

  .section .subtitle.is-elegant {
    font-weight: var(--bulma-subtitle-weight) !important; /* 400 - consistente */
    color: hsl(0, 0%, 45%) !important; /* Cinza médio */
  }

  /* Cards - títulos com peso médio */
  .card .title.is-card {
    font-weight: var(--meelion-title-weight-emphasis) !important; /* 500 */
    color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  }

  /* ============================
     MENU LATERAL STICKY & ACCORDION - 100% BULMA
     ============================ */
  
  /* Menu sticky (padrão Bulma) */
  .design-system-menu {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-right: 0.5rem; /* Espaço para scrollbar */
  }
  
  /* Scrollbar personalizada (Bulma friendly) */
  .design-system-menu::-webkit-scrollbar {
    width: 4px;
  }
  
  .design-system-menu::-webkit-scrollbar-track {
    background: hsl(210, 10%, 92%);
    border-radius: 2px;
  }
  
  .design-system-menu::-webkit-scrollbar-thumb {
    background: hsl(210, 10%, 85%);
    border-radius: 2px;
  }
  
  .design-system-menu::-webkit-scrollbar-thumb:hover {
    background: hsl(210, 10%, 80%);
  }
  
  /* Menu labels clicáveis (accordion) */
  .menu-section .menu-label.is-clickable {
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    position: relative;
  }
  
  .menu-section .menu-label.is-clickable:hover {
    color: hsl(0, 0%, 20%) !important;
  }
  
  /* Transições suaves para accordion (Bulma) */
  .menu-section .menu-list {
    transition: all 0.3s ease;
    transform-origin: top;
  }
  
  /* Estados do accordion */
  .menu-section.is-active .menu-list {
    display: block;
    animation: slideDown 0.3s ease;
  }
  
  .menu-section:not(.is-active) .menu-list {
    display: none;
  }
  
  /* Animação slide down (Bulma style) */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Ícones de chevron */
  .menu-section .menu-label .fa-chevron-right,
  .menu-section .menu-label .fa-chevron-down {
    transition: transform 0.2s ease;
  }
  
  /* Links desabilitados (futuro) */
  .menu-list a.is-disabled {
    color: hsl(0, 0%, 70%) !important;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  /* Tags "Em breve" */
  .menu-label .tag.is-light {
    background-color: hsl(210, 10%, 92%);
    color: hsl(0, 0%, 50%);
    font-size: 0.6rem;
  }

  /* ============================
     OVERRIDE FINAL - PESO 400 FORÇADO
     ============================ */
  
  /* Força peso 400 com máxima especificidade */
  body .title,
  body .title.is-1,
  body .title.is-2, 
  body .title.is-3,
  body .title.is-4,
  body .title.is-5,
  body .title.is-6,
  body h1.title,
  body h2.title,
  body h3.title,
  body h4.title,
  body h5.title,
  body h6.title {
    font-weight: 400 !important;
    font-family: 'Montserrat', sans-serif !important;
  }

  body .subtitle,
  body .subtitle.is-1,
  body .subtitle.is-2,
  body .subtitle.is-3, 
  body .subtitle.is-4,
  body .subtitle.is-5,
  body .subtitle.is-6,
  body h1.subtitle,
  body h2.subtitle,
  body h3.subtitle,
  body h4.subtitle,
  body h5.subtitle,
  body h6.subtitle,
  body p.subtitle {
    font-weight: 400 !important;
    font-family: 'Montserrat', sans-serif !important;
  }

  /* Cache buster: 2024-09-24-16:30 - PESO 400 ATIVO - FUNCIONANDO ✅ */
  
  /* ============================
     OVERRIDE FINAL - HERO BOLD ESPECÍFICO
     ============================ */
  
  /* Máxima especificidade para título bold do hero */
  html body .hero.is-info .hero-body .container .title.is-1.has-text-white.has-text-weight-bold,
  html body .hero .hero-body .container .title.has-text-white.has-text-weight-bold,
  html body .hero .hero-body .title.has-text-white.has-text-weight-bold {
    font-weight: 700 !important;
    color: hsl(0, 0%, 100%) !important;
    font-family: 'Montserrat', sans-serif !important;
  }
  
  /* Máxima especificidade para títulos elegantes (peso 400) */
  html body .title.is-1,
  html body .title.is-2,
  html body .title.is-3,
  html body .title.is-4,
  html body .title.is-5,
  html body .title.is-6 {
    font-weight: 400 !important;
    font-family: 'Montserrat', sans-serif !important;
  }
  
  /* Exceção: hero titles mantêm peso específico */
  html body .hero .title.has-text-weight-bold {
    font-weight: 700 !important;
  }
  
  html body .hero .title.has-text-weight-hero {
    font-weight: 600 !important;
  }
  
  /* Cache buster: 2024-09-24-17:45 - BOLD HERO + ESPECIFICIDADE MÁXIMA */
  
  /* ============================
     PADRÃO DE ESPAÇAMENTO - RESPIRAÇÃO VISUAL
     ============================ */
  
  /* Espaçamento padrão entre títulos e conteúdo - DOBRADO */
  .title.is-1 + *,
  .title.is-2 + *,
  .title.is-3 + *,
  .title.is-4 + *,
  .title.is-5 + *,
  .title.is-6 + * {
    margin-top: 2rem !important; /* 32px de respiro - DOBRADO */
  }
  
  /* Espaçamento maior para títulos principais - DOBRADO */
  .title.is-1 + *,
  .title.is-2 + * {
    margin-top: 3rem !important; /* 48px de respiro para títulos grandes - DOBRADO */
  }

  /* Exceção: títulos com texto introdutório - gap reduzido */
  .title.is-2 + .columns .column p.mt-0 {
    margin-top: 0 !important; /* Remove gap para textos introdutórios */
  }

  /* CORREÇÃO ESPECÍFICA: Sobrescrever regra problemática para seção calculadoras */
  .section .title.is-2 + .columns .column p.mt-0 {
    margin-top: 0 !important; /* Força margin-top: 0 para textos introdutórios */
  }

  /* CORREÇÃO MÁXIMA ESPECIFICIDADE: Para garantir que funcione */
  html body .section .title.is-2 + .columns .column p.mt-0 {
    margin-top: 0 !important; /* Força margin-top: 0 com máxima especificidade */
  }

  /* CORREÇÃO: Forçar largura de 2/3 para subtítulos introdutórios - APENAS DESKTOP */
  @media screen and (min-width: 769px) {
    .section .subtitle.is-5.is-size-6-mobile {
      max-width: 66.666% !important; /* Força largura de 2/3 apenas no desktop */
    }
  }
  
  /* Espaçamento específico para subtítulos - DOBRADO */
  .subtitle.is-1 + *,
  .subtitle.is-2 + *,
  .subtitle.is-3 + *,
  .subtitle.is-4 + *,
  .subtitle.is-5 + *,
  .subtitle.is-6 + * {
    margin-top: 1.5rem !important; /* 24px de respiro para subtítulos - DOBRADO */
  }
  
  /* Espaçamento para elementos específicos após títulos - DOBRADO */
  .title + .subtitle {
    margin-top: 1rem !important; /* 16px entre título e subtítulo - DOBRADO */
  }
  
  .title + .content,
  .subtitle + .content {
    margin-top: 2rem !important; /* 32px entre título/subtítulo e conteúdo - DOBRADO */
  }
  
  .title + .box,
  .subtitle + .box {
    margin-top: 2rem !important; /* 32px entre título/subtítulo e box - DOBRADO */
  }
  
  .title + .section,
  .subtitle + .section {
    margin-top: 3rem !important; /* 48px entre título/subtítulo e seção - DOBRADO */
  }
  
  /* Espaçamento para Design System específico - DOBRADO */
  .ds-component-section .title + .subtitle {
    margin-top: 1.5rem !important; /* 24px no Design System - DOBRADO */
  }
  
  .ds-component-section .subtitle + * {
    margin-top: 2.5rem !important; /* 40px após subtítulo no Design System - DOBRADO */
  }
  
  /* Espaçamento para cards de overview - DOBRADO */
  .title + .columns,
  .subtitle + .columns {
    margin-top: 3rem !important; /* 48px para cards de overview - DOBRADO */
  }
  
  /* Espaçamento para elementos específicos do Design System - DOBRADO */
  .ds-component-section .title + .notification,
  .ds-component-section .subtitle + .notification {
    margin-top: 2rem !important; /* 32px para notificações - DOBRADO */
  }
  
  .ds-component-section .title + .table,
  .ds-component-section .subtitle + .table {
    margin-top: 2rem !important; /* 32px para tabelas - DOBRADO */
  }
  
  .ds-component-section .title + pre,
  .ds-component-section .subtitle + pre {
    margin-top: 2rem !important; /* 32px para código - DOBRADO */
  }
  
  /* Espaçamento para hero sections - DOBRADO */
  .hero .title + .subtitle {
    margin-top: 2rem !important; /* 32px no hero - DOBRADO */
  }
  
  .hero .subtitle + .buttons {
    margin-top: 3rem !important; /* 48px para botões no hero - DOBRADO */
  }
  
  /* ============================
     BOTÕES CUSTOMIZADOS - MEELION
     ============================ */

  /* Botão Ghost - usar cor Primary (azul Meelion) em vez do verde limão */
  .button.is-ghost {
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Azul petróleo */
    background: none !important;
    border-color: transparent !important;
    text-decoration: none !important;
  }

  .button.is-ghost:hover {
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 40%) !important; /* Azul um pouco mais claro */
    text-decoration: underline !important;
  }

  /* Botão Dark - hover mais claro para feedback visual */
  .button.is-dark {
    background-color: hsl(0, 0%, 21%) !important; /* Cinza escuro padrão */
    border-color: hsl(0, 0%, 21%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-dark:hover {
    background-color: hsl(0, 0%, 29%) !important; /* Cinza um pouco mais claro no hover */
    border-color: hsl(0, 0%, 29%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Black - hover com cor do Dark para feedback visual */
  .button.is-black {
    background-color: hsl(0, 0%, 4%) !important; /* Preto padrão */
    border-color: hsl(0, 0%, 4%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-black:hover {
    background-color: hsl(0, 0%, 21%) !important; /* Cinza escuro (cor do Dark) no hover */
    border-color: hsl(0, 0%, 21%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Text - hover com fundo cinza claro para feedback visual */
  .button.is-text {
    background-color: transparent !important;
    border-color: transparent !important;
    color: hsl(0, 0%, 21%) !important; /* Texto escuro padrão */
    text-decoration: underline !important;
  }

  .button.is-text:hover {
    background-color: hsl(210, 10%, 92%) !important; /* Cinza bem claro no hover */
    border-color: transparent !important;
    color: hsl(0, 0%, 21%) !important; /* Mantém texto escuro */
    text-decoration: underline !important;
  }

  /* Botão Link - hover mais claro para melhor feedback visual */
  .button.is-link {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Texto azul petróleo */
  }

  .button.is-link:hover {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important; /* Verde limão mais claro no hover */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Mantém texto azul petróleo */
  }

  /* ============================
     BOTÕES LIGHT CUSTOMIZADOS - MEELION
     ============================ */

  /* Botão Primary Light - azul petróleo claro */
  .button.is-primary.is-light {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 85%) !important; /* Azul petróleo bem claro */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 85%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Texto azul petróleo escuro */
  }

  .button.is-primary.is-light:hover {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 90%) !important; /* Azul petróleo ainda mais claro no hover */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 90%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Mantém texto azul petróleo escuro */
  }

  /* Botão Info Light - azul mais azulado (ciano) */
  .button.is-info.is-light {
    background-color: hsl(200, 80%, 85%) !important; /* Azul ciano claro */
    border-color: hsl(200, 80%, 85%) !important;
    color: hsl(200, 80%, 30%) !important; /* Texto azul ciano escuro */
  }

  .button.is-info.is-light:hover {
    background-color: hsl(200, 80%, 90%) !important; /* Azul ciano ainda mais claro no hover */
    border-color: hsl(200, 80%, 90%) !important;
    color: hsl(200, 80%, 30%) !important; /* Mantém texto azul ciano escuro */
  }

  /* Botão Link Light - verde limão bem claro */
  .button.is-link.is-light {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 85%) !important; /* Verde limão bem claro */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 85%) !important;
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 30%) !important; /* Texto verde escuro */
  }

  .button.is-link.is-light:hover {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 90%) !important; /* Verde limão ainda mais claro no hover */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 90%) !important;
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 30%) !important; /* Mantém texto verde escuro */
  }

  /* ============================
     BOTÕES DARK CUSTOMIZADOS - MEELION
     ============================ */

  /* Botão Primary Dark - mantém cor normal (funciona bem em light e dark mode) */
  .button.is-primary.is-dark {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Azul petróleo normal */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-primary.is-dark:hover {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 32%) !important; /* Azul petróleo mais sutil no hover */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 32%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Info Dark - azul ciano mais escuro */
  .button.is-info.is-dark {
    background-color: hsl(200, 80%, 25%) !important; /* Azul ciano mais escuro */
    border-color: hsl(200, 80%, 25%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-info.is-dark:hover {
    background-color: hsl(200, 80%, 30%) !important; /* Azul ciano um pouco mais claro no hover */
    border-color: hsl(200, 80%, 30%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Link Dark - mantém cor normal (funciona bem em light e dark mode) */
  .button.is-link.is-dark {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão normal */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Texto azul petróleo */
  }

  .button.is-link.is-dark:hover {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important; /* Verde limão um pouco mais claro no hover */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Mantém texto azul petróleo */
  }

  /* Botão Success Dark - verde mais escuro */
  .button.is-success.is-dark {
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 35%) !important; /* Verde mais escuro */
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 35%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-success.is-dark:hover {
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 40%) !important; /* Verde um pouco mais claro no hover */
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 40%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Warning Dark - amarelo mais escuro */
  .button.is-warning.is-dark {
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 45%) !important; /* Amarelo mais escuro */
    border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 45%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-warning.is-dark:hover {
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%) !important; /* Amarelo um pouco mais claro no hover */
    border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* Botão Danger Dark - vermelho mais escuro */
  .button.is-danger.is-dark {
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 45%) !important; /* Vermelho mais escuro */
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 45%) !important;
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  .button.is-danger.is-dark:hover {
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important; /* Vermelho um pouco mais claro no hover */
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important;
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
  }

  /* ============================
     SEÇÃO VERSÕES DARK - FUNDO ESCURO
     ============================ */

  /* Fundo escuro para seção "Versões Dark" - simular dark mode */
  .box.has-background-dark-mode {
    background-color: hsl(0, 0%, 14%) !important; /* Fundo escuro */
    color: hsl(0, 0%, 90%) !important; /* Texto claro */
  }

  /* Título da seção dark mode - branco */
  .box.has-background-dark-mode .title,
  .box.has-background-dark-mode .subtitle {
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  /* Ícones na seção dark mode - branco */
  .box.has-background-dark-mode .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícones brancos */
  }

  /* ============================
     BOTÕES OUTLINED CUSTOMIZADOS - MEELION
     ============================ */

  /* ============================
     BOTÕES OUTLINED - FORÇA ESPECIFICIDADE ALTA PARA SOBRESCREVER BULMA
     ============================ */

  /* Botão Link Outlined - verde mais escuro para contraste */
  html body .button.is-link.is-outlined {
    background-color: transparent !important;
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 40%) !important; /* Verde mais escuro */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 40%) !important; /* Texto verde mais escuro */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .button.is-link.is-outlined:hover {
    background-color: hsla(var(--bulma-link-h), var(--bulma-link-s), 40%, 0.1) !important; /* Verde transparente suave no hover */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 40%) !important;
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 40%) !important; /* Mantém texto verde */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }

  /* Botão Primary Outlined - azul petróleo */
  html body .button.is-primary.is-outlined {
    background-color: transparent !important;
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Azul petróleo */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Texto azul petróleo */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .button.is-primary.is-outlined:hover {
    background-color: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 0.1) !important; /* Azul petróleo transparente suave no hover */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Mantém texto azul petróleo */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }

  /* Botão Info Outlined - azul ciano */
  html body .button.is-info.is-outlined {
    background-color: transparent !important;
    border-color: hsl(200, 80%, 40%) !important; /* Azul ciano */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(200, 80%, 40%) !important; /* Texto azul ciano */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .button.is-info.is-outlined:hover {
    background-color: hsla(200, 80%, 40%, 0.1) !important; /* Azul ciano transparente suave no hover */
    border-color: hsl(200, 80%, 40%) !important;
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(200, 80%, 40%) !important; /* Mantém texto azul ciano */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }

  /* Botão Success Outlined - verde mais escuro */
  html body .button.is-success.is-outlined {
    background-color: transparent !important;
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important; /* Verde mais escuro */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important; /* Texto verde mais escuro */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .button.is-success.is-outlined:hover {
    background-color: hsla(var(--bulma-success-h), var(--bulma-success-s), 50%, 0.1) !important; /* Verde transparente suave no hover */
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important;
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important; /* Mantém texto verde */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }

  /* Botão Danger Outlined - vermelho */
  html body .button.is-danger.is-outlined {
    background-color: transparent !important;
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important; /* Vermelho */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important; /* Texto vermelho */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .button.is-danger.is-outlined:hover {
    background-color: hsla(var(--bulma-danger-h), var(--bulma-danger-s), 50%, 0.1) !important; /* Vermelho transparente suave no hover */
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important;
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important; /* Mantém texto vermelho */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }


  /* ============================
     BOTÕES OUTLINED SOBRE FUNDO AZUL - CUSTOMIZADOS MEELION
     ============================ */

  /* Fundo azul para seção "Outline Branco (Sobre Fundo Azul)" */
  html body .box.has-background-primary {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important; /* Azul petróleo */
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  /* Título da seção com fundo azul - branco */
  html body .box.has-background-primary .title,
  html body .box.has-background-primary .subtitle {
    color: hsl(0, 0%, 100%) !important; /* Texto branco */
  }

  /* Ícones na seção com fundo azul - branco */
  html body .box.has-background-primary .icon {
    color: hsl(0, 0%, 100%) !important; /* Ícones brancos */
  }

  /* Botões outlined sobre fundo azul - todos com hover branco suave */
  html body .box.has-background-primary .button.is-outlined {
    background-color: transparent !important;
    border-color: hsl(0, 0%, 100%) !important; /* Borda branca para todos */
    border-width: 1px !important; /* Espessura consistente */
    color: hsl(0, 0%, 100%) !important; /* Texto branco para todos */
    padding: calc(0.5em - 1px) 1em !important; /* Força padding específico para outlined */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
  }

  html body .box.has-background-primary .button.is-outlined:hover {
    background-color: hsla(0, 0%, 100%, 0.15) !important; /* Branco transparente suave no hover */
    border-color: hsl(0, 0%, 100%) !important; /* Mantém borda branca */
    border-width: 1px !important; /* Mantém espessura consistente */
    color: hsl(0, 0%, 100%) !important; /* Mantém texto branco */
    padding: calc(0.5em - 1px) 1em !important; /* Força mesmo padding no hover */
    height: auto !important; /* Força altura automática */
    min-height: 2.25em !important; /* Altura mínima consistente */
    transform: none !important; /* Remove qualquer transformação */
    box-shadow: none !important; /* Remove sombras que podem causar movimento */
  }

  /* ============================
     BOTÕES INVERTED - MESMAS CORES DO DARK + LABELS COM NOMES DAS CORES
     ============================ */

  /* Botão Primary Inverted - fundo azul claro + texto azul escuro (para contraste) */
  html body .button.is-primary.is-inverted {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 85%) !important; /* Azul claro para contraste */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 85%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 20%) !important; /* Azul escuro para contraste */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-primary.is-inverted:hover {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 80%) !important; /* Azul mais escuro no hover */
    border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 80%) !important;
    color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 20%) !important; /* Mantém texto azul escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Botão Link Inverted - mesmo fundo do Dark + texto verde super escuro */
  html body .button.is-link.is-inverted {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão (mesmo do Dark) */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 15%) !important; /* Verde super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-link.is-inverted:hover {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important; /* Verde mais claro no hover (mesmo do Dark) */
    border-color: hsl(var(--bulma-link-h), var(--bulma-link-s), 70%) !important;
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), 15%) !important; /* Mantém texto verde super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Botão Info Inverted - mesmo fundo do Dark + texto azul super escuro */
  html body .button.is-info.is-inverted {
    background-color: hsl(200, 80%, 40%) !important; /* Azul ciano escuro (mesmo do Dark) */
    border-color: hsl(200, 80%, 40%) !important;
    color: hsl(200, 80%, 15%) !important; /* Azul super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-info.is-inverted:hover {
    background-color: hsl(200, 80%, 45%) !important; /* Azul ciano mais claro no hover (mesmo do Dark) */
    border-color: hsl(200, 80%, 45%) !important;
    color: hsl(200, 80%, 15%) !important; /* Mantém texto azul super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Botão Success Inverted - mesmo fundo do Dark + texto verde super escuro */
  html body .button.is-success.is-inverted {
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important; /* Verde escuro (mesmo do Dark) */
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 50%) !important;
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), 15%) !important; /* Verde super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-success.is-inverted:hover {
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 55%) !important; /* Verde mais claro no hover (mesmo do Dark) */
    border-color: hsl(var(--bulma-success-h), var(--bulma-success-s), 55%) !important;
    color: hsl(var(--bulma-success-h), var(--bulma-success-s), 15%) !important; /* Mantém texto verde super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Botão Warning Inverted - mesmo fundo do Dark + texto laranja super escuro */
  html body .button.is-warning.is-inverted {
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%) !important; /* Laranja escuro (mesmo do Dark) */
    border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%) !important;
    color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 15%) !important; /* Laranja super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-warning.is-inverted:hover {
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 55%) !important; /* Laranja mais claro no hover (mesmo do Dark) */
    border-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 55%) !important;
    color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 15%) !important; /* Mantém texto laranja super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Botão Danger Inverted - mesmo fundo do Dark + texto vermelho super escuro */
  html body .button.is-danger.is-inverted {
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important; /* Vermelho escuro (mesmo do Dark) */
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%) !important;
    color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 15%) !important; /* Vermelho super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
  }

  html body .button.is-danger.is-inverted:hover {
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 55%) !important; /* Vermelho mais claro no hover (mesmo do Dark) */
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 55%) !important;
    color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 15%) !important; /* Mantém texto vermelho super escuro */
    padding: calc(0.5em - 1px) 1em !important;
    height: auto !important;
    min-height: 2.25em !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* ============================
     BOTÃO FOCUSED - AZUL INFO AO INVÉS DE VERDE LIMÃO
     ============================ */

  /* Botão Focused com azul Info para melhor contraste visual */
  html body .button.is-focused {
    border-color: hsl(200, 80%, 40%) !important; /* Azul ciano (Info) */
    box-shadow: 0 0 0 0.125em hsla(200, 80%, 40%, 0.25) !important; /* Sombra azul ciano */
  }

  /* ============================
     PROGRESS BARS - BACKGROUND CUSTOMIZADO SEGUINDO BULMA
     ============================ */

  /* Dark mode usando media query */
  @media (prefers-color-scheme: dark) {
    :root {
      --bulma-progress-bar-background-color: #2C2C2E;
    }
  }

  /* Cache buster: 2024-09-24-21:35 - PROGRESS BARS ROOT UNICO CORRIGIDO */

/* ============================
   DARK MODE DESABILITADO - SOLUÇÃO OFICIAL BULMA
   ============================ */

/* 
   SOLUÇÃO OFICIAL IMPLEMENTADA:
   - Usando Bulma CSS oficial: https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css
   - Adicionado data-theme="light" no HTML para forçar tema claro
   - Baseado na documentação oficial: https://bulma.io/documentation/features/dark-mode/
   - Cards e todos os componentes mantêm tema claro da Meelion
   
   Como funciona:
   - O atributo data-theme="light" no HTML força o Bulma a ignorar prefers-color-scheme: dark
   - Mantém 100% compatibilidade com Bulma oficial
   - Solução recomendada pela documentação oficial do Bulma
*/

/* Cache buster: 2024-09-24-23:30 - SOLUÇÃO OFICIAL BULMA REIMPLEMENTADA */

/* ============================
   HERO SECTION MOBILE - MELHORIAS RESPONSIVAS
   ============================ */

/* Mobile: Fontes menores para melhor legibilidade */
@media screen and (max-width: 768px) {
  /* Título principal no mobile - Bulma puro */
  .hero.is-info .title.is-1 {
    /* Removido font-size customizado - deixa Bulma controlar */
    /* Removido white-space - deixa Bulma controlar */
    /* Removido text-align - deixa Bulma controlar */
    /* Removido word-wrap - deixa Bulma controlar */
  }
  
  /* Ícone do título removido - não aplicável mais */
  
  /* Subtítulo responsivo no mobile - Bulma puro */
  .hero.is-info .subtitle.is-4 {
    /* Removido font-size customizado - deixa Bulma controlar */
    /* Removido white-space - deixa Bulma controlar */
    /* Removido word-wrap - deixa Bulma controlar */
  }
  
  /* Ícones responsivos no mobile */
  .hero.is-info .subtitle.is-4 .icon.is-medium {
    font-size: 1rem !important; /* Reduzido de 1.25rem para 1rem */
  }
  
  /* Espaçamento entre tecnologias reduzido no mobile */
  .hero.is-info .subtitle.is-4 .icon.is-medium.ml-4 {
    margin-left: 1rem !important; /* Reduzido de 1.5rem para 1rem */
  }
  
  /* Botões menores no mobile */
  .hero.is-info .button.is-large {
    font-size: 0.875rem !important; /* Reduzido de 1.125rem para 0.875rem */
    padding: 0.5rem 1rem !important; /* Padding reduzido */
    height: auto !important;
    min-height: 2.5rem !important; /* Altura mínima reduzida */
  }
  
  /* Ícones dos botões menores no mobile */
  .hero.is-info .button.is-large .icon {
    font-size: 0.875rem !important; /* Reduzido de 1rem para 0.875rem */
  }
  
  /* Espaçamento entre botões reduzido no mobile */
  .hero.is-info .buttons {
    gap: 0.5rem !important; /* Espaçamento menor entre botões */
  }
  
  /* Container da hero com padding reduzido no mobile */
  .hero.is-info .hero-body .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Mobile: Tecnologias em linha única - espaçamentos otimizados */
@media screen and (max-width: 768px) {
  .hero.is-info .subtitle.is-4 {
    display: flex !important;
    flex-wrap: nowrap !important; /* Força uma linha única */
    align-items: center !important;
    gap: 0.25rem !important; /* Gap reduzido de 0.5rem para 0.25rem */
    justify-content: center !important; /* Centraliza as tecnologias */
  }
  
  /* Remove todas as margens específicas */
  .hero.is-info .subtitle.is-4 .icon.is-medium.mr-3,
  .hero.is-info .subtitle.is-4 .icon.is-medium.ml-4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Espaçamento mínimo entre ícone e texto */
  .hero.is-info .subtitle.is-4 .icon.is-medium {
    margin-right: 0.25rem !important; /* Espaçamento mínimo entre ícone e texto */
  }
  
  /* Subtítulo responsivo - Bulma puro */
  .hero.is-info .subtitle.is-4 {
    /* Removido white-space: nowrap - deixa Bulma controlar */
    /* Removido overflow: hidden - deixa Bulma controlar */
  }
  
  /* Fonte um pouco maior para melhor legibilidade */
  .hero.is-info .subtitle.is-4 {
    font-size: 1.0625rem !important; /* Aumentado de 0.9375rem para 1.0625rem (+2px) */
  }
  
  /* Ícones proporcionais */
  .hero.is-info .subtitle.is-4 .icon.is-medium {
    font-size: 1.0625rem !important; /* Aumentado de 0.9375rem para 1.0625rem (+2px) */
  }
}

/* Mobile: Botões lado a lado */
@media screen and (max-width: 768px) {
  .hero.is-info .buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  
  /* Botões ocupam espaço igual */
  .hero.is-info .buttons .button {
    flex: 1 !important;
    min-width: 0 !important; /* Permite que os botões encolham */
  }
}

/* Mobile: Aplicar padrão do Design System para botão Bulma */
@media screen and (max-width: 768px) {
  /* Esconde o span com texto "Documentação Bulma" */
  .hero.is-info .button.is-light .icon + span {
    display: none !important;
  }
  
  /* Adiciona novo span com "Bulma" seguindo padrão do Design System */
  .hero.is-info .button.is-light .icon::after {
    content: "" !important; /* Remove conteúdo do ::after */
  }
  
  /* Cria novo span após o ícone usando ::after do botão */
  .hero.is-info .button.is-light::after {
    content: "Bulma" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    margin-left: 0.5rem !important; /* Espaçamento padrão Bulma */
  }
}

/* Mobile extra pequeno: Ajustes adicionais para smartphones pequenos */
@media screen and (max-width: 480px) {
  /* Fonte ajustada para telas muito pequenas */
  .hero.is-info .subtitle.is-4 {
    font-size: 0.9375rem !important; /* Aumentado de 0.8125rem para 0.9375rem (+2px) */
  }
  
  /* Ícones proporcionais */
  .hero.is-info .subtitle.is-4 .icon.is-medium {
    font-size: 0.9375rem !important; /* Aumentado de 0.8125rem para 0.9375rem (+2px) */
  }
  
  /* Gap ainda menor */
  .hero.is-info .subtitle.is-4 {
    gap: 0.125rem !important; /* Gap mínimo de 0.125rem */
  }
  
  /* Espaçamento entre ícone e texto ainda menor */
  .hero.is-info .subtitle.is-4 .icon.is-medium {
    margin-right: 0.125rem !important; /* Espaçamento mínimo */
  }
  
  /* Título principal para smartphones pequenos - Bulma puro */
  .hero.is-info .title.is-1 {
    /* Removido font-size customizado - deixa Bulma controlar */
    /* Removido white-space - deixa Bulma controlar */
    /* Removido text-align - deixa Bulma controlar */
  }
  
  /* Container com padding mínimo */
  .hero.is-info .hero-body .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Cache buster: 2024-09-25-10:15 - HERO MOBILE MELHORADA */

/* ============================
   COMPONENTE CODE - MEELION
   ============================ */

/* Container principal do bloco de código */
.meelion-code-block {
  /* background removido - deixando o tema Highlight.js controlar */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  border: 1px solid #3c4043;
  position: relative;
  /* CORREÇÃO: Garantir estabilidade do layout */
  contain: layout style;
  isolation: isolate;
}

/* ========================================
   CODE BLOCK - BACKGROUND CUSTOMIZADO (Night Owl)
   ======================================== 
   
   NOTA: As regras de background e cores agora estão em .code-content
   para manter consistência com a Home e evitar header do Highlight.js
   ======================================== */

/* Scrollbar customizada para code blocks no Chrome/Edge */
.meelion-code-block .code-content::-webkit-scrollbar {
  height: 8px;
}

.meelion-code-block .code-content::-webkit-scrollbar-track {
  background: #01111d;  /* Mais escuro que o background */
}

.meelion-code-block .code-content::-webkit-scrollbar-thumb {
  background: #0e2a3e;  /* Azul escuro intermediário */
  border-radius: 4px;
}

.meelion-code-block .code-content::-webkit-scrollbar-thumb:hover {
  background: #1a3a52;  /* Azul mais claro no hover */
}

/* Botão copy flutuante no hover */
.meelion-code-block:hover .code-copy-floating {
  opacity: 1;
  visibility: visible;
}

.code-copy-floating {
  position: absolute;
  top: 8px;
  right: 8px;
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 10%);
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 3px;
}

.code-copy-floating:hover {
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), 50%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.code-copy-floating:active {
  transform: translateY(0);
}

.code-copy-floating.is-copied {
  background: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), 10%);
}

/* Botão copy flutuante - foco para acessibilidade */
.code-copy-floating:focus {
  opacity: 1;
  visibility: visible;
  outline: 2px solid hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
  outline-offset: 2px;
}

/* ========================================
   NOVO SISTEMA CODE - FADE EFFECT
   ======================================== */

/* Headers do Highlight.js - REMOVIDO */
/* Deixando o tema night-owl controlar, sem interferência */

/* Headers específicos - REMOVIDO */
/* Deixando o tema night-owl funcionar sem interferência */

/* ========================================
   NOTA: Headers removidos via PHP (code-block.php)
   ======================================== 
   
   A funcionalidade de título foi desabilitada diretamente no componente
   para evitar headers indesejados. Não é mais necessário CSS de remoção.
   ======================================== */

/* Botão copy do lado direito - sempre visível */
.code-copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 10%) !important;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.code-copy-button:hover {
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) + 10%)) !important;
  transform: translateY(-1px);
}

.code-copy-button.is-copied {
  background: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), 10%) !important;
}

/* Wrapper para o conteúdo com fade effect */
.code-content-wrapper {
  position: relative;
  max-height: 200px; /* Altura limitada para códigos longos */
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Wrapper que não precisa de botão expandir - altura automática */
.code-content-wrapper:not(.needs-expand-button) {
  max-height: none !important;
  overflow: visible !important;
}

/* Esconder botão quando o wrapper não precisa expandir (códigos pequenos) */
.meelion-code-block:not(.has-expandable-code) .code-show-button {
  display: none !important;
}

/* Remover fade effect para códigos pequenos */
.meelion-code-block:not(.has-expandable-code) .code-content-wrapper::after {
  display: none !important;
}

.code-content-wrapper.is-expanded {
  max-height: none !important; /* Remove limite quando expandido - forçar com !important */
}

/* Fade effect no final do código */
.code-content-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #011627);  /* Night Owl azul escuro */
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.code-content-wrapper.is-expanded::after {
  opacity: 0; /* Remove fade quando expandido */
}

/* Botão Show/Hide Code sobre o fade */
.code-show-button {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 10%) !important;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 15;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* CORREÇÃO: Garantir posicionamento estável */
  transform-origin: center center;
  will-change: transform, background-color, box-shadow;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
}

.code-show-button:hover {
  background: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) + 10%)) !important;
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.code-show-button .icon {
  margin-right: 6px;
}

/* CORREÇÃO: Garantir que o botão não se mova durante transições */
.meelion-code-block .code-show-button {
  /* Forçar recálculo de posicionamento estável */
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Evitar reflow durante transições */
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Estado hover com transform consistente */
.meelion-code-block .code-show-button:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}

/* ========================================
   CODE CONTENT - REATIVADO PARA COMPONENTE
   ======================================== 
   
   A classe .code-content agora é usada no code-block.php
   para manter consistência com a Home e evitar header do Highlight.js
   
   Background Night Owl aplicado via .meelion-code-block pre
   ======================================== */

/* Conteúdo do código - Night Owl theme */
.code-content {
  background: #011627 !important;  /* Night Owl azul escuro */
  color: #d6deeb !important;       /* Night Owl texto claro */
  padding: 1.5rem !important;
  margin: 0;
  overflow-x: auto !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  border-radius: 0 !important;
}

.code-content code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

/* Quebra de linha automática para código longo */
.code-content {
  max-width: 100%;
}

/* Responsividade */
@media screen and (max-width: 768px) {
  .meelion-code-block {
    margin: 0.5rem 0;
    border-radius: 6px;
  }
  
  .code-copy-floating {
    font-size: 0.65rem;
    padding: 3px 6px;
    top: 6px;
    right: 6px;
  }
  
  .code-content {
    padding: 12px;
    font-size: 0.8rem;
  }
}

/* Acessibilidade - botão flutuante já tem focus definido acima */

/* ========================================
   INTEGRAÇÃO COM HIGHLIGHT.JS (OPCIONAL)
   ======================================== */

/* Se Highlight.js for executado, ele adiciona a classe .hljs
   Mantemos padding 0 para não conflitar com nosso pre customizado */
.meelion-code-block .hljs {
  padding: 0;
}

/* Nota: O background Night Owl (#011627) é aplicado via .meelion-code-block pre
   independente do Highlight.js ser executado ou não. Isso garante consistência
   visual mesmo sem syntax highlighting. */

/* ========================================
   PADRONIZAÇÃO DE LINKS - DESIGN SYSTEM MEELION
   ======================================== */

/* LINKS SOBRE FUNDOS CLAROS → COR INFO (AZUL MAIS CLARO)
   
   Lógica de contraste inteligente:
   - Fundos claros (branco, cinza claro, verde limão) → Links azul info
   - Fundos escuros (azul, preto) → Links verde limão (mantém)
   - Botões, cards, tags → Verde limão (intacto)
   
   Cenários cobertos:
   ✅ Hero azul → Links verdes (contraste perfeito)
   ✅ Seção branca → Links azuis (contraste perfeito)
   ✅ Card verde limão → Links azuis (contraste perfeito)
   ✅ Botões → Verde limão (intacto)
*/

/* Links sobre fundos claros - cor info */
.section a:not(.button):not(.navbar-item):not(.tag),
.container a:not(.button):not(.navbar-item):not(.tag),
.box a:not(.button):not(.navbar-item):not(.tag),
.content a:not(.button):not(.navbar-item):not(.tag),
.card-content a:not(.button):not(.navbar-item):not(.tag),
.card-footer-item:not(.button):not(.navbar-item):not(.tag),
.field a:not(.button):not(.navbar-item):not(.tag),
.help a:not(.button):not(.navbar-item):not(.tag),
.table a:not(.button):not(.navbar-item):not(.tag),
.menu-list a:not(.button):not(.navbar-item):not(.tag),
.notification.is-white a:not(.button):not(.navbar-item):not(.tag),
.notification.is-light a:not(.button):not(.navbar-item):not(.tag) {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  font-weight: 400 !important; /* Fonte regular elegante */
  text-decoration: none !important; /* Sem sublinhado - design limpo */
}

/* Hover mais claro sobre fundos claros */
.section a:not(.button):not(.navbar-item):not(.tag):hover,
.container a:not(.button):not(.navbar-item):not(.tag):hover,
.box a:not(.button):not(.navbar-item):not(.tag):hover,
.content a:not(.button):not(.navbar-item):not(.tag):hover,
.card-content a:not(.button):not(.navbar-item):not(.tag):hover,
.card-footer-item:not(.button):not(.navbar-item):not(.tag):hover,
.field a:not(.button):not(.navbar-item):not(.tag):hover,
.help a:not(.button):not(.navbar-item):not(.tag):hover,
.table a:not(.button):not(.navbar-item):not(.tag):hover,
.menu-list a:not(.button):not(.navbar-item):not(.tag):hover,
.notification.is-white a:not(.button):not(.navbar-item):not(.tag):hover,
.notification.is-light a:not(.button):not(.navbar-item):not(.tag):hover {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) + 15%)) !important; /* Azul mais claro no hover */
  font-weight: 400 !important; /* Mantém fonte regular no hover */
  text-decoration: none !important; /* Sem sublinhado - design limpo */
}

/* Links ativos sobre fundos claros */
.section a:not(.button):not(.navbar-item):not(.tag):active,
.container a:not(.button):not(.navbar-item):not(.tag):active,
.box a:not(.button):not(.navbar-item):not(.tag):active,
.content a:not(.button):not(.navbar-item):not(.tag):active,
.card-content a:not(.button):not(.navbar-item):not(.tag):active,
.card-footer-item:not(.button):not(.navbar-item):not(.tag):active,
.field a:not(.button):not(.navbar-item):not(.tag):active,
.help a:not(.button):not(.navbar-item):not(.tag):active,
.table a:not(.button):not(.navbar-item):not(.tag):active,
.menu-list a:not(.button):not(.navbar-item):not(.tag):active,
.notification.is-white a:not(.button):not(.navbar-item):not(.tag):active,
.notification.is-light a:not(.button):not(.navbar-item):not(.tag):active {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) - 10%)) !important; /* Azul mais escuro no active */
  font-weight: 400 !important; /* Mantém fonte regular no active */
  text-decoration: none !important; /* Sem sublinhado - design limpo */
}

/* ========================================
   NAVBAR - SISTEMA COMPLETO (BULMA OFICIAL)
   ======================================== */

/* -----------------------------------------------------------
   NAVBAR MEELION - CONTROLE TOTAL CUSTOMIZADO
   Uso: <nav class="navbar navbar-meelion">
   Características: Navbar com controle total das cores Meelion, sem interferência do Bulma
   ----------------------------------------------------------- */

/* Navbar Meelion - Fundo azul petróleo personalizado */
/* Altura segue padrão Bulma (3.25rem padrão) - sem interferir */
.navbar-meelion {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  color: hsl(0, 0%, 100%) !important;
}

/* Navbar-brand da Meelion - controle total */
.navbar-meelion .navbar-brand {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
}

.navbar-meelion .navbar-brand .navbar-item {
  color: hsl(0, 0%, 100%) !important;
  background-color: transparent !important;
}

.navbar-meelion .navbar-brand .navbar-item:hover {
  color: hsl(0, 0%, 100%) !important;
  background-color: transparent !important;
}

/* Labels principais da navbar - branco total */
.navbar-meelion .navbar-item {
  color: hsl(0, 0%, 100%) !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  background-color: transparent !important;
}

/* Navbar-links (títulos dos dropdowns) - branco total */
.navbar-meelion .navbar-link {
  color: hsl(0, 0%, 100%) !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  background-color: transparent !important;
}

/* Navbar-links dentro de has-dropdown - MÁXIMA ESPECIFICIDADE para superar Bulma */
.navbar-meelion .navbar-item.has-dropdown .navbar-link {
  color: hsl(0, 0%, 100%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

.navbar-meelion .navbar-item.has-dropdown .navbar-link:hover {
  background-color: transparent !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
}

/* Estado normal do dropdown hoverable */
.navbar-meelion .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(0, 0%, 100%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover do dropdown hoverable - verde limão */
.navbar-meelion .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: transparent !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
}

/* Quando dropdown está ativo (aberto) - mantém verde limão */
.navbar-meelion .navbar-item.has-dropdown.is-hoverable.is-active .navbar-link {
  background-color: transparent !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
}

/* Hover personalizado - SEM background, apenas cor do texto */
.navbar-meelion .navbar-item:hover,
.navbar-meelion .navbar-link:hover {
  background-color: transparent !important;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
  transition: color 0.2s ease !important;
}

/* Menu aberto (mobile) - fundo primary */
.navbar-meelion .navbar-menu.is-active {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
}

/* Labels no menu aberto - branco total */
.navbar-meelion .navbar-menu.is-active .navbar-item,
.navbar-meelion .navbar-menu.is-active .navbar-link {
  color: hsl(0, 0%, 100%) !important;
}

/* Dropdowns - fundo PRIMARY com visual aesthetic moderno */
.navbar-meelion .navbar-dropdown {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  border-radius: 5px !important; /* Radius moderno de 5px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Dropshadow elegante */
  border: none !important; /* Sem borda */
  margin-top: -0.5rem !important; /* Overlap sutil com a navbar para visual integrado */
}

/* Dropdowns com especificidade máxima para superar regras do Bulma */
.navbar-meelion .navbar-item.has-dropdown .navbar-dropdown {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
}

/* Dropdowns hoverable: só aparecem no hover, mesmo com is-active (desktop) */
@media screen and (min-width: 1024px) {
  .navbar-meelion .navbar-item.has-dropdown.is-hoverable .navbar-dropdown {
    display: none !important;
  }
  
  .navbar-meelion .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block !important;
  }
}

/* Itens do dropdown - texto BRANCO para contraste sobre fundo primary */
.navbar-meelion .navbar-dropdown .navbar-item {
  color: hsl(0, 0%, 100%) !important;
  font-size: 0.75rem !important;
  text-transform: none !important;
  padding: 0.375rem 1rem !important;
  background-color: transparent !important;
}

/* Hover nos itens do dropdown - azul hover (luminosity 27%) com texto verde limão */
.navbar-meelion .navbar-dropdown .navbar-item:hover {
  background-color: hsl(197, 100%, 27%) !important; /* Azul hover #006E99 */
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
  transition: all 0.2s ease !important;
}

/* Item do dropdown selecionado/ativo - azul selecionado (luminosity 32%) com texto verde limão */
.navbar-meelion .navbar-dropdown .navbar-item.is-active {
  background-color: hsl(197, 100%, 32%) !important; /* Azul selecionado #0080B3 */
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important; /* Verde limão */
}

/* Botão outline branco sobre fundo azul */
.navbar-meelion .button.is-light {
  background-color: transparent !important;
  color: hsl(0, 0%, 100%) !important;
  border: 1px solid hsl(0, 0%, 100%) !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  min-height: 2.25em !important;
  font-size: 0.75rem !important; /* Mesmo tamanho do menu */
  text-transform: uppercase !important; /* Consistência com menu */
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
}

.navbar-meelion .button.is-light:hover {
  background-color: hsla(0, 0%, 100%, 0.15) !important;
  color: hsl(0, 0%, 100%) !important;
  border: 1px solid hsl(0, 0%, 100%) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Texto dentro do botão (strong) também deve seguir o tamanho */
.navbar-meelion .button.is-light strong {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* Responsividade - Mobile com controle total */
@media screen and (max-width: 1023px) {
  /* Menu aberto mobile - fundo primary */
  .navbar-meelion .navbar-menu.is-active {
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  }

  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-meelion .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-meelion .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdowns no mobile ABERTOS apenas com .is-active via Vue.js */
  .navbar-meelion .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
    background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-primary-l) + 5%)) !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    margin-top: 0 !important;
    border: none !important;
  }

  /* Itens do dropdown mobile - branco para contraste */
  .navbar-meelion .navbar-dropdown .navbar-item {
    color: hsl(0, 0%, 100%) !important;
    padding: 0.75rem 1.5rem !important;
    background-color: transparent !important;
  }

  /* Hover nos itens do dropdown mobile - azul hover com texto verde limão */
  .navbar-meelion .navbar-dropdown .navbar-item:hover {
    background-color: hsl(197, 100%, 27%) !important; /* Azul hover #006E99 */
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
    transition: all 0.2s ease !important;
  }
  
  /* Item do dropdown mobile selecionado/ativo - azul selecionado com texto verde limão */
  .navbar-meelion .navbar-dropdown .navbar-item.is-active {
    background-color: hsl(197, 100%, 32%) !important; /* Azul selecionado #0080B3 */
    color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
  }
  
  /* Hamburger menu mobile - branco */
  .navbar-meelion .navbar-burger span {
    background-color: hsl(0, 0%, 100%) !important; /* Branco */
  }
  
  /* Hamburger menu ativo (X) - branco sem background shape */
  .navbar-meelion .navbar-burger.is-active {
    background: transparent !important; /* Sem background */
  }
  
  .navbar-meelion .navbar-burger.is-active span {
    background-color: hsl(0, 0%, 100%) !important; /* Branco */
  }
  
  .navbar-meelion .navbar-burger:hover {
    background-color: transparent !important; /* Sem background no hover */
  }

  /* Animação suave da seta quando dropdown está ativo */
  .navbar-meelion .navbar-item.has-dropdown.is-active .navbar-link::after {
    transform: rotate(135deg) !important;
    transition: transform 0.3s ease !important;
  }
}

/* -----------------------------------------------------------
   NAVBAR PRIMARY BÁSICA (Bulma Padrão)
   Uso: <nav class="navbar is-primary">
   Características: Usa sistema automático do Bulma sem customizações
   ----------------------------------------------------------- */

/* Navbar primary básica - sistema automático do Bulma (sem interferir) */
/* .navbar.is-primary aplica automaticamente fundo azul petróleo + texto branco */

/* -----------------------------------------------------------
   NAVBAR BÁSICA - CUSTOMIZADA (Design System)
   Uso: <nav class="navbar navbar-basic">
   Características: Labels azul primary, hover azul info, seguindo padrão aprendido
   IMPORTANTE: Usa classe .navbar-basic para não interferir em outras navbars
   ----------------------------------------------------------- */

/* Navbar básica - labels azul primary */
.navbar-basic .navbar-item,
.navbar-basic .navbar-link {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  transition: color 0.2s ease !important;
}

/* Seta do dropdown (.navbar-link::after) - também azul primary */
.navbar-basic .navbar-link::after {
  border-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
}

/* Navbar-links dentro de has-dropdown - especificidade para superar Bulma */
.navbar-basic .navbar-item.has-dropdown .navbar-link {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover - muda para azul info */
.navbar-basic .navbar-item:hover,
.navbar-basic .navbar-link:hover {
  background-color: transparent !important;
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Seta do dropdown no hover - também azul info */
.navbar-basic .navbar-link:hover::after {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Hover do dropdown hoverable - azul info */
.navbar-basic .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: transparent !important;
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Seta do dropdown hoverable no hover */
.navbar-basic .navbar-item.has-dropdown.is-hoverable:hover .navbar-link::after {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Estado normal do dropdown hoverable */
.navbar-basic .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Quando dropdown está ativo (aberto) - mantém azul info */
.navbar-basic .navbar-item.has-dropdown.is-hoverable.is-active .navbar-link {
  background-color: transparent !important;
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Seta quando dropdown está ativo */
.navbar-basic .navbar-item.has-dropdown.is-hoverable.is-active .navbar-link::after {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Estilo limpo para dropdowns da navbar básica (sem underline) */
.navbar-basic .navbar-dropdown .navbar-item {
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

.navbar-basic .navbar-dropdown .navbar-item:hover {
  background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.1) !important;
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Responsividade - Mobile com controle manual de dropdowns */
@media screen and (max-width: 1023px) {
  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-basic .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-basic .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdowns no mobile ABERTOS apenas com .is-active via Vue.js */
  .navbar-basic .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
  }

  /* Animação suave da seta quando dropdown está ativo */
  .navbar-basic .navbar-item.has-dropdown.is-active .navbar-link::after {
    transform: rotate(135deg) !important;
    transition: transform 0.3s ease !important;
  }
}

/* -----------------------------------------------------------
   NAVBARS COLORIDAS - Design System (Padrão Bulma)
   Características: Fundos coloridos, labels com contraste adequado, hover mais escuro
   ----------------------------------------------------------- */

/* Importa fonte Archivo Black para logo texto nas navbars coloridas */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/* Logo texto "meelion" - APENAS para navbars coloridas */
.navbar-logo-meelion {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 1.25rem !important; /* Reduzido em 4px (0.25rem = 4px) */
  font-weight: 900 !important;
  text-transform: lowercase !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

/* ========================================
   NAVBAR LINK (Verde Limão)
   Uso: <nav class="navbar navbar-link">
   ======================================== */

.navbar-link-colored {
  background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
}

/* Labels escuros para contraste com fundo verde limão claro */
.navbar-link-colored .navbar-item,
.navbar-link-colored .navbar-link {
  color: hsl(0, 0%, 20%) !important; /* Texto escuro */
  transition: color 0.2s ease !important;
}

/* Seta do dropdown escura */
.navbar-link-colored .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

/* Navbar-links dentro de has-dropdown */
.navbar-link-colored .navbar-item.has-dropdown .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover - cor específica #98D100 */
.navbar-link-colored .navbar-item:hover,
.navbar-link-colored .navbar-link:hover {
  background-color: #98D100 !important;
  color: hsl(0, 0%, 20%) !important;
}

/* Seta no hover */
.navbar-link-colored .navbar-link:hover::after {
  border-color: hsl(0, 0%, 20%) !important;
}

/* Hover do dropdown hoverable */
.navbar-link-colored .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: #98D100 !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-link-colored .navbar-item.has-dropdown.is-hoverable:hover .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

/* Estado normal do dropdown hoverable */
.navbar-link-colored .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
}

/* Logo texto na navbar-link-colored - tom mais escuro que o fundo */
.navbar-link-colored .navbar-logo-meelion {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-dark-l) - 5%)) !important;
}

/* Mobile menu para navbar-link-colored */
.navbar-link-colored .navbar-menu.is-active {
  background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
}

.navbar-link-colored .navbar-menu.is-active .navbar-item {
  color: hsl(0, 0%, 20%) !important;
}

/* Dropdown items mais escuros por padrão */
.navbar-link-colored .navbar-dropdown .navbar-item {
  color: hsl(0, 0%, 15%) !important; /* Mais escuro que o padrão 20% */
  background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) - 5%)) !important;
}

.navbar-link-colored .navbar-dropdown .navbar-item:hover {
  background-color: #98D100 !important; /* Hover ainda mais escuro */
  color: hsl(0, 0%, 10%) !important;
}

/* Hamburger burger para navbar-link-colored - Padrão Bulma */
.navbar-link-colored .navbar-burger span {
  background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-dark-l) - 5%)) !important;
}

.navbar-link-colored .navbar-burger:hover {
  background-color: #98D100 !important;
}

.navbar-link-colored .navbar-burger.is-active {
  background-color: #98D100 !important;
}

/* Responsividade - Mobile com controle manual de dropdowns para navbar-link-colored */
@media screen and (max-width: 1023px) {
  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-link-colored .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-link-colored .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdown aberto quando tem .is-active */
  .navbar-link-colored .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-l) - 5%)) !important;
  }
}

/* Desktop: Garantir que dropdowns funcionem normalmente com hover */
@media screen and (min-width: 1024px) {
  .navbar-link-colored .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block !important;
  }
}

/* ========================================
   NAVBAR SUCCESS (Verde)
   Uso: <nav class="navbar navbar-success">
   ======================================== */

.navbar-success {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
}

/* Labels escuros para contraste */
.navbar-success .navbar-item,
.navbar-success .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  transition: color 0.2s ease !important;
}

.navbar-success .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-success .navbar-item.has-dropdown .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover - tom mais escuro */
.navbar-success .navbar-item:hover,
.navbar-success .navbar-link:hover {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-success .navbar-link:hover::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-success .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-success .navbar-item.has-dropdown.is-hoverable:hover .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-success .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
}

/* Logo texto na navbar-success - tom mais escuro que o fundo */
.navbar-success .navbar-logo-meelion {
  color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 25%)) !important;
}

/* Mobile menu para navbar-success */
.navbar-success .navbar-menu.is-active {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l)) !important;
}

.navbar-success .navbar-menu.is-active .navbar-item {
  color: hsl(0, 0%, 20%) !important;
}

/* Dropdown items mais escuros por padrão */
.navbar-success .navbar-dropdown .navbar-item {
  color: hsl(0, 0%, 15%) !important; /* Mais escuro que o padrão 20% */
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 5%)) !important;
}

.navbar-success .navbar-dropdown .navbar-item:hover {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 15%)) !important; /* Hover ainda mais escuro */
  color: hsl(0, 0%, 10%) !important;
}

/* Hamburger burger para navbar-success - Padrão Bulma */
.navbar-success .navbar-burger span {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 25%)) !important;
}

.navbar-success .navbar-burger:hover {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 10%)) !important;
}

.navbar-success .navbar-burger.is-active {
  background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 10%)) !important;
}

/* Responsividade - Mobile com controle manual de dropdowns para navbar-success */
@media screen and (max-width: 1023px) {
  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-success .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-success .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdown aberto quando tem .is-active */
  .navbar-success .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
    background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-success-l) - 5%)) !important;
  }
}

/* Desktop: Garantir que dropdowns funcionem normalmente com hover */
@media screen and (min-width: 1024px) {
  .navbar-success .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block !important;
  }
}

/* ========================================
   NAVBAR WARNING (Amarelo)
   Uso: <nav class="navbar navbar-warning">
   ======================================== */

.navbar-warning {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l)) !important;
}

/* Labels escuros para contraste */
.navbar-warning .navbar-item,
.navbar-warning .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  transition: color 0.2s ease !important;
}

.navbar-warning .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-warning .navbar-item.has-dropdown .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover - tom mais escuro */
.navbar-warning .navbar-item:hover,
.navbar-warning .navbar-link:hover {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-warning .navbar-link:hover::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-warning .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-warning .navbar-item.has-dropdown.is-hoverable:hover .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-warning .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
}

/* Logo texto na navbar-warning - tom mais escuro que o fundo */
.navbar-warning .navbar-logo-meelion {
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 25%)) !important;
}

/* Mobile menu para navbar-warning */
.navbar-warning .navbar-menu.is-active {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l)) !important;
}

.navbar-warning .navbar-menu.is-active .navbar-item {
  color: hsl(0, 0%, 20%) !important;
}

/* Dropdown items mais escuros por padrão */
.navbar-warning .navbar-dropdown .navbar-item {
  color: hsl(0, 0%, 15%) !important; /* Mais escuro que o padrão 20% */
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 5%)) !important;
}

.navbar-warning .navbar-dropdown .navbar-item:hover {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 15%)) !important; /* Hover ainda mais escuro */
  color: hsl(0, 0%, 10%) !important;
}

/* Hamburger burger para navbar-warning - Padrão Bulma */
.navbar-warning .navbar-burger span {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 25%)) !important;
}

.navbar-warning .navbar-burger:hover {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 10%)) !important;
}

.navbar-warning .navbar-burger.is-active {
  background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 10%)) !important;
}

/* Responsividade - Mobile com controle manual de dropdowns para navbar-warning */
@media screen and (max-width: 1023px) {
  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-warning .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-warning .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdown aberto quando tem .is-active */
  .navbar-warning .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
    background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-warning-l) - 5%)) !important;
  }
}

/* Desktop: Garantir que dropdowns funcionem normalmente com hover */
@media screen and (min-width: 1024px) {
  .navbar-warning .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block !important;
  }
}

/* ========================================
   NAVBAR DANGER (Vermelho/Rosa)
   Uso: <nav class="navbar navbar-danger">
   ======================================== */

.navbar-danger {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
}

/* Labels escuros para contraste */
.navbar-danger .navbar-item,
.navbar-danger .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  transition: color 0.2s ease !important;
}

.navbar-danger .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-danger .navbar-item.has-dropdown .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

/* Hover - tom mais escuro */
.navbar-danger .navbar-item:hover,
.navbar-danger .navbar-link:hover {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-danger .navbar-link:hover::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-danger .navbar-item.has-dropdown.is-hoverable:hover .navbar-link {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 10%)) !important;
  color: hsl(0, 0%, 20%) !important;
}

.navbar-danger .navbar-item.has-dropdown.is-hoverable:hover .navbar-link::after {
  border-color: hsl(0, 0%, 20%) !important;
}

.navbar-danger .navbar-item.has-dropdown.is-hoverable .navbar-link {
  color: hsl(0, 0%, 20%) !important;
  background-color: transparent !important;
}

/* Logo texto na navbar-danger - tom mais escuro que o fundo */
.navbar-danger .navbar-logo-meelion {
  color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 15%)) !important;
}

/* Mobile menu para navbar-danger */
.navbar-danger .navbar-menu.is-active {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
}

.navbar-danger .navbar-menu.is-active .navbar-item {
  color: hsl(0, 0%, 20%) !important;
}

/* Dropdown items mais escuros por padrão */
.navbar-danger .navbar-dropdown .navbar-item {
  color: hsl(0, 0%, 15%) !important; /* Mais escuro que o padrão 20% */
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 5%)) !important;
}

.navbar-danger .navbar-dropdown .navbar-item:hover {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 15%)) !important; /* Hover ainda mais escuro */
  color: hsl(0, 0%, 10%) !important;
}

/* Hamburger burger para navbar-danger - Padrão Bulma */
.navbar-danger .navbar-burger span {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 15%)) !important;
}

.navbar-danger .navbar-burger:hover {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 10%)) !important;
}

.navbar-danger .navbar-burger.is-active {
  background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 10%)) !important;
}

/* Responsividade - Mobile com controle manual de dropdowns para navbar-danger */
@media screen and (max-width: 1023px) {
  /* Remove .is-hoverable no mobile para desabilitar hover (padrão Bulma) */
  .navbar-danger .navbar-item.has-dropdown.is-hoverable {
    pointer-events: auto;
  }

  /* Dropdowns no mobile FECHADOS por padrão (apenas quando o menu mobile está aberto) */
  .navbar-danger .navbar-menu.is-active .navbar-item.has-dropdown:not(.is-active) .navbar-dropdown {
    display: none !important;
  }

  /* Dropdown aberto quando tem .is-active */
  .navbar-danger .navbar-menu.is-active .navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block !important;
    background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-danger-l) - 5%)) !important;
  }
}

/* Desktop: Garantir que dropdowns funcionem normalmente com hover */
@media screen and (min-width: 1024px) {
  .navbar-danger .navbar-item.has-dropdown.is-hoverable:hover .navbar-dropdown {
    display: block !important;
  }
}

/* ========================================
   BREADCRUMB CUSTOMIZAÇÃO MEELION
   ======================================== */

/* Breadcrumb usa cor info (azul mais claro) ao invés de link (verde limão)
   Isso segue o padrão do branding onde info é adequada para links funcionais */
.breadcrumb a {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  font-weight: 400 !important; /* Fonte regular */
}

.breadcrumb a:hover {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) + 15%)) !important; /* Azul mais claro no hover */
  font-weight: 400 !important; /* Mantém fonte regular no hover */
}

.breadcrumb li.is-active a {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-info-l) - 20%)) !important;
  font-weight: 400 !important; /* Fonte regular no item ativo */
}

/* Separadores do breadcrumb também seguem a cor info */
.breadcrumb li + li::before {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* ========================================
   DESIGN SYSTEM - CORREÇÕES GLOBAIS
   ======================================== */

/* Previne overflow de código e caminhos longos em notificações/cards */
.notification code,
.box code,
.message code,
.content code {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Links longos também devem quebrar */
.notification a,
.box a,
.message a,
.content a {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Garante que listas longas não estourem containers */
.notification .content ul,
.notification .content ol,
.box .content ul,
.box .content ol {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* CORREÇÃO: Alinhamento vertical da paginação Bulma */
.pagination {
  align-items: flex-end !important;
}

/* Garantir que todos os elementos tenham altura consistente */
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
  display: flex !important;
  align-items: center !important;
  min-height: 2.25em !important;
}

/* CORREÇÃO: Remover margin-top do primeiro elemento da paginação */
.pagination-list li:first-child {
  margin-top: 0 !important;
}

/* CORREÇÃO: Garantir que todos os li tenham margin consistente */
.pagination-list li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ========================================
   PAGINAÇÃO CUSTOMIZADA - ESTADO SELECIONADO
   ======================================== */

/* Estado selecionado da paginação - Custom background (Main Ter) */
.pagination-link.is-current {
  background-color: #E1E2E4 !important;
  border-color: #E1E2E4 !important;
}

/* Hover do estado selecionado - Custom background mais claro (Main Bis) */
.pagination-link.is-current:hover {
  background-color: #EBEBED !important;
  border-color: #EBEBED !important;
}

/* ========================================
   INPUTS E FORMULÁRIOS - FOCUS COR INFO (GLOBAL)
   ======================================== 
   
   Customização global: Inputs, textareas e selects SEM modificadores de cor
   usam cor INFO no focus (:focus) e na classe .is-focused
   ao invés da cor LINK padrão do Bulma.
   
   Inputs/textareas COM modificadores de cor (is-link, is-primary, is-info, 
   is-success, is-warning, is-danger) mantêm a cor da própria variação no focus.
   ======================================== */

/* Focus global para inputs SEM modificadores de cor - cor info */
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus,
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused,
.select:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) select:focus,
.select:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) select.is-focused {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.25) !important;
}

/* Focus para file input (customizado) */
.file-input:focus,
.file-cta:focus,
.file-name:focus {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.25) !important;
}

/* Seta do dropdown (select) - cor info */
/* Apenas para selects SEM modificadores de cor - selects coloridos mantêm cor da própria variação */
.select:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-multiple):not(.is-loading)::after {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* ========================================
   INPUT ICON CUSTOMIZAÇÃO - COR INFO (GLOBAL)
   ======================================== */

/* Customização da cor do ícone do input quando em foco */
/* Por padrão o Bulma usa a cor link, aqui forçamos info (apenas para inputs SEM modificadores de cor) */
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus + .icon,
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused + .icon,
.control.has-icons-left .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus + .icon,
.control.has-icons-left .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused + .icon,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus + .icon,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused + .icon,
.control.has-icons-left .textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus + .icon,
.control.has-icons-left .textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused + .icon {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Garantir que ícones dentro de inputs com foco usem info (apenas para inputs SEM modificadores de cor) */
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus ~ .icon,
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused ~ .icon,
.control .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus ~ .icon,
.control .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused ~ .icon,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus ~ .icon,
.textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused ~ .icon,
.control .textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus ~ .icon,
.control .textarea:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused ~ .icon {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* Customização específica para ícones de lupa em inputs de busca (apenas para inputs SEM modificadores de cor) */
.control.has-icons-left .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus + .icon .fa-search,
.control.has-icons-left .input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused + .icon .fa-search,
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):focus ~ .icon .fa-search,
.input:not(.is-link):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger).is-focused ~ .icon .fa-search {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* ========================================
   PANEL COMPONENT CUSTOMIZAÇÃO - COR INFO
   ======================================== */

/* Customização do input do exemplo básico do Panel para cor info no foco */
/* Aplicar cor info para border e box-shadow do input quando em foco */
.panel .panel-block .input:focus {
  border-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  box-shadow: 0 0 0 0.125em hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 0.25) !important;
}

/* Customização do ícone do input do exemplo básico do Panel para cor info */
.panel .panel-block .input:focus + .icon,
.panel .panel-block .control.has-icons-left .input:focus + .icon,
.panel .panel-block .input:focus ~ .icon,
.panel .panel-block .control .input:focus ~ .icon {
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* ========================================
   TABS CUSTOMIZAÇÃO - COR INFO
   ======================================== */

/* Customização da cor da tab ativa para info em vez de link */
.tabs.is-active > a,
.tabs .is-active > a {
  border-bottom-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
}

/* ========================================
   LANDING PAGE: CALCULADORAS
   ======================================== */

/* Cards de calculadoras - Design limpo e minimalista */
.calculadora-card {
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

/* Efeito hover elegante */
.calculadora-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Header sem borda - mantém estrutura Bulma para alinhamento correto */
.calculadora-card .card-header {
    border-bottom: none;
    box-shadow: none;
}

/* Card-header-title alinha ícone e título perfeitamente */
.calculadora-card .card-header-title {
    align-items: center;
}

/* Ícone fixo sem shrink */
.calculadora-card .card-header-title .icon {
    flex-shrink: 0;
}

/* Tags estilizadas */
.calculadora-card .tags .tag {
    font-weight: 500;
}

/* Responsividade Mobile */
@media screen and (max-width: 768px) {
    /* Cards ocupam largura total no mobile */
    .calculadora-card {
        margin-bottom: 1.5rem;
    }
    
    /* Ícone menor no mobile para melhor layout - especificidade correta sem !important */
    .calculadora-card .card-header-title .icon.is-large i {
        font-size: 1.5rem;
    }
    
    /* Título menor no mobile - especificidade correta sem !important */
    .calculadora-card .card-header-title .title.is-4 {
        font-size: 1.25rem;
    }
}

/* ============================
   FOOTER MEELION - PADRÃO OFICIAL
   ============================ */

/* Footer Meelion - fundo info (azul ciano) com textos brancos e links verde limão */
.footer-meelion {
  background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l)) !important;
  padding-bottom: 2rem !important;
}

/* Todos os textos do footer em branco */
.footer-meelion,
.footer-meelion .title,
.footer-meelion .subtitle,
.footer-meelion .content,
.footer-meelion strong {
  color: hsl(0, 0%, 100%) !important;
}

/* Parágrafos do footer - cor branca mantendo espaçamento padrão do Bulma */
.footer-meelion .column p {
  color: hsl(0, 0%, 100%) !important;
  margin-bottom: 0.75rem !important;
}

/* Títulos das colunas do footer em semibold */
.footer-meelion .title.is-5 {
  font-weight: 600 !important;
}

/* Links do footer em branco com hover link */
/* Padrão Design System: Fundo info (azul ciano) = Links brancos */
.footer-meelion a:not(.button):not(.navbar-item):not(.tag) {
  color: hsl(0, 0%, 100%) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

/* Hover dos links em cor link */
.footer-meelion a:not(.button):not(.navbar-item):not(.tag):hover {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* Links ativos sobre fundo azul escuro */
.footer-meelion a:not(.button):not(.navbar-item):not(.tag):active {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), 50%) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* Ícones do footer em branco */
.footer-meelion .icon {
  color: hsl(0, 0%, 100%) !important;
}

/* Divisor (HR) do footer - linha branca sutil */
.footer-meelion hr,
.footer-meelion .footer-divider {
  background-color: hsla(0, 0%, 100%, 0.2) !important;
  border: none !important;
  height: 1px !important;
  margin: 2rem 0 !important;
}

/* Box de disclaimer - fundo branco com 10% opacidade (90% transparência), texto branco */
.footer-meelion .footer-disclaimer {
  background-color: rgba(255, 255, 255, 0.1) !important;
  padding: 1rem 1.5rem !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
}

.footer-meelion .footer-disclaimer p {
  color: hsl(0, 0%, 100%) !important;
  margin-bottom: 0 !important;
  line-height: 1.6 !important;
}

.footer-meelion .footer-disclaimer strong {
  color: hsl(0, 0%, 100%) !important;
  font-weight: 600 !important;
}

/* Ícone info no disclaimer - cor link */
.footer-meelion .footer-disclaimer .icon.has-text-warning {
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)) !important;
  vertical-align: middle !important;
}

/* Copyright - reduzir distância da base */
.footer-meelion .content {
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.footer-meelion .content p {
  margin-bottom: 0 !important;
}

/* Footer compacto - padding reduzido */
.footer-meelion.footer-compact {
  padding: 1.5rem 1.5rem !important;
}

/* Responsividade mobile do footer */
@media screen and (max-width: 768px) {
  /* Colunas em stack no mobile */
  .footer-meelion .columns {
    display: flex;
    flex-direction: column;
  }
  
  /* Textos centralizados no mobile */
  .footer-meelion .column {
    text-align: center !important;
  }
  
  /* Links alinhados ao centro no mobile */
  .footer-meelion .column.has-text-right {
    text-align: center !important;
  }
  
  /* Disclaimer com padding reduzido no mobile */
  .footer-meelion .footer-disclaimer {
    padding: 0.75rem 1rem !important;
  }
}

/* ========================================
   FORM RADIO - ESPAÇAMENTO ENTRE RADIO BUTTONS
   ======================================== */

/* Espaçamento horizontal entre radio buttons */
.control .radio:not(:last-child) {
  margin-right: 1.5rem !important;
}

/* Garantir que radio buttons sejam inline-block para espaçamento funcionar */
.control .radio {
  display: inline-block;
}

/* ========================================
   HERO - BOXES DE DEMONSTRAÇÃO
   ======================================== */

/* Box para exemplos de hero (remove padding e overflow hidden) */
.hero-example-box {
  padding: 0;
  overflow: hidden;
}

/* Box para exemplos de hero com altura limitada (halfheight, fullheight) */
.hero-example-box-limited {
  padding: 0;
  overflow: hidden;
  max-height: 300px;
}

/* Box para exemplos de hero com navbar (altura maior) */
.hero-example-box-navbar {
  padding: 0;
  overflow: hidden;
  max-height: 400px;
}

/* Box para exemplos de hero em 3 partes (altura maior ainda) */
.hero-example-box-3parts {
  padding: 0;
  overflow: hidden;
  max-height: 500px;
}

/* ========================================
   HERO - TÍTULOS COM FONTE BOLD
   ======================================== */

/* Todos os títulos dentro de heroes devem usar fonte bold por padrão */
/* Especificidade máxima para sobrescrever regras gerais de peso 400 */
.hero .title,
.hero .hero-body .title,
.hero .hero-body .container .title,
.hero .title.is-1,
.hero .title.is-2,
.hero .title.is-3,
.hero .title.is-4,
.hero .title.is-5,
.hero .title.is-6 {
  font-weight: 700 !important;
}

/* Garantir que subtítulos mantenham peso normal */
.hero .subtitle,
.hero .hero-body .subtitle,
.hero .hero-body .container .subtitle {
  font-weight: 400 !important;
}

/* ========================================
   LEVEL - IMAGEM DO LOGO
   ======================================== */

/* Imagem do logo no exemplo de level centralizado */
.level-logo-image {
  height: 30px;
}

/* ========================================
   COLUMNS - BOX DO NARROW COLUMN
   ======================================== */

/* Box com largura fixa para exemplo de narrow column */
.columns-narrow-box {
  width: 200px;
}

/* ========================================
   GLOBAL LOADING MODAL (NEWDS)
   ======================================== */

/* Overlay do modal de carregamento */
#globalLoadingModal.loading-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Container central do modal */
#globalLoadingModal .loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 70, 97, 0.85);
  padding: 24px 28px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid #a0d533; /* Verde Meelion */
  min-width: 280px;
  max-width: 90vw;
}

/* Spinner circular */
#globalLoadingModal .loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(160, 213, 51, 0.2);
  border-top: 4px solid #a0d533; /* Verde Meelion */
  border-radius: 50%;
  animation: meelion-spin 1s linear infinite;
  margin: 0 auto 16px;
}

/* Título do modal */
#globalLoadingModal .loading-title {
  color: #a0d533; /* Verde Meelion */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* Animação do spinner */
@keyframes meelion-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsividade */
@media (max-width: 768px) {
  #globalLoadingModal .loading-content {
    padding: 20px 16px;
    min-width: 260px;
    margin: 20px;
  }
}

/* ========================================
   GLOBAL LOADING MODAL (NEWDS)
   ======================================== */

/* Overlay do modal de carregamento */
#globalLoadingModal.loading-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999999;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Container central do modal */
#globalLoadingModal .loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 70, 97, 0.85);
  padding: 24px 28px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid #a0d533; /* Verde Meelion */
  min-width: 280px;
  max-width: 90vw;
}

/* Spinner circular */
#globalLoadingModal .loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(160, 213, 51, 0.2);
  border-top: 4px solid #a0d533; /* Verde Meelion */
  border-radius: 50%;
  animation: meelion-spin 1s linear infinite;
  margin: 0 auto 16px;
}

/* Título do modal */
#globalLoadingModal .loading-title {
  color: #a0d533; /* Verde Meelion */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

/* Animação do spinner */
@keyframes meelion-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsividade */
@media (max-width: 768px) {
  #globalLoadingModal .loading-content {
    padding: 20px 16px;
    min-width: 260px;
    margin: 20px;
  }
}

/* ========================================
   DESIGN SYSTEM HELPERS
   ======================================== */
.ds-color-swatch {
  width: 48px;
  height: 48px;
  border-radius: var(--bulma-radius-small);
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.has-background-scheme-10 {
  background-color: var(--bulma-scheme-10) !important;
}

.has-background-scheme-25 {
  background-color: var(--bulma-scheme-25) !important;
}

.has-background-scheme-main-ter {
  background-color: var(--bulma-scheme-main-ter) !important;
}

.has-background-scheme-main-bis {
  background-color: var(--bulma-scheme-main-bis) !important;
}

.has-background-scheme-main {
  background-color: var(--bulma-scheme-main) !important;
}

.has-background-scheme-95 {
  background-color: var(--bulma-scheme-95) !important;
}

.has-background-scheme-100 {
  background-color: var(--bulma-scheme-100) !important;
}