/* Modelo novo do minicurso (Gui, 30/10/2026: o padrão é /conteudos/).
   Só nesta página até o OK dele; depois sobe para ../shared/. Carrega depois de
   lms-skin.css. A biblioteca é ferramenta: nada de giro nos prompts, para ler e
   copiar sem esforço. O giro fica no que é capa, bilhete e fim de página. */

/* Abertura: o retrato com borda de papel em cima da lâmina laranja. */
.hero-portrait { isolation: isolate; overflow: visible; border: 10px solid var(--cartao); border-radius: 26px; background: var(--cartao); box-shadow: 0 34px 60px -34px var(--sombra); rotate: calc(-1.8deg * var(--giro)); }
.hero-portrait::before { content: ''; position: absolute; z-index: -1; right: -18%; top: -9%; height: 118%; aspect-ratio: .5; background: var(--accent); clip-path: var(--raio-grande); }
.hero-portrait .portrait { position: absolute; inset: 0; border-radius: 16px; }
.portrait-caption span { color: #f1ece2; }

/* Como usar: sai a caixa roxa; o texto no papel e três bilhetes em escada. */
.tutorial-futures .intro { align-items: center; gap: clamp(36px, 6vw, 88px); margin-top: 0; padding: 40px 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; color: var(--text); }
.tutorial-futures .intro h2, .tutorial-futures .intro h3 { color: var(--text) !important; }
.tutorial-futures .intro .edition { color: var(--accent-texto) !important; }
.tutorial-futures .intro > div > p:last-child { color: var(--body) !important; }
.tutorial-futures .intro .steps { display: grid; gap: 16px; padding: 0; }
.tutorial-futures .intro .steps li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: start; padding: 20px 24px; border: 0; border-radius: 20px; background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 22px 36px -28px var(--sombra); }
.tutorial-futures .intro .steps li:nth-child(1) { margin-right: 8%; }
.tutorial-futures .intro .steps li:nth-child(2) { margin-inline: 4%; }
.tutorial-futures .intro .steps li:nth-child(3) { margin-left: 8%; }
.tutorial-futures .intro .steps span { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--violeta) !important; color: #fff !important; font-family: var(--display); font-weight: 800; font-size: 16px; }
.tutorial-futures .intro .steps p { color: var(--body) !important; }

/* Biblioteca: cada situação direto no papel, com o traço à mão no lugar da caixa. */
.tutorial-futures .category { position: relative; padding-top: 12px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tutorial-futures .category::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 6' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6C90 1.9 170 2.9 260 2.2S430 1.6 520 2.5 700 3.2 790 2.3 930 1.7 1000 2.4L1000 4.3C930 4.9 860 3.9 760 4.6S560 4.1 470 4.9 300 3.8 210 4.5 60 4.1 0 4.7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 6' preserveAspectRatio='none'%3E%3Cpath d='M0 2.6C90 1.9 170 2.9 260 2.2S430 1.6 520 2.5 700 3.2 790 2.3 930 1.7 1000 2.4L1000 4.3C930 4.9 860 3.9 760 4.6S560 4.1 470 4.9 300 3.8 210 4.5 60 4.1 0 4.7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tutorial-futures .category:nth-of-type(even)::before { transform: scaleX(-1); }
.tutorial-futures .category-header { grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); gap: 28px; padding-inline: 0; border: 0; background: none !important; }
.tutorial-futures .category-header h2 { font-size: clamp(30px, 3.2vw, 42px); }
.tutorial-futures .prompt-card { border-color: var(--line); background: none; }
.tutorial-futures .prompt-detail > summary { padding-inline: 0; }
.tutorial-futures .prompt-detail[open] { background: var(--cartao); box-shadow: 0 0 0 1px var(--line), 0 24px 44px -32px var(--sombra); border-radius: 20px; }
.tutorial-futures .prompt-detail[open] > summary { padding-inline: 18px; }

/* O aviso: a faixa escura reta, de ponta a ponta. */
.tutorial-futures .closing-note { position: relative; isolation: isolate; margin-block: 56px 0; padding-block: clamp(64px, 7vw, 96px); border: 0 !important; border-radius: 0; background: none !important; }
.tutorial-futures .closing-note::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--bloco); }
.tutorial-futures .note-symbol { color: var(--accent); }

/* Outros minicursos: capas tortas, com o texto no papel. */
.outros .outros-grid { gap: 40px 26px; }
.outros .outro { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.outros .outro:hover { box-shadow: none; transform: none; }
.outros .outro img { border: 7px solid var(--cartao); border-radius: 18px; box-shadow: 0 24px 40px -28px var(--sombra); transition: rotate .45s var(--sai), translate .45s var(--sai); }
.outros .outro:nth-child(3n+1) img { rotate: calc(-1.5deg * var(--giro)); }
.outros .outro:nth-child(3n+3) img { rotate: calc(1deg * var(--giro)); }
.outros .outro:hover img { rotate: 0deg; translate: 0 -5px; }
.outros .outro-corpo { padding: 18px 4px 0; }

/* Os dois convites do fim: cartões soltos, um mais alto que o outro. */
.cta-grid article { box-shadow: 0 30px 50px -34px var(--sombra); }

@media (max-width: 860px) {
  .tutorial-futures .category-header { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tutorial-futures .intro { grid-template-columns: minmax(0, 1fr); }
  .tutorial-futures .intro .steps li:nth-child(n) { margin-inline: 0; }
}
@media (max-width: 700px) {
}
@media (prefers-reduced-motion: reduce) {
  .outros .outro img { transition: none; }
}
@media (max-width: 1180px) { .gz-rodape-in { flex-wrap: wrap; } .gz-rodape nav { flex: 1 1 100%; } }

/* No celular o raio do retrato não passa da borda da tela. */
@media (max-width: 640px) { .hero-portrait::before { right: -6%; } }