/* conectar.css — SUPLEMENTAR à landing (styles.css). Carrega depois e SÓ nesta subpágina.
   Reusa as variáveis da marca (styles.css :root). Define apenas o que styles.css não cobre:
   corpo de documentação (lead, seções, passos numerados, código, callouts, tabelas). NÃO
   redefine .hero/.wrap/.nav/.btn/.steps (evita colisão com a landing). */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* corpo do documento */
.doc{padding:8px 0 40px}
.doc-lead{font-size:19px;color:var(--muted);max-width:760px;margin:22px 0 8px}
.doc-sec{padding:30px 0;border-top:1px solid var(--line)}
.doc-sec:first-of-type{border-top:0}
.doc-sec > h2{margin-bottom:14px}
.doc h3{font-size:18px;font-weight:600;margin:22px 0 8px;color:var(--text)}
.doc p{color:var(--text)}
.doc ul{color:var(--text);padding-left:22px}
.doc ul li{margin:6px 0}
.doc a{color:var(--pink)}
.doc a:hover{color:var(--orange)}

/* passos numerados (bolinha com gradiente) — nome próprio p/ não colidir com .steps da landing */
.doc-steps{counter-reset:step;list-style:none;padding-left:0;margin:6px 0}
.doc-steps li{position:relative;padding:4px 0 4px 44px;margin:12px 0;color:var(--text)}
.doc-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:14px}

/* código */
code{background:var(--navy);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  font-family:"Cascadia Code",Consolas,ui-monospace,monospace;font-size:14px;color:#FFD24D;
  overflow-wrap:anywhere}
.doc-card{background:var(--navy2);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin:14px 0;overflow-x:auto}
.doc-card code{border:0;background:transparent;padding:0;color:#FFD24D;white-space:pre-wrap}

/* callouts */
.callout{border-left:4px solid var(--orange);background:rgba(255,106,0,.08);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:16px 0;color:var(--text)}
.callout.aviso{border-left-color:var(--pink);background:rgba(255,45,122,.10)}
.callout.dica{border-left-color:var(--purple);background:rgba(106,0,255,.12)}
.callout strong{color:#fff}

/* tabelas */
.doc table{width:100%;border-collapse:collapse;margin:14px 0}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.doc td{color:var(--text);font-size:15px}

@media(max-width:640px){
  .doc-lead{font-size:17px}
}