:root {
      --iara-blue: #0349D6;
      --iara-green: #4AC900;
      --iara-green-hover: #269168;
      --iara-dark: #06132a;
      --iara-deeper: #0A192F;
      --iara-yellow: #EFE300;
      --iara-white: #ffffff;
      --iara-dark-blue: #0A192F;
      --iara-light-bg: #F8FAFC;
      --muted: #6c757d;
      --ink: #dbe4ee;
      --divider: rgba(255, 255, 255, .15);
      --primary-color: #2eaf7d;
      --primary-hover: #269168;
      --primary-hover-color: #269168;
      --primary-light-bg: #eaf7f2;
      --bg: #f8f9fa;
      --border: #e9ecef;
      --border-color: #e9ecef;
      --light: #F8FAFC;
      --text: #212529;
      --text-color: #212529;
      --text-dark: #212529;
      --text-muted: #6c757d;
      --sidebar-w: 300px;
      --sidebar-width: 280px;
  }

  body {
      font-family: 'Montserrat', sans-serif;
      color: #212529;
      background: url("/assets/images/IARA_Backgrounds_4.png") no-repeat center center fixed;
  }

  /* ===== NAVBAR (mantido) ===== */
  .app-header {
      background: #fff;
      border-bottom: 1px solid #e9ecef;
      padding: .75rem 1rem
  }

  .navbar-brand img {
      height: 60px;
      width: auto
  }

  .navbar-nav {
      gap: .85rem
  }

  .nav-link {
      padding: .5rem .9rem !important;
      border-radius: .5rem;
      color: #6c757d;
      font-weight: 500
  }

  .nav-link:hover,
  .nav-link.active {
      background: #0349d6;
      color: var(--iara-light-bg) !important
  }

  @media (max-width:991.98px) {
      .navbar-brand img {
          height: 40px
      }
  }

  /* ==== TÍTULO ==== */
  .page-hero {
      padding: 48px 0 24px
  }

  .page-hero h1 {
      font-weight: 800;
      letter-spacing: .02em
  }

  .hero-bullets {
      color: #4f4f4f;
      font-size: .95rem
  }

  .hero-bullets .bi {
      color: var(--iara-green)
  }

  /* ==== CARDS DE PLANOS ==== */
  .pricing {
      padding: 24px 0 64px
  }

  .plan-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: #fff;
      padding: 24px;
      position: relative;
      height: 100%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
      transition: transform .2s, box-shadow .2s;
  }

  .plan-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06)
  }

  .plan-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--iara-blue);
      color: #fff;
      padding: .25rem .6rem;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 700
  }

  .plan-header {
      display: flex;
      align-items: center;
      gap: .5rem;
      color: #0f172a;
      margin-bottom: 4px
  }

  .plan-header .bi {
      color: #94a3b8
  }

  .price {
      font-weight: 800;
      font-size: 32px;
      line-height: 1
  }

  .per {
      font-size: .9rem;
      color: var(--muted)
  }

  .feature-list {
      list-style: none;
      padding: 0;
      margin: 18px 0 0
  }

  .feature-list li {
      display: flex;
      gap: .5rem;
      align-items: flex-start;
      margin: .4rem 0;
      color: #334155
  }

  .feature-list .bi-check-circle-fill {
      color: var(--iara-green)
  }

  .feature-list .bi-x-lg {
      color: #c7cdd4
  }

  .btn-cta {
      background: var(--iara-green);
      border: none;
      font-weight: 700
  }

  .btn-cta:hover {
      background: var(--iara-green-hover)
  }

  .btn-ghost {
      border: 1px solid var(--border);
      background: #f4f6f8;
      font-weight: 700
  }

  /* destaque do PRO */
  .plan-card.popular {
      border-color: #b8d5ff;
      box-shadow: 0 10px 30px rgba(26, 71, 159, .12)
  }

  .plan-card.popular .btn-cta {
      background: var(--iara-blue);
  }

  .plan-card.popular .btn-cta:hover {
      background: #163a80
  }

  /* ==== COMPARATIVO ==== */
  .compare {
      padding: 16px 0 64px
  }

  .compare h3 {
      font-weight: 800
  }

  .table-compare {
      --bs-table-bg: #fff;
      border: 1px solid var(--border)
  }

  .table-compare th {
      background: #fafbfe;
      font-weight: 700
  }

  .table-compare td,
  .table-compare th {
      vertical-align: middle
  }

  .table-compare .bi-check2 {
      color: var(--iara-green);
      font-weight: 900
  }

  .table-compare .bi-x {
      color: #c7cdd4
  }

  /* ==== FAQ ==== */
  .faq {
      padding: 16px 0 80px
  }

  .faq .qa {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      padding: 14px 18px
  }

  /* ==== CTA ==== */
  .cta {
      background: linear-gradient(90deg, var(--iara-blue) 0%, var(--iara-green) 100%);
      color: #dbe4ee
  }

  .cta h2 {
      color: #fff;
      font-weight: 800
  }

  .cta .input-group {
      display: grid;
      align-items: center;
      place-items: center;
      justify-content: center;
      max-width: 620px;
      margin-inline: auto
  }

  .cta .form-control {
      background: #13243f;
      border: 1px solid #2d3e5b;
      color: #fff
  }

  .cta .form-control::placeholder {
      color: #9fb0c9
  }

  .cta .btn-success {
      background: var(--iara-green);
      border-color: var(--iara-green);
      font-weight: 700
  }

  /* ==== FOOTER (centralizado como nas demais) ==== */
  .footer {
      background: var(--iara-white);
      color: #adb5bd;
      border-top: 1px solid rgba(255, 255, 255, .15);
      color: var(--iara-dark-blue);
  }

  .footer a {
      color: var(--iara-dark-blue);
      text-decoration: none
  }

  .footer a:hover {
      color: var(--iara-dark-blue);
  }

  .footer .container .row>div {
      text-align: center;
  }

  .footer .footer-logo {
      height: 40px;
      width: auto
  }

  .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .15);
      padding: 1rem 0
  }

  @media (max-width:991.98px) {
      .nav-link {
          font-size: 1rem
      }

      .plan-card {
          padding: 20px
      }
  }