/* ===========================================================
   CURSO DE JAVASCRIPT — gustavoweb
   gustavoweb.com

   Identidade visual. Para trocar a cor da marca, mude só as
   quatro linhas --brand abaixo. Todo o site se ajusta sozinho.
   =========================================================== */
:root{
  --brand:#00D4FF;          /* <<< CIANO DA MARCA (do logo) */
  --brand-soft:#6FE4FF;     /* versão clara — links sobre fundo escuro */
  --brand-glow:rgba(0,212,255,.14);
  --brand-ink:#007A99;      /* versão escura — uso sobre fundo BRANCO (palco) */

  --bg:#0E1220;
  --surface:#171C2F;
  --surface-2:#1F2539;
  --line:#2C3350;
  --ink:#E9EDF7;
  --muted:#8E97B4;
  --green:#3DDC97;
  --amber:#FFC857;
  --red:#FF6B7D;

  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 90px;
}
.wrap{max-width:780px;margin:0 auto}
a{color:var(--brand-soft);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------- ícones ----------
   SVG inline que herda cor e tamanho do texto ao lado.
   .ico-cheio = ícone sólido (ex.: o play do botão Rodar). */
.ico{
  width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.13em;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-cheio{fill:currentColor;stroke:none}

/* marcadores ✓ / ✗ usados no texto das observações */
.marca{display:inline-flex;vertical-align:-.13em}
.marca.ok{color:var(--green)}
.marca.nok{color:var(--red)}
.marca .ico{stroke-width:2.6}

/* títulos com ícone à esquerda */
h2.com-ico{display:flex;align-items:center;gap:10px}
h2.com-ico .ico{color:var(--amber);stroke-width:1.7}

/* ---------- topo ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.topbar .logo{display:flex;align-items:center;gap:10px}
.topbar .logo img{height:26px;width:auto;display:block}
.topbar .logo .fallback{
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
}
.topbar .logo .fallback span{color:var(--brand)}
.topbar nav{font-family:var(--mono);font-size:.8rem;color:var(--muted);
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 16px}
.topbar nav a{white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.topbar nav a .ico{width:.85em;height:.85em}
@media(max-width:420px){
  .topbar .logo img{height:22px}
  .topbar nav{font-size:.74rem}
}

/* ---------- hero ---------- */
header.hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
}
h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,5.6vw,3.2rem);line-height:1.04;letter-spacing:-.025em;
}
h1 em{font-style:normal;color:var(--brand)}
.caret{
  display:inline-block;width:.5ch;height:.92em;background:var(--green);
  vertical-align:-.1em;margin-left:.12ch;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.lead{color:var(--muted);font-size:1.04rem;margin-top:18px;max-width:58ch}
.lead b{color:var(--ink);font-weight:600}

/* ---------- grade de aulas (index) ---------- */
.grade{display:grid;gap:12px;margin-top:34px}
@media(min-width:640px){.grade{grid-template-columns:1fr 1fr}}
.aula-card{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;color:var(--ink);text-decoration:none;
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
.aula-card:hover{
  border-color:var(--brand);background:var(--surface-2);
  transform:translateY(-2px);text-decoration:none;
}
.aula-card .num{
  font-family:var(--mono);font-size:.76rem;color:var(--brand);letter-spacing:.08em;
}
.aula-card h3{font-family:var(--display);font-weight:600;font-size:1.06rem;margin:6px 0 4px}
.aula-card p{color:var(--muted);font-size:.88rem;line-height:1.45}
.aula-card.final{border-color:var(--brand);background:linear-gradient(160deg,var(--brand-glow),transparent 70%),var(--surface)}
@media(min-width:640px){.aula-card.final{grid-column:1/-1}}

/* ---------- corpo da aula ---------- */
.meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;
  font-family:var(--mono);font-size:.75rem;
}
.chip{
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--muted);padding:5px 11px;border-radius:99px;
}
.chip.on{border-color:var(--brand);color:var(--brand-soft)}

.step{margin-top:52px}
.step-tag{font-family:var(--mono);font-size:.79rem;color:var(--green);margin-bottom:8px}
h2{font-family:var(--display);font-weight:600;font-size:1.52rem;letter-spacing:-.015em;margin-bottom:10px}
h3.sub{font-family:var(--display);font-weight:600;font-size:1.1rem;margin:30px 0 8px}
.desc{color:var(--muted);margin-bottom:18px}
.desc b{color:var(--ink)}
code,.desc code{
  font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  color:var(--amber);padding:.12em .42em;border-radius:5px;
}
.teoria{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:24px;
}
.teoria p{margin-bottom:10px}
.teoria p:last-child{margin-bottom:0}
.teoria ul{margin:8px 0 10px 20px;color:var(--muted)}
.teoria li{margin-bottom:5px}
.teoria li b{color:var(--ink)}
pre.demo{
  font-family:var(--mono);font-size:.86rem;line-height:1.6;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:14px 16px;margin:12px 0;overflow-x:auto;color:var(--ink);
}
pre.demo .cmt{color:var(--muted)}

/* ---------- card de exercício ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#FF5F56}.dot.y{background:#FFBD2E}.dot.g{background:#27C93F}
.card-name{font-family:var(--mono);font-size:.77rem;color:var(--muted);margin-left:6px}
.card-badge{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--brand);letter-spacing:.06em}
textarea.code{
  width:100%;display:block;border:0;outline:0;resize:vertical;background:transparent;
  color:var(--ink);font-family:var(--mono);font-size:.9rem;line-height:1.65;
  padding:18px;min-height:110px;tab-size:2;
}
textarea.code:focus{background:var(--brand-glow)}
.card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
button.run{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.92rem;color:#0E1220;
  background:var(--green);border:0;border-radius:9px;padding:9px 18px;cursor:pointer;
  transition:filter .15s ease,transform .08s ease;
}
button.run .ico{width:.8em;height:.8em;vertical-align:0}
button.run:hover{filter:brightness(1.08)}
button.run:active{transform:translateY(1px)}
button.ghost{
  font-family:var(--body);font-size:.85rem;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;cursor:pointer;transition:color .15s,border-color .15s;
}
button.ghost:hover{color:var(--ink);border-color:var(--brand)}
.saved{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* ---------- saída ---------- */
.out{font-family:var(--mono);font-size:.85rem;padding:0 16px;max-height:0;overflow:hidden;
  transition:max-height .25s ease,padding .25s ease;border-top:1px solid transparent}
.out.show{max-height:420px;overflow:auto;padding:14px 16px;border-top:1px solid var(--line)}
.out .line{padding:2px 0;white-space:pre-wrap;word-break:break-word}
.out .line::before{content:"› ";color:var(--green)}
.out .err{color:var(--red)}
.out .err::before{content:"✗ ";color:var(--red)}
.out .empty{color:var(--muted)}
.out .empty::before{content:""}

/* ---------- palco (exercícios de DOM) ---------- */
.palco-label{
  font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;padding:12px 16px 0;
}
.palco{
  background:#fff;color:#111;border-top:1px solid var(--line);
  margin-top:8px;padding:18px;font-family:var(--body);
}
.palco *{box-sizing:border-box}
.palco button{
  font-family:var(--body);font-size:.9rem;padding:8px 14px;border-radius:8px;
  border:0;background:var(--brand-ink);color:#fff;cursor:pointer;
}
.palco input,.palco textarea{
  font-family:var(--body);font-size:.9rem;padding:8px 10px;
  border:1px solid #d5d9e4;border-radius:8px;width:100%;color:#111;background:#fff;
}
.palco h4{font-family:var(--display);margin-bottom:8px}

/* ---------- dica / observação ---------- */
.dica{margin-top:14px}
.dica summary{
  cursor:pointer;font-family:var(--mono);font-size:.82rem;color:var(--brand-soft);
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  border:1px dashed var(--line);border-radius:8px;padding:7px 13px;
}
.dica summary::-webkit-details-marker{display:none}
.dica summary:hover{border-color:var(--brand)}
.dica[open] summary{border-style:solid;border-color:var(--brand);margin-bottom:10px}
.dica .corpo{
  background:var(--brand-glow);border-left:3px solid var(--brand);
  border-radius:0 8px 8px 0;padding:12px 16px;font-size:.92rem;
}
.obs{
  margin-top:14px;border-left:3px solid var(--amber);background:rgba(255,200,87,.06);
  padding:12px 16px;border-radius:0 8px 8px 0;font-size:.92rem;
}
.obs b{color:var(--amber)}
.perigo{border-left-color:var(--red);background:rgba(255,107,125,.07)}
.perigo b{color:var(--red)}

/* ---------- navegação entre aulas ---------- */
.navaulas{display:flex;justify-content:space-between;gap:12px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.navaulas a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.85rem;border:1px solid var(--line);
  border-radius:9px;padding:11px 16px;color:var(--ink);
}
.navaulas a .ico{width:.95em;height:.95em}
.navaulas a:hover{border-color:var(--brand);text-decoration:none}
.navaulas .vazio{opacity:.3;pointer-events:none}

footer{margin-top:64px;padding-top:30px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.86rem;text-align:center}
footer p{margin-top:6px}
footer b{color:var(--brand);font-family:var(--display);font-weight:700}
footer a{color:var(--muted)}
footer a:hover{color:var(--brand-soft)}
.rodape-marca{display:inline-block;margin-bottom:12px;opacity:.85;transition:opacity .16s ease}
.rodape-marca:hover{opacity:1}
.rodape-marca img{height:22px;width:auto;display:block}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}