@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* CSS Document */
 :root {
      --color-primary-900: #05566f;
      --color-primary-800: #06738c;
      --color-primary-700: #0a86a0;
      --color-primary: #0e99a8;
      --color-primary-light: #FFFFFF;
      --color-primary-soft: #eaf8f8;
      --color-accent: #f7c600;
      --color-accent-hover: #e2b400;
      --color-accent-soft: #fff8d8;
      --color-success: #25d366;
      --color-surface: #ffffff;
      --color-background: #f3f8fa;
      --color-text: #17324d;
      --color-muted: #5d7487;
      --shadow-soft: 0 18px 45px rgba(5, 86, 111, 0.13);
      --shadow-card: 0 12px 32px rgba(5, 86, 111, 0.09);
      --radius-button: 10px;
      --radius-card: 22px;
      --gradient-brand: radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 34%), linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary) 52%, #28a9a7 100%);
    }

 body {
      font-family: 'Poppins', sans-serif;
      padding-top: 70px; /* Compensa header fixa */
      background-color: var(--color-background);
      color: var(--color-text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: inherit;
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      letter-spacing: -0.03em;
    }

    h1.fw-bold,
    h2.fw-bold,
    h3.fw-bold,
    h4.fw-bold,
    h5.fw-bold,
    h6.fw-bold,
    .section-title,
    .section-title.fw-bold,
    .card-title,
    .card-title.fw-bold,
    .slogan-title,
    .segmentos-title,
    .seo-title,
    .faq-title,
    .footer-title {
      font-weight: 600 !important;
    }

    h2,
    h2.display-5,
    h2.display-6,
    h2.h2,
    h2.h3,
    .section-title,
    .slogan-title,
    .segmentos-title,
    .seo-title,
    .faq-title {
      font-size: clamp(2rem, 3vw, 2.35rem) !important;
      line-height: 1.18;
      letter-spacing: -0.03em;
    }

    .btn {
      border-radius: var(--radius-button);
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .btn-lg {
      border-radius: var(--radius-button);
    }

    .navbar-custom {
      background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-700) 100%) !important;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      padding: 1rem 2rem;
      box-shadow: 0 10px 32px rgba(6, 47, 61, 0.18);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1030;
    }

    .navbar-brand {
      display: block;
      max-width: 200px;
      margin-right: auto;
      transition: transform 0.3s ease;
    }

    .navbar-brand img {
      width: 100%;
      height: auto;
      display: block;
    }

    .nav-link {
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 400;
      margin: 0 10px;
      position: relative;
      padding: 0.5rem 1rem;
      border-radius: 999px;
      transition: color 0.3s ease, background-color 0.3s ease;
      display: inline-block;
    }

    /* Border esquerda + sublinhado para link ativo */
    .nav-link.active {
      border-left: 0;
      color: #FFFFFF !important;
      background-color: rgba(255, 255, 255, 0.12);
      font-weight: 400;
    }

    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--color-accent);
    }

    /* Sublinhado no hover */
    .nav-link:hover {
      color: #FFFFFF !important;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .nav-link:hover::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--color-accent);
      transition: width 0.3s ease;
    }

    /* Estilo do dropdown */
    .dropdown-menu {
		background: var(--color-primary-800);
      min-width: 250px;
      border: none;
      border-radius: 10px;
      box-shadow: 0 16px 36px rgba(6, 47, 61, 0.18);
      overflow: hidden;
      animation: fadeIn 0.2s ease-in-out;
    }

    .dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0.75rem 1rem;
      font-weight: 400;
      transition: background-color 0.3s ease;
      color: #fff;
      border-left: 3px solid transparent;
    }

    .dropdown-item:hover {
      background-color: var(--color-primary-soft);
      color: var(--color-primary-800);
      border-left-color: var(--color-accent);
    }

    .dropdown-item i {
      font-size: 1.1rem;
      color: #FFFFFF;
      transition: transform 0.3s ease;
    }

    .dropdown-item:hover i {
      color: var(--color-primary-800);
      transform: scale(1.1);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Botão principal (WhatsApp) */
    .btn-whatsapp {
      background-color: transparent;
      color: var(--color-primary);
      border: 1px solid var(--color-primary);
      font-weight: 600;
      padding: 0.6rem 1.4rem;
      border-radius: var(--radius-button);
      transition: all 0.3s ease;
    }

    .btn-whatsapp:hover {
      background-color: var(--color-primary);
      color: #FFFFFF;
      border-color: var(--color-primary);
      transform: translateY(-2px);
    }

    /* Ações compactas do header */
    .header-actions {
      align-items: center;
      gap: 0.5rem;
    }

    .btn-header-login,
    .btn-header-whatsapp {
      border-radius: var(--radius-button);
      font-size: 0.9rem;
      font-weight: 600;
      line-height: 1;
      padding: 0.75rem 1.5rem;
      white-space: nowrap;
      transition: all 0.2s ease-in-out;
    }

    .btn-header-login {
      background-color: var(--color-accent) !important;
      background-image: none !important;
      color: var(--color-primary-900) !important;
      border: none;
      box-shadow: 0 8px 22px rgba(247, 198, 0, 0.3);
    }

    .btn-header-login:hover,
    .btn-header-login:focus {
      background-color: var(--color-accent-hover) !important;
      background-image: none !important;
      color: var(--color-primary-900) !important;
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(247, 198, 0, 0.4);
    }

    .btn-header-whatsapp {
      background-color: rgba(255, 255, 255, 0.08);
      color: #FFFFFF !important;
      border: 1px solid rgba(255, 255, 255, 0.55);
      box-shadow: none;
    }

    .btn-header-whatsapp:hover,
    .btn-header-whatsapp:focus {
      background-color: rgba(255, 255, 255, 0.16);
      color: #FFFFFF !important;
      border-color: rgba(255, 255, 255, 0.85);
      transform: none;
    }

    /* CTA principal para teste gratuito */
    .btn-trial {
      position: relative;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-button) !important;
      color: var(--color-primary-900) !important;
      font-weight: 600;
      letter-spacing: 0.2px;
      background-color: var(--color-accent) !important;
      background-image: none !important;
      box-shadow: 0 10px 26px rgba(247, 198, 0, 0.32);
      padding: 0.75rem 1.5rem;
      transition: all 0.2s ease-in-out;
    }

    .btn-trial::before {
      content: '';
      display: none;
    }

    .btn-trial:hover,
    .btn-trial:focus {
      background-color: var(--color-accent-hover) !important;
      background-image: none !important;
      color: var(--color-primary-900) !important;
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(247, 198, 0, 0.42);
    }

    .btn-trial:hover::before,
    .btn-trial:focus::before {
      left: 130%;
    }

    .btn-trial i {
      font-size: 0.95em;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 1rem;
      border-radius: 999px;
      background-color: rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .hero-actions .btn {
      margin-top: 0;
    }

    .banner .hero-actions .btn-whatsapp {
      margin-top: 0;
      background-color: rgba(15, 23, 42, 0.14);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.68);
      box-shadow: none;
    }

    .banner .hero-actions .btn-whatsapp:hover {
      background-color: rgba(15, 23, 42, 0.24);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.92);
    }

    .hero-benefits {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      margin-top: 1.25rem;
      padding: 0;
      list-style: none;
    }

    .hero-benefits li {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
    }

    .hero-benefits i {
      color: var(--color-primary-light);
    }

    .hero-note {
      margin-top: 0.85rem;
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.95rem;
    }

    /* Mostra botão WhatsApp só em desktop */
    .btn-desktop {
      display: none;
    }

    @media (min-width: 992px) {
      .btn-desktop {
        display: block;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
      }

      .navbar-brand {
        position: absolute;
        left: 2rem;
        top: 50%;
        transform: translateY(-50%);
      }

      .navbar-collapse {
        margin-left: 240px; /* Espaço para o logo */
        margin-right: 330px;
      }

      .btn-desktop.header-actions {
        display: flex;
      }
    }
	  .banner {
      background: var(--gradient-brand);
      color: white;
      padding: 60px 20px;
      position: relative;
      overflow: hidden;
    }

    .banner > .container > .row {
      justify-content: center !important;
    }

    .banner > .container > .row > .col-12.col-lg-5.text-center {
      width: 83.333333%;
    }

    .banner h1 {
      font-size: 2.8rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -1.2px;
    }

    .banner p {
      font-size: 1.2rem;
      margin-top: 1rem;
      opacity: 0.95;
    }

    .banner .btn-whatsapp {
      margin-top: 2rem;
      background-color: rgba(15, 23, 42, 0.14);
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.68);
      border-radius: var(--radius-button);
      font-weight: 600;
      padding: 0.6rem 1.8rem;
      box-shadow: none;
      transition: all 0.3s ease;
    }

    .banner .btn-whatsapp:hover {
      background-color: rgba(15, 23, 42, 0.24);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.92);
      transform: none;
    }

    .banner-img img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 24px 54px rgba(6, 47, 61, 0.26);
    }

    .hero-icons-panel {
      position: relative;
      display: block;
      width: min(100%, 430px);
      min-height: 430px;
      margin: 0 auto;
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 58%),
        rgba(255, 255, 255, 0.08);
      box-shadow: 0 28px 70px rgba(5, 86, 111, 0.2);
      backdrop-filter: blur(14px);
    }

    .hero-icons-panel::before {
      content: '';
      position: absolute;
      inset: 14%;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: transparent;
      pointer-events: none;
    }

    .hero-icons-core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      width: 148px;
      height: 148px;
      padding: 1rem;
      border-radius: 50%;
      background-color: #FFFFFF;
      color: var(--color-primary-800);
      box-shadow: 0 18px 38px rgba(5, 86, 111, 0.18);
      font-weight: 600;
      z-index: 2;
    }

    .hero-icons-core i {
      color: var(--color-primary);
      font-size: 1.55rem;
    }

    .hero-icons-core span {
      max-width: 100px;
      font-size: 0.9rem;
      line-height: 1.25;
    }

    .hero-module-card {
      position: absolute;
      z-index: 2;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      width: 92px;
      height: 92px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.9);
      color: var(--color-text);
      text-align: center;
      box-shadow: 0 16px 34px rgba(5, 86, 111, 0.14);
      transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      appearance: none;
    }

    .hero-module-card i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      border-radius: 0;
      background-color: transparent;
      color: var(--color-primary);
      font-size: 1.3rem;
      transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }

    .hero-module-card span {
      display: block;
    }

    .hero-module-card span {
      color: var(--color-primary-900);
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1.1;
    }

    .hero-module-primary {
      background: #FFFFFF;
      border-color: rgba(247, 198, 0, 0.55);
    }

    .hero-module-card:nth-of-type(1) {
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
    }

    .hero-module-card:nth-of-type(2) {
      top: 24%;
      right: 4%;
    }

    .hero-module-card:nth-of-type(3) {
      right: 10%;
      bottom: 10%;
    }

    .hero-module-card:nth-of-type(4) {
      left: 10%;
      bottom: 10%;
    }

    .hero-module-card:nth-of-type(5) {
      top: 24%;
      left: 4%;
    }

    .hero-module-card:hover,
    .hero-module-card:focus {
      outline: none;
      border-color: rgba(247, 198, 0, 0.7);
      background: #FFFFFF;
      box-shadow: 0 22px 46px rgba(5, 86, 111, 0.2);
    }

    .hero-module-card:hover i,
    .hero-module-card:focus i {
      color: var(--color-primary-900);
      transform: scale(1.14) rotate(-4deg);
    }

    .banner > .container > .row > .col-12.col-lg-5.text-center > img {
      max-width: 100% !important;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 24px 54px rgba(6, 47, 61, 0.26) !important;
    }

    @media (min-width: 992px) {
      .banner {
        padding: 100px 60px;
      }

      .banner > .container > .row {
        justify-content: space-between !important;
      }

      .banner > .container > .row > .col-12.col-lg-5.text-center {
        width: 41.666667%;
      }

      .banner-content {
        display: flex;
        align-items: center;
        gap: 60px;
      }

      .banner-text {
        flex: 1;
        max-width: 600px;
      }

      .banner-img {
        flex: 1;
        display: flex;
        justify-content: center;
      }
    }

    @media (max-width: 575.98px) {
      .hero-icons-panel {
        width: min(100%, 340px);
        min-height: 340px;
        padding: 1rem;
      }

      .hero-icons-core {
        width: 118px;
        height: 118px;
      }

      .hero-module-card {
        width: 76px;
        height: 76px;
        border-radius: 20px;
      }

      .hero-module-card i {
        font-size: 1.05rem;
      }

      .hero-module-card span {
        font-size: 0.68rem;
      }

      .hero-module-card {
        min-height: auto;
      }
    }
	/* Base do footer */
.footer-custom {
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
  color: #ffffffcc;
  padding-top: 60px;
  padding-bottom: 40px;
}

/* Título das seções */
.footer-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 1rem;
}

/* Texto normal */
.footer-text {
  font-size: 0.95rem;
  color: #ffffffaa;
}

/* Links internos */
.footer-link {
  color: #ffffffaa;
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--color-accent);
}

/* Redes sociais */
.footer-social {
  color: #ffffffaa;
  font-size: 1.2rem;
  margin-right: 10px;
  transition: color 0.3s ease;
  text-decoration: none;
}
.footer-social:hover {
  color: var(--color-accent);
}

/* Botão WhatsApp no footer */
.btn-whatsapp-footer {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn-whatsapp-footer:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.85);
  transform: none;
  color: #FFFFFF;
}

/* Linha divisória */
.footer-divider {
  border-top: 1px solid #ffffff22;
}

/* Copyright */
.footer-copyright {
  font-size: 0.85rem;
  color: #cccccc88;
}
/* === Estilo Base da Seção === */
.features-section {
  background:
    radial-gradient(circle at top left, rgba(14, 153, 168, 0.11), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, var(--color-background) 100%);
  position: relative;
  overflow: hidden;
}

.features-section .container {
  position: relative;
  z-index: 1;
}

.features-heading {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background-color: var(--color-accent-soft);
  color: var(--color-primary-900);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.features-heading .section-title {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.features-heading .section-subtitle {
  max-width: 740px;
}

.feature-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.feature-proof {
  padding: 1rem 1.2rem;
  border: 1px solid rgba(14, 116, 144, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 28px rgba(5, 86, 111, 0.07);
  backdrop-filter: blur(10px);
}

.feature-proof strong,
.feature-proof span {
  display: block;
}

.feature-proof strong {
  color: var(--color-primary-800);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.feature-proof span {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.section-title {
  color: var(--color-primary-800);
}

.section-subtitle {
  color: var(--color-muted);
}

.text-success {
  color: var(--color-primary) !important;
}

.bg-success {
  background-color: var(--color-primary) !important;
}

/* === Estilo dos Cards === */
.feature-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--radius-card) !important;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid rgba(14, 116, 144, 0.08);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.feature-card-highlight::before,
.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(14, 116, 144, 0.18);
  box-shadow: var(--shadow-soft) !important;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.35rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background-color: var(--color-primary-soft);
  color: var(--color-primary-800);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === Estilo dos Ícones === */
.feature-icon {
  width: 50px;
  height: 50px;
  font-size: 24px;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease;
}

.feature-card:hover .feature-icon {
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: scale(1.08) rotate(-3deg);
}

.features-section .card-title,
.features-section .card-text {
  text-align: left !important;
}

.features-section .card-title {
  font-size: 1.12rem;
  line-height: 1.3;
}

.features-section .card-text {
  margin-bottom: 1.25rem;
}

.feature-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(14, 116, 144, 0.08);
  color: var(--color-primary-800);
  font-size: 0.9rem;
  font-weight: 600;
}

.feature-card-footer i {
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.feature-card:hover .feature-card-footer i {
  transform: translateX(4px);
}

.features-cta {
  padding: 2rem;
  border: 1px solid rgba(14, 116, 144, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
}

.features-cta p {
  color: var(--color-text);
  font-weight: 600;
}

/* === Ícones padronizados para visual SaaS/tecnologia === */
.icon-blue,
.icon-green,
.icon-orange,
.icon-red,
.icon-whatsapp,
.icon-cloud,
.icon-chart,
.icon-calendar,
.icon-balance {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* === Título e texto centralizados === */
.card-title,
.card-text {
  text-align: center !important;
}

/* === Botão personalizado === */
.btn-primary-custom {
  background-color: var(--color-primary);
  color: white;
  border: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary-custom:hover {
  background-color: var(--color-primary-800);
  color: white;
  transform: translateY(-2px);
  text-decoration: none;
}
/* Estilização do botão primário */
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efeito hover - azul */
.btn-primary:hover {
  background-color: var(--color-primary-800);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Opcional: Sombra suave */
.btn-primary:focus,
.btn-primary:active {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(14, 116, 144, 0.24);
}
.seo-section {
  background-color: var(--color-surface);
}

.seo-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.seo-image {
  transition: transform 0.3s ease;
}

.seo-image:hover {
  transform: scale(1.02);
}

/* === Estilo Base da Seção === */
.segmentos-section {
  background:
    radial-gradient(circle at bottom right, rgba(247, 198, 0, 0.13), transparent 28%),
    linear-gradient(180deg, var(--color-background) 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.segmentos-section .container {
  position: relative;
  z-index: 1;
}

.segmentos-heading {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
}

.segmentos-title {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.18;
}

.segmentos-subtitle {
  max-width: 760px;
  color: var(--color-muted);
}

.segmentos-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.segmentos-proof > div {
  padding: 1rem 1.2rem;
  border: 1px solid rgba(14, 116, 144, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 28px rgba(5, 86, 111, 0.07);
}

.segmentos-proof strong,
.segmentos-proof span {
  display: block;
}

.segmentos-proof strong {
  margin-bottom: 0.2rem;
  color: var(--color-primary-800);
  font-size: 1rem;
}

.segmentos-proof span {
  color: var(--color-muted);
  font-size: 0.92rem;
}

/* === Estilo dos Cards === */
.segmento-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
  height: 100%;
  padding: 1.5rem;
  text-align: left;
  border-radius: var(--radius-card) !important;
  background: var(--color-surface);
  border: 1px solid rgba(14, 116, 144, 0.08);
}

.segmento-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.segmento-card-featured::before,
.segmento-card:hover::before {
  opacity: 1;
}

.segmento-card:hover {
  transform: translateY(-8px);
  border-color: rgba(14, 116, 144, 0.18);
  box-shadow: var(--shadow-soft) !important;
}

.segmentos-section .segmento-card .card-title,
.segmentos-section .segmento-card .card-text {
  text-align: left !important;
}

.segmentos-section .segmento-card .card-title {
  color: var(--color-text) !important;
  font-size: 1.12rem;
  line-height: 1.3;
}

.segmentos-section .segmento-card .card-text {
  color: var(--color-muted) !important;
  margin-bottom: 1rem;
}

.segmento-label {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background-color: var(--color-accent-soft);
  color: var(--color-primary-900);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* === Estilo dos Ícones === */
.segmento-icon {
  width: 50px;
  height: 50px;
  font-size: 24px;
  color: white;
  border-radius: 50%;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(5, 86, 111, 0.16);
  transition: transform 0.3s ease, background-color 0.25s ease;
}

.segmento-card:hover .segmento-icon {
  background-color: var(--color-primary-800);
  transform: scale(1.08) rotate(-3deg);
}

.segmento-benefits {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.2rem 0;
  padding: 0;
  list-style: none;
}

.segmento-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
}

.segmento-benefits li::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background-color: var(--color-primary);
  flex: 0 0 auto;
}

.segmento-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  color: var(--color-primary-800);
  font-weight: 600;
  text-decoration: none;
}

.segmento-link i {
  color: var(--color-accent);
  transition: transform 0.25s ease;
}

.segmento-link:hover {
  color: var(--color-primary);
}

.segmento-link:hover i,
.segmento-card:hover .segmento-link i {
  transform: translateX(4px);
}

.segmentos-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(14, 116, 144, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-card);
}

.segmentos-cta span,
.segmentos-cta strong {
  display: block;
}

.segmentos-cta span {
  margin-bottom: 0.25rem;
  color: var(--color-primary-800);
  font-weight: 600;
}

.segmentos-cta strong {
  max-width: 650px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.45;
}

@media (max-width: 991.98px) {
  .segmentos-proof {
    grid-template-columns: 1fr;
  }

  .segmentos-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .segmentos-cta {
    padding: 1.5rem;
  }
}

/* Ícones de segmentos padronizados para reduzir ruído visual */
.icon-celular,
.icon-informatica,
.icon-refrigeracao,
.icon-oficina,
.icon-servico,
.icon-eletronico,
.icon-arcondicionado,
.icon-eletrodomestico,
.icon-industrial {
  background-color: var(--color-primary);
}
.faq-section {
  background-color: var(--color-surface);
}

.faq-subtitle {
  color: var(--color-muted);
}

.accordion-button {
  font-weight: bold;
  transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
 background: var(--color-primary);
  color: white !important;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border: none;
}

.accordion-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.accordion-item {
  border: none;
}
.slogan-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background: var(--gradient-brand) !important;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.slogan-title {
  line-height: 1.2;
  letter-spacing: -1px;
}

.slogan-text {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}

.slogan-section .btn-whatsapp {
  background-color: #FFFFFF;
  color: var(--color-primary-800) !important;
  border-color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(6, 47, 61, 0.18);
}

.slogan-section .btn-whatsapp:hover,
.slogan-section .btn-whatsapp:focus {
  background-color: var(--color-accent);
  color: var(--color-primary-900) !important;
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(247, 198, 0, 0.34);
}

.btn-outline-light {
  border-color: white;
  color: white;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-light:hover {
  background-color: white;
  color: var(--color-primary);
  border-color: white;
}
.plans-section {
  background-color: var(--color-surface);
}

.plan-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding-top: 2rem; /* Espaço para o badge não sobrepor */
  border-radius: var(--radius-card) !important;
  background: var(--color-surface);
  border: 1px solid rgba(14, 116, 144, 0.1);
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft) !important;
}

.plan-header h4 {
  font-size: 1.5rem;
}

.plan-description {
  font-size: 0.95rem;
}

/* Badge recomendado - centralizado acima do card */
.badge.bg-warning {
  letter-spacing: 1px;
  font-size: 0.85rem;
  z-index: 10;
}

/* Botões personalizados */
.btn-success {
  background-color: var(--color-primary);
  color: white;
  border: none;
  font-weight: bold;
  transition: all 0.3s ease;
}
.btn-success:hover {
  background-color: var(--color-primary-800);
  color: white;
}

.btn-outline-success {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
}
.btn-outline-success:hover {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
/* === Botão flutuante do WhatsApp - sempre visível === */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-success);
  color: #ffffff !important;
  width: auto;
  height: 50px;
  padding: 12px 20px;
  border-radius: 50px;
  z-index: 1030;
  box-shadow: 0 12px 28px rgba(20, 184, 102, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  background-color: #0f9f58;
  transform: translateY(-3px);
  text-decoration: none;
}

/* === Ícone do WhatsApp (sempre visível) === */
.whatsapp-float .whatsapp-icon {
  font-size: 1.4rem;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover .whatsapp-icon {
  transform: rotate(10deg);
}

/* === Texto do WhatsApp (sempre visível) === */
.whatsapp-float .whatsapp-text {
  font-size: 1rem;
  color: #ffffff;
  white-space: nowrap;
}

/* === Refinamentos globais para acabamento premium === */
.features-section.bg-light {
  background-color: var(--color-background) !important;
}

.feature-card.card,
.segmento-card.card,
.plan-card.card {
  border: 1px solid rgba(14, 116, 144, 0.08) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}

.feature-card.card:hover,
.segmento-card.card:hover,
.plan-card.card:hover {
  border-color: rgba(14, 116, 144, 0.16) !important;
  box-shadow: var(--shadow-soft) !important;
}

.feature-card .card-title,
.segmento-card .card-title,
.plan-card .card-title,
.resource-title {
  color: var(--color-text) !important;
}

.feature-card .card-text,
.segmento-card .card-text,
.plan-description,
.section-subtitle.text-muted,
.lead.text-muted {
  color: var(--color-muted) !important;
}

.feature-icon,
.segmento-icon,
.resource-icon,
.resource-icon.bg-success,
.celular-section .feature-icon,
.celular-section .feature-icon.bg-success {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.segmento-icon,
.resource-icon.bg-success,
.celular-section .feature-icon.bg-success {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

.badge.bg-warning {
  background-color: var(--color-accent) !important;
  color: var(--color-primary-900) !important;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(247, 198, 0, 0.28);
}

.btn-primary,
.btn-success,
.text-section .btn-success {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-button) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.text-section .btn-success:hover,
.text-section .btn-success:focus {
  background-color: var(--color-primary-800) !important;
  border-color: var(--color-primary-800) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.btn-outline-success {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-button) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.78) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-button) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--color-primary-800) !important;
}

.text-section,
.celular-section,
.cloud-section,
.mecanica-section,
.informatica-section,
.informatica-feature-section {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.text-section h2,
.text-section .section-title,
.celular-section .section-title,
.cloud-section .section-title,
.mecanica-section .section-title,
.informatica-section .section-title,
.informatica-feature-section .section-title {
  color: var(--color-primary-800) !important;
}

.text-section .section-title::after,
.celular-section .section-title::after,
.cloud-section .section-title::after,
.mecanica-section .section-title::after,
.informatica-section .section-title::after,
.informatica-feature-section .section-title::after {
  background: var(--color-accent) !important;
  background-color: var(--color-accent) !important;
}

.text-section h3,
.text-section h4,
.text-section strong,
.celular-section .feature-title,
.informatica-section .feature-title,
.informatica-feature-section .feature-title {
  color: var(--color-primary) !important;
}

.text-section p,
.celular-section .section-intro,
.celular-section .feature-text,
.cloud-section .section-subtitle,
.mecanica-section .section-subtitle,
.informatica-section .section-subtitle,
.informatica-feature-section .section-subtitle,
.informatica-section .feature-text,
.informatica-feature-section .feature-text,
.resource-text {
  color: var(--color-muted) !important;
}

.text-section .table-head {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary-800) !important;
}

.text-section .alert-success {
  background-color: var(--color-primary-soft) !important;
  border-left-color: var(--color-primary) !important;
  color: var(--color-primary-800) !important;
}

body .text-section .btn-success,
body .mecanica-section .btn-success,
body .celular-section .btn-success,
body .cloud-section .btn-success,
body .informatica-section .btn-success,
body .informatica-feature-section .btn-success {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(5, 86, 111, 0.18) !important;
}

body .text-section .btn-success:hover,
body .text-section .btn-success:focus,
body .mecanica-section .btn-success:hover,
body .mecanica-section .btn-success:focus,
body .celular-section .btn-success:hover,
body .celular-section .btn-success:focus,
body .cloud-section .btn-success:hover,
body .cloud-section .btn-success:focus,
body .informatica-section .btn-success:hover,
body .informatica-section .btn-success:focus,
body .informatica-feature-section .btn-success:hover,
body .informatica-feature-section .btn-success:focus {
  background-color: var(--color-primary-800) !important;
  border-color: var(--color-primary-800) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

.features-section .feature-card:hover .feature-icon {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

@media (max-width: 767.98px) {
  .feature-proof-grid {
    grid-template-columns: 1fr;
  }

  .features-cta {
    padding: 1.5rem;
  }
}