/* ==========================================================================
   Table of Contents (Consolidated & Improved)
   ==========================================================================
   1. Variables & Global Settings (:root)
   2. Reset & Base Styles
   3. Accessibility Themes (High Contrast, Dark Mode)
   4. Base Elements (Typography, Links)
   5. Layout Helpers (Containers handled by Bootstrap - No specific CSS here)
   6. Components
      - 6.1 Buttons (General, Brand Specific)
      - 6.2 Navbar
      - 6.3 Hero Sections
      - 6.4 Section Title & Subtitle
      - 6.5 Cards (General, Feature, Benefit, Form, Testimonial, Pillar)
      - 6.6 Newsletter Form
      - 6.7 Client Logo Carousel
      - 6.8 Forms (General Styling)
      - 6.9 Floating Action Buttons (FAB)
      - 6.10 Footer
      - 6.11 Skip Link
      - 6.12 Modals
      - 6.13 Spinner
      - 6.14 Timeline (About Page)
      - 6.15 Process Trail (Solutions Page)
   7. Animations
   8. Utility Classes (client-logo, feature-icon, text colors, etc.)
   9. Responsiveness (Media Queries)
   ========================================================================== */

/* ==========================================================================
   1. Variables & Global Settings (:root)
   ========================================================================== */
   :root {
    /* Cores da Marca NIVVOS */
    --nivvos-primary: #5f4986;      /* Roxo principal */
    --nivvos-primary-rgb: 95, 73, 134;
    --nivvos-primary-hover: #4a386a; /* Roxo mais escuro */
    --nivvos-secondary: #0097B2;     /* Azul Claro Secundário */
    --nivvos-secondary-rgb: 0, 151, 178;
    --nivvos-secondary-hover: #007a8f; /* Azul mais escuro */
    --nivvos-secondary-light-bg: #e0f2ff; /* Fundo Azul Claro Derivado */
  
    /* Cores Funcionais */
    --nivvos-light-purple-bg: rgba(var(--nivvos-primary-rgb), 0.08);
    --nivvos-light-blue-bg: rgba(var(--nivvos-secondary-rgb), 0.1);
    --nivvos-success: #198754;
    --nivvos-warning: #ffc107;
    --nivvos-danger: #dc3545;
  
    /* Overrides Bootstrap & Defaults */
    --bs-primary: var(--nivvos-primary);
    --bs-primary-rgb: var(--nivvos-primary-rgb);
    --bs-primary-hover: var(--nivvos-primary-hover);
    --bs-secondary: #6c757d; /* Cinza Padrão */
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: var(--nivvos-success);
    --bs-success-rgb: 25, 135, 84;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning: var(--nivvos-warning);
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger: var(--nivvos-danger);
    --bs-danger-rgb: 220, 53, 69;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-light-subtle: #fcfcfd; /* Fundo sutilmente diferente do branco */
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    --bs-dark-contrast: #1a1d20; /* Fundo muito escuro */
    --bs-white: #fff;
    --bs-white-rgb: 255, 255, 255;
    --bs-body-color: #343a40;
    --bs-body-bg: #fff;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1); /* NIVVOS Style definition */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    --bs-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
    --bs-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.12);
  
    /* Tipografia */
    --bs-body-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --bs-heading-font-family: var(--bs-body-font-family);
    --bs-body-line-height: 1.65;
    --bs-heading-color: var(--bs-dark); /* Títulos usam cor escura padrão por default */
  
    /* Transições */
    --transition-base: all 0.25s ease-in-out;
  }
  
  
  /* ==========================================================================
     2. Reset & Base Styles
     ========================================================================== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    font-size: 100%; /* Base font size for rem units */
  }
  
  body {
    font-family: var(--bs-body-font-family);
    margin: 0;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    line-height: var(--bs-body-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* ==========================================================================
   Seu arquivo page-styles.css ou estilos-pagina.css
   ========================================================================== */

/* ... (seu CSS :root e outras variáveis globais que você possa ter) ... */
:root {
    --bs-primary: #5f4986; /* NIVVOS Purple */
    --bs-primary-rgb: 95, 73, 134;
    --bs-secondary: #0097B2; /* NIVVOS Light Blue */
    --bs-secondary-rgb: 78, 167, 214;
    --bs-heading-color: #333;
    --bs-body-font-family: 'Roboto', sans-serif; /* Exemplo de fonte */
    --bs-heading-font-family: 'Montserrat', sans-serif; /* Exemplo de fonte */
    --transition-base: all 0.3s ease-in-out;
    
    /* Cores customizadas NIVVOS */
    --nivvos-primary: #5f4986;
    --nivvos-primary-hover: #4a386a;
    --nivvos-secondary: #4EA7D6;
    --nivvos-secondary-hover: #3a8cb8;
}


/* ==========================================================================
     3. Accessibility Themes (High Contrast, Dark Mode)
     ========================================================================== */
  
  /* --- High Contrast Theme --- */
  body.high-contrast {
    --bs-primary: #5f4986 !important; 
    --bs-primary-rgb: 95, 73, 134 !important;
    --bs-secondary: #0000FF !important; 
    --bs-secondary-rgb: 0, 0, 255 !important;
    --bs-body-bg: #fff !important;
    --bs-body-color: #000 !important;
    --bs-border-color: #000 !important;
    --bs-border-color-translucent: rgba(0,0,0,0.5) !important;
    --bs-heading-color: #000 !important;
    --bs-light: #f0f0f0 !important;
    --bs-light-subtle: #fff !important;
    --bs-dark: #000 !important;
    --bs-dark-contrast: #000 !important;
  }
  
  body.high-contrast a:not(.btn):not(.footer-link):not(.skip-link):not(.dropdown-item) {
     color: var(--bs-secondary) !important; 
     text-decoration: underline !important;
  }
  body.high-contrast .bg-light,
  body.high-contrast .bg-white,
  body.high-contrast .bg-light-subtle,
  body.high-contrast .card,
  body.high-contrast .navbar,
  body.high-contrast .modal-content,
  body.high-contrast .dropdown-menu {
      background-color: #fff !important;
      border: 2px solid #000 !important;
      color: #000 !important;
      box-shadow: none !important;
  }
  body.high-contrast .text-muted,
  body.high-contrast .text-white-50, 
  body.high-contrast .footer .small,
  body.high-contrast .form-text {
      color: #333 !important;
  }
  body.high-contrast input,
  body.high-contrast select,
  body.high-contrast textarea {
      background-color: #fff !important;
      color: #000 !important;
      border: 1px solid #000 !important;
  }
  body.high-contrast input::placeholder,
  body.high-contrast textarea::placeholder {
      color: #555 !important;
  }
  body.high-contrast .btn {
      border-width: 2px !important;
      border-color: #000 !important; 
  }
  body.high-contrast .btn-nivvos-primary,
  body.high-contrast .btn-primary { 
      background-color: var(--bs-primary) !important; 
      color: #fff !important; 
  }
  body.high-contrast .btn-nivvos-secondary {
      background-color: var(--bs-secondary) !important; 
      color: #fff !important; 
  }
  body.high-contrast .btn-outline-nivvos-primary,
  body.high-contrast .btn-outline-primary {
      color: var(--bs-primary) !important; 
      border-color: var(--bs-primary) !important; 
      background-color: transparent !important;
  }
  body.high-contrast .btn-outline-nivvos-primary:hover,
  body.high-contrast .btn-outline-primary:hover {
      background-color: var(--bs-primary) !important;
      color: #fff !important;
      border-color: #000 !important; 
  }
  
  body.high-contrast .navbar-brand img#navbarLogo { /* Ser específico para o logo principal */
    filter: none !important; 
  }
  body.high-contrast .navbar-toggler-icon { 
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  body.high-contrast .footer {
      background-color: #fff !important;
      color: #000 !important;
      border-top: 2px solid #000 !important;
  }
  body.high-contrast .footer a,
  body.high-contrast .footer .social-icon,
  body.high-contrast .footer-link { 
      color: #000 !important;
  }
  body.high-contrast .footer a:hover,
  body.high-contrast .footer-link:hover {
       color: #000 !important; 
       text-decoration: underline !important;
  }
  body.high-contrast .feature-icon {
      background-color: #ddd !important;
      color: #000 !important;
      border: 1px solid #000 !important;
  }
  body.high-contrast .client-logo {
      filter: contrast(5) grayscale(1) !important; 
      opacity: 1 !important;
  }
  body.high-contrast hr {
      border-color: #000 !important;
      border-top-width: 2px !important;
  }
  
  
  /* --- Dark Mode Theme --- */
  body.dark-mode {
      --bs-primary: #D27AFF !important; 
      --bs-primary-rgb: 193, 181, 225 !important;
      --bs-secondary: #64BCEF !important; 
      --bs-secondary-rgb: 130, 207, 255 !important;
      --bs-body-bg: #121212 !important;
      --bs-body-color: #dee2e6 !important;
      --bs-border-color: #555 !important;
      --bs-border-color-translucent: rgba(255, 255, 255, 0.1) !important;
      --bs-heading-color: #f8f9fa !important;
      --bs-light: #343a40 !important;
      --bs-light-subtle: #1e1e1e !important; 
      --bs-dark: #f8f9fa !important; 
      --bs-dark-contrast: #121212 !important;

      /* Cores customizadas NIVVOS para Dark Mode */
      --nivvos-primary: #D27AFF; /* Roxo mais claro */
      --nivvos-primary-hover: #D27AFF;
      --nivvos-secondary: #64BCEF; /* Azul mais claro */
      --nivvos-secondary-hover: #64BCEF;
  }
  
  body.dark-mode a:not(.btn):not(.footer-link):not(.skip-link):not(.dropdown-item) {
      color: var(--nivvos-secondary) !important; /* Links com a cor secundária NIVVOS do dark mode */
  }
  body.dark-mode a:not(.btn):not(.footer-link):not(.skip-link):not(.dropdown-item):hover {
      color: var(--nivvos-secondary-hover) !important;
  }
  
  body.dark-mode .bg-light,
  body.dark-mode .bg-white, 
  body.dark-mode .bg-light-subtle,
  body.dark-mode .card,
  body.dark-mode .navbar, 
  body.dark-mode .modal-content,
  body.dark-mode .dropdown-menu {
      background-color: var(--bs-light-subtle) !important; 
      border-color: var(--bs-border-color) !important;
      color: var(--bs-body-color) !important;
  }
  body.dark-mode .text-muted { color: #aaa !important; }
  body.dark-mode input,
  body.dark-mode select,
  body.dark-mode textarea {
      background-color: #2c2c2c !important;
      color: var(--bs-body-color) !important;
      border-color: var(--bs-border-color) !important;
  }
  body.dark-mode input::placeholder,
  body.dark-mode textarea::placeholder {
      color: #888 !important; 
  }
  body.dark-mode .btn-nivvos-primary,
  body.dark-mode .btn-primary {
      background-color: var(--nivvos-primary); /* Usa a cor primária NIVVOS do dark mode */
      color: #000 !important; 
      border-color: transparent; /* Remove border for filled buttons in dark mode */
  }
  body.dark-mode .btn-nivvos-secondary {
      background-color: var(--nivvos-secondary) !important; 
      color: #000 !important; 
      border-color: transparent;
  }
  body.dark-mode .btn-outline-nivvos-primary,
  body.dark-mode .btn-outline-primary {
      color: var(--nivvos-primary); 
      border-color: var(--nivvos-primary);
  }
  body.dark-mode .btn-outline-nivvos-primary:hover,
  body.dark-mode .btn-outline-primary:hover {
      background-color: var(--nivvos-primary) !important;
      color: #000 !important;
  }

  /* ****** ALTERADO: Não aplicar filtro se o logo é trocado via JS ****** */
  /* Se logo2.png já é claro, o filtro não é necessário. O JS troca o src. */
  body.dark-mode .navbar-brand img#navbarLogo {
      filter: none; /* Garante que nenhum filtro seja aplicado ao logo trocado */
  }
  /* Se houver outros logos no navbar-brand que precisam ser invertidos:
  body.dark-mode .navbar-brand img:not(#navbarLogo) { 
      filter: brightness(0) invert(1); 
  }
  */

  body.dark-mode .navbar-toggler-icon { filter: invert(1); }
  body.dark-mode .footer {
      background-color: #18191a !important; 
      border-top-color: var(--bs-border-color) !important;
  }
  body.dark-mode .footer a,
  body.dark-mode .footer-link, 
  body.dark-mode .footer .social-icon {
      color: #aaa !important;
  }
  body.dark-mode .footer a:hover,
  body.dark-mode .footer-link:hover, 
  body.dark-mode .footer .social-icon:hover {
      color: #fff !important;
  }
  body.dark-mode .feature-icon {
      background-color: rgba(var(--bs-primary-rgb), 0.15) !important;
      color: var(--bs-primary) !important;
  }
  body.dark-mode .client-logo {
      filter: invert(0.9) hue-rotate(180deg);
      opacity: 0.8;
  }
  body.dark-mode .btn-close { filter: invert(1); }
  body.dark-mode hr { border-color: var(--bs-border-color) !important; }
  
  
  /* ==========================================================================
     4. Base Elements (Typography, Links)
     ========================================================================== */
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-heading-font-family);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--bs-heading-color); 
  }
  
  h1, .h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
  h2, .h2 { font-size: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem); }
  h3, .h3 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
  h4, .h4 { font-size: 1.25rem; }
  h5, .h5 { font-size: 1.1rem; }
  h6, .h6 { font-size: 1rem; }
  
  p {
    margin-top: 0;
    margin-bottom: 1.1rem;
  }
  
  .lead {
    font-size: 1.18rem;
    font-weight: 400;
  }
  
  a {
    color: var(--nivvos-secondary); /* Default link color to NIVVOS Light Blue from :root */
    text-decoration: none;
    transition: var(--transition-base);
  }
  a:hover {
    color: var(--nivvos-secondary-hover); /* Darker blue on hover from :root */
    text-decoration: underline;
  }
  a.link-secondary { color: var(--bs-secondary); } /* Bootstrap's secondary for specific cases */
  a.link-secondary:hover { color: var(--bs-dark); } /* For dark mode, this will be light text */

/* Highlight class */
.highlight {
  color: var(--nivvos-primary); /* Use a primary color for highlights */
  font-weight: bold;
}
body.dark-mode .highlight {
  color: var(--nivvos-primary); /* Highlight in dark mode, uses the dark-mode primary color */
}
body.high-contrast .highlight {
  color: var(--bs-primary) !important; /* For high contrast, use its primary */
  background-color: yellow !important; /* Often used in HC for better visibility */
  padding: 0.1em 0.2em;
}


/* Specific section styling */

.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* For vertical alignment of content */
    flex-direction: column; /* Stack items vertically */
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.10)!important;
}
.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb),0.1); /* Light primary bg */
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.btn-nivvos-primary {
    background-color: var(--nivvos-primary);
    border-color: var(--nivvos-primary);
    color: #fff;
}
.btn-nivvos-primary:hover, .btn-nivvos-primary:focus {
    background-color: var(--nivvos-primary-hover);
    border-color: var(--nivvos-primary-hover);
    color: #fff;
}

.btn-nivvos-secondary {
    background-color: var(--nivvos-secondary);
    border-color: var(--nivvos-secondary);
    color: #fff;
}
.btn-nivvos-secondary:hover, .btn-nivvos-secondary:focus {
    background-color: var(--nivvos-secondary-hover);
    border-color: var(--nivvos-secondary-hover);
    color: #fff;
}


.btn-outline-nivvos-primary {
    color: var(--nivvos-primary);
    border-color: var(--nivvos-primary);
}
.btn-outline-nivvos-primary:hover, .btn-outline-nivvos-primary:focus {
    background-color: var(--nivvos-primary);
    color: #fff;
    border-color: var(--nivvos-primary);
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px; /* Initially off-screen */
    left: 0;
    background: var(--bs-primary);
    color: white;
    padding: 10px 15px;
    z-index: 9999;
    transition: top 0.3s ease-in-out;
    border-bottom-right-radius: 5px;
}
.skip-link:focus {
    top: 0; /* Bring on-screen when focused */
}

/* Client Logos */
.client-logo {
    max-height: 50px; /* Adjust as needed */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}
.client-logos-row {
    min-height: 80px; /* Ensure carousel items have some height */
}
#clientCarousel .carousel-indicators button {
    background-color: var(--bs-primary);
    opacity: 0.5;
}
#clientCarousel .carousel-indicators button.active {
    opacity: 1;
}

/* FAB buttons styling */
.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050; /* Above most elements, below modals */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}
.fab:hover {
    background-color: var(--nivvos-primary-hover);
}
.fab-accessibility { background-color: var(--bs-primary); }
.fab-help { background-color: var(--bs-secondary); }
.fab-accessibility:hover { background-color: var(--nivvos-primary-hover); }
.fab-help:hover { background-color: var(--nivvos-secondary-hover); }


/* Footer specific link styling if needed */
.footer-link {
    color: rgba(255,255,255,0.7); /* Lighter color for footer links */
    text-decoration: none;
}
.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}
body.dark-mode .footer-link {
    color: #aaa !important; /* Already defined but for clarity */
}
body.dark-mode .footer-link:hover {
    color: #fff !important; /* Already defined */
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0; /* Start hidden */
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
  opacity: 0;
}

.animate-delay-1 { animation-delay: 0.2s; }
.animate-delay-2 { animation-delay: 0.4s; }
.animate-delay-3 { animation-delay: 0.6s; }

/* Ensure form feedback is accessible */
#formFeedback:not(.d-none) {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
#formFeedback.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
#formFeedback.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}
  
  /* ==========================================================================
     5. Layout Helpers
     ========================================================================== */
  /* Containers primarily handled by Bootstrap classes */
  
  
  /* ==========================================================================
     6. Components
     ========================================================================== */
  
  /* --- 6.1 Buttons --- */
  .btn {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: var(--transition-base);
    border-radius: var(--bs-border-radius);
    padding: 0.65rem 1.3rem;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    box-shadow: var(--bs-shadow-sm);
    cursor: pointer;
  }
  .btn:focus-visible {
      outline: 3px solid rgba(var(--bs-primary-rgb), 0.4); /* Uses purple focus */
      outline-offset: 1px;
      box-shadow: var(--bs-shadow);
  }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--bs-shadow);
    text-decoration: none;
  }
  .btn:active {
    transform: translateY(0);
    box-shadow: var(--bs-shadow-sm);
  }
  .btn:disabled, .btn.disabled {
      box-shadow: none;
      transform: none;
      cursor: not-allowed;
      opacity: 0.65;
  }
  
  .btn-lg {
    padding: 0.8rem 1.8rem;
    font-size: 1.1rem;
    border-radius: var(--bs-border-radius-lg);
  }
  
  /* Bootstrap Primary Button uses --bs-primary (Nivvos Purple) */
  
  /* Bootstrap Outline Primary */
  .btn-outline-primary {
    color: #D27AFF;
    border-color: #D27AFF;
    background-color: transparent;
    box-shadow: none;
  }
  .btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
    box-shadow: var(--bs-shadow-sm);
  }
  
  /* Brand Specific Buttons */
  .btn-nivvos-primary {
      background-color: var(--nivvos-primary);
      border-color: var(--nivvos-primary);
      color: #fff;
  }
  .btn-nivvos-primary:hover {
      background-color: var(--nivvos-primary-hover);
      border-color: var(--nivvos-primary-hover);
      color: #fff;
  }
  
  .btn-nivvos-secondary {
      background-color: var(--nivvos-secondary);
      border-color: var(--nivvos-secondary);
      color: #fff; /* Text is white on the light blue */
  }
  .btn-nivvos-secondary:hover {
      background-color: var(--nivvos-secondary-hover);
      border-color: var(--nivvos-secondary-hover);
      color: #fff;
  }
  
  .btn-outline-nivvos-primary { /* Explicitly named outline */
      color: var(--nivvos-primary);
      border-color: var(--nivvos-primary);
      background-color: transparent;
      box-shadow: none;
  }
  .btn-outline-nivvos-primary:hover {
      background-color: var(--nivvos-primary);
      color: #fff;
      box-shadow: var(--bs-shadow-sm);
  }
  
  
  /* --- 6.2 Navbar --- */
  .navbar {
    z-index: 1030;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  .navbar-brand img {
    height: 40px;
    width: auto;
    transition: transform 0.2s ease;
  }
  .navbar-brand:hover img {
      transform: scale(1.03);
  }
  .navbar .nav-link {
      font-weight: 500;
      color: var(--bs-secondary);
      transition: color 0.2s ease;
      padding: 0.5rem 0.8rem; /* Added padding for better spacing */
  }
  .navbar .nav-link:hover,
  .navbar .nav-link.active {
      color: var(--bs-primary); /* Uses purple */
  }
  .navbar .dropdown-menu {
      min-width: 180px;
      box-shadow: var(--bs-shadow);
      border: 1px solid var(--bs-border-color-translucent);
      border-radius: var(--bs-border-radius-lg);
      margin-top: 0.5rem;
  }
  .navbar .dropdown-item {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      transition: background-color 0.2s ease, color 0.2s ease;
  }
  .navbar .dropdown-item i {
      width: 20px; /* Align icons */
      text-align: center;
      margin-right: 0.5rem; /* Space between icon and text */
  }
  .navbar .dropdown-item.active,
  .navbar .dropdown-item:active,
  .navbar .dropdown-item:focus, /* Added focus state */
  .navbar .dropdown-item:hover { /* Added hover state */
      background-color: rgba(var(--bs-primary-rgb), 0.1); /* Uses purple alpha */
      color: var(--bs-primary); /* Uses purple */
      font-weight: 500;
  }
  
  /* Specific Navbar button alignment */
  .navbar .navbar-nav .nav-item .btn {
      margin-left: 0.5rem; /* Add space between language dropdown and button on larger screens */
  }
  @media (max-width: 991.98px) {
      .navbar .navbar-nav .nav-item {
          width: 100%;
      }
      .navbar .navbar-nav .nav-item .btn {
          margin-left: 0;
          margin-top: 0.5rem; /* Space between dropdown and button on mobile */
      }
      .navbar .navbar-nav .dropdown-menu {
          width: 100%;
      }
  }
  
  
  /* --- 6.3 Hero Sections --- */
  /* Index Page Hero */
  .hero-section {
    background: linear-gradient(135deg, var(--bs-body-bg) 60%, var(--nivvos-secondary-light-bg) 100%); /* Uses derived light blue bg */
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
  }
  .hero-section h1 {
    color: var(--bs-dark); /* Heading uses default dark */
  }
  .hero-section h1 .highlight, /* Use .highlight class */
  .hero-section h1 .text-primary { /* Support Bootstrap class */
      color: var(--bs-primary) !important; /* Highlight uses primary (purple) color */
  }
  .hero-section p.lead {
      color: var(--bs-secondary);
      max-width: 650px;
  }
  .hero-section img {
      max-width: 100%;
      height: auto;
  }
  
  /* Empresa Page Hero */
  .hero-empresas {
    background-color: var(--bs-primary); /* Uses PURPLE */
    /* Example with image (if needed):
    background: linear-gradient(rgba(var(--nivvos-primary-rgb), 0.85), rgba(var(--nivvos-primary-rgb), 0.95)), url('../img/hero-bg-empresa.jpg') no-repeat center center;
    background-size: cover; */
    padding: 6rem 0;
    color: var(--bs-white);
  }
  .hero-empresas h1 {
      color: var(--bs-white);
  }
  .hero-empresas p.lead {
      color: rgba(255, 255, 255, 0.85);
      max-width: 700px;
  }
  .hero-empresas .highlight-blue { /* Specific class for blue text highlight */
      color: var(--nivvos-secondary); /* Use the light blue */
      font-weight: 700;
  }
  .hero-empresas img {
      border-radius: var(--bs-border-radius-lg);
      box-shadow: var(--bs-shadow-lg);
  }
  
  /* About Page Hero (Assuming similar style to Empresa) */
  .hero-about {
    background-color: var(--bs-primary); /* Uses PURPLE */
    padding: 5rem 0;
    color: var(--bs-white);
    /* background: linear-gradient(rgba(var(--nivvos-primary-rgb), 0.9), rgba(var(--nivvos-primary-rgb), 0.9)), url('../img/banner/your-hero-image.jpg') center center/cover no-repeat; */
  }
  .hero-about h1, .hero-about .lead {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      color: var(--bs-white);
  }
  .hero-about p.lead {
      color: rgba(255, 255, 255, 0.85);
  }
  
  
  /* --- 6.4 Section Title & Subtitle --- */
  .section-title {
      color: var(--bs-heading-color);
      position: relative;
      padding-bottom: 0.5rem;
      margin-bottom: 1rem; /* Default margin */
  }
  .section-title.mb-3 { margin-bottom: 1rem !important; } /* Allow override */
  .section-title.mb-4 { margin-bottom: 1.5rem !important; } /* Allow override */
  
  .section-title .highlight { /* Style for highlighted text within titles */
      color: var(--nivvos-primary);
  }
  
  .section-subtitle {
      color: var(--bs-secondary);
      max-width: 750px; /* Consistent max-width */
      margin-left: auto;
      margin-right: auto;
      font-size: 1.15rem; /* Consistent font size */
      margin-bottom: 2.5rem; /* Default margin */
  }
  .section-subtitle.mb-5 { margin-bottom: 3rem !important; } /* Allow override */
  
  /* General intro text used below titles */
  .section-intro {
      color: var(--bs-secondary);
      max-width: 750px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 3rem;
  }
  
  /* Section specific heading adjustments if needed */
  #oportunidades .section-title { color: var(--bs-white); }
  #oportunidades .highlight { color: var(--nivvos-secondary) !important; } /* Blue highlight on Purple BG */
  
  
  /* --- 6.5 Cards --- */
  /* Base Card */
  .card {
      transition: var(--transition-base);
      border-radius: var(--bs-border-radius-lg);
      border: 1px solid var(--bs-border-color);
      box-shadow: var(--bs-shadow-sm);
      height: 100%; /* Ensure cards in a row have same height */
      background-color: #f5f5fd;
      display: flex; /* Added for better internal alignment */
      flex-direction: column; /* Default direction */
  }
  .card-body {
      flex-grow: 1; /* Allow body to fill space */
  }
  
  /* Feature Card (ERP/CRM - Specific from inline style) */
  .feature-card {
      /* Inherits base .card styles */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-color: var(--bs-border-color-translucent); /* Lighter border */
  }
  .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--bs-shadow);
  }
  .feature-card .feature-icon { /* Icon specific to feature cards */
      width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
      background-color: var(--nivvos-light-purple-bg);
      border-radius: 0.75rem;
      color: var(--nivvos-secondary);
      font-size: 1.75rem;
      margin-bottom: 1rem;
      flex-shrink: 0; /* Prevent icon shrinking */
  }
  .feature-card h4 { /* Title specific to feature cards */
      color: var(--nivvos-primary);
      font-size: 1.15rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
  }
  .feature-card p.small { /* Text specific to feature cards */
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--bs-secondary);
  }
  
  /* Benefit Card (Seems similar to Feature Card, consolidate if identical) */
  .benefit-card:hover { /* Explicit hover from second block */
      transform: translateY(-5px);
      box-shadow: var(--bs-shadow-lg) !important; /* Stronger shadow on hover */
  }
  .benefit-card .feature-icon { /* Assuming same icon style */
      width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
      background-color: rgba(var(--bs-primary-rgb), 0.1); /* Uses purple alpha */
      border-radius: 0.75rem;
      color: var(--bs-primary); /* Uses purple icon */
      margin-bottom: 1.5rem;
  }
  .benefit-card .card-title-blue { /* Specific title color */
      color: var(--nivvos-secondary); /* Uses light blue */
      font-weight: 600;
  }
  
  /* Testimonial Card */
  .testimonial-card {
      background-color: var(--bs-light);
      border-left: 4px solid var(--bs-primary); /* Uses purple accent */
      border-top: none; border-right: none; border-bottom: none; /* Remove other borders */
  }
  .testimonial-card .blockquote {
      font-size: 0.95rem;
      margin-bottom: 1rem; /* Space below quote */
  }
  .testimonial-card .fa-star { color: var(--bs-warning); }
  .testimonial-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--bs-shadow);
  }
  
  /* Pillar Card (About Page) */
  .card-pillar {
      border: none;
      background-color: transparent;
      transition: transform 0.2s ease-in-out;
      box-shadow: none;
  }
  .card-pillar:hover {
      transform: translateY(-5px);
  }
  
  /* Form Card (Contact Forms) */
  .form-card {
      /* Uses base .card styles */
      background-color: var(--bs-body-bg); /* Ensure correct bg */
      box-shadow: var(--bs-shadow); /* Slightly stronger shadow by default */
      border: 1px solid var(--bs-border-color);
  }
  
  /* Card Link Wrapper */
  .card-link {
      text-decoration: none;
      color: inherit;
      display: flex; /* Use flex for the link itself */
      flex-grow: 1; /* Allow link to fill container space if needed */
  }
  .card-link:hover .card { /* Apply hover effect to card when link is hovered */
      transform: translateY(-5px);
      box-shadow: var(--bs-shadow-lg);
  }
  
  
  /* --- 6.6 Newsletter Form --- */
  /* Assuming #newsletterForm ID for specificity */
  #newsletterForm .form-control:focus {
      border-color: var(--bs-primary); /* Uses purple focus */
      box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Uses purple focus */
  }
  
  
  /* --- 6.7 Client Logo Carousel --- */
  #clientCarousel {
    position: relative;
  }
  #clientCarousel .carousel-control-prev,
  #clientCarousel .carousel-control-next {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto; /* Override Bootstrap default */
    width: 3rem;
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker control BG */
    border-radius: 50%;
    opacity: 0.8; /* Slightly more visible */
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 5;
  }
  #clientCarousel .carousel-control-prev:hover,
  #clientCarousel .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6); /* Darker on hover */
  }
  #clientCarousel .carousel-control-prev { left: -10px; } /* Position from inline */
  #clientCarousel .carousel-control-next { right: -10px; } /* Position from inline */
  
  #clientCarousel .carousel-control-prev-icon,
  #clientCarousel .carousel-control-next-icon {
    background-size: 50% 50%; /* Icon size from inline */
    filter: invert(1); /* White icons */
  }
  #clientCarousel .carousel-inner {
     padding: 0 30px; /* Padding from inline style for controls */
  }
  #clientCarousel .carousel-indicators {
    position: static; /* Position below */
    margin-top: 1.5rem;
    margin-bottom: 0;
  }
  #clientCarousel .carousel-indicators [data-bs-target] {
     background-color: #adb5bd;
     opacity: 0.7;
     height: 4px;
     width: 30px; /* Indicator width from inline */
     margin: 0 4px;
     border: none;
     border-radius: 2px;
     transition: opacity 0.2s ease;
  }
  #clientCarousel .carousel-indicators .active {
    background-color: var(--bs-primary); /* Uses purple */
    opacity: 1;
  }
  .client-logos-row { /* Container for logos within a slide */
      min-height: 100px; /* Ensure consistent height */
      display: flex;
      align-items: center; /* Vertically center logos */
  }
  
  
  /* --- 6.8 Forms (General Styling) --- */
  .form-control, .form-select {
      min-height: calc(1.6em + 1.2rem + 2px); /* Consistent height */
      padding: 0.6rem 1rem;
      font-size: 0.95rem;
      border-radius: var(--bs-border-radius);
      border: 1px solid var(--bs-border-color);
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
      background-color: var(--bs-body-bg);
      color: var(--bs-body-color);
  }
  .form-control:focus, .form-select:focus {
      border-color: var(--bs-primary); /* Uses purple focus */
      box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Uses purple focus */
      outline: 0;
  }
  .form-label {
      font-weight: 500;
      margin-bottom: 0.3rem;
      font-size: 0.9rem;
  }
  .form-check-input {
      border-color: var(--bs-border-color);
  }
  .form-check-input:checked {
       background-color: var(--bs-primary); /* Uses purple */
       border-color: var(--bs-primary); /* Uses purple */
  }
  .form-check-input:focus {
       box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); /* Uses purple focus */
       border-color: var(--bs-primary); /* Uses purple */
  }
  .form-check-label {
      font-size: 0.9rem;
      padding-left: 0.3em; /* Space between check and label */
  }
  .form-text {
      font-size: 0.8rem;
      color: var(--bs-secondary);
  }
  /* Validation Styles */
  .was-validated .form-control:invalid, .form-control.is-invalid {
      border-color: var(--bs-danger);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right calc(.375em + .1875rem) center;
      background-size: calc(.75em + .375rem) calc(.75em + .375rem);
  }
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
      box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
  }
  .invalid-feedback {
      display: none; /* Hidden by default */
      width: 100%;
      margin-top: .25rem;
      font-size: .875em;
      color: var(--bs-danger);
  }
  .was-validated :invalid ~ .invalid-feedback,
  .is-invalid ~ .invalid-feedback { /* Show feedback for invalid fields */
      display: block;
  }
  .was-validated .form-check-input:invalid ~ .form-check-label,
  .form-check-input.is-invalid ~ .form-check-label {
      color: var(--bs-danger); /* Make label red for invalid checkbox */
  }
  .was-validated .form-check-input:invalid {
      border-color: var(--bs-danger); /* Ensure checkbox border is red */
  }
  
  
  /* --- 6.9 Floating Action Buttons (FAB) --- */
  .fab-container {
    position: fixed;
    bottom: 20px; /* Position from inline */
    right: 20px; /* Position from inline */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Gap from inline */
    z-index: 1030; /* Z-index from inline */
  }
  .fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--bs-shadow);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    font-size: 1.5rem; /* Icon size from inline */
  }
  .fab:hover {
    opacity: 0.9; /* Hover effect from inline */
    box-shadow: var(--bs-shadow-lg);
    transform: scale(1.05); /* Hover effect from inline */
  }
  .fab-accessibility { background-color: #0d6efd; } /* Standard blue for accessibility */
  .fab-help { background-color: var(--nivvos-success); } /* Green for help */
  
  .fab-help:hover { background-color: darken(var(--nivvos-success), 10%); }
  .fab-accessibility:hover { background-color: darken(#0d6efd, 10%); }
  
  
  /* --- 6.10 Footer --- */
  .footer {
    background-color: var(--bs-dark-contrast);
    color: rgba(255, 255, 255, 0.7); /* Text color from inline */
    padding-top: 3rem;
    padding-bottom: 2rem;
  }
  .footer h6 {
      color: var(--bs-white);
      margin-bottom: 1rem;
      letter-spacing: 0.5px;
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
  }
  .footer .small { font-size: 0.88rem; }
  
  .footer .footer-link {
      color: rgba(255, 255, 255, 0.7) !important; /* Link color from inline */
      transition: color 0.2s ease;
      text-decoration: none;
      display: inline-block; /* Allows padding */
      padding: 0.1rem 0;
  }
  .footer .footer-link:hover,
  .footer .footer-link:focus {
    color: var(--bs-white) !important; /* Hover color from inline */
    text-decoration: underline;
  }
  .footer .social-icon {
      font-size: 1.5rem;
      color: rgba(255, 255, 255, 0.7) !important; /* Icon color from inline */
      transition: color 0.2s ease, transform 0.2s ease;
  }
  .footer .social-icon:hover,
  .footer .social-icon:focus {
    color: var(--bs-white) !important; /* Hover color from inline */
    transform: translateY(-2px); /* Hover effect from inline */
  }
  .footer hr { border-color: rgba(255, 255, 255, 0.15); } /* HR color from inline */
  .footer .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
  
  
  /* --- 6.11 Skip Link --- */
  .skip-link {
    position: absolute;
    top: -150px; /* Further off screen */
    left: 0.5rem;
    background: var(--bs-primary); /* Uses purple */
    color: white;
    padding: 10px 18px;
    z-index: 1100; /* High z-index */
    transition: top 0.3s ease-in-out;
    border-bottom-right-radius: var(--bs-border-radius);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus {
    top: 0.5rem; /* Bring on screen */
    outline: none;
    box-shadow: var(--bs-shadow-lg);
    text-decoration: none;
  }
  
  
  /* --- 6.12 Modals --- */
  .modal-content {
      border-radius: var(--bs-border-radius-lg);
      border: none;
      box-shadow: var(--bs-shadow-lg);
      background-color: var(--bs-body-bg);
  }
  .modal-header {
      border-bottom: 1px solid var(--bs-border-color);
      padding: 1rem 1.5rem;
  }
  .modal-body { padding: 1.5rem; }
  .modal-footer {
      border-top: 1px solid var(--bs-border-color);
      padding: 1rem 1.5rem;
  }
  .modal-title {
      font-weight: 600;
      color: var(--bs-heading-color);
  }
  /* btn-close handled by accessibility themes */
  
  
  /* --- 6.13 Spinner --- */
  .btn .spinner-border {
      width: 1em;
      height: 1em;
      vertical-align: -0.125em; /* Align with text */
  }
  .btn .spinner-border.d-none { display: none !important; } /* Ensure spinner hides */
  
  
  /* --- 6.14 Timeline (About Page) --- */
  .timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
  }
  .timeline::after { /* The central line */
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--bs-primary); /* PURPLE line */
    top: 20px;
    bottom: 20px;
    left: 50%;
    margin-left: -2px;
    border-radius: 2px;
  }
  .timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit; /* Transparent background */
    width: 50%;
  }
  .timeline-item::after { /* The circle on the line */
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--bs-body-bg); /* Match page background */
    border: 3px solid var(--bs-primary); /* PURPLE border */
    border-radius: 50%;
    top: 28px; /* Adjust vertical position */
    z-index: 1;
  }
  /* Positioning Left/Right */
  .timeline-item.left { left: 0; }
  .timeline-item.right { left: 50%; }
  /* Positioning the circles relative to the item */
  .timeline-item.left::after { right: -12px; }
  .timeline-item.right::after { left: -12px; }
  
  .timeline-content {
    padding: 1.25rem 1.5rem;
    background-color: var(--bs-body-bg); /* Ensure content bg matches */
    position: relative;
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-shadow-sm);
    border: 1px solid var(--bs-border-color);
  }
  /* Text alignment */
  .timeline-item.left .timeline-content { text-align: right; }
  .timeline-item.right .timeline-content { text-align: left; }
  .timeline-content h3 {
    color: var(--bs-primary); /* Purple title */
    margin-top: 0;
    font-size: 1.15rem;
  }
  /* Timeline Responsive */
  @media screen and (max-width: 768px) {
    .timeline::after { left: 20px; margin-left: -2px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 15px; }
    .timeline-item.left, .timeline-item.right { left: 0%; text-align: left; }
    .timeline-item.left::after, .timeline-item.right::after { left: 9px; } /* Adjust circle position */
    .timeline-item.left .timeline-content, .timeline-item.right .timeline-content { text-align: left; }
  }
  
  
  /* --- 6.15 Process Trail (Solutions Page) --- */
  .process-trail-row {
    position: relative;
  }
  .process-trail-row::before { /* The connecting line */
    content: "";
    position: absolute;
    top: 35px; /* Align with center of indicators */
    left: calc(12.5% + 10px); /* Adjust based on column width */
    right: calc(12.5% + 10px); /* Adjust based on column width */
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0; /* Behind indicators */
  }
  
  .process-step-col {
    z-index: 1; /* Above line */
  }
  
  .process-step {
    text-align: center;
    padding: 1rem 0.5rem;
  }
  
  .step-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--bs-primary); /* Purple border */
    color: var(--bs-primary); /* Purple number */
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background-color: var(--bs-body-bg); /* Ensure it covers the line */
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .process-step:hover .step-indicator {
    background-color: var(--bs-primary); /* Purple fill on hover */
    color: var(--bs-white); /* White number on hover */
  }
  
  .process-step h3 {
    font-size: 1.1rem;
    margin-top: 0.5rem; /* Space above title */
  }
  
  /* Process Trail Responsive */
  @media (max-width: 991.98px) { /* 2 columns */
    .process-trail-row::before {
      left: calc(25% + 10px);
      right: calc(25% + 10px);
    }
  }
  @media (max-width: 767.98px) { /* 1 column */
    .process-trail-row::before { display: none; } /* Hide line */
    .process-step-col { margin-bottom: 1.5rem; }
  }

  /* --- 6.16 Job Listing Page (Adicionar esta nova seção) --- */

/* Título e subtítulo da página de vagas */
.job-listing-hero h2 .highlight {
    color: var(--nivvos-primary);
    background-color: var(--nivvos-light-purple-bg);
    border-radius: 50px;
    padding: 0.1em 0.6em;
    display: inline-block;
}

.job-listing-hero p.lead {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}



/* Barra de Pesquisa */
.search-bar .input-group-text {
    background-color: var(--bs-white);
    border-right: 0;
}
.search-bar .form-control {
    border-left: 0;
}
.search-bar .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    border-color: var(--bs-border-color); /* Evita que a borda esquerda apareça */
}

/* Filtros */
.filter-container {
  gap: 1.5rem; /* Espaçamento entre os grupos de filtro */
}

.filter-pills .btn-check + .btn {
  font-size: 0.875rem;
  padding: 0.3rem 1rem;
  border-radius: 50px; /* Pílulas totalmente arredondadas */
  transition: var(--transition-base);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: none;
}

.filter-pills .btn-check:checked + .btn {
  background-color: var(--nivvos-primary);
  border-color: var(--nivvos-primary);
  color: var(--bs-white);
}

.filter-group-label {
    font-size: 0.9rem;
    font-weight: 500;
}


/* Cards de Vagas (Job Cards) */
.job-card {
  border: 1px solid var(--bs-border-color); /* Usa a variável de borda */
  border-radius: var(--bs-border-radius-lg); /* Usa a variável de raio */
  background-color: var(--bs-body-bg); /* Garante o fundo correto */
  display: flex;
  flex-direction: column;
}

/* Efeito de hover consistente com outros cards */
.job-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bs-shadow); /* Usa a variável de sombra */
  border-color: var(--nivvos-primary); /* Destaque com a cor primária */
}

.job-card .card-body {
  flex-grow: 1; /* Garante que o corpo preencha o espaço */
  display: flex;
  flex-direction: column;
}

.job-card .card-text {
    flex-grow: 1; /* Ocupa o espaço disponível, empurrando o rodapé para baixo */
}

.job-card .badge {
  font-size: 0.75rem;
  padding: 0.3em 0.6em;
  font-weight: 500;
}

/* Paginação */
.pagination .page-link {
    transition: var(--transition-base);
    border-radius: 0.25rem;
    margin: 0 3px;
    border-color: var(--bs-border-color);
    color: var(--nivvos-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--nivvos-primary);
    border-color: var(--nivvos-primary);
    color: var(--bs-white);
    box-shadow: var(--bs-shadow-sm);
}

.pagination .page-item.disabled .page-link {
    color: var(--bs-secondary);
}

.pagination .page-link:hover {
    background-color: var(--nivvos-light-purple-bg);
    border-color: var(--nivvos-primary);
}
  
  
  /* ==========================================================================
     7. Animations
     ========================================================================== */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }
  
  .animate-fade-in-up,
  .animate-fade-in-right {
    opacity: 0; /* Start hidden */
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: forwards; /* Stay visible after animation */
  }
  .animate-fade-in-up { animation-name: fadeInUp; }
  .animate-fade-in-right { animation-name: fadeInRight; }
  
  /* Animation Delays */
  .animate-delay-1 { animation-delay: 0.2s; }
  .animate-delay-2 { animation-delay: 0.4s; }
  .animate-delay-3 { animation-delay: 0.6s; }
  
  
  /* ==========================================================================
     8. Utility Classes
     ========================================================================== */
  .bg-light-subtle { background-color: var(--bs-light-subtle) !important; }
  
  /* Client Logo (Used in Carousel & potentially elsewhere) */
  .client-logo {
    display: inline-block; /* Changed from block for flexibility */
    vertical-align: middle; /* Align better if used inline */
    max-height: 60px; /* Increased slightly */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.75; /* Slightly more visible */
    transition: var(--transition-base);
    padding: 5px;
  }
  .client-logo:hover,
  .client-logo:focus {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05); /* Reduced scale slightly */
  }
  
  /* Feature Icon (Used in Feature/Benefit Cards) */
  .feature-icon {
    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--nivvos-secondary);
    border-radius: 0.75rem;
    color: var(--nivvos-secondary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }
  
  /* Group Logo (About Page) */
  .group-logo {
    height: 50px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
  .company-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--bs-heading-color);
  }
  
  /* Icon Circle (About Page - Pillars) */
  .icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    box-shadow: var(--bs-shadow-sm);
    background-color: var(--bs-primary); /* Use primary color for background */
    color: var(--bs-white); /* White icon */
  }
  .icon-circle i { font-size: 1.8rem; }
  
  /* Text color utilities */
  .text-nivvos-primary { color: var(--nivvos-primary) !important; }
  .text-nivvos-secondary { color: var(--nivvos-secondary) !important; }
  
  /* Hover link style for support modal */
  .hover-link:hover {
      color: var(--bs-primary) !important; /* Uses purple hover */
      text-decoration: underline;
  }
  
  
  /* ==========================================================================
   9. Responsiveness (Media Queries)
   ========================================================================== */

/* ... (suas regras existentes para @media (min-width: 992px)) ... */


/* ... (suas regras existentes para @media (max-width: 991.98px)) ... */


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    
    /* ... (suas regras existentes para .footer, .carousel, etc.) ... */

    /* INÍCIO - REGRAS DE RESPONSIVIDADE PARA A PÁGINA DE VAGAS */

    .job-listing-hero h2 {
      font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.2rem); /* Reduz o título principal */
    }
    .job-listing-hero p.lead {
      font-size: 0.95rem; /* Reduz o subtítulo */
    }

    /* Ajuste dos Filtros */
    .filter-container {
      flex-direction: column;
      align-items: stretch; /* Ocupa a largura total */
      gap: 1.25rem; /* Espaçamento entre os grupos */
    }

    .filter-pills {
      justify-content: center !important; /* Centraliza os botões */
    }

    /* Esconde rótulos "Tipo:" e "Região:" para ganhar espaço */
    .filter-group-label {
      display: none !important;
    }
    
    /* Paginação em dispositivos móveis */
    .pagination {
        font-size: 0.9rem;
    }
    .pagination .page-link {
        padding: 0.4rem 0.6rem; /* Diminui o padding para caber mais números */
    }

    /* FIM - REGRAS DE RESPONSIVIDADE PARA A PÁGINA DE VAGAS */

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    /* ... (suas regras existentes para .btn-lg, .fab, .hero, etc.) ... */

    /* ADICIONAL - Ajuste fino dos filtros para ecrãs muito pequenos */
    .filter-pills .btn {
      font-size: 0.8rem; /* Botões de filtro ainda menores */
      padding: 0.25rem 0.8rem;
    }
}

/* No seu ficheiro style.css, na seção de componentes de Job Listing */

/* .filter-container empty ruleset removed */

/* Na seção de media queries (@media (max-width: 767.98px)), 
   remova a regra que força o flex-direction, se houver */

@media (max-width: 767.98px) {
    .filter-container {
      /* REMOVA a linha 'flex-direction: column;' daqui. O grid do Bootstrap já cuida disso. */
      /* Pode manter 'align-items: stretch;' se quiser que os grupos ocupem a largura toda */
      align-items: stretch;
    }
}