/* A pagina Integracao (/integracao/): o "Entrar com Atos" para quem integra o proprio sistema. Usa o sistema
   visual de conta.css (cores, topo, rodape, botoes); aqui so o que e desta pagina. Cantos retos em tudo. */

main.integracao { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 48px 28px 96px; display: flex; flex-direction: column; }
.integracao h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1.15; text-wrap: balance; }
.integracao .lead { max-width: 640px; margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-soft); text-wrap: pretty; }
.integracao .chamadas { padding-top: 24px; }
.integracao .chamadas .btn { height: 40px; padding: 0 18px; }
.integracao .chamadas .btn.primario .seta { color: var(--on-light); }

.integracao section { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.integracao h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.integracao h3 { font-size: 13px; font-weight: 600; color: var(--silver); margin-top: 28px; }
.integracao .corpo { max-width: 640px; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.integracao p, .integracao li { font-size: 15px; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.integracao strong { color: var(--text); font-weight: 600; }
.integracao ul { margin: 0; padding-left: 20px; }
.integracao li + li { margin-top: 8px; }
.integracao code { font-family: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }

/* os pontos principais, em grade */
.pontos { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.pontos > div { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.pontos h3 { margin: 0; font-size: 13px; color: var(--text); }
.pontos p { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* as capturas */
.capturas { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; align-items: start; }
.captura.larga { grid-column: 1 / -1; }
.captura { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.captura img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--surface); }
.captura figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.captura figcaption strong { display: block; font-size: 13px; color: var(--text); font-weight: 600; }

/* o passo a passo */
.passos { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: passo; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--surface); }
.passos > li { counter-increment: passo; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 16px; margin: 0; border-top: 1px solid var(--line); }
.passos > li:first-child { border-top: 0; }
.passos > li::before {
  content: counter(passo, upper-roman); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); font-family: var(--serif); font-size: 15px; color: var(--text);
}
.passos h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.passos p, .passos li { font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.passos ul { margin-top: 6px; }
.passos li li + li { margin-top: 4px; }

/* a referencia */
.tabela-ref { margin-top: 20px; border: 1px solid var(--line); background: var(--surface); }
.tabela-ref > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; }
.tabela-ref > div:first-child { border-top: 0; }
.tabela-ref dt { color: var(--muted); font-weight: 500; }
.tabela-ref dd { margin: 0; color: var(--text-soft); min-width: 0; }
.codigo { margin: 12px 0 0; padding: 14px 16px; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); font-family: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace; font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre; tab-size: 2; }
.codigo code { overflow-wrap: normal; }
.integracao .nota-fim { margin-top: 20px; font-size: 13px; color: var(--muted); }
.integracao .nota-fim a, .integracao .corpo a, .integracao .passos a { color: var(--text); }

@media (max-width: 640px) {
  .capturas, .pontos { grid-template-columns: minmax(0, 1fr); }
  main.integracao { padding: 36px 16px 72px; }
  .integracao section { margin-top: 48px; }
  .passos > li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 12px; }
  .passos > li::before { width: 32px; height: 32px; font-size: 13px; }
  .tabela-ref > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* as abas "Na sua linguagem" (integrar.css): o texto delas, nao o da pagina */
.integracao .il { margin-top: 20px; }
.integracao .il .il-bib { font-size: 13px; line-height: 1.5; }
.integracao .il .il-nota { font-size: 12px; line-height: 1.5; }
.integracao .il .il-nota.il-testado { color: var(--success); }
.integracao .il .il-nota.il-nao-testado { color: var(--warning); }

/* Na pratica: do zero ao login (o passo a passo com as capturas da loja de exemplo) */
.integracao .aviso-pratica { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--silver); background: var(--surface); font-size: 14px; line-height: 1.6; }
.pratica { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: pratica; display: flex; flex-direction: column; gap: 40px; }
.pratica > li { counter-increment: pratica; position: relative; margin: 0; padding-left: 52px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pratica > li + li { margin-top: 0; }
.pratica > li::before {
  content: counter(pratica); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); font-family: var(--serif); font-size: 16px; color: var(--text);
}
.pratica > li > h4 { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--text); }
/* as duas partes: a loja aberta (qualquer Conta Atos) e o sistema fechado (so liberados) */
.integracao h3.parte { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--text); }
.integracao h3.parte + p { margin-top: 10px; max-width: 680px; }
.pratica > li > p { max-width: 640px; }
.pratica .capturas { margin-top: 4px; }
.pratica > li > .captura { margin-top: 4px; }
.pratica .codigo { margin-top: 0; }
.por-tras { padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
.por-tras h5 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.por-tras li { font-size: 14px; line-height: 1.6; }
.por-tras li + li { margin-top: 6px; }

@media (max-width: 640px) {
  .pratica { gap: 32px; }
  .pratica > li { padding-left: 0; }
  .pratica > li::before { position: static; width: 32px; height: 32px; font-size: 14px; }
}
.pratica > li > .captura img { width: auto; max-width: 100%; }
/* Gratuito e Pro (#pro): a comparacao dos planos */
.tabela-rolagem { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.planos-tabela { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.planos-tabela th, .planos-tabela td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.planos-tabela thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.planos-tabela tbody th { font-weight: 500; color: var(--text); width: 30%; }
@media (max-width: 560px) { .tabela-ref > div { grid-template-columns: 1fr; gap: 4px; } }