/* =====================================================================
   Recursos gratuitos (26/10/2026). Vem DEPOIS de casa.css e só acrescenta.
   Mesma paleta e mesmas fontes da casa; nada de JavaScript.
   Media queries em em, para seguir o tamanho de texto que a pessoa escolheu.
   ⚠️ CSP com `style-src 'self'`: nenhum style="" inline nas páginas.
   ===================================================================== */

.recurso{padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,96px)}
.recurso .env{max-width:min(var(--env),68rem)}

.trilha{font-size:14px;color:var(--mudo)}
.trilha a{border-bottom:1px solid #F5F0E440}
.trilha a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}

.recurso h1{
  margin-top:18px;
  font-size:clamp(36px,5.6vw,62px);font-weight:900;line-height:1.05;letter-spacing:-.02em;
}
.recurso .entrada{margin-top:16px;max-width:52ch;color:#D8D2E0;font-size:clamp(18px,1.9vw,21px)}

/* A ficha: idade e tempo, os dois dados que a professora procura primeiro. */
.recurso .ficha{margin:26px 0 0;max-width:40rem}
.recurso .ficha>div{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:16px;
  padding:12px 0;border-bottom:1px solid var(--linha);
}
.recurso .ficha dt{font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);padding-top:3px}

.bloco{margin-top:clamp(44px,6vw,68px)}
.bloco h2{margin-top:10px;font-size:clamp(26px,3.4vw,36px)}
.bloco>.rotulo{
  font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;color:var(--mudo);
}
.bloco p,.bloco li{max-width:62ch}
.bloco p+p{margin-top:14px}
.bloco h2+p,.bloco h2+ol,.bloco h2+ul,.bloco h2+.duas{margin-top:18px}

/* O bloco fixo do adulto: caixa clara de propósito, para se ver de longe. */
.antes{
  margin-top:clamp(36px,5vw,52px);padding:clamp(22px,3vw,32px);
  background:var(--cartao);border:1px solid var(--linha);border-left:3px solid var(--ouro);border-radius:12px;
}
.antes h2{margin-top:0;font-size:clamp(22px,2.6vw,28px)}
.antes ul{margin:16px 0 0;padding-left:1.2em}
.antes li+li{margin-top:9px}
.antes li::marker{color:var(--ouro)}
.antes strong{color:var(--creme);font-weight:800}
.antes .alerta{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha);max-width:62ch}

.passagem{max-width:44rem}
.passagem blockquote{font-size:clamp(19px,2vw,22px);line-height:1.5;font-weight:600}

.quadros{
  margin:22px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);max-width:44rem;
}
.quadros img{width:100%;border-radius:10px;border:1px solid var(--linha)}
.quadros figcaption{margin-top:10px;font-size:15px;color:var(--mudo)}

.perguntas{margin:0;padding-left:1.4em}
.perguntas>li{padding-left:.3em;font-size:clamp(18px,1.8vw,20px);font-weight:600}
.perguntas>li+li{margin-top:16px}
.perguntas>li::marker{color:var(--ouro);font-weight:900}
.perguntas .ajuste{display:block;margin-top:6px;font-size:16px;font-weight:400;color:var(--mudo)}
.extra{margin-top:22px;color:#D0CAD9;font-size:16.5px}
.etiqueta{
  display:inline-block;margin-right:8px;padding:2px 9px;border:1px solid var(--linha);border-radius:99px;
  font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);
}

.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.atividade{padding:clamp(20px,2.6vw,28px);background:#2B2836;border:1px solid var(--linha);border-radius:12px}
.atividade h3{font-size:21px;font-weight:900}
.atividade .tempo{margin-top:4px;font-size:14px;font-weight:700;color:var(--ouro)}
.atividade p{margin-top:12px;color:#D8D2E0;font-size:16.5px}
.apoio-extra{margin-top:20px;color:#D0CAD9;font-size:16.5px}
.apoio-extra strong{color:var(--creme);font-weight:800}

.seguinte .portas-recurso{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.seguinte .porta{color:var(--ouro)}
.seguinte .porta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta-ouro)}

/* O índice /recursos/ */
.lista-recursos{margin:30px 0 0;padding:0;list-style:none;display:grid;gap:14px;max-width:44rem}
.lista-recursos a{
  display:block;padding:20px 22px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;
}
.lista-recursos a:hover{border-color:var(--ouro)}
.lista-recursos b{display:block;font-size:20px;font-weight:900}
.lista-recursos span{display:block;margin-top:4px;color:var(--mudo);font-size:15.5px}

@media (max-width:48em){
  .duas{grid-template-columns:1fr}
}
@media (max-width:30em){
  .quadros{grid-template-columns:1fr}
  .recurso .ficha>div{grid-template-columns:1fr;gap:2px}
  .seguinte .porta{width:100%;justify-content:space-between}
}

.passagem .verso{margin-top:20px}
.passagem .verso+p{margin-top:20px}

/* Caixa "Para o adulto" dentro da história (Jacó e Rute) e listas de passos. */
.passagem .antes{margin-top:30px}
.antes p{margin-top:12px;max-width:62ch}
.antes h2+p{margin-top:12px}
.passos{margin:12px 0 0;padding-left:1.2em;color:#D8D2E0;font-size:16.5px}
.passos li+li{margin-top:8px}
.passos li::marker{color:var(--ouro)}
.atividade strong{color:var(--creme);font-weight:800}
.aviso{
  margin-top:22px;padding:14px 18px;max-width:62ch;border:1px solid var(--ouro);border-radius:10px;
  color:#E6E0EC;font-size:16.5px;
}
.aviso strong{color:var(--ouro);font-weight:900}

.baixar{display:inline-block;padding:4px 0;font-weight:800;color:var(--ouro);border-bottom:2px solid currentColor}
.baixar:hover{border-bottom-color:transparent}