/* =========================================================
   RB PRIME — página "Venda sua cota de consórcio" (/vender-cota/)
   Complementa o style.css do site; só o que a página tem de próprio.
   ========================================================= */

.nav-links a { white-space: nowrap; }
/* Entre 980 e 1140 px o menu inteiro não cabe ao lado do botão: vira o menu de celular mais cedo. */
@media (max-width: 1140px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* Hero em coluna única (o da home tem a foto ao lado) */
.vc-hero { padding: 72px 0 60px; }
.vc-hero .container { grid-template-columns: 1fr; }
.vc-hero .hero-text { max-width: 760px; }
.vc-hero .hero-sub { max-width: 680px; }
.vc-eyebrow { color: var(--orange-light); }

/* Critério e extrato, lado a lado */
.vc-duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.vc-caixa {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 32px;
}
.vc-caixa h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  margin-bottom: 6px;
}
.vc-lista {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.vc-lista li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
}
.vc-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--orange);
  border-bottom: 2.5px solid var(--orange);
  transform: rotate(-45deg);
}
.vc-nota {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg-light-blue);
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--blue-darker);
}

/* Formulário */
.vc-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 32px;
  display: grid;
  gap: 18px;
}
.vc-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.vc-campo { display: grid; gap: 6px; }
.vc-campo label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-deep);
}
.vc-campo input,
.vc-campo select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--blue-darker);
  background: var(--white);
  border: 1.5px solid #C9D6E6;
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
}
.vc-campo input:focus-visible,
.vc-campo select:focus-visible {
  outline: 3px solid rgba(31, 71, 136, 0.25);
  border-color: var(--blue-deep);
}
.vc-campo input.invalido { border-color: #C0392B; }
.vc-erro { font-size: 13.5px; color: #C0392B; }
.vc-aviso {
  background: var(--chip-orange);
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--blue-darker);
}
.vc-aviso h3 { font-size: 17px; margin-bottom: 8px; color: var(--blue-darker); }
.vc-aviso p { font-size: 15px; }
.vc-aviso ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.vc-form .btn-block { white-space: normal; text-align: center; }
.vc-privacidade { font-size: 13.5px; text-align: center; }
.vc-privacidade a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(217, 119, 6, 0.55);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .vc-duas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vc-hero { padding: 56px 0 44px; }
  .vc-linha { grid-template-columns: 1fr; }
  .vc-form, .vc-caixa { padding: 26px 20px; }
}