/* Páginas de /ia/skills: blocos de prompt copiável, dúvidas e atalhos. Reaproveita as variáveis de cursos.css. Só claro. */
.copia{margin:16px 0;border:1.5px solid var(--ink);border-radius:16px;background:var(--bg);overflow:hidden}
.copia-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--mineral);border-bottom:1.5px solid var(--ink)}
.copia-topo span:first-child{font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.copiar{font:600 .9rem var(--body);background:var(--dark);color:var(--on-dark);border:0;border-radius:10px;padding:9px 14px;cursor:pointer;min-height:40px;transition:transform .2s,box-shadow .2s}
.copiar:hover{box-shadow:0 12px 22px -14px rgba(237,74,25,.8)}
.copiar:active{transform:scale(.96)}
.copia pre{margin:0;border-radius:0;background:var(--bg);white-space:pre-wrap;overflow-wrap:anywhere;font:13.5px/1.55 var(--mono)}
.exemplo-saida{font:12.5px/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.duvida{border:1.5px solid var(--line);border-radius:14px;background:var(--bg);margin:0 0 10px;padding:0 16px}
.duvida summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{content:"＋";float:right;color:var(--copper)}
.duvida[open] summary::after{content:"－"}
.duvida p{padding-bottom:14px;color:var(--muted)}
.dica{font-size:.95rem;color:var(--muted)}
.botao-link{display:inline-block;border:1.5px solid var(--ink);border-radius:12px;padding:11px 16px;font-weight:600;text-decoration:none;color:var(--ink)}
.botao-link:hover{background:var(--ink);color:var(--bg)}
.copy-status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--dark);color:var(--on-dark);padding:10px 16px;border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px)}
.copy-status:not(:empty){opacity:1}
.secao-pratica ol>li{margin-bottom:14px}

/* Onboarding do pacote: quatro passos numerados */
.passos{list-style:none;padding:0;display:grid;gap:16px;counter-reset:passo;margin:28px 0}
.passos>li{counter-increment:passo;position:relative;border:1.5px solid var(--ink);border-radius:20px;padding:20px 20px 20px 74px;background:var(--bg);min-width:0}
.passos>li::before{content:counter(passo);position:absolute;left:18px;top:18px;width:42px;height:42px;border-radius:50%;background:var(--orange);color:var(--on-orange);font:700 1.25rem var(--display);display:grid;place-items:center;box-shadow:0 10px 18px -8px rgba(237,74,25,.7)}
.passos h2{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.passos p{color:var(--muted)}
.passos .copia{margin:14px 0 0}
.feito{margin:30px 0;padding:20px 22px;border-radius:18px;background:var(--sage)}
.feito h2{font-size:1.4rem;font-weight:600;margin-bottom:8px}
@media (max-width:520px){.passos>li{padding:18px 16px 18px 16px}.passos>li::before{position:static;margin-bottom:10px}}