:root {
  --bg: #050505;
  --surface: #0d100e;
  --surface-2: #121713;
  --surface-3: #171d18;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-2: #c6ccc8;
  --text-3: #87918b;
  --green: #30dc68;
  --green-soft: #85eea7;
  --green-ink: #062611;
  --cyan: #49c9e8;
  --amber: #f2c14f;
  --coral: #ef7659;
  --danger: #d96767;
  --topbar: 68px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: 0; }

.carregando {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 14px;
  color: var(--text-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background:
    radial-gradient(circle at 58% 45%, rgba(48, 220, 104, .12), transparent 30%),
    var(--bg);
}
.sinal {
  width: 9px;
  height: 9px;
  justify-self: center;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(48, 220, 104, .45);
  animation: pulso 1.6s infinite;
}
@keyframes pulso { 70% { box-shadow: 0 0 0 16px rgba(48, 220, 104, 0); } }

/* Login */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  overflow: hidden;
}
.login-arte {
  min-height: 100vh;
  background:
    linear-gradient(90deg, transparent 55%, var(--bg) 100%),
    linear-gradient(0deg, rgba(5, 5, 5, .35), transparent 45%),
    url("./assets/os-base-v3.png") center / cover no-repeat;
}
.login-painel {
  min-height: 100vh;
  padding: 34px clamp(34px, 6vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
  border-left: 1px solid var(--line);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  color: var(--text);
  text-decoration: none;
}
.marca-sinal {
  width: 13px;
  height: 13px;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  box-shadow: 0 0 18px rgba(48, 220, 104, .7);
}
.marca b { font-size: 15px; letter-spacing: .13em; }
.marca small { margin-left: 5px; color: var(--green); font-family: "JetBrains Mono", monospace; }
.login-painel > .marca { position: absolute; top: 34px; }
.login-copy { max-width: 540px; }
.eyebrow {
  color: var(--green);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.login h1 { font-size: clamp(38px, 4vw, 62px); line-height: 1.02; margin-bottom: 22px; font-weight: 700; }
.login-copy p { color: var(--text-2); font-size: 17px; max-width: 48ch; margin-bottom: 34px; }
.login-form { max-width: 500px; }
.login-form label { display: block; color: var(--text-2); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
input, textarea, select {
  width: 100%;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 14px 16px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(48, 220, 104, .12); }
.login-form input { margin-bottom: 12px; height: 52px; }
.botao {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.botao:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .11); }
.botao.primario { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.botao.secundario { background: rgba(5, 5, 5, .55); backdrop-filter: blur(12px); }
.botao.perigo { border-color: rgba(217, 103, 103, .35); color: #ffc3c3; }
.botao[disabled] { opacity: .5; cursor: wait; transform: none; }
.login-form .botao { width: 100%; min-height: 52px; }
.mensagem { max-width: 500px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(48, 220, 104, .25); background: rgba(48, 220, 104, .08); color: var(--green-soft); border-radius: 6px; font-size: 13px; }
.mensagem.erro { border-color: rgba(217, 103, 103, .3); background: rgba(217, 103, 103, .08); color: #ffc3c3; }
.login-ajuda { color: var(--text-3); font-size: 12px; margin: 18px 0 0; }
.login-ajuda a { color: var(--text-2); }

/* App shell */
.app { min-height: 100vh; background: var(--bg); }
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--topbar);
  padding: 0 clamp(18px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 34px;
  background: linear-gradient(180deg, rgba(5, 5, 5, .98), rgba(5, 5, 5, .86));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.marca-botao { border: 0; background: none; padding: 0; cursor: pointer; }
.nav-desktop { display: flex; align-items: stretch; height: 100%; gap: 6px; }
.nav-desktop button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-3);
  padding: 2px 12px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.nav-desktop button:hover, .nav-desktop button.ativo { color: var(--text); }
.nav-desktop button.ativo { border-bottom-color: var(--green); }
.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.busca-abrir { width: 38px; height: 38px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--text-2); }
.busca-abrir svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.progresso-topo { display: flex; align-items: center; gap: 9px; }
.progresso-topo span { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--text-3); }
.progresso-topo i { width: 76px; height: 4px; overflow: hidden; background: rgba(255, 255, 255, .12); border-radius: 9px; }
.progresso-topo b { display: block; width: 0; height: 100%; background: var(--green); transition: width .35s ease; }
.perfil { width: 34px; height: 34px; border: 1px solid rgba(48, 220, 104, .35); border-radius: 50%; background: rgba(48, 220, 104, .12); color: var(--green-soft); font-weight: 800; cursor: pointer; }
.conta-popover { position: fixed; right: clamp(18px, 4vw, 56px); top: 58px; z-index: 70; width: min(300px, calc(100vw - 36px)); padding: 16px; background: #111512; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.conta-popover span { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-size: 12px; margin-bottom: 12px; }
.conta-popover button { width: 100%; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); padding: 9px; cursor: pointer; }
.busca-painel { position: fixed; inset: var(--topbar) 0 auto; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px, 7vw, 96px); background: rgba(5, 5, 5, .98); border-bottom: 1px solid var(--line); }
.busca-painel label { font-family: "JetBrains Mono", monospace; color: var(--green); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.busca-painel input { max-width: 660px; height: 44px; }
.busca-painel button { margin-left: auto; border: 0; background: none; color: var(--text-2); font-size: 28px; cursor: pointer; }
.painel { min-height: 100vh; padding-top: var(--topbar); overflow: hidden; }

/* Home and library */
.hero {
  position: relative;
  min-height: min(68vh, 680px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--cover) 67% center / cover no-repeat; transform: scale(1.015); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #050505 4%, rgba(5, 5, 5, .88) 30%, rgba(5, 5, 5, .2) 72%), linear-gradient(0deg, #050505 0%, transparent 42%), linear-gradient(180deg, rgba(5, 5, 5, .28), transparent 35%); }
.hero-conteudo { width: min(700px, 88vw); padding: 90px clamp(18px, 7vw, 96px) 86px; }
.hero h1 { font-size: clamp(42px, 6.3vw, 86px); line-height: .96; font-weight: 700; margin-bottom: 18px; }
.hero p { max-width: 56ch; color: var(--text-2); font-size: clamp(15px, 1.5vw, 18px); margin-bottom: 24px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px; }
.estado { display: inline-flex; align-items: center; gap: 7px; color: var(--green-soft); }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(48, 220, 104, .8); }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.home-corpo { position: relative; z-index: 2; margin-top: -48px; padding: 0 0 90px; }
.secao { margin-bottom: 44px; }
.secao-cab { display: flex; align-items: flex-end; gap: 16px; margin: 0 clamp(18px, 7vw, 96px) 14px; }
.secao-cab > div { min-width: 0; }
.secao-cab h2 { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; margin-bottom: 5px; }
.secao-cab p { color: var(--text-3); font-size: 13px; margin: 0; }
.setas { margin-left: auto; display: flex; gap: 6px; }
.setas button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .04); color: var(--text-2); cursor: pointer; }
.setas button:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .09); }
.fileira {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 27vw, 392px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  padding: 4px clamp(18px, 7vw, 96px) 14px;
}
.fileira::-webkit-scrollbar { display: none; }
.produto-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
  transition: transform .18s ease, border-color .18s ease;
}
.produto-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .27); }
.produto-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.produto-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 5, 4, .97) 0%, rgba(3, 5, 4, .58) 42%, transparent 80%); }
.produto-card.bloqueado img { filter: saturate(.55) brightness(.67); }
.produto-card .card-conteudo { position: absolute; inset: auto 18px 16px; }
.produto-card h3 { margin: 0 0 4px; font-size: clamp(18px, 2vw, 25px); line-height: 1.1; }
.produto-card p { color: var(--text-2); margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px; padding: 4px 7px; border-radius: 4px; background: rgba(5, 5, 5, .64); border: 1px solid var(--line-strong); color: var(--text-2); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(8px); }
.tag.liberado { color: var(--green-soft); border-color: rgba(48, 220, 104, .3); }
.tag.em-breve { color: #ffd9a1; border-color: rgba(242, 193, 79, .32); }
.card-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.card-progresso i { display: block; height: 100%; background: var(--green); }
.atalho-card { min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, var(--surface-2), #0a0d0b); cursor: pointer; text-align: left; }
.atalho-card:hover { border-color: rgba(48, 220, 104, .34); }
.atalho-card b { display: block; font-size: 16px; margin-bottom: 7px; }
.atalho-card span { color: var(--text-3); font-size: 12px; }
.atalho-card strong { display: block; color: var(--green); margin-top: 18px; font-size: 13px; }

/* Page header and grids */
.pagina { padding: 48px clamp(18px, 7vw, 96px) 100px; max-width: 1560px; margin: 0 auto; }
.pagina-cab { max-width: 760px; margin-bottom: 32px; }
.pagina-cab h1 { font-size: clamp(34px, 5vw, 62px); line-height: 1; margin-bottom: 14px; }
.pagina-cab p { color: var(--text-2); font-size: 16px; }
.grade-produtos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grade-produtos .produto-card { width: 100%; }
.resultado-vazio { padding: 36px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--text-3); }

/* Product detail */
.produto-hero { position: relative; min-height: 510px; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.produto-hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--cover) 66% center / cover no-repeat; }
.produto-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #050505 3%, rgba(5, 5, 5, .9) 34%, rgba(5, 5, 5, .18) 78%), linear-gradient(0deg, #050505 0%, transparent 46%); }
.produto-hero-conteudo { box-sizing: border-box; width: min(720px, 100%); padding: 90px clamp(18px, 7vw, 96px) 66px; }
.voltar { border: 0; padding: 0; margin-bottom: 24px; color: var(--text-2); background: none; font-size: 13px; cursor: pointer; }
.voltar:hover { color: var(--text); }
.produto-hero h1 { font-size: clamp(44px, 6vw, 82px); line-height: .96; margin-bottom: 18px; }
.produto-hero p { max-width: 60ch; color: var(--text-2); font-size: 16px; }
.produto-hero .hero-acoes { margin-top: 22px; }
.produto-corpo { max-width: 1560px; margin: 0 auto; padding: 34px clamp(18px, 7vw, 96px) 100px; }
.produto-resumo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 26px; margin-bottom: 38px; }
.produto-resumo > div { min-width: 0; padding: 20px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.produto-resumo h2 { font-size: 20px; margin-bottom: 8px; }
.produto-resumo p { color: var(--text-2); font-size: 14px; }
.modulos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.modulo-card { position: relative; min-height: 270px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; isolation: isolate; text-align: left; background: var(--surface); }
.modulo-card::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--cover) var(--pos, 68%) center / cover no-repeat; filter: brightness(.74); transition: transform .25s ease, filter .25s ease; }
.modulo-card::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, #070908 0%, rgba(7, 9, 8, .68) 50%, transparent 100%); }
.modulo-card:hover::before { transform: scale(1.03); filter: brightness(.86); }
.modulo-card-conteudo { position: absolute; inset: auto 20px 18px; }
.modulo-num { color: var(--green); font-family: "JetBrains Mono", monospace; font-size: 11px; margin-bottom: 10px; }
.modulo-card h3 { font-size: 20px; line-height: 1.15; margin-bottom: 8px; }
.modulo-card p { color: var(--text-2); font-size: 12px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.modulo-meta { margin-top: 12px; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }

/* OS Skills */
.pagina-skills { max-width: 1480px; }
.skills-cab { min-height: 430px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 56px; align-items: center; padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.skills-cab h1 { max-width: 760px; margin: 10px 0 18px; font-size: clamp(42px, 6vw, 78px); line-height: .98; }
.skills-cab p { max-width: 63ch; color: var(--text-2); font-size: 16px; }
.skills-visual { position: relative; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background-color: #080b09; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 32px 32px; }
.skills-visual::before, .skills-visual::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 72%; height: 1px; background: rgba(73, 201, 232, .24); transform-origin: left center; }
.skills-visual::before { transform: rotate(27deg) translateX(-8%); }
.skills-visual::after { transform: rotate(148deg) translateX(-8%); background: rgba(242, 193, 79, .22); }
.skills-nucleo { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 86px; height: 86px; transform: translate(-50%, -50%); border: 1px solid rgba(48, 220, 104, .55); border-radius: 50%; background: #0d1710; color: var(--green-soft); font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 800; box-shadow: 0 0 30px rgba(48, 220, 104, .11); }
.skills-visual i { position: absolute; z-index: 2; left: var(--x); top: var(--y); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 4px; background: #111512; color: var(--text-2); font-family: "JetBrains Mono", monospace; font-size: 9px; font-style: normal; text-transform: uppercase; }
.skill-seletor { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); gap: 48px; align-items: center; padding: 38px 0; border-bottom: 1px solid var(--line); }
.skill-seletor h2 { margin: 7px 0 7px; font-size: 25px; }
.skill-seletor p { margin: 0; color: var(--text-3); font-size: 13px; }
.skill-objetivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.skill-objetivos button { min-height: 52px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; text-align: left; font-weight: 700; }
.skill-objetivos button:hover { border-color: rgba(73, 201, 232, .42); color: var(--text); }
.skills-barra { display: flex; align-items: center; gap: 18px; padding: 28px 0 16px; }
.skills-barra > span { margin-left: auto; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; }
.skills-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-filtros button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text-3); cursor: pointer; font-size: 11px; font-weight: 700; }
.skills-filtros button:hover { color: var(--text); border-color: var(--line-strong); }
.skills-filtros button.ativo { border-color: rgba(48, 220, 104, .4); background: rgba(48, 220, 104, .08); color: var(--green-soft); }
.skills-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skill-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.skill-card:nth-child(4n + 2) { border-top-color: rgba(73, 201, 232, .42); }
.skill-card:nth-child(4n + 3) { border-top-color: rgba(242, 193, 79, .42); }
.skill-card:nth-child(4n + 4) { border-top-color: rgba(239, 118, 89, .42); }
.skill-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.skill-num { color: var(--green); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 800; }
.skill-categoria { color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 9px; text-transform: uppercase; }
.skill-card h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.15; }
.skill-resumo { min-height: 44px; margin: 0 0 17px; color: var(--text-2); font-size: 13px; }
.skill-quando { margin: 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.skill-quando b { display: block; margin-bottom: 4px; color: var(--text); font-size: 10px; text-transform: uppercase; }
.skill-detalhes { margin-top: 16px; border-top: 1px solid var(--line); }
.skill-detalhes summary { padding: 14px 0 0; color: var(--green-soft); cursor: pointer; font-size: 12px; font-weight: 800; }
.skill-comando { position: relative; margin-top: 14px; padding: 14px 78px 14px 0; border-top: 1px solid var(--line); }
.skill-comando > span { display: block; margin-bottom: 5px; color: var(--cyan); font-family: "JetBrains Mono", monospace; font-size: 9px; text-transform: uppercase; }
.skill-comando p { margin: 0; color: var(--text-2); font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.copiar-skill { position: absolute; top: 14px; right: 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: #151b17; color: var(--text-2); cursor: pointer; font-size: 9px; font-weight: 800; }
.copiar-skill:hover { border-color: rgba(48, 220, 104, .4); color: var(--text); }
.skills-instalar { margin-top: 44px; padding: 34px 0 0; border-top: 1px solid var(--line); }
.skills-instalar > div:first-child { max-width: 760px; margin-bottom: 25px; }
.skills-instalar h2 { margin: 7px 0 8px; font-size: 28px; }
.skills-instalar > div:first-child p { color: var(--text-2); }
.skills-instalar code { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: #111512; color: #dbf9e4; font-family: "JetBrains Mono", monospace; font-size: .86em; }
.skill-passo { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.skill-passo > span { color: var(--green); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 800; }
.skill-passo > p { margin: 0; color: var(--text-2); }
.skill-passo .skill-comando { margin: 0; padding-top: 0; border-top: 0; }
.skill-passo .skill-comando .copiar-skill { top: 0; }

/* Lesson reader */
.leitor-topo { min-height: 260px; position: relative; isolation: isolate; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); overflow: hidden; }
.leitor-topo::before { content: ""; position: absolute; inset: 0; z-index: -3; background: var(--cover) 70% center / cover no-repeat; filter: brightness(.56); }
.leitor-topo::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #050505 2%, rgba(5,5,5,.84) 46%, rgba(5,5,5,.18)), linear-gradient(0deg, #050505 0%, transparent 60%); }
.leitor-topo > div { padding: 44px clamp(18px, 7vw, 96px) 34px; }
.leitor-topo h1 { font-size: clamp(30px, 4vw, 54px); line-height: 1.05; margin: 0; max-width: 900px; }
.leitor-shell { max-width: 1480px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 72px) 110px; display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 780px); gap: clamp(36px, 6vw, 88px); align-items: start; }
.indice { position: sticky; top: calc(var(--topbar) + 20px); max-height: calc(100vh - var(--topbar) - 40px); overflow-y: auto; border-right: 1px solid var(--line); padding: 34px 24px 34px 0; }
.indice-titulo { color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.indice button { width: 100%; border: 0; border-left: 2px solid transparent; background: none; color: var(--text-3); padding: 10px 12px; text-align: left; font-size: 12px; cursor: pointer; }
.indice button:hover { color: var(--text-2); }
.indice button.ativo { color: var(--text); border-left-color: var(--green); background: rgba(48, 220, 104, .06); }
.indice button.ok::after { content: "✓"; float: right; color: var(--green); }
.indice-acoes { display: grid; gap: 8px; margin-top: 18px; }
.artigo { padding-top: 42px; min-width: 0; }
.artigo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--text-3); font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px; }
.artigo h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; margin-bottom: 24px; }
.artigo-conteudo { color: var(--text-2); font-size: 16px; line-height: 1.76; }
.artigo-conteudo p { margin-bottom: 18px; }
.artigo-conteudo h3 { color: var(--text); font-size: 20px; margin: 34px 0 12px; }
.artigo-conteudo ol, .artigo-conteudo ul { padding-left: 22px; margin-bottom: 20px; }
.artigo-conteudo li { margin-bottom: 9px; }
.artigo-conteudo a { color: var(--green-soft); }
.artigo-conteudo code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #111512; color: #dbf9e4; font-family: "JetBrains Mono", monospace; font-size: .86em; }
.escolha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.escolha-card { position: relative; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.escolha-card.recomendado { border-color: rgba(48, 220, 104, .42); background: rgba(48, 220, 104, .055); }
.escolha-card .selo { display: inline-block; margin-bottom: 12px; color: var(--green-soft); font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.escolha-card h3 { margin: 0 0 7px; font-size: 17px; }
.escolha-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; }
.escolha-card .botao { width: 100%; }
.caminho { margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.caminho[open] { border-color: var(--line-strong); }
.caminho summary { padding: 16px 18px; color: var(--text); font-weight: 800; cursor: pointer; }
.caminho summary::marker { color: var(--green); }
.caminho-corpo { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.caminho-corpo > :first-child { margin-top: 16px; }
.sinal-certo { margin: 22px 0; padding: 18px; border: 1px solid rgba(48, 220, 104, .3); border-radius: 8px; background: rgba(48, 220, 104, .07); color: #d8eee0; }
.sinal-certo b { display: block; margin-bottom: 6px; color: var(--green-soft); }
.passo-zero { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; margin: 14px 0; }
.passo-zero > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(48, 220, 104, .38); border-radius: 50%; color: var(--green-soft); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 800; }
.passo-zero p { margin: 3px 0 0; }
.proximo-produto { margin: 36px 0 10px; padding: 24px; border: 1px solid rgba(73, 201, 232, .3); border-radius: 8px; background: #0b1112; }
.proximo-produto h3 { margin: 8px 0 10px; font-size: 24px; }
.proximo-produto p { max-width: 62ch; margin-bottom: 18px; }
.proximo-produto .botao { width: 100%; }
.cod { position: relative; margin: 20px 0; padding: 20px 54px 20px 20px; overflow-x: auto; border: 1px solid rgba(73, 201, 232, .2); border-radius: 6px; background: #080c0a; color: #c9f7d7; font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.copiar { position: absolute; top: 10px; right: 10px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 5px 8px; background: #151b17; color: var(--text-2); font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; font-weight: 800; cursor: pointer; }
.copiar:hover { color: var(--text); border-color: rgba(48, 220, 104, .4); }
.nota { margin: 22px 0; padding: 16px 18px; border-left: 3px solid var(--green); background: rgba(48, 220, 104, .07); color: #d8eee0; }
.aviso { color: var(--text-3); font-size: 13px; }
.video-aula:empty { display: none; }
.video-aula video { display: block; width: 100%; max-height: 72vh; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 8px; background: #080a09; }
.travou { margin: 22px 0; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, .03); }
.travou > b { display: block; margin-bottom: 8px; color: var(--text); }
.travou p { margin-bottom: 8px; }
.travou p:last-child { margin-bottom: 0; }
.travou strong { color: var(--text); }
.midia-aula { margin: 28px 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.midia-aula img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #080a09; }
.midia-aula figcaption { padding: 10px 13px; color: var(--text-3); font-size: 11px; border-top: 1px solid var(--line); }
.artigo-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.artigo-nav button { min-height: 70px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text-2); padding: 12px 16px; cursor: pointer; text-align: left; }
.artigo-nav button:last-child { text-align: right; }
.artigo-nav button:hover { border-color: var(--line-strong); color: var(--text); }
.artigo-nav small { display: block; color: var(--text-3); font-size: 10px; margin-bottom: 4px; text-transform: uppercase; }

/* Utilities, support and forms */
.blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bloco { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.bloco.destaque { background: linear-gradient(135deg, rgba(48, 220, 104, .1), var(--surface)); border-color: rgba(48, 220, 104, .25); }
.bloco h2 { font-size: 20px; margin-bottom: 8px; }
.bloco p { color: var(--text-2); font-size: 14px; }
.bloco .botao { margin-top: 8px; }
.lista-download { display: grid; gap: 10px; }
.download-item { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.download-item > div { flex: 1; min-width: 0; }
.download-item b { display: block; margin-bottom: 3px; }
.download-item span { display: block; color: var(--text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.download-contextual { border-left: 3px solid rgba(48, 220, 104, .55); }
.faq { border-top: 1px solid var(--line); padding: 16px 0; }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { color: var(--text-2); margin: 10px 0 0; font-size: 14px; }
.formulario { display: grid; gap: 16px; }
.formulario label { color: var(--text-2); font-size: 13px; font-weight: 700; }
.formulario label input, .formulario label textarea, .formulario label select { margin-top: 7px; }
.formulario textarea { min-height: 90px; resize: vertical; }

.nav-mobile { display: none; }

@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; }
  .login-arte { position: absolute; inset: 0; min-height: 100vh; opacity: .55; }
  .login-painel { position: relative; z-index: 1; padding: 90px 24px 40px; border: 0; background: linear-gradient(90deg, rgba(5,5,5,.96), rgba(5,5,5,.82)); }
  .login-painel > .marca { top: 26px; }
  .grade-produtos, .modulos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills-cab { grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: 28px; }
  .leitor-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 720px) {
  :root { --topbar: 58px; }
  body { padding-bottom: 68px; }
  .topbar { padding: 0 16px; gap: 12px; }
  .marca b { font-size: 13px; }
  .nav-desktop, .progresso-topo, .busca-abrir { display: none; }
  .topbar-acoes { gap: 8px; }
  .nav-mobile { position: fixed; z-index: 60; inset: auto 0 0; height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px 5px; background: rgba(7, 9, 8, .98); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .nav-mobile button { display: grid; place-items: center; gap: 1px; border: 0; background: none; color: var(--text-3); font-size: 9px; font-weight: 700; cursor: pointer; }
  .nav-mobile button span { font-size: 18px; line-height: 1; }
  .nav-mobile button.ativo { color: var(--green-soft); }
  .hero { min-height: 550px; align-items: flex-end; }
  .hero::before { background-position: 64% center; }
  .hero::after { background: linear-gradient(90deg, rgba(5,5,5,.92), rgba(5,5,5,.2)), linear-gradient(0deg, #050505 0%, rgba(5,5,5,.75) 45%, transparent 82%); }
  .hero-conteudo { width: 100%; padding: 160px 18px 70px; }
  .hero h1 { font-size: 46px; }
  .hero p { font-size: 14px; }
  .hero-acoes .botao { flex: 1 1 auto; }
  .home-corpo { margin-top: -30px; padding-bottom: 40px; }
  .secao { margin-bottom: 34px; }
  .secao-cab { margin-inline: 18px; }
  .setas { display: none; }
  .fileira { grid-auto-columns: min(82vw, 340px); padding-inline: 18px; gap: 10px; }
  .pagina { padding: 34px 18px 54px; }
  .pagina-cab h1 { font-size: 40px; }
  .grade-produtos { display: grid; grid-template-columns: 1fr; }
  .produto-hero { min-height: 500px; }
  .produto-hero::before { background-position: 63% center; }
  .produto-hero::after { background: linear-gradient(90deg, rgba(5,5,5,.93), rgba(5,5,5,.18)), linear-gradient(0deg, #050505 0%, rgba(5,5,5,.72) 45%, transparent 85%); }
  .produto-hero-conteudo { padding: 110px 18px 48px; }
  .produto-hero h1 { font-size: 48px; }
  .produto-corpo { padding: 26px 18px 54px; }
  .produto-resumo, .blocos { grid-template-columns: 1fr; gap: 8px; }
  .modulos-grade { display: grid; grid-template-columns: 1fr; }
  .modulo-card { min-height: 240px; }
  .skills-cab { min-height: 0; display: block; padding-bottom: 34px; }
  .skills-cab h1 { font-size: 43px; }
  .skills-cab p { font-size: 14px; }
  .skills-visual { min-height: 260px; margin-top: 28px; }
  .skills-visual i { font-size: 8px; }
  .skill-seletor { display: block; padding: 30px 0; }
  .skill-objetivos { grid-template-columns: 1fr; margin-top: 18px; }
  .skills-barra { display: block; padding-top: 22px; }
  .skills-barra > span { display: block; margin: 13px 0 0; }
  .skills-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .skills-filtros button { flex: 0 0 auto; }
  .skills-grade { grid-template-columns: 1fr; }
  .skill-resumo { min-height: 0; }
  .skill-comando { padding-right: 0; padding-top: 48px; }
  .skill-comando .copiar-skill { top: 10px; right: auto; left: 0; }
  .skill-passo { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .skill-passo .skill-comando { padding-top: 42px; }
  .leitor-topo { min-height: 230px; }
  .leitor-topo > div { padding: 52px 18px 28px; }
  .leitor-shell { display: block; padding: 0 18px 54px; }
  .indice { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; overflow-x: auto; display: flex; gap: 8px; }
  .indice-titulo, .indice-acoes { display: none; }
  .indice button { flex: 0 0 auto; width: auto; max-width: 220px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .indice button.ativo { border-color: rgba(48, 220, 104, .45); }
  .artigo { padding-top: 30px; }
  .artigo h2 { font-size: 34px; }
  .artigo-conteudo { font-size: 15px; }
  .escolha-grade { grid-template-columns: 1fr; }
  .escolha-card { padding: 16px; }
  .caminho summary { padding: 14px 15px; }
  .caminho-corpo { padding: 0 15px 15px; }
  .artigo-nav { grid-template-columns: 1fr; }
  .artigo-nav button:last-child { text-align: left; }
  .download-item { align-items: flex-start; flex-direction: column; }
  .download-item .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Início em passo a passo (23/10/2026). Quem chega precisa ver numa olhada: em que passo está,
   o que fazer agora e onde baixar. Texto maior, porque boa parte do público tem mais de 50 anos. */
.casa { max-width: 920px; margin: 0 auto; padding: 44px clamp(18px, 5vw, 48px) 110px; }
.boas-vindas h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; margin: 10px 0 12px; }
.boas-vindas p { color: var(--text-2); font-size: 18px; max-width: 58ch; margin-bottom: 20px; }
.barra-passos { display: flex; gap: 6px; max-width: 420px; }
.barra-passos i { flex: 1; height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .13); }
.barra-passos i.ok { background: var(--green); }
.aviso-celular { margin: 26px 0 0; padding: 16px 18px; border: 1px solid rgba(242, 193, 79, .4); border-radius: 8px; background: rgba(242, 193, 79, .08); color: #f6e3b4; font-size: 16px; line-height: 1.55; }
.aviso-celular b { color: #fff; }
.artigo .aviso-celular { margin: 0 0 24px; }
.bloco-casa { margin-top: 44px; }
.bloco-casa > .secao, .bloco-casa .secao { margin: 18px 0 0; }
.bloco-casa .secao-cab, .bloco-casa .fileira { margin-inline: 0; padding-inline: 0; }
.bloco-casa-cab { margin-bottom: 16px; }
.bloco-casa-cab h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; margin-bottom: 4px; }
.bloco-casa-cab p { color: var(--text-3); font-size: 16px; margin: 0; }
.trilho { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passo { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.passo.agora { border-color: rgba(48, 220, 104, .55); background: linear-gradient(135deg, rgba(48, 220, 104, .1), var(--surface)); }
.passo-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--text-2); font-size: 18px; font-weight: 800; }
.passo.agora .passo-num { border-color: var(--green); color: var(--green-soft); }
.passo.feito .passo-num { border-color: var(--green); background: var(--green); color: var(--green-ink); }
.passo-rotulo { color: var(--text-3); font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.passo.agora .passo-rotulo { color: var(--green-soft); }
.passo h3 { font-size: 21px; line-height: 1.25; margin: 0 0 4px; }
.passo p { color: var(--text-2); font-size: 16px; margin: 0; }
.passo.feito h3, .passo.feito p { color: var(--text-3); }
.passo-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.passo:not(.agora) .passo-acoes .botao { min-height: 40px; font-size: 14px; }
.passo.agora .passo-acoes .botao { min-height: 52px; font-size: 16px; padding-inline: 22px; }
.link-discreto { display: inline-block; margin-top: 16px; padding: 6px 0; border: 0; background: none; color: var(--text-2); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.link-discreto:hover { color: var(--text); }
.lista-adicionais { display: grid; gap: 10px; }
.adicional { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; text-align: left; width: 100%; }
.adicional-botao { cursor: pointer; font: inherit; }
.adicional > div { flex: 1; min-width: 0; }
.adicional b { display: block; font-size: 18px; }
.adicional div span { display: block; color: var(--text-3); font-size: 15px; }
.ir-alem .bloco { margin-bottom: 14px; }
.ir-alem .bloco.destaque { background: var(--surface); border-color: var(--line); }
.download-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.download-item span { font-size: 14px; }
.download-item b { font-size: 18px; }
.fim-passo { display: grid; gap: 10px; margin-top: 40px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.fim-pergunta { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.botao.grande { min-height: 56px; font-size: 17px; width: 100%; }
.travou.em-foco { border-color: rgba(242, 193, 79, .6); background: rgba(242, 193, 79, .07); }
.travou-contato { margin-top: 12px !important; }
.travou-contato a { color: var(--green-soft); font-weight: 700; }
.pagina-cab h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 4px; }

/* Leitura: tamanhos mínimos maiores em toda a área. */
.nav-desktop button { font-size: 15px; }
.progresso-topo span { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); }
.artigo-conteudo { font-size: 18px; }
.passo-zero > span { font-size: 14px; }
.cod { font-size: 15px; }
.copiar { font-size: 13px; padding: 7px 10px; }
.indice-titulo { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.indice button { font-size: 15px; }
.produto-card p { font-size: 14px; }
.tag { font-size: 11px; }
.modulo-card p { font-size: 15px; }
.modulo-num, .modulo-meta { font-size: 12px; }
.secao-cab p, .bloco p, .faq p { font-size: 16px; }
.faq summary { font-size: 17px; }
.voltar { font-size: 16px; }
.leitor-topo .eyebrow { font-family: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.artigo-nav small { font-size: 12px; }
.midia-aula figcaption { font-size: 14px; }

@media (max-width: 720px) {
  .nav-mobile { grid-template-columns: repeat(4, 1fr); }
  .nav-mobile button { font-size: 12px; }
  .casa { padding-top: 28px; }
  .boas-vindas p { font-size: 17px; }
  .passo { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .passo-num { width: 38px; height: 38px; font-size: 16px; }
  .passo-acoes .botao { flex: 1 1 100%; }
  .adicional { flex-direction: column; align-items: stretch; }
  .indice { display: none; }
  .artigo-conteudo { font-size: 17px; }
  .leitor-topo { min-height: 0; }
  .leitor-topo > div { padding: 28px 18px 22px; }
  .leitor-topo h1 { font-size: 30px; }
}
@media (max-width: 720px) {
  .passo:not(.agora) .passo-acoes .botao { flex: 0 0 auto; }
}