/* ==========================================================
   COMECE AQUI — trilha de boas-vindas, por módulos.
   O aluno chega perdido entre duas plataformas; esta tela
   existe para ele ter um lugar só e um caminho claro.
   ========================================================== */

.cq-faixa{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:16px 18px 14px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.cq-faixa em{display:block;font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.cq-faixa b{font-family:var(--display);font-size:21px;font-weight:800;
  letter-spacing:-.02em;color:var(--texto)}
.cq-trilho{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--superficie3)}
.cq-trilho i{display:block;height:100%;background:var(--ok);transition:width .4s ease}

/* o módulo é um capítulo: número grande, título, e a lista embaixo */
.cq-mod{margin-top:24px}
.cq-mod header{display:flex;align-items:flex-start;gap:13px}
.cq-mod header h2{font-family:var(--display);font-size:18px;font-weight:700;margin:0;
  letter-spacing:-.01em;line-height:1.3}
.cq-mod header p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--suave)}
.cq-n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--marca);color:var(--marca-texto);font-family:var(--display);
  font-size:14px;font-weight:800}

.cq-lista{list-style:none;margin:13px 0 0;padding:0;
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}

.cq-item{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--linha);
  transition:background .15s ease}
.cq-item:last-child{border-bottom:0}
.cq-item:hover{background:var(--superficie2)}

.cq-mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;border:1px solid var(--linha-forte);color:var(--marca);
  background:var(--superficie)}
.cq-visto .cq-mk{background:var(--ok);border-color:var(--ok);color:#fff}

.cq-txt{min-width:0}
.cq-tit{margin:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--texto)}
.cq-desc{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--suave)}
/* assistido recua: o aluno procura aqui o que ainda falta */
.cq-visto .cq-tit{color:var(--suave);font-weight:500}
.cq-dur{font-size:11.5px;color:var(--suave);white-space:nowrap}
.cq-ok{font-size:12.5px;font-weight:600;color:var(--ok)}

/* player sempre 16:9, inclusive no celular */
.cq-video{margin-top:14px;border-radius:12px;overflow:hidden;background:#000;
  aspect-ratio:16/9}
.cq-video iframe{width:100%;height:100%;border:0;display:block}

/* ---- a chamada no Início, enquanto a trilha não acaba ---- */
/* Convite, não concorrente: o único azul cheio da tela continua sendo o
   botão "Abrir atividade". Uma tela, uma ênfase. */
.cq-chamada{width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  cursor:pointer;font:inherit;margin:0 0 16px;
  background:var(--marca-fraca);color:var(--ouro);
  border:1px solid transparent;border-radius:14px;padding:14px 16px;
  transition:border-color .15s ease}
.cq-chamada:hover{border-color:var(--marca)}
.cq-chamada b{display:block;font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:-.01em}
.cq-chamada small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;opacity:.85}
.cq-ch-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--superficie);color:var(--marca)}
.cq-ch-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cq-ch-seta{margin-left:auto;font-size:24px;line-height:1;opacity:.85}

@media (max-width:560px){
  .cq-faixa{gap:18px}
  .cq-item{grid-template-columns:26px 1fr;row-gap:4px}
  .cq-dur{grid-column:2;justify-self:start}
}

@media (prefers-reduced-motion:reduce){ .cq-chamada:hover{transform:none} }

/* O grupo do WhatsApp não é destino, é ação de uma vez só: mora aqui,
   no primeiro dia do aluno, e não gasta um lugar no menu. */
.cq-grupo{display:flex;align-items:center;gap:13px;margin-top:14px;text-decoration:none;
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  padding:13px 15px;transition:border-color .15s ease}
.cq-grupo:hover{border-color:var(--ok)}
.cq-grupo b{display:block;font-family:var(--display);font-size:14.5px;font-weight:700;
  color:var(--texto);letter-spacing:-.01em}
.cq-grupo small{display:block;margin-top:1px;font-size:12.5px;color:var(--suave)}
.cq-grupo > div{flex:1;min-width:0}
.cq-gr-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--ok-fraco);color:var(--ok)}
.cq-gr-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}