/* Sessão SUPORTE REMOTO */
.sec-suporte{
  padding: clamp(72px, 10vh, 100px) 0;
  background: linear-gradient(180deg, #f8fdfb, #ffffff);
  border-top:1px solid var(--gray-200);
}

.sup-grid{
  display:grid; gap:40px;
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}
@media (max-width: 1000px){
  .sup-grid{ grid-template-columns: 1fr; }
}

.sup-texto h2{ margin-bottom:10px; }
.sup-texto .lead{ margin-bottom:16px; color:var(--gray-700); }

.sup-passos{
  margin:0 0 18px 0; padding-left:1.1rem;
  color:var(--gray-700);
}
.sup-passos li{ margin-bottom:6px; }

.sup-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.sup-box{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  padding:22px;
}
.sup-box h3{
  margin-top:0; margin-bottom:12px;
  font-size:1.15rem;
}
.sup-form{
  display:grid; gap:10px;
}
.sup-form input{
  padding:.65rem .8rem;
  border:1px solid var(--gray-200);
  border-radius:10px;
  font-size:1rem;
}
.sup-form input:focus{
  outline:none;
  border-color: var(--green-500);
  box-shadow:0 0 0 2px rgba(16,185,129,.25);
}
.sup-form button{
  justify-self:start;
}
.sup-note{
  font-size:.85rem;
  color:var(--gray-700);
  margin-top:10px;
}
/* Botão com indicativo de link externo */
.btn-external{
  position: relative;
  padding-right: 2.2rem; /* espaço pro ícone */
}
.btn-external::after{
  content: "↗";
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  font-size: 0.95rem; line-height: 1;
}

/* (opcional) leve contraste extra no dark para o botão principal nesta seção */
@media (prefers-color-scheme: dark){
  .btn-external{
    box-shadow: 0 0 0 1px rgba(0,0,0,0) inset, 0 10px 20px rgba(0,0,0,.35);
  }
}
@media (prefers-color-scheme: dark){
  .sec-suporte{
    background: linear-gradient(180deg, #0b0d10, #0e1318);
    border-top:1px solid rgba(255,255,255,.06);
  }
  .sup-texto .lead, .sup-note{ color: var(--gray-700); }

  .sup-box{
    background:#12171c;
    border:1px solid rgba(255,255,255,.06);
    color: var(--white);
    box-shadow: var(--shadow);
  }

  .sup-form input{
    background:#0f1419; color: var(--white);
    border:1px solid rgba(255,255,255,.12);
  }
  .sup-form input:focus{
    border-color: var(--green-500);
    box-shadow: 0 0 0 2px rgba(16,185,129,.25);
  }

  .btn-external{
    box-shadow: 0 10px 20px rgba(0,0,0,.35);
  }
}