:root {
   --texto: #1E1F20;
   --brand: #008EAE;
   /* azul/teal principal */
   --brand-700: #087f90;
   /* variação para hover */
   --ink: #0b2530;
   /* texto escuro */
   --hero: #0b3b46;
   /* fundo hero */
   --hero-2: #08313b;
   /* variação fundo */
   --surface: #ffffff;
   --muted: #6b7b83;
   --radius-xl: 18px;
   --shadow: 0 14px 40px rgba(0, 0, 0, .12);
   --font-base: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, sans-serif;
 }

 .azul {
   color: var(--brand);
 }

 /* Ajusta o scroll para compensar o navbar fixo (apenas desktop) */
 @media (min-width: 992px) {
   html {
     scroll-padding-top: 120px;
     scroll-behavior: smooth;
   }
 }

 /* Tipografia e base */
 html,
 body {
   font-family: var(--font-base);
   font-weight: 400;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;

   color: var(--texto);
 }

 @media only screen and (max-width: 768px) {

   html,
   body {
     width: 100%;
   }

 }

 .text-muted-2 {
   color: var(--muted) !important;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--font-base);
   font-weight: 800;
   letter-spacing: -0.02em;
 }

 h1 {
   font-size: clamp(2.2rem, 4vw, 3rem);
 }

 h2 {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
 }

 h3 {
   font-size: 1.2rem;
 }

 @media (min-width: 1200px) {
   body {
     font-size: 16.5px;
   }
 }

 .title-brush {
   position: relative;
   display: inline-block;
   /* garante que o underline siga o tamanho do texto */
   font-weight: 800;
   line-height: 1.05;
   color: #0a8aa7;
   /* ajuste pro seu azul */
 }

 /* “pincel” */
 .title-brush::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: -15px;
   /* distância do texto */
   width: 110%;
   /* no print ele não vai até o final */
   height: 14px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   opacity: 1;
   transform: translateX(-50%) rotate(-0.8deg);

   /* SVG tipo pincel (cor altere no fill) */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 36'%3E%3Cg transform='scale(1.25,1)'%3E%3Cpath fill='%230a8aa7' d='M6 20c18-7 38-9 58-7 27 2 48 7 76 6 34-1 56-8 90-7 28 1 56 7 84 5 4 0 6 4 4 7-2 3-6 5-10 5H22c-8 0-14-6-16-11z'/%3E%3Cpath fill='%230a8aa7' opacity='.55' d='M14 28c28-6 54-6 82-2 22 3 44 6 68 4 34-2 58-9 92-8 18 1 34 4 50 6 4 1 6 5 3 8-2 2-5 3-8 3H28c-7 0-12-5-14-11z'/%3E%3C/g%3E%3C/svg%3E");
 }

 @media (max-width:768px) {
   .title-brush::after {
     bottom: 7px;
   }

   .title-brush {
     line-height: 2.3;
   }
 }


 /* Botões */

 .btn-branco {
   --bs-btn-bg: #FDFDFD;
   --bs-btn-border-color: #FDFDFD;
   --bs-btn-hover-bg: #e0e0e0;
   --bs-btn-hover-border-color: #e0e0e0;
   --bs-btn-color: #008EAE;
   --bs-btn-hover-color: #008EAE;
   border-radius: 999px;
   padding: .75rem 1.25rem;
   font-weight: 600;
 }

 .btn-brand {
   --bs-btn-bg: var(--brand);
   --bs-btn-border-color: var(--brand);
   --bs-btn-hover-bg: var(--brand-700);
   --bs-btn-hover-border-color: var(--brand-700);
   --bs-btn-color: #fff;
   --bs-btn-hover-color: #fff;
   border-radius: 999px;
   padding: .75rem 1.25rem;
   font-weight: 600;
 }

 .btn-ghost {
   border-radius: 999px;
   padding: .75rem 1.25rem;
   font-weight: 600;
   border: 1px solid #fff;
   color: #fff;
   background: rgba(255, 255, 255, .06);
 }

 .btn-ghost:hover {
   background: rgba(255, 255, 255, .12);
   color: #fff;
 }

 /* HERO */
 .hero {
   position: relative;
   background-image: url(../img/bg-hero.png);
   color: #fff;
   overflow: hidden;
   background-size: cover;
   min-height: 650px;
 }

 .hero .navbar {
   background: transparent;
 }

 .brand-badge {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .12);
   display: inline-grid;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .18);
 }

 .hero h1 {
   letter-spacing: -0.02em;
   line-height: 1.3;
   font-size: 32px;
 }

 .hero-lead {
   color: rgba(255, 255, 255, .82);
   max-width: 52ch;
 }

 .hero-wave {
   position: absolute;
   left: 0;
   bottom: -1px;
   /* evita “linha” entre hero e próxima seção */
   width: 100%;
   height: clamp(70px, 10vw, 140px);
   display: block;
   z-index: 10;
 }

 .hero-wave-2 {
   position: absolute;
   bottom: 4px;
   left: -5%;
   /* evita “linha” entre hero e próxima seção */
   width: 100%;
   height: clamp(70px, 10vw, 140px);
   display: block;
   z-index: 9;
 }


 .hero-wave path {
   fill: #fff;
   /* cor do fundo da seção de baixo */
 }

 .hero-wave-2 path {
   fill: #008EAE;
   /* cor do fundo da seção de baixo */
 }

 @media only screen and (max-width: 768px) {
   .hero {
     min-height: 1200px;
     max-height: 1200px;
     border-bottom: 1px solid #fff;
   }
 }


 /* Ondas */
 .wave {
   display: block;
   width: 100%;
   height: 80px;
   margin-top: -1px;
 }

 .wave path {
   fill: var(--surface);
 }

 /* Seções */
 .section {
   padding: 72px 0;
 }

 .section-title {
   font-weight: 800;
   letter-spacing: -0.02em;
 }

 .section-kicker {
   color: var(--brand);
   font-weight: 700;
   letter-spacing: .02em;
   text-transform: uppercase;
   font-size: .85rem;
 }

 .divider-title {
   width: 84px;
   height: 4px;
   background: var(--brand);
   border-radius: 999px;
   margin: 14px auto 0;
 }

 /* Cards Funcionalidades */
 #funcionalidades {
   position: relative;
 }

 #funcionalidades .hero-wave path {
   fill: #0B3B45;
   /* cor do fundo da seção de baixo */
 }

 .feature-card-glink {
   width: 80%;
   position: relative;
   margin-bottom: 5.5rem;
 }

 .feature-card-bg {
   background: #0287A2;
   color: #fff;
   height: 480px;
   margin-top: -125px;
   padding-top: 70px;
 }

 .feature-card-sm {
   height: 400px;
 }

 .feature-illus {
   position: relative;
   z-index: 2;
   display: flex;
   justify-content: center;
 }

 .feature-illus img {
   margin-top: -20px;
 }

 .feature-title {
   font-weight: 800;
   font-size: clamp(1.35rem, 2.4vw, 1.8rem);
   line-height: 1.15;
   width: 75%;
   margin: 0 auto 2rem auto !important;
 }

 .feature-text {
   font-size: 0.98rem;
   line-height: 1.6;
   opacity: .95;
 }

 /* Deixa bem “card” com bordas grandes igual print */
 .feature-card-glink .card {
   border-radius: 2rem !important;
 }


 .feature-card {
   border: 0;
   border-radius: var(--radius-xl);
   background: #0b9db1;
   /* teal sólido, parecido com o print */
   color: #fff;
   padding: 22px;
   height: 100%;
   box-shadow: 0 10px 25px rgba(10, 163, 184, .18);
 }

 .feature-illu {
   width: 110px;
   height: 110px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .20);
   border: 1px solid rgba(255, 255, 255, .25);
   display: grid;
   place-items: center;
   margin: 0 auto 14px;
 }

 .feature-card h3 {
   font-weight: 800;
   font-size: 1.05rem;
   text-align: center;
   margin-bottom: 8px;
 }

 .feature-card p {
   color: rgba(255, 255, 255, .88);
   font-size: .95rem;
   margin: 0;
   text-align: center;
 }


 @media (max-width:768px) {
   .feature-card-bg {
     padding-top: 90px;
   }
 }

 /* Seção escura “Por que usar” */
 .dark-band {
 background: linear-gradient(180deg, #0b3b46 0%, #022129 100%);

   color: #fff;
   position: relative;
   overflow: hidden;
 }

 .dark-band .lead {
   color: rgba(255, 255, 255, .82);
 }

 .why-list {
   list-style: none;
   padding-left: 0;
   margin: 0;
   display: grid;
   gap: 14px;
 }

 .why-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
 }

 .why-icon {
   width: 34px;
   height: 34px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: rgba(255, 255, 255, .10);
   border: 1px solid rgba(255, 255, 255, .18);
   flex: 0 0 auto;
 }

 .why-item h4 {
   font-size: 1.0rem;
   margin: 0 0 4px 0;
   font-weight: 800;
 }

 .why-item p {
   margin: 0;
   color: rgba(255, 255, 255, .78);
   font-size: .95rem;
 }

 /* Form */
 .form-card {
   border-radius: var(--radius-xl);
   border: 1px solid rgba(10, 163, 184, .18);
   box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
 }

 .form-control,
 .form-select {
   border-radius: 12px;
   padding: .8rem .9rem;
 }

 /* Sobre */
 .about {
   background: #0b3b46;
   color: #fff;
 }

 .about .lead {
   color: rgba(255, 255, 255, .82);
 }

 .about-media {
   border-radius: var(--radius-xl);
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .15);
   box-shadow: var(--shadow);
   background: rgba(255, 255, 255, .06);
   min-height: 260px;
 }

 @media (max-width: 768px) {
   .about-media {
     min-height: auto !important;
     height: 400px;
   }
 }

 .about-media .placeholder {
   height: 100%;
   min-height: 260px;
   display: grid;
   place-items: center;
   color: rgba(255, 255, 255, .75);
   font-weight: 700;
 }

 /* Footer */
 footer {
   background: #06262d;
   color: rgba(255, 255, 255, .78);
   padding: 22px 0;
 }

 footer a {
   color: rgba(255, 255, 255, .78);
 }

 footer a:hover {
   color: #fff;
 }

 /* Ajustes responsivos */
 @media (max-width: 991.98px) {
   .mockup-wrap {
     min-height: 280px;
   }

   .mock-card {
     position: relative;
     top: 0;
     right: 0;
     width: 100%;
   }

   .mock-phone {
     display: none;
   }

   /* no mobile fica limpo */
 }

 @media (max-width: 575.98px) {
   .hero {
     padding-bottom: 20px;
   }

   .section {
     padding: 56px 0;
   }
 }
/* Navbar fixo apenas em desktop (telas ≥ 992px) */
@media (min-width: 992px) {
  #mainNav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    transition: all 0.3s ease;
  }

  #mainNav.scrolled{
    background: var(--hero) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  /* Efeito de zoom quando rolar a página */
  #mainNav.scrolled a {
    transform: scale(0.85);
  }

  /* Adiciona espaçamento no header para compensar o navbar fixo */
  .hero {
    padding-top: 80px;
  }

  #inicio{
    padding-top: 150px!important;
  }

}

/* ========== MODAL DE FEEDBACK DO FORMULÁRIO ========== */
.form-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 37, 48, .55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
  padding: 1rem;
}

.form-modal-overlay.show {
  opacity: 1;
}

.form-modal {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  max-width: 420px;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem 2rem;
  transform: scale(.9) translateY(20px);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.form-modal-overlay.show .form-modal {
  transform: scale(1) translateY(0);
}

.form-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
}

.form-modal-icon.success {
  background: rgba(0, 142, 174, .12);
  color: var(--brand);
}

.form-modal-icon.error {
  background: rgba(220, 53, 69, .12);
  color: #dc3545;
}

.form-modal h3 {
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: .5rem;
  color: var(--ink);
}

.form-modal p {
  color: var(--muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.form-modal .btn-fechar-modal {
  border-radius: 999px;
  padding: .6rem 2rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  transition: background .2s;
}

.form-modal .btn-fechar-modal.success {
  background: var(--brand);
  color: #fff;
}

.form-modal .btn-fechar-modal.success:hover {
  background: var(--brand-700);
}

.form-modal .btn-fechar-modal.error {
  background: #dc3545;
  color: #fff;
}

.form-modal .btn-fechar-modal.error:hover {
  background: #b02a37;
}