/* =====================================================================
   Missão: Fiscal do Futuro — CAMADA VISUAL DO ESTUDANTE
   ---------------------------------------------------------------------
   Este arquivo NÃO contém regras de negócio. Ele é carregado apenas por
   src/layout_aluno.php nas páginas entrar.php, aluno.php e missao1-4.php.
   A página inicial e a área do professor continuam usando somente app.css.

   Direção visual: adequada a estudantes por volta de 12 anos — amigável,
   clara e colorida, sem aspecto infantilizado. Botões e alvos de toque são
   grandes; textos têm boa leitura; progresso e conquistas ficam evidentes.
   ===================================================================== */

.pagina-aluno {
  --kid-ink: #163c3a;
  --kid-ink-2: #275b57;
  --kid-muted: #3F5752;
  --kid-bg: #f6fbf8;
  --kid-card: #ffffff;
  --kid-line: #d8e8e2;
  --kid-green: #23856f;
  --kid-green-dark: #176555;
  --kid-mint: #e7f7f0;
  --kid-blue: #3c82bd;
  --kid-blue-soft: #eaf5ff;
  --kid-gold: #efa62f;
  --kid-gold-soft: #fff3d7;
  --kid-coral: #df6d55;
  --kid-coral-soft: #fff0ec;
  --kid-violet: #7667b4;
  --kid-shadow: 0 12px 34px rgba(28, 78, 69, .10);
  --kid-shadow-small: 0 6px 18px rgba(28, 78, 69, .08);
  --kid-radius: 22px;
  --kid-radius-small: 14px;

  min-height: 100vh;
  background:
    radial-gradient(circle at 6% 4%, rgba(239,166,47,.16), transparent 22rem),
    radial-gradient(circle at 94% 12%, rgba(60,130,189,.12), transparent 24rem),
    linear-gradient(180deg, #fbfefc 0%, var(--kid-bg) 58%, #eff8f3 100%);
  color: var(--kid-ink);
}

/* Cabeçalho exclusivo do estudante ---------------------------------- */
.pagina-aluno .topo--aluno {
  position: relative;
  z-index: 20;
  border: 0;
  background: linear-gradient(115deg, #164a43, #237565);
  box-shadow: 0 5px 18px rgba(20, 70, 62, .18);
}

.pagina-aluno .topo--aluno .faixa {
  width: min(100% - 1.5rem, 76rem);
  min-height: 4.7rem;
  margin-inline: auto;
  padding: .72rem 0;
}

.pagina-aluno .topo--aluno .marca {
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: #fff;
  text-decoration: none;
}

.pagina-aluno .topo--aluno .marca-logo {
  width: 3.15rem;
  height: 3.15rem;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.16));
}

.pagina-aluno .marca-textos { display: grid; gap: .1rem; }
.pagina-aluno .marca-nome {
  font: 800 1.05rem/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
}
.pagina-aluno .marca-temas {
  font-size: .68rem;
  color: rgba(255,255,255,.74);
}

.pagina-aluno .nav--aluno {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.pagina-aluno .nav--aluno .nav-quem {
  max-width: 14rem;
  overflow: hidden;
  padding: .38rem .7rem;
  color: rgba(255,255,255,.86);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagina-aluno .nav--aluno a {
  padding: .45rem .72rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}
.pagina-aluno .nav--aluno a:hover,
.pagina-aluno .nav--aluno a:focus-visible { background: rgba(255,255,255,.16); }

/* Área principal ----------------------------------------------------- */
.pagina-aluno .folha--aluno {
  width: min(100% - 1.5rem, 70rem);
  max-width: none;
  min-height: calc(100vh - 8rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.8rem) 0 4rem;
}

.pagina-aluno h1,
.pagina-aluno h2,
.pagina-aluno h3 {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--kid-ink);
}
.pagina-aluno h1 {
  max-width: 55rem;
  margin: 0 0 .65rem;
  font-size: clamp(2rem, 5.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 850;
}
.pagina-aluno h2 {
  margin-top: 2rem;
  font-size: clamp(1.3rem, 3.1vw, 1.75rem);
  font-weight: 800;
}
.pagina-aluno h3 { font-weight: 780; }

.pagina-aluno .sub,
.pagina-aluno .missao-subtitulo {
  max-width: 56rem;
  margin: 0 0 1.5rem;
  color: var(--kid-muted);
  font-size: clamp(.98rem, 2vw, 1.08rem);
  line-height: 1.68;
  text-align: left;
}

.pagina-aluno .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .7rem;
  padding: .36rem .62rem;
  border-radius: 999px;
  background: var(--kid-mint);
  color: var(--kid-green-dark);
  font: 750 .72rem/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* Cartões ------------------------------------------------------------ */
.pagina-aluno .cartao {
  border: 1px solid rgba(24, 93, 80, .11);
  border-radius: var(--kid-radius);
  background: rgba(255,255,255,.97);
  box-shadow: var(--kid-shadow-small);
}

.pagina-aluno .cartao--missao {
  max-width: 60rem;
  padding: clamp(1.15rem, 3.5vw, 2rem);
  border-top: 6px solid var(--kid-gold);
  text-align: left;
}
.pagina-aluno .cartao--missao h2 { margin: .1rem 0 .8rem; }
.pagina-aluno .cartao--missao p { line-height: 1.65; }

.pagina-aluno .aviso {
  border: 0;
  border-left: 5px solid var(--kid-blue);
  border-radius: var(--kid-radius-small);
  padding: .92rem 1rem;
  background: var(--kid-blue-soft);
  color: var(--kid-ink);
  line-height: 1.55;
}
.pagina-aluno .aviso--ok { border-left-color: var(--kid-green); background: var(--kid-mint); }
.pagina-aluno .aviso--nota { border-left-color: var(--kid-gold); background: var(--kid-gold-soft); }
.pagina-aluno .aviso--erro { border-left-color: var(--kid-coral); background: var(--kid-coral-soft); }

/* Botões — alvo confortável para mouse/touch ------------------------- */
.pagina-aluno .btn {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .74rem 1.15rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--kid-green-dark), var(--kid-green));
  box-shadow: 0 7px 16px rgba(28, 107, 89, .17);
  color: #fff;
  font: 760 .95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pagina-aluno .btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--kid-green-dark), var(--kid-green));
  box-shadow: 0 9px 20px rgba(28, 107, 89, .20);
  filter: brightness(1.03);
}
.pagina-aluno .btn--secundario {
  border: 1.5px solid var(--kid-line);
  background: #fff;
  box-shadow: none;
  color: var(--kid-ink-2);
}
.pagina-aluno .btn--secundario:hover { background: #f4faf7; }
.pagina-aluno .btn--mini { min-height: 2.55rem; padding: .55rem .8rem; }
.pagina-aluno .acoes { gap: .7rem; align-items: center; }

/* Entrada do estudante ---------------------------------------------- */
.pagina-aluno .folha--aluno > form.centralizar {
  max-width: 32rem;
  margin: 1.6rem auto 0;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px solid rgba(24,93,80,.11);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--kid-shadow);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
}
.pagina-aluno .folha--aluno > form.centralizar::before {
  content: "🔐";
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  place-items: center;
  border-radius: 18px;
  background: var(--kid-gold-soft);
  font-size: 1.6rem;
}
.pagina-aluno .folha--aluno > form.centralizar label {
  color: var(--kid-ink);
  font-size: .9rem;
  font-weight: 760;
}
.pagina-aluno .codigo-entrada {
  min-height: 3.35rem;
  border: 2px solid var(--kid-line);
  border-radius: 14px;
  background: #fbfefc;
  color: var(--kid-ink);
  font-size: 1.2rem;
}
.pagina-aluno .codigo-entrada:focus {
  border-color: var(--kid-gold);
  box-shadow: 0 0 0 4px rgba(239,166,47,.14);
}
.pagina-aluno .folha--aluno > form.centralizar .centralizar {
  margin-top: 1rem;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

/* Avatar ------------------------------------------------------------- */
.pagina-aluno .boneco-editor {
  max-width: 64rem;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(1rem, 3vw, 2rem);
  text-align: left;
}
.pagina-aluno .boneco-editor-previa {
  top: 1rem;
  padding: 1rem;
  border-radius: 22px;
  background: linear-gradient(155deg, var(--kid-blue-soft), #fff 72%);
}
.pagina-aluno .boneco-previa {
  width: clamp(10rem, 24vw, 14rem);
  height: clamp(10rem, 24vw, 14rem);
  border: 0;
  border-radius: 26px;
  background: transparent;
}
.pagina-aluno .boneco-editor-campos > label {
  margin-top: 1.2rem;
  color: var(--kid-ink);
  font-weight: 760;
}
.pagina-aluno .cores { gap: .6rem; }
.pagina-aluno .cor-opcao,
.pagina-aluno .cor-opcao--texto {
  min-width: 5.6rem;
  padding: .65rem .55rem;
  border: 2px solid var(--kid-line);
  border-radius: 14px;
  background: #fff;
}
.pagina-aluno .cor-opcao:has(input:checked),
.pagina-aluno .cor-opcao--texto:has(input:checked) {
  border-color: var(--kid-gold);
  background: var(--kid-gold-soft);
  box-shadow: 0 0 0 3px rgba(239,166,47,.12);
}
.pagina-aluno .cor-amostra { width: 2rem; height: 2rem; }
.pagina-aluno .cor-rotulo { color: var(--kid-muted); font-size: .72rem; }

/* Painel / cards das missões ---------------------------------------- */
.pagina-aluno .avatar-mini {
  width: 6.4rem;
  height: 6.4rem;
  padding: .45rem;
  border: 3px solid #fff;
  border-radius: 24px;
  background: linear-gradient(155deg, var(--kid-mint), #fff);
  box-shadow: var(--kid-shadow-small);
}
.pagina-aluno .grade { gap: 1rem; }
.pagina-aluno .grade > .cartao {
  position: relative;
  overflow: hidden;
  min-height: 14rem;
  padding: 1.3rem;
  text-align: left;
}
.pagina-aluno .grade > .cartao::after {
  content: "";
  position: absolute;
  right: -2.7rem;
  bottom: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: rgba(35,133,111,.08);
  pointer-events: none;
}
.pagina-aluno .grade > .cartao:nth-child(2)::after { background: rgba(60,130,189,.09); }
.pagina-aluno .grade > .cartao:nth-child(3)::after { background: rgba(118,103,180,.08); }
.pagina-aluno .grade > .cartao:nth-child(4)::after { background: rgba(239,166,47,.11); }
.pagina-aluno .grade > .cartao .sub { text-align: left; }

.pagina-aluno .selo {
  padding: .45rem .66rem;
  border: 0;
  border-radius: 999px;
  font-weight: 760;
}
.pagina-aluno .selo--ok { background: var(--kid-mint); color: var(--kid-green-dark); }
.pagina-aluno .selo--anda { background: var(--kid-gold-soft); color: #865914; }
.pagina-aluno .selo--nao { background: #eef3f1; color: #6b7d78; }
.pagina-aluno .conquista-mini--badge {
  position: relative;
  z-index: 1;
  padding: .75rem .8rem;
  border-radius: 14px;
  background: #eef9f4;
}

/* Progresso ---------------------------------------------------------- */
.pagina-aluno .missao-progresso {
  max-width: 60rem;
  margin: 1rem 0 1.45rem;
  padding: .9rem 1rem .8rem;
  border: 1px solid rgba(24,93,80,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--kid-shadow-small);
}
.pagina-aluno .barra-progresso {
  height: .9rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e7efeb;
}
.pagina-aluno .barra-progresso-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kid-gold), #f7c454);
  box-shadow: 0 0 10px rgba(239,166,47,.25);
}
.pagina-aluno .missao-progresso-texto {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .6rem;
  color: var(--kid-muted);
  font-size: .82rem;
}
.pagina-aluno .missao-progresso-texto strong { color: var(--kid-ink); }

/* Conteúdo conceitual ------------------------------------------------ */
.pagina-aluno .grade--tributos,
.pagina-aluno .grade--pistas { gap: .8rem; }
.pagina-aluno .mini-cartao,
.pagina-aluno .pista-fiscal {
  position: relative;
  border: 1px solid var(--kid-line);
  border-radius: 18px;
  background: #fbfefc;
  box-shadow: none;
}
.pagina-aluno .mini-cartao {
  padding: 1rem 1rem 1rem 3.65rem;
}
.pagina-aluno .mini-cartao-numero,
.pagina-aluno .pista-numero {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  background: var(--kid-green);
  color: #fff;
  font-weight: 800;
}
.pagina-aluno .mini-cartao-numero {
  position: absolute;
  left: 1rem;
  top: 1rem;
}
.pagina-aluno .mini-cartao p { color: var(--kid-muted); font-size: .92rem; }
.pagina-aluno .pista-fiscal--destaque {
  border: 2px solid var(--kid-gold);
  background: #fffaf0;
}

/* Nota fiscal -------------------------------------------------------- */
.pagina-aluno .nota-fiscal {
  max-width: 35rem;
  padding: 1.3rem;
  border: 1px dashed #b7c7c1;
  border-radius: 10px;
  background: #fffef8;
  box-shadow: 0 14px 28px rgba(20,70,62,.11);
}
.pagina-aluno .nota-tributos {
  border: 2px solid var(--kid-gold);
  border-radius: 10px;
  background: var(--kid-gold-soft);
}
.pagina-aluno .passos-nota,
.pagina-aluno .passos-detetive,
.pagina-aluno .protocolo-decisao {
  display: grid;
  gap: .55rem;
}
.pagina-aluno .passos-nota li,
.pagina-aluno .passos-detetive li,
.pagina-aluno .protocolo-decisao li {
  border-radius: 14px;
  background: #fff;
}

/* Quiz --------------------------------------------------------------- */
.pagina-aluno .quiz-questao {
  margin-bottom: 1rem;
  padding: 1.1rem;
  border: 1px solid var(--kid-line);
  border-radius: 18px;
  background: #fbfefc;
}
.pagina-aluno .quiz-questao legend {
  max-width: calc(100% - .5rem);
  padding: 0 .4rem;
  color: var(--kid-ink);
  font-size: 1.02rem;
  font-weight: 760;
}
.pagina-aluno .quiz-questao legend span {
  background: var(--kid-green);
  color: #fff;
}
.pagina-aluno .quiz-opcao {
  min-height: 3.35rem;
  align-items: center;
  padding: .8rem .9rem;
  border: 2px solid #e3ece8;
  border-radius: 14px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pagina-aluno .quiz-opcao:hover { transform: translateX(2px); border-color: #bad8cd; }
.pagina-aluno .quiz-opcao:has(input:checked) {
  border-color: var(--kid-gold);
  background: var(--kid-gold-soft);
  box-shadow: 0 0 0 3px rgba(239,166,47,.10);
}
.pagina-aluno .quiz-opcao input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--kid-gold);
}

/* Missões 2, 3 e 4 — mantém a lógica, só suaviza a apresentação ----- */
.pagina-aluno .tutorial-dados section,
.pagina-aluno .comparacao-exemplo,
.pagina-aluno .pergunta-investigacao,
.pagina-aluno .dica-revelavel,
.pagina-aluno .conteudo-extra,
.pagina-aluno .painel-decisao,
.pagina-aluno .quadro-padroes,
.pagina-aluno .treinamento-padroes {
  border-radius: 16px;
}
.pagina-aluno .comparacao-exemplo { background: #fffaf0; }
.pagina-aluno .pergunta-investigacao { background: var(--kid-mint); }
.pagina-aluno .dica-revelavel { background: #fff; }

/* Resultados e badges ------------------------------------------------ */
.pagina-aluno .cartao--conquista,
.pagina-aluno .conquista-final {
  border-top-color: var(--kid-green);
  background:
    radial-gradient(circle at 50% 0, rgba(239,166,47,.18), transparent 15rem),
    #fff;
  text-align: center;
}
.pagina-aluno .badge-fiscal-iniciante,
.pagina-aluno .badge-detetive--grande,
.pagina-aluno .badge-missao--grande {
  filter: drop-shadow(0 8px 15px rgba(20,70,62,.12));
}
.pagina-aluno .resultado-percentual {
  border-color: var(--kid-gold);
  box-shadow: 0 0 0 7px var(--kid-gold-soft), var(--kid-shadow-small);
}
.pagina-aluno .revisao-item {
  border-radius: 14px;
  background: #fff;
}

/* Rodapé ------------------------------------------------------------- */
.pagina-aluno .rodape--aluno {
  border-top: 1px solid var(--kid-line);
  background: rgba(255,255,255,.68);
  color: var(--kid-muted);
}

/* Responsividade ----------------------------------------------------- */
@media (max-width: 48rem) {
  .pagina-aluno .topo--aluno .faixa {
    align-items: flex-start;
    gap: .7rem;
  }
  .pagina-aluno .marca-temas { display: none; }
  .pagina-aluno .nav--aluno .nav-quem { display: none; }
  .pagina-aluno .folha--aluno { width: min(100% - 1rem, 70rem); }
  .pagina-aluno .acoes .btn { flex: 1 1 10rem; }
  .pagina-aluno .boneco-editor-previa { position: static; width: 100%; }
  .pagina-aluno .boneco-previa { margin-inline: auto; }
  .pagina-aluno .missao-progresso-texto { flex-wrap: wrap; }
}

@media (max-width: 30rem) {
  .pagina-aluno h1 { font-size: 2rem; }
  .pagina-aluno .topo--aluno .marca-logo { width: 2.7rem; height: 2.7rem; }
  .pagina-aluno .marca-nome { font-size: .93rem; }
  .pagina-aluno .nav--aluno a { padding: .42rem .58rem; font-size: .78rem; }
  .pagina-aluno .cartao--missao { border-radius: 18px; }
  .pagina-aluno .quiz-questao { padding: .85rem; }
}

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


/* =====================================================================
   CÓDIGO DO AGENTE + MASCOTES DO FISCAL DO FUTURO
   ===================================================================== */



/* =====================================================================
   CÓDIGO DO AGENTE — POPUP / MODAL DE ENTRADA
   ===================================================================== */

.pagina-aluno .regra-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(12, 39, 35, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.pagina-aluno .regra-modal {
  width: min(94vw, 58rem);
  max-height: min(90vh, 48rem);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 6%, rgba(239,166,47,.16), transparent 12rem),
    #fff;
  box-shadow:
    0 30px 80px rgba(5, 25, 21, .38),
    0 0 0 6px rgba(255,255,255,.08);
  animation: regraModalEntrar .28s ease-out;
}

@keyframes regraModalEntrar {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pagina-aluno .regra-modal__header {
  display: grid;
  grid-template-columns: 4.2rem minmax(0,1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.25rem 1rem;
  border-bottom: 1px solid var(--kid-line);
  background:
    linear-gradient(135deg, rgba(231,247,240,.95), rgba(255,255,255,.98));
}

.pagina-aluno .regra-modal__seal {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--kid-green-dark), var(--kid-green));
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: .06em;
  box-shadow: 0 8px 18px rgba(24, 92, 78, .18);
}

.pagina-aluno .regra-modal__eyebrow {
  display: inline-block;
  margin-bottom: .25rem;
  color: #9B711A;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.pagina-aluno .regra-modal__header h1 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.2rem);
  line-height: 1.08;
}

.pagina-aluno .regra-modal__header p {
  margin: .35rem 0 0;
  color: var(--kid-muted);
  font-size: .84rem;
  line-height: 1.45;
}

.pagina-aluno .regra-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .7rem;
  padding: 1rem 1.25rem;
}

.pagina-aluno .regra-modal__item {
  display: grid;
  grid-template-columns: 2.9rem minmax(0,1fr);
  gap: .65rem;
  align-items: start;
  min-height: 6.1rem;
  padding: .78rem;
  border: 1px solid #DDE9E3;
  border-radius: 16px;
  background: #FBFEFC;
}

.pagina-aluno .regra-modal__item:nth-child(2) { background: #FFF9EA; }
.pagina-aluno .regra-modal__item:nth-child(3) { background: #F3F0FF; }
.pagina-aluno .regra-modal__item:nth-child(4) { background: #EEF8FF; }
.pagina-aluno .regra-modal__item:nth-child(5) { background: #FFF4EF; }
.pagina-aluno .regra-modal__item:nth-child(6) { background: #EEF9F4; }

.pagina-aluno .regra-modal__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 13px;
  background: #fff;
  font-size: 1.35rem;
  box-shadow: 0 3px 9px rgba(24,72,63,.08);
}

.pagina-aluno .regra-modal__item strong {
  display: block;
  margin-top: .05rem;
  color: var(--kid-ink);
  font-size: .82rem;
}

.pagina-aluno .regra-modal__item p {
  margin: .22rem 0 0;
  color: var(--kid-muted);
  font-size: .69rem;
  line-height: 1.4;
}

.pagina-aluno .regra-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--kid-line);
  background: #F8FBF9;
}

.pagina-aluno .regra-modal__ready {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.pagina-aluno .regra-modal__ready > span {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  background: var(--kid-gold-soft);
  font-size: 1.2rem;
}

.pagina-aluno .regra-modal__ready strong {
  display: block;
  color: var(--kid-ink);
  font-size: .78rem;
}

.pagina-aluno .regra-modal__ready small {
  display: block;
  margin-top: .15rem;
  color: var(--kid-muted);
  font-size: .65rem;
}

.pagina-aluno .regra-modal__button {
  min-width: 10.5rem;
  min-height: 3rem;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pagina-aluno .regra-modal {
    width: min(96vw, 35rem);
    max-height: 92vh;
  }

  .pagina-aluno .regra-modal__header {
    grid-template-columns: 3.3rem minmax(0,1fr);
    padding: .9rem;
  }

  .pagina-aluno .regra-modal__seal {
    width: 3.2rem;
    height: 3.2rem;
  }

  .pagina-aluno .regra-modal__grid {
    grid-template-columns: 1fr;
    padding: .85rem;
  }

  .pagina-aluno .regra-modal__item {
    min-height: auto;
  }

  .pagina-aluno .regra-modal__footer {
    display: grid;
    padding: .85rem;
  }

  .pagina-aluno .regra-modal__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-aluno .regra-modal {
    animation: none;
  }
}

/* Editor ------------------------------------------------------------- */
.pagina-aluno .mascote-editor {
  --agente-cor: #23856F;
  --agente-fundo: #E7F7F0;
  display: grid;
  grid-template-columns: minmax(230px,.65fr) minmax(0,1.55fr);
  gap: 1.2rem;
  align-items: start;
  max-width: 72rem;
  padding: 1rem;
}

.pagina-aluno .mascote-preview {
  position: sticky;
  top: 1rem;
}

.pagina-aluno .agente-card {
  max-width: 17rem;
  margin-inline: auto;
  overflow: hidden;
  border: 3px solid var(--agente-cor);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(24,72,63,.12);
}

.pagina-aluno .agente-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .7rem;
  background: var(--agente-cor);
  color: #fff;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.pagina-aluno .agente-card__top b {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 50%;
}

.pagina-aluno .agente-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: .45rem;
  background: var(--agente-fundo);
}

.pagina-aluno .agente-card__visual .mascote-svg {
  width: 10.2rem;
  height: 10.2rem;
}

.pagina-aluno .agente-card__symbol {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--agente-cor);
  font-size: 1.25rem;
  box-shadow: 0 4px 10px rgba(24,72,63,.16);
}

.pagina-aluno .agente-card__identity {
  padding: .7rem .8rem .55rem;
}

.pagina-aluno .agente-card__identity small,
.pagina-aluno .agente-card__starter small {
  display: block;
  color: #9A711D;
  font-size: .5rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.pagina-aluno .agente-card__identity strong {
  display: block;
  margin-top: .12rem;
  font-size: 1.05rem;
  color: var(--kid-ink);
}

.pagina-aluno .agente-card__identity span {
  display: block;
  margin-top: .15rem;
  color: var(--kid-muted);
  font-size: .67rem;
  font-weight: 750;
}

.pagina-aluno .agente-card__starter {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: .5rem;
  align-items: center;
  margin: .25rem .7rem .6rem;
  padding: .5rem;
  border-radius: 12px;
  background: var(--kid-gold-soft);
}

.pagina-aluno .agente-card__starter > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: #fff;
  font-size: 1.15rem;
}

.pagina-aluno .agente-card__starter strong {
  display: block;
  margin-top: .1rem;
  color: #70521C;
  font-size: .62rem;
}

.pagina-aluno .agente-card__progress {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  flex-wrap: wrap;
  padding: .55rem .7rem;
  border-top: 1px solid var(--kid-line);
  background: #F8FBF9;
  color: var(--kid-muted);
  font-size: .55rem;
  font-weight: 800;
}

/* Passos ------------------------------------------------------------- */
.pagina-aluno .mascote-step {
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr);
  gap: .7rem;
  margin-bottom: .75rem;
  padding: .9rem;
  border: 1px solid var(--kid-line);
  border-radius: 17px;
  background: #fff;
}

.pagina-aluno .mascote-step__number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--agente-cor);
  color: #fff;
  font-weight: 950;
}

.pagina-aluno .mascote-step h2 {
  margin: .05rem 0 .18rem;
  font-size: 1rem;
}

.pagina-aluno .mascote-step p {
  margin: 0 0 .7rem;
  color: var(--kid-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.pagina-aluno .mascote-step input[type="text"] {
  width: 100%;
  min-height: 2.8rem;
  padding: .65rem .75rem;
  border: 2px solid var(--kid-line);
  border-radius: 12px;
  font: inherit;
}

/* Tipos de agente ---------------------------------------------------- */
.pagina-aluno .mascote-roles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .55rem;
}

.pagina-aluno .mascote-role-option {
  position: relative;
  cursor: pointer;
}

.pagina-aluno .mascote-role-option input,
.pagina-aluno .mascote-color input,
.pagina-aluno .mascote-symbol-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pagina-aluno .mascote-role-option__card {
  display: block;
  height: 100%;
  padding: .45rem;
  border: 2px solid #DCE8E3;
  border-radius: 15px;
  background: #FBFEFC;
  text-align: center;
  transition: .15s ease;
}

.pagina-aluno .mascote-role-option__visual {
  display: grid;
  place-items: center;
  height: 7rem;
  overflow: hidden;
  border-radius: 11px;
  background: var(--agente-fundo);
}

.pagina-aluno .mascote-role-option__visual .mascote-svg {
  width: 6.8rem;
  height: 6.8rem;
}

.pagina-aluno .mascote-role-option__card strong {
  display: block;
  margin-top: .35rem;
  color: var(--kid-ink);
  font-size: .68rem;
}

.pagina-aluno .mascote-role-option__card small {
  display: block;
  margin-top: .18rem;
  color: var(--kid-muted);
  font-size: .56rem;
  line-height: 1.3;
}

.pagina-aluno .mascote-role-option input:checked + .mascote-role-option__card {
  border-color: var(--agente-cor);
  background: var(--agente-fundo);
  box-shadow: 0 0 0 3px rgba(35,133,111,.09);
  transform: translateY(-2px);
}

/* Cores -------------------------------------------------------------- */
.pagina-aluno .mascote-colors {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.pagina-aluno .mascote-color {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .22rem;
  min-width: 3.6rem;
  cursor: pointer;
}

.pagina-aluno .mascote-color > span {
  width: 2.4rem;
  height: 2.4rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--choice-color);
  box-shadow: 0 0 0 1px #BFCFC8;
  transition: .15s ease;
}

.pagina-aluno .mascote-color input:checked + span {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--agente-cor);
}

.pagina-aluno .mascote-color small {
  color: var(--kid-muted);
  font-size: .58rem;
}

/* Símbolos ----------------------------------------------------------- */
.pagina-aluno .mascote-symbols {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .5rem;
}

.pagina-aluno .mascote-symbol-option {
  position: relative;
  cursor: pointer;
}

.pagina-aluno .mascote-symbol-option > span {
  display: grid;
  grid-template-columns: 2.2rem minmax(0,1fr);
  gap: .45rem;
  align-items: center;
  min-height: 3.5rem;
  padding: .45rem;
  border: 2px solid #DCE8E3;
  border-radius: 13px;
  background: #FBFEFC;
}

.pagina-aluno .mascote-symbol-option b {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: #fff;
  font-size: 1.15rem;
}

.pagina-aluno .mascote-symbol-option small {
  color: var(--kid-ink-2);
  font-size: .62rem;
  font-weight: 800;
}

.pagina-aluno .mascote-symbol-option input:checked + span {
  border-color: var(--agente-cor);
  background: var(--agente-fundo);
}

.pagina-aluno .mascote-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Cartão compacto no painel ----------------------------------------- */
.pagina-aluno .agente-dashboard {
  --agente-cor: #23856F;
  --agente-fundo: #E7F7F0;
  display: grid;
  grid-template-columns: 7rem minmax(0,1fr) auto;
  gap: .85rem;
  align-items: center;
  margin: .4rem 0 1rem;
  padding: .7rem;
  border: 2px solid var(--agente-cor);
  border-radius: 19px;
  background: linear-gradient(100deg,var(--agente-fundo),#fff 58%);
  box-shadow: var(--kid-shadow-small);
}

.pagina-aluno .agente-dashboard__mascote {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  overflow: visible;
  border-radius: 17px;
  background: var(--agente-fundo);
}

.pagina-aluno .agente-dashboard__mascote .mascote-svg {
  width: 6.7rem;
  height: 6.7rem;
}

.pagina-aluno .agente-dashboard__mascote > span {
  position: absolute;
  right: -.2rem;
  bottom: -.15rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--agente-cor);
  font-size: 1rem;
}

.pagina-aluno .agente-dashboard__info > small {
  display: block;
  color: #98701D;
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.pagina-aluno .agente-dashboard__info h1 {
  margin: .1rem 0 .18rem;
  font-size: clamp(1.35rem,3vw,1.8rem);
}

.pagina-aluno .agente-dashboard__info > p {
  margin: 0;
  color: var(--kid-muted);
  font-size: .72rem;
  font-weight: 750;
}

.pagina-aluno .agente-dashboard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}

.pagina-aluno .agente-dashboard__chips span {
  padding: .3rem .45rem;
  border: 1px solid var(--kid-line);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--kid-ink-2);
  font-size: .58rem;
  font-weight: 800;
}

@media (max-width: 820px) {
  .pagina-aluno .mascote-editor {
    grid-template-columns: 1fr;
  }

  .pagina-aluno .mascote-preview {
    position: static;
  }

  .pagina-aluno .agente-card {
    max-width: 15.5rem;
  }

  .pagina-aluno .codigo-agente__grid {
    grid-template-columns: 1fr;
  }

  .pagina-aluno .agente-dashboard {
    grid-template-columns: 6rem minmax(0,1fr);
  }

  .pagina-aluno .agente-dashboard__mascote {
    width: 6rem;
    height: 6rem;
  }

  .pagina-aluno .agente-dashboard > .btn {
    grid-column: 1/-1;
    justify-self: start;
  }
}

@media (max-width: 580px) {
  .pagina-aluno .mascote-roles {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .pagina-aluno .mascote-symbols {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .pagina-aluno .mascote-step {
    grid-template-columns: 1fr;
  }

  .pagina-aluno .codigo-agente__rodape {
    display: grid;
  }

  .pagina-aluno .agente-dashboard {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pagina-aluno .agente-dashboard__mascote {
    justify-self: center;
  }

  .pagina-aluno .agente-dashboard__chips {
    justify-content: center;
  }

  .pagina-aluno .agente-dashboard > .btn {
    justify-self: center;
  }
}



/* =====================================================================
   CAMADA EXTRA DE GAMIFICAÇÃO VISUAL
   Objetivo: dar sensação de jornada, ficha de personagem e progressão
   sem infantilizar a interface.
   ===================================================================== */

/* Fundo com sensação de mapa / tabuleiro -------------------------------- */
.pagina-aluno {
  position: relative;
  isolation: isolate;
}

.pagina-aluno::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(239,166,47,.08) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 28%, rgba(60,130,189,.07) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 74%, rgba(118,103,180,.06) 0 3px, transparent 4px);
  background-size: 82px 82px, 110px 110px, 136px 136px;
  opacity: .8;
}

.pagina-aluno::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(35,133,111,.025) 1px, transparent 1px),
    linear-gradient(rgba(35,133,111,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 76%);
}

/* Cabeçalho: mais "central de missões" ---------------------------------- */
.pagina-aluno .topo--aluno {
  border-bottom: 3px solid rgba(239,166,47,.42);
}

.pagina-aluno .marca-nome::after {
  content: "  •  CENTRAL DE MISSÕES";
  color: rgba(255,255,255,.55);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .06em;
}

.pagina-aluno .nav--aluno {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Eyebrow vira etiqueta de missão --------------------------------------- */
.pagina-aluno .eyebrow {
  border: 1px solid rgba(35,133,111,.13);
  box-shadow: 0 3px 10px rgba(28,78,69,.06);
}

.pagina-aluno .eyebrow::before {
  content: "◆";
  color: var(--kid-gold);
  font-size: .52rem;
}

/* Botões principais: ação de jogo --------------------------------------- */
.pagina-aluno .btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  font-weight: 820;
  letter-spacing: .005em;
}

.pagina-aluno .btn::after {
  content: "›";
  margin-left: .48rem;
  font-size: 1.25rem;
  line-height: .7;
  transition: transform .15s ease;
}

.pagina-aluno .btn:hover::after {
  transform: translateX(3px);
}

.pagina-aluno .btn--secundario::after,
.pagina-aluno .btn--mini::after {
  content: "";
  margin: 0;
}

/* Popup das regras: sensação de protocolo de entrada -------------------- */
.pagina-aluno .regra-modal-backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(239,166,47,.09), transparent 24rem),
    rgba(10,31,28,.78);
}

.pagina-aluno .regra-modal {
  border: 2px solid rgba(239,166,47,.32);
}

.pagina-aluno .regra-modal__header {
  position: relative;
  overflow: hidden;
}

.pagina-aluno .regra-modal__header::after {
  content: "PROTOCOLO DE ENTRADA";
  position: absolute;
  right: 1rem;
  bottom: .55rem;
  color: rgba(35,133,111,.16);
  font-size: 1.1rem;
  font-weight: 950;
  letter-spacing: .12em;
  transform: rotate(-3deg);
}

.pagina-aluno .regra-modal__seal {
  position: relative;
}

.pagina-aluno .regra-modal__seal::after {
  content: "✓";
  position: absolute;
  right: -.2rem;
  bottom: -.2rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--kid-gold);
  color: #fff;
  font-size: .65rem;
}

.pagina-aluno .regra-modal__item {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pagina-aluno .regra-modal__item:hover {
  transform: translateY(-2px);
  border-color: rgba(35,133,111,.24);
  box-shadow: 0 8px 18px rgba(28,78,69,.08);
}

.pagina-aluno .regra-modal__item::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: -1.7rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}

.pagina-aluno .regra-modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -8px 18px rgba(18,48,43,.04);
}

/* Cartão do agente: ficha de personagem -------------------------------- */
.pagina-aluno .agente-card {
  position: relative;
  transform: rotate(-.35deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.pagina-aluno .agente-card:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 18px 38px rgba(24,72,63,.16);
}

.pagina-aluno .agente-card::after {
  content: "AGENTE ATIVO";
  position: absolute;
  top: 3.15rem;
  left: -.55rem;
  z-index: 3;
  padding: .27rem .58rem;
  border-radius: 8px;
  background: var(--kid-gold);
  color: #fff;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 4px 10px rgba(120,78,12,.18);
  transform: rotate(-5deg);
}

.pagina-aluno .agente-card__visual {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.92) 0 30%, transparent 31%),
    var(--agente-fundo);
}

.pagina-aluno .agente-card__visual::before {
  content: "";
  position: absolute;
  inset: .65rem;
  border: 1px dashed rgba(35,133,111,.18);
  border-radius: 18px;
  pointer-events: none;
}

.pagina-aluno .agente-card__starter {
  border: 1px solid rgba(239,166,47,.22);
}

.pagina-aluno .agente-card__starter::after {
  content: "ITEM INICIAL";
  justify-self: end;
  color: rgba(112,82,28,.45);
  font-size: .46rem;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Passos de personalização ---------------------------------------------- */
.pagina-aluno .mascote-step {
  position: relative;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.pagina-aluno .mascote-step:hover {
  transform: translateY(-1px);
  border-color: rgba(35,133,111,.24);
  box-shadow: 0 8px 18px rgba(28,78,69,.06);
}

.pagina-aluno .mascote-step::after {
  content: "";
  position: absolute;
  right: -2.7rem;
  top: -2.7rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--agente-fundo);
  opacity: .45;
}

.pagina-aluno .mascote-step__number {
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(24,92,78,.15);
}

/* Agentes como "classes" selecionáveis --------------------------------- */
.pagina-aluno .mascote-role-option__card {
  position: relative;
  overflow: hidden;
}

.pagina-aluno .mascote-role-option__card::before {
  content: "ESCOLHER";
  position: absolute;
  top: .42rem;
  right: .42rem;
  z-index: 3;
  padding: .2rem .34rem;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--kid-muted);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity .15s ease;
}

.pagina-aluno .mascote-role-option:hover .mascote-role-option__card::before {
  opacity: 1;
}

.pagina-aluno .mascote-role-option input:checked + .mascote-role-option__card::before {
  content: "✓ SEU AGENTE";
  opacity: 1;
  background: var(--agente-cor);
  color: #fff;
}

.pagina-aluno .mascote-role-option__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .28rem;
  background: var(--agente-cor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}

.pagina-aluno .mascote-role-option input:checked + .mascote-role-option__card::after {
  transform: scaleX(1);
}

/* Cor e símbolo com sensação de escolha ativa --------------------------- */
.pagina-aluno .mascote-color input:checked + span {
  position: relative;
}

.pagina-aluno .mascote-color input:checked + span::after {
  content: "✓";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: .8rem;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}

.pagina-aluno .mascote-symbol-option > span {
  transition: transform .15s ease, box-shadow .15s ease;
}

.pagina-aluno .mascote-symbol-option:hover > span {
  transform: translateY(-1px);
}

.pagina-aluno .mascote-symbol-option input:checked + span {
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--agente-cor) 12%,transparent);
}

/* Botão final da personalização ----------------------------------------- */
.pagina-aluno .mascote-actions .btn:first-child {
  min-width: 12.5rem;
  box-shadow: 0 9px 20px rgba(28,107,89,.22);
}

/* Painel do agente ------------------------------------------------------ */
.pagina-aluno .agente-dashboard {
  position: relative;
  overflow: hidden;
}

.pagina-aluno .agente-dashboard::after {
  content: "STATUS: EM MISSÃO";
  position: absolute;
  right: 1rem;
  top: .55rem;
  color: rgba(35,133,111,.16);
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.pagina-aluno .agente-dashboard__mascote {
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(35,133,111,.08);
}

.pagina-aluno .agente-dashboard__chips span:first-child {
  border-color: rgba(239,166,47,.25);
  background: var(--kid-gold-soft);
  color: #7A5719;
}

/* Cards das missões: mais "quest board" -------------------------------- */
.pagina-aluno .grade > .cartao {
  border-top: 5px solid var(--kid-green);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pagina-aluno .grade > .cartao:nth-child(2) { border-top-color: var(--kid-blue); }
.pagina-aluno .grade > .cartao:nth-child(3) { border-top-color: var(--kid-violet); }
.pagina-aluno .grade > .cartao:nth-child(4) { border-top-color: var(--kid-gold); }

.pagina-aluno .grade > .cartao:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(28,78,69,.12);
}

.pagina-aluno .grade > .cartao .eyebrow {
  box-shadow: none;
}

.pagina-aluno .grade > .cartao .btn--mini {
  position: relative;
  z-index: 2;
}

/* Status de missão mais claro ------------------------------------------- */
.pagina-aluno .selo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.pagina-aluno .selo--ok::before { content: "✓"; }
.pagina-aluno .selo--anda::before { content: "▶"; }
.pagina-aluno .selo--nao::before { content: "🔒"; font-size: .72rem; }

/* Barra de progresso: estética de jogo -------------------------------- */
.pagina-aluno .barra-progresso {
  position: relative;
  height: 1rem;
  box-shadow: inset 0 2px 4px rgba(26,73,65,.08);
}

.pagina-aluno .barra-progresso-fill {
  position: relative;
  overflow: hidden;
}

.pagina-aluno .barra-progresso-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.20) 0 8px,
      transparent 8px 16px
    );
  animation: barraMissao 1.8s linear infinite;
}

@keyframes barraMissao {
  from { transform: translateX(-16px); }
  to { transform: translateX(16px); }
}

/* Conquistas ----------------------------------------------------------- */
.pagina-aluno .conquista-mini--badge {
  border: 1px solid rgba(35,133,111,.14);
  box-shadow: 0 5px 12px rgba(28,78,69,.06);
}

.pagina-aluno .conquista-mini--badge::before {
  content: "DESBLOQUEADO";
  display: inline-block;
  margin-right: .4rem;
  color: var(--kid-green-dark);
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .08em;
}

/* Microinterações sem exagero ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .pagina-aluno .mascote-role-option input:checked + .mascote-role-option__card {
    animation: agenteEscolhido .25s ease-out;
  }

  @keyframes agenteEscolhido {
    0% { transform: scale(.97); }
    70% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }

  .pagina-aluno .agente-card__symbol {
    animation: simboloRespirar 3s ease-in-out infinite;
  }

  @keyframes simboloRespirar {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }
}

/* Mobile: mantém o clima de jogo sem apertar conteúdo ------------------ */
@media (max-width: 620px) {
  .pagina-aluno .marca-nome::after {
    display: none;
  }

  .pagina-aluno .agente-card {
    transform: none;
  }

  .pagina-aluno .agente-dashboard::after {
    display: none;
  }

  .pagina-aluno .regra-modal__header::after {
    display: none;
  }
}



/* =====================================================================
   PROGRESSÃO EM BLOCOS — VISUAL INSPIRADO EM JOGOS DE CONSTRUÇÃO
   Sem copiar assets de jogos existentes.
   ===================================================================== */

.pagina-aluno .barra-blocos {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.pagina-aluno .barra-blocos__bloco {
  position: relative;
  display: block;
  min-width: 0;
  height: 16px;
  border: 2px solid #c5d2cc;
  border-radius: 3px;
  background:
    linear-gradient(145deg, #f8fbf9 0 45%, #e7eeea 46% 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    inset -2px -2px 0 rgba(80,105,96,.08),
    0 2px 0 rgba(28,78,69,.06);
}

.pagina-aluno .barra-blocos__bloco--cheio {
  border-color: #23705e;
  background:
    linear-gradient(145deg, #55b997 0 44%, #27866f 45% 100%);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.24),
    inset -2px -2px 0 rgba(5,57,45,.24),
    0 2px 0 rgba(20,83,68,.16);
}

.pagina-aluno .barra-blocos__bloco--cheio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-top: 2px solid rgba(255,255,255,.18);
  border-left: 2px solid rgba(255,255,255,.12);
}

/* Cores por missão */
.pagina-aluno .barra-blocos--m1 .barra-blocos__bloco--cheio {
  border-color: #23705e;
  background: linear-gradient(145deg, #5fc3a0 0 44%, #23856f 45% 100%);
}

.pagina-aluno .barra-blocos--m2 .barra-blocos__bloco--cheio {
  border-color: #2f6893;
  background: linear-gradient(145deg, #6cace0 0 44%, #3c82bd 45% 100%);
}

.pagina-aluno .barra-blocos--m3 .barra-blocos__bloco--cheio {
  border-color: #64579b;
  background: linear-gradient(145deg, #9c8bd4 0 44%, #7667b4 45% 100%);
}

.pagina-aluno .barra-blocos--m4 .barra-blocos__bloco--cheio {
  border-color: #b77b18;
  background: linear-gradient(145deg, #ffc65c 0 44%, #efa62f 45% 100%);
}

.pagina-aluno .barra-blocos--geral .barra-blocos__bloco--cheio {
  border-color: #8a6618;
  background: linear-gradient(145deg, #ffd36f 0 44%, #efa62f 45% 100%);
}

/* Demonstração do popup */
.pagina-aluno .regra-modal__item--progresso {
  grid-column: span 1;
}

.pagina-aluno .regra-progresso-demo {
  display: grid;
  grid-template-columns: repeat(10, 1fr) auto;
  gap: 3px;
  align-items: center;
  margin-top: .55rem;
}

.pagina-aluno .regra-progresso-demo > span {
  height: 12px;
  border: 1px solid #c7d2cd;
  border-radius: 2px;
  background: #edf2ef;
  box-shadow: inset 1px 1px 0 #fff;
}

.pagina-aluno .regra-progresso-demo > span.cheio {
  border-color: #287762;
  background: linear-gradient(145deg, #60c5a0, #23856f);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.25),
    inset -1px -1px 0 rgba(0,0,0,.12);
}

.pagina-aluno .regra-progresso-demo b {
  min-width: 2.7rem;
  margin-left: .2rem;
  color: var(--kid-green-dark);
  font-size: .68rem;
}

.pagina-aluno .regra-progresso-pontos {
  display: block;
  margin-top: .3rem;
  color: #7a6a3d;
  font-size: .56rem;
  font-weight: 750;
}

/* Jornada geral */
.pagina-aluno .jornada-geral {
  margin: .35rem 0 1rem;
  padding: .85rem;
  border: 2px solid #d5e4dd;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,251,248,.98));
  box-shadow: var(--kid-shadow-small);
}

.pagina-aluno .jornada-geral__cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: .0rem;
}

.pagina-aluno .jornada-geral__rotulo {
  display: block;
  color: #96701d;
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .09em;
}

.pagina-aluno .jornada-geral__cabecalho strong {
  display: block;
  margin-top: .1rem;
  color: var(--kid-ink);
  font-size: 1rem;
}

.pagina-aluno .jornada-geral__pontos {
  display: flex;
  gap: .2rem;
  align-items: baseline;
}

.pagina-aluno .jornada-geral__pontos span {
  color: #866018;
  font-size: .95rem;
  font-weight: 900;
}

.pagina-aluno .jornada-geral__pontos small {
  color: var(--kid-muted);
  font-size: .6rem;
}

.pagina-aluno .jornada-geral__missoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .55rem;
}

.pagina-aluno .jornada-geral__missao {
  min-width: 0;
  padding: .5rem;
  border: 1px solid #dce7e1;
  border-radius: 11px;
  background: #fff;
}

.pagina-aluno .jornada-geral__linha {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  margin-bottom: .4rem;
}

.pagina-aluno .jornada-geral__linha > span {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  background: var(--kid-green);
  color: #fff;
  font-size: .58rem;
  font-weight: 950;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.10);
}

.pagina-aluno .jornada-geral__missao--2 .jornada-geral__linha > span { background: var(--kid-blue); }
.pagina-aluno .jornada-geral__missao--3 .jornada-geral__linha > span { background: var(--kid-violet); }
.pagina-aluno .jornada-geral__missao--4 .jornada-geral__linha > span { background: var(--kid-gold); }

.pagina-aluno .jornada-geral__linha small {
  align-self: center;
  color: var(--kid-muted);
  font-size: .55rem;
  font-weight: 750;
}

/* Como a jornada geral usa 5 blocos por missão */
.pagina-aluno .jornada-geral .barra-blocos {
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 3px;
}

.pagina-aluno .jornada-geral .barra-blocos__bloco {
  height: 13px;
}

/* Progresso no cartão do agente */
.pagina-aluno .agente-dashboard__progresso {
  max-width: 28rem;
  margin-top: .6rem;
  padding: .5rem .6rem;
  border: 1px solid rgba(239,166,47,.24);
  border-radius: 11px;
  background: rgba(255,248,230,.72);
}

.pagina-aluno .agente-dashboard__progresso > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}

.pagina-aluno .agente-dashboard__progresso strong {
  color: #70521c;
  font-size: .61rem;
}

.pagina-aluno .agente-dashboard__progresso > div:first-child span {
  color: #8b6517;
  font-size: .62rem;
  font-weight: 900;
}

.pagina-aluno .agente-dashboard__progresso .barra-blocos__bloco {
  height: 12px;
}

/* Progresso dentro do card de missão */
.pagina-aluno .missao-blocos {
  position: relative;
  z-index: 1;
  margin: .65rem 0 .85rem;
  padding: .62rem;
  border: 1px solid #dce7e1;
  border-radius: 12px;
  background: #f9fcfa;
}

.pagina-aluno .missao-blocos__topo {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .4rem;
}

.pagina-aluno .missao-blocos__topo strong {
  color: var(--kid-ink-2);
  font-size: .64rem;
}

.pagina-aluno .missao-blocos__topo span {
  color: var(--kid-green-dark);
  font-size: .66rem;
  font-weight: 950;
}

.pagina-aluno .missao-blocos > small {
  display: block;
  margin-top: .4rem;
  color: var(--kid-muted);
  font-size: .56rem;
  line-height: 1.35;
}

.pagina-aluno .missao-blocos .barra-blocos__bloco {
  height: 14px;
}

/* Missão 2,3,4 ajustam cor do percentual */
.pagina-aluno .missao-blocos--2 .missao-blocos__topo span { color: #2f6893; }
.pagina-aluno .missao-blocos--3 .missao-blocos__topo span { color: #64579b; }
.pagina-aluno .missao-blocos--4 .missao-blocos__topo span { color: #9b6916; }

/* Conclusão: brilho curto nos blocos cheios */
@media (prefers-reduced-motion: no-preference) {
  .pagina-aluno .barra-blocos__bloco--cheio {
    animation: blocoEntrou .22s ease-out both;
  }

  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(2) { animation-delay: .02s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(3) { animation-delay: .04s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(4) { animation-delay: .06s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(5) { animation-delay: .08s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(6) { animation-delay: .10s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(7) { animation-delay: .12s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(8) { animation-delay: .14s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(9) { animation-delay: .16s; }
  .pagina-aluno .barra-blocos__bloco--cheio:nth-child(10) { animation-delay: .18s; }

  @keyframes blocoEntrou {
    from {
      transform: translateY(2px) scale(.92);
      opacity: .55;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
}

@media (max-width: 760px) {
  .pagina-aluno .jornada-geral__missoes {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .pagina-aluno .jornada-geral__cabecalho {
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  .pagina-aluno .jornada-geral__missoes {
    grid-template-columns: 1fr;
  }

  .pagina-aluno .jornada-geral__cabecalho {
    display: grid;
  }

  .pagina-aluno .barra-blocos {
    gap: 2px;
  }

  .pagina-aluno .barra-blocos__bloco {
    height: 13px;
  }
}



/* =====================================================================
   CÓDIGO DO AGENTE — ESTADO "AINDA NÃO ESTOU PRONTO"
   ===================================================================== */

.pagina-aluno .regra-modal__actions {
  display: flex;
  gap: .55rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pagina-aluno .regra-modal__actions form,
.pagina-aluno .regra-modal__importance-actions form {
  margin: 0;
}

.pagina-aluno .regra-modal__not-ready {
  min-height: 3rem;
  white-space: nowrap;
}

.pagina-aluno .regra-modal__header--compacto {
  padding-bottom: .75rem;
}

.pagina-aluno .regra-modal__importance {
  padding: 1.15rem 1.25rem 1.2rem;
  background:
    radial-gradient(circle at 92% 12%, rgba(239,166,47,.12), transparent 13rem),
    linear-gradient(180deg, #fffdf7 0%, #ffffff 70%);
  animation: importanciaEntrar .22s ease-out;
}

@keyframes importanciaEntrar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pagina-aluno .regra-modal__importance-icon {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  margin: 0 auto .75rem;
  border: 3px solid #fff;
  border-radius: 18px;
  background: var(--kid-gold-soft);
  box-shadow: 0 7px 17px rgba(145,101,20,.12);
  font-size: 1.8rem;
  transform: rotate(-3deg);
}

.pagina-aluno .regra-modal__importance-content {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.pagina-aluno .regra-modal__importance-content h2 {
  margin: .2rem 0 .55rem;
  color: var(--kid-ink);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.15;
  outline: none;
}

.pagina-aluno .regra-modal__importance-content > p {
  max-width: 39rem;
  margin: 0 auto;
  color: var(--kid-muted);
  font-size: .84rem;
  line-height: 1.58;
}

.pagina-aluno .regra-modal__importance-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .55rem;
  max-width: 36rem;
  margin: 1rem auto;
}

.pagina-aluno .regra-modal__importance-points span {
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  padding: .55rem;
  border: 1px solid var(--kid-line);
  border-radius: 13px;
  background: #fff;
  color: var(--kid-ink-2);
  font-size: .7rem;
  font-weight: 850;
  box-shadow: 0 4px 10px rgba(28,78,69,.05);
}

.pagina-aluno .regra-modal__importance-note {
  padding: .68rem .8rem;
  border: 1px dashed rgba(35,133,111,.28);
  border-radius: 13px;
  background: var(--kid-mint);
  color: var(--kid-green-dark) !important;
  font-size: .72rem !important;
  font-weight: 720;
}

.pagina-aluno .regra-modal__importance-actions {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--kid-line);
}

.pagina-aluno .regra-modal__importance-actions .btn {
  min-width: 10rem;
}

@media (max-width: 700px) {
  .pagina-aluno .regra-modal__actions {
    display: grid;
    width: 100%;
  }

  .pagina-aluno .regra-modal__actions .btn,
  .pagina-aluno .regra-modal__actions form,
  .pagina-aluno .regra-modal__actions form .btn {
    width: 100%;
  }

  .pagina-aluno .regra-modal__importance {
    padding: .9rem;
  }

  .pagina-aluno .regra-modal__importance-points {
    grid-template-columns: 1fr;
  }

  .pagina-aluno .regra-modal__importance-actions {
    display: grid;
  }

  .pagina-aluno .regra-modal__importance-actions .btn,
  .pagina-aluno .regra-modal__importance-actions form,
  .pagina-aluno .regra-modal__importance-actions form .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-aluno .regra-modal__importance {
    animation: none;
  }
}



/* Emblema do Conselho Cidadão --------------------------------------- */
.pagina-aluno .regra-modal__seal,
.pagina-aluno .agente-card__top b {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  letter-spacing: 0;
}

.pagina-aluno .regra-modal__seal {
  font-size: 1.65rem;
}

.pagina-aluno .agente-card__top b {
  font-size: 1rem;
  line-height: 1;
}



/* =====================================================================
   DIVERSIDADE E PERSONALIZAÇÃO DO AGENTE
   ===================================================================== */

.pagina-aluno .mascote-svg .mascote-cabelo {
  display: none;
}

.pagina-aluno .mascote-svg[data-cabelo="curto"] .mascote-cabelo--curto,
.pagina-aluno .mascote-svg[data-cabelo="cacheado"] .mascote-cabelo--cacheado,
.pagina-aluno .mascote-svg[data-cabelo="crespo"] .mascote-cabelo--crespo,
.pagina-aluno .mascote-svg[data-cabelo="longo"] .mascote-cabelo--longo,
.pagina-aluno .mascote-svg[data-cabelo="coque"] .mascote-cabelo--coque,
.pagina-aluno .mascote-svg[data-cabelo="bone"] .mascote-cabelo--bone {
  display: inline;
}

.pagina-aluno .mascote-subtitulo {
  display: block;
  margin: .25rem 0 .45rem;
  color: var(--kid-ink);
  font-size: .7rem;
  font-weight: 850;
}

.pagina-aluno .mascote-subtitulo--espaco {
  margin-top: 1rem;
}

.pagina-aluno .mascote-peles,
.pagina-aluno .mascote-cores-cabelo {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.pagina-aluno .mascote-pele,
.pagina-aluno .mascote-cor-cabelo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .2rem;
  min-width: 3.4rem;
  cursor: pointer;
}

.pagina-aluno .mascote-pele input,
.pagina-aluno .mascote-cor-cabelo input,
.pagina-aluno .mascote-cabelo-opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pagina-aluno .mascote-pele > span,
.pagina-aluno .mascote-cor-cabelo > span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #bdcbc5;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pagina-aluno .mascote-pele > span {
  background: var(--choice-skin);
}

.pagina-aluno .mascote-cor-cabelo > span {
  background: var(--choice-hair);
}

.pagina-aluno .mascote-pele input:checked + span,
.pagina-aluno .mascote-cor-cabelo input:checked + span {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--agente-cor);
}

.pagina-aluno .mascote-pele input:checked + span::after,
.pagina-aluno .mascote-cor-cabelo input:checked + span::after {
  content: "✓";
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.pagina-aluno .mascote-pele small,
.pagina-aluno .mascote-cor-cabelo small {
  color: var(--kid-muted);
  font-size: .55rem;
}

.pagina-aluno .mascote-cabelos-opcoes {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .45rem;
}

.pagina-aluno .mascote-cabelo-opcao {
  position: relative;
  cursor: pointer;
}

.pagina-aluno .mascote-cabelo-opcao > span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: .45rem;
  border: 2px solid #dce8e2;
  border-radius: 12px;
  background: #fbfefc;
  color: var(--kid-ink-2);
  transition: .15s ease;
}

.pagina-aluno .mascote-cabelo-opcao strong {
  font-size: .62rem;
}

.pagina-aluno .mascote-cabelo-opcao input:checked + span {
  border-color: var(--agente-cor);
  background: var(--agente-fundo);
  box-shadow: 0 0 0 2px rgba(35,133,111,.08);
  transform: translateY(-1px);
}

/* Status de missão bloqueada: preto, com alto contraste */
.pagina-aluno .selo--nao {
  border: 1px solid #000;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

.pagina-aluno .selo--nao::before {
  color: #fff;
}

@media (max-width: 580px) {
  .pagina-aluno .mascote-cabelos-opcoes {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}



/* =====================================================================
   STATUS DA JORNADA + ATALHO PARA REVER REGRAS
   ===================================================================== */

/* Remove o status claro antigo e substitui por um indicador funcional */
.pagina-aluno .agente-dashboard::after {
  content: "";
  display: none;
}

.pagina-aluno .agente-dashboard::before {
  content: "●  " attr(data-status);
  position: absolute;
  right: 1rem;
  top: .72rem;
  z-index: 3;
  padding: .34rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .075em;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(18,48,43,.08);
}

/* Missão ativa: vermelho pulsante */
.pagina-aluno .agente-dashboard--ativo::before {
  color: #B42318;
  background: #FFF2F0;
  border-color: #F2B8B1;
  animation: statusMissaoPulso 1.25s ease-in-out infinite;
}

@keyframes statusMissaoPulso {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0 0 0 rgba(180,35,24,.22),
      0 4px 10px rgba(18,48,43,.08);
  }
  50% {
    opacity: .72;
    box-shadow:
      0 0 0 5px rgba(180,35,24,.08),
      0 4px 10px rgba(18,48,43,.08);
  }
}

/* Jornada concluída: verde estável */
.pagina-aluno .agente-dashboard--concluido::before {
  content: "✓  " attr(data-status);
  color: #176555;
  background: #E7F7F0;
  border-color: #9FD8C4;
}

/* Atalho de regras */
.pagina-aluno .agente-regras-atalho {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
  margin: -.2rem 0 1.1rem;
  padding: .65rem .75rem;
  border: 1px dashed #C8D9D1;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}

.pagina-aluno .agente-regras-atalho > div {
  display: flex;
  gap: .55rem;
  align-items: center;
  min-width: 0;
}

.pagina-aluno .agente-regras-atalho__icone {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: var(--kid-gold-soft);
  font-size: 1.05rem;
}

.pagina-aluno .agente-regras-atalho strong {
  display: block;
  color: var(--kid-ink);
  font-size: .7rem;
}

.pagina-aluno .agente-regras-atalho small {
  display: block;
  margin-top: .12rem;
  color: var(--kid-muted);
  font-size: .6rem;
  line-height: 1.35;
}

.pagina-aluno .agente-regras-atalho .btn {
  flex: 0 0 auto;
  min-height: 2.35rem;
}

/* Mobile */
@media (max-width: 620px) {
  .pagina-aluno .agente-dashboard::before {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: .25rem;
  }

  .pagina-aluno .agente-regras-atalho {
    display: grid;
  }

  .pagina-aluno .agente-regras-atalho .btn {
    width: 100%;
  }
}

/* Acessibilidade: sem piscar para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .pagina-aluno .agente-dashboard--ativo::before {
    animation: none;
  }
}


/* =====================================================================
   REVER REGRAS — MODO SOMENTE CONSULTA
   ===================================================================== */
.pagina-aluno .regra-modal__footer--consulta {
  background: linear-gradient(180deg, #f8fbf9, #eef7f3);
}

.pagina-aluno .regra-modal__footer--consulta .regra-modal__ready > span {
  background: #fff;
  border: 1px solid var(--kid-line);
}

.pagina-aluno .regra-modal__footer--consulta .btn {
  min-width: 13rem;
}

@media (max-width: 700px) {
  .pagina-aluno .regra-modal__footer--consulta {
    display: grid;
  }

  .pagina-aluno .regra-modal__footer--consulta .btn {
    width: 100%;
  }
}



/* =====================================================================
   LEGIBILIDADE PARA ESTUDANTES — 2026
   Mantém o layout e aumenta contraste/tamanho dos textos informativos.
   ===================================================================== */

.pagina-aluno {
  /* Verde escuro com contraste maior para textos secundários */
  --kid-muted: #3F5752;
}

/* Textos principais e explicativos */
.pagina-aluno p {
  line-height: 1.62;
}

/* Subtítulos e introduções */
.pagina-aluno .sub,
.pagina-aluno .missao-subtitulo {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--kid-muted);
  font-size: clamp(1.05rem, 2vw, 1.18rem);
  line-height: 1.65;
}

/* Textos auxiliares: evitar tamanhos excessivamente pequenos */
.pagina-aluno small {
  font-size: .72rem;
  line-height: 1.45;
}

/* Labels de formulários */
.pagina-aluno label {
  font-size: .86rem;
  line-height: 1.35;
}

/* Campos digitáveis */
.pagina-aluno input,
.pagina-aluno select,
.pagina-aluno textarea {
  font-size: .95rem;
}

/* Botões e ações */
.pagina-aluno .btn,
.pagina-aluno button {
  font-size: .86rem;
}

/* Dicas e mensagens auxiliares */
.pagina-aluno .dica,
.pagina-aluno .aviso {
  font-size: .88rem;
  line-height: 1.5;
}

/* Cards principais */
.pagina-aluno .cartao p,
.pagina-aluno .mini-cartao p {
  font-size: .96rem;
  line-height: 1.58;
}

/* Código do Agente */
.pagina-aluno .agente-regras-atalho strong {
  font-size: .92rem;
}

.pagina-aluno .agente-regras-atalho small {
  font-size: .76rem;
  line-height: 1.45;
}

/* Cartões da jornada */
.pagina-aluno .missao-card p,
.pagina-aluno .missao-card small {
  color: var(--kid-muted);
}

/* Mobile: manter leitura confortável sem estourar layout */
@media (max-width: 620px) {
  .pagina-aluno .sub,
  .pagina-aluno .missao-subtitulo {
    font-size: 1rem;
    line-height: 1.6;
  }

  .pagina-aluno small {
    font-size: .7rem;
  }

  .pagina-aluno .btn,
  .pagina-aluno button {
    font-size: .84rem;
  }
}



/* =====================================================================
   AJUSTE DE LEGIBILIDADE — DASHBOARD DO AGENTE E PROGRESSO DAS MISSÕES
   ===================================================================== */

/* Cabeçalho do agente */
.pagina-aluno .agente-dashboard__info > small {
  font-size: .68rem;
  letter-spacing: .07em;
}

.pagina-aluno .agente-dashboard__info > p {
  color: #2F4742;
  font-size: .82rem;
  line-height: 1.42;
}

/* Chips: Jovem Conselheiro, conquistas, pontos, equipamentos */
.pagina-aluno .agente-dashboard__chips {
  gap: .45rem;
  margin-top: .62rem;
}

.pagina-aluno .agente-dashboard__chips span {
  padding: .38rem .58rem;
  font-size: .70rem;
  line-height: 1.15;
}

/* Jornada do agente */
.pagina-aluno .agente-dashboard__progresso {
  max-width: 31rem;
  margin-top: .72rem;
  padding: .68rem .75rem;
}

.pagina-aluno .agente-dashboard__progresso > div:first-child {
  margin-bottom: .48rem;
}

.pagina-aluno .agente-dashboard__progresso strong {
  color: #5E4518;
  font-size: .76rem;
  line-height: 1.25;
}

.pagina-aluno .agente-dashboard__progresso > div:first-child span {
  color: #755514;
  font-size: .78rem;
  line-height: 1.2;
}

.pagina-aluno .agente-dashboard__progresso .barra-blocos__bloco {
  height: 15px;
}

/* Código do Agente */
.pagina-aluno .agente-regras-atalho {
  padding: .78rem .9rem;
}

.pagina-aluno .agente-regras-atalho__icone {
  width: 2.55rem;
  height: 2.55rem;
  font-size: 1.18rem;
}

.pagina-aluno .agente-regras-atalho strong {
  font-size: .88rem;
}

.pagina-aluno .agente-regras-atalho small {
  color: #3F5752;
  font-size: .74rem;
  line-height: 1.45;
}

.pagina-aluno .agente-regras-atalho .btn {
  font-size: .78rem;
}

/* Progresso dentro de cada cartão de missão */
.pagina-aluno .missao-blocos {
  margin: .75rem 0 .95rem;
  padding: .78rem;
}

.pagina-aluno .missao-blocos__topo {
  margin-bottom: .52rem;
}

.pagina-aluno .missao-blocos__topo strong {
  color: #264A43;
  font-size: .78rem;
  line-height: 1.25;
}

.pagina-aluno .missao-blocos__topo span {
  font-size: .80rem;
  line-height: 1.2;
}

.pagina-aluno .missao-blocos > small {
  margin-top: .52rem;
  color: #3F5752;
  font-size: .72rem;
  line-height: 1.42;
}

.pagina-aluno .missao-blocos .barra-blocos__bloco {
  height: 17px;
}

/* Blocos da jornada geral, quando exibidos */
.pagina-aluno .jornada-geral__rotulo {
  font-size: .68rem;
}

.pagina-aluno .jornada-geral__pontos small {
  font-size: .72rem;
}

.pagina-aluno .jornada-geral__linha > span {
  width: 1.9rem;
  height: 1.9rem;
  font-size: .68rem;
}

.pagina-aluno .jornada-geral__linha small {
  color: #3F5752;
  font-size: .70rem;
}

.pagina-aluno .jornada-geral .barra-blocos__bloco {
  height: 16px;
}

/* Mobile */
@media (max-width: 620px) {
  .pagina-aluno .agente-dashboard__chips span {
    font-size: .68rem;
    padding: .36rem .5rem;
  }

  .pagina-aluno .missao-blocos__topo strong,
  .pagina-aluno .missao-blocos__topo span {
    font-size: .76rem;
  }

  .pagina-aluno .missao-blocos > small {
    font-size: .70rem;
  }
}



/* =====================================================================
   TEXTO DAS MISSÕES: LARGURA DO CARTÃO E TAMANHO CONFORME A TELA
   (07/10/2026). Vale para as quatro missões.
   - Os parágrafos paravam em 44rem dentro de um cartão de 60rem e
     deixavam uma faixa vazia à direita. Agora ocupam o cartão inteiro.
   - A letra do texto corrido cresce com a largura da tela: 16px no
     celular, perto de 18px num notebook e até 20px num monitor grande.
   Para desfazer, apague deste comentário até o fim do arquivo.
   ===================================================================== */
.pagina-aluno { --texto-missao: clamp(1rem, .82rem + .45vw, 1.25rem); }

.pagina-aluno .cartao--missao p { max-width: none; }

.pagina-aluno .cartao--missao > p:not(.eyebrow):not(.dica),
.pagina-aluno .cartao--missao > ul > li,
.pagina-aluno .cartao--missao > ol > li {
  font-size: var(--texto-missao);
  line-height: 1.65;
}