:root{
      /* 👉 Ajuste aqui a cor oficial do projeto */
      --tt-blue: #0B1E39;       /* azul escuro padrão */
      --tt-blue-600:#12325e;    /* variação para hover */
      --tt-accent:#2E6DF6;      /* opcional para realces */
      --bg:#F5F7FB;
      --text:#0f172a;
      --muted:#475569;
      --card:#ffffff;
      --ring: rgba(46,109,246,.35);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--text); background:linear-gradient(180deg, #fff, var(--bg));overflow: hidden;min-width: 100vh;
    }
    a{color:inherit; text-decoration:none}
    .container{max-width:1200px; margin:0 auto; padding:0 20px}

    /* Header */
    header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:#1a2c3f; border-bottom:1px solid rgba(237, 237, 237, 0.913);
    }
    header .container{
    max-width:1400px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
    }
    .logo-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    }
    .nav {
    display: flex;
    align-items: center;
    padding: 14px 0;
    }
    .logo-placeholder{
    width:46px; height:46px; border-radius:12px; background:var(--tt-blue); color:#fff;
    display:grid; place-items:center; font-weight:700; letter-spacing:.5px; box-shadow:var(--shadow);
    user-select:none;
    }
    .logo-img{ height:46px; width:auto; border-radius:12px; box-shadow:var(--shadow); display:block }
    .brand{display:flex; flex-direction:column; line-height:1}
    .brand b{font-size:17px}
    .brand small{color:var(--muted)}

    .nav-actions{
    display:flex;
    align-items:right;
    gap:10px;
    margin-left:auto;
    }
    .btn{appearance:none; border:0; cursor:pointer; border-radius:12px; padding:12px 16px; font-weight:600; transition:.2s ease; display:inline-flex; align-items:right; gap:10px}
    .btn-primary{background:var(--tt-blue); color:#fff}
    .btn-primary:hover{background:var(--tt-blue-600)}
    .btn-outline{border:1px solid rgba(235, 236, 238, 0.877); background:#fff}
    .btn-outline:hover{border-color:rgba(235, 236, 240, 0.823); box-shadow:0 6px 20px #fff}


    /* Hero */
    .hero{padding:72px 0 38px}
    .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
    .eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:13px; padding:6px 10px; border-radius:999px; background:rgba(11,62,145,.06); color:#0b3d91; border:1px solid rgba(11,62,145,.15)}
    h1{font-size: clamp(28px, 3.2vw, 44px); line-height:1.15; margin:14px 0}
    .sub{font-size: clamp(15px, 1.7vw, 18px); color:var(--muted); max-width:58ch}
    .hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .hero-card{
      background:radial-gradient(1200px 700px at 100% -100%, rgba(46,109,246,.08), transparent 50%), var(--card);
      border:1px solid rgba(2,6,23,.06); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
    }

    /* Services */
    .section {
  min-height: auto;  /* ocupa a tela inteira */
  padding: 56px 20px;  /* espaçamento interno */
  display: block;      /* volta ao fluxo normal */
}

#cadastro {
  height: 100vh;
  display: flex;
  min-width: 100%;
  justify-content: center;
  align-items: center;

}
#leadForm {
  max-height: 90vh; /* limita altura do form */
  overflow-y: auto; /* adiciona scroll interno */
 width: 100vh;
 margin-left: auto;
   margin-bottom: 70px;
   align-items: center;
   justify-content: center;
}

.form-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;   /* 🔑 garante que os dois itens comecem no topo */
}

.form-wrap aside {
  align-self: flex-start; /* garante que o aside alinhe pelo topo */
}

#cadastro input,
#cadastro select,
#cadastro textarea {
  padding: 6px 8px; /* menor */
  font-size: 10px;
}
#cadastro .btn {
  padding: 6px 8px;
  font-size: 14px;
}

.field.inline {
  flex-direction: row;     /* coloca lado a lado */
  align-items: center;     /* alinha verticalmente */
  gap: 8px;                /* espaço entre input e label */
}



.section h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 12px;
  text-align: center;        /* opcional: centraliza título */
}

.section p.lead {
  color: var(--muted);
  margin: 0 0 22px;
  text-align: center;        /* opcional: centraliza subtítulo */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card {
  background: var(--card);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 8px 0 6px;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(11,62,145,.08);
  color: var(--tt-blue);
  border: 1px solid rgba(2,6,23,.06);
}

    /* Pricing note */
    .pricing{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
    .pill{padding:10px 14px; border-radius:12px; background:rgba(11,62,145,.06); color:#0b3d91; font-weight:600; border:1px solid rgba(11,62,145,.16)}

    .btn.wa-link {
        background-color: #1ebe5d;   /* verde oficial do WhatsApp */
        color: #fff;
        }

        .btn.wa-link:hover {
        background-color: #1ebe5d;   /* tom mais escuro no hover */
}

    /* Form */
    .form-wrap{display:grid; grid-template-columns:1fr 1fr; gap:22px}
    form{background:var(--card); border:1px solid rgba(2,6,23,.06); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
    label{font-size:14px; font-weight:600}
    input, select, textarea{
      border:1px solid rgba(2,6,23,.12); border-radius:12px; padding:12px 14px; font-size:15px; outline:none; background:#fff;
    }
    input:focus, select:focus, textarea:focus{box-shadow:0 0 0 4px var(--ring); border-color:transparent}
    .help{font-size:12px; color:var(--muted)}

    .success{display:none; padding:12px 14px; background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; border-radius:12px; font-weight:600; margin-top:8px}
    .error{display:none; padding:12px 14px; background:#fef2f2; border:1px solid #fecaca; color:#991b1b; border-radius:12px; font-weight:600; margin-top:8px}

    main {
        flex: 1;
        justify-content: center; /* ocupa o espaço disponível empurrando o footer pra baixo */
        }

    /* Footer */
    footer{padding:10px 0; color:#e2e8f0; background:var(--tt-blue);margin-top: auto;}
    footer .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
    footer small{color:#cbd5e1}
  

    /* Floating WhatsApp */
    .wafloat {
        position: fixed;
        right: 18px;
        bottom: 44px;
        width: 120px;   /* novo tamanho do container */
        height: 120px;
        border: none;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        }

    .wafloat:hover{filter:brightness(0.95)}

    .wafloat img {
        max-height: 100%;  /* garante que a imagem se ajuste */
        max-width: 100%;
        }

    @media (max-width: 960px){
      .hero-grid{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr 1fr}
      .form-wrap{grid-template-columns:1fr}
    }
    @media (max-width: 560px){
      .grid{grid-template-columns:1fr}
      .nav-actions .btn-outline{display:none}
    }