/* Documentação e Academy. Usa as variáveis de resources/css/lp.css e não passa pelo build. */

.conteudo main { min-height: 60vh; }

.cont-topo { background: var(--tinta) var(--curvas); color: var(--papel); padding: clamp(36px, 7vw, 72px) 0; }
.cont-topo .lote { color: var(--ipe); }
.cont-topo h1 { font: 900 clamp(40px, 7vw, 68px)/.95 var(--display); text-transform: uppercase; color: var(--papel); max-width: 18em; }
.cont-topo__sub { margin-top: 14px; max-width: 42em; font-size: 18px; opacity: .9; }
.cont-topo__info { margin-top: 16px; font-size: 13px; color: var(--ipe); }
.cont-topo .hero__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

.cont-busca { display: flex; gap: 10px; margin-top: 24px; max-width: 560px; }
.cont-busca input { flex: 1; min-width: 0; font: 400 16px/1.3 var(--corpo); padding: 12px 16px; border-radius: 999px; border: 0; background: var(--papel); color: var(--tinta); }

.cont-corpo { padding: 24px 0 72px; }
.cont-grupo { font: 800 30px/1.1 var(--display); text-transform: uppercase; color: var(--tinta); margin: 32px 0 14px; }

.cont-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.cont-card, .cont-resultado { display: grid; gap: 6px; align-content: start; padding: 18px 20px; background: #fffdf6; border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: var(--texto); transition: border-color .2s, transform .2s; }
.cont-card:hover, .cont-resultado:hover { border-color: var(--campo-2); transform: translateY(-2px); }
.cont-card strong, .cont-resultado strong { color: var(--tinta); font-size: 18px; }
.cont-card small, .cont-resultado small { font-size: 11px; color: var(--terra); text-transform: uppercase; letter-spacing: .06em; }
.cont-card span, .cont-resultado span { font-size: 15px; color: var(--texto-suave); }
.cont-card .cont-card__rodape { margin-top: 8px; color: var(--campo); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cont-resultados { display: grid; gap: 10px; }

/* Página da documentação: menu, texto e "nesta página" */
.doc { display: grid; gap: 32px; padding: 32px 0 72px; grid-template-columns: minmax(0, 1fr); }
.doc__texto { min-width: 0; }
.doc__texto h1, .acad-aula h1 { font: 900 clamp(38px, 6vw, 56px)/1 var(--display); text-transform: uppercase; color: var(--tinta); margin-bottom: 18px; }
.doc__gaveta summary { cursor: pointer; font-weight: 700; color: var(--tinta); padding: 12px 16px; background: #fffdf6; border: 1px solid var(--linha); border-radius: 10px; }
.doc__menu nav { display: grid; gap: 2px; padding-top: 10px; }
.doc__menu h4, .doc__secoes h4 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); margin: 14px 0 4px; }
.doc__menu a, .doc__secoes a { display: block; padding: 5px 10px; border-radius: 8px; font-size: 15px; line-height: 1.3; text-decoration: none; color: var(--texto); }
.doc__menu a:hover, .doc__secoes a:hover { background: var(--papel-2); }
.doc__menu a.is-atual { background: var(--tinta); color: var(--papel); font-weight: 700; }
.doc__menu .doc__inicio { font-weight: 700; }
.doc__secoes { display: none; }
.doc__pager { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
.doc__pager a { flex: 1 1 220px; padding: 14px 18px; border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; font-weight: 700; color: var(--tinta); }
.doc__pager a:hover { border-color: var(--campo-2); }
.doc__pager small { display: block; font-weight: 400; font-size: 13px; color: var(--texto-suave); }
.doc__pager .doc__prox { text-align: right; }

@media (min-width: 900px) {
    .doc { grid-template-columns: 240px minmax(0, 1fr); }
    .doc__menu { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; }
    .doc__gaveta summary { display: none; }
}
@media (min-width: 1180px) {
    .doc { grid-template-columns: 240px minmax(0, 1fr) 210px; }
    .doc__secoes { display: block; position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; }
    .doc__secoes a { font-size: 14px; color: var(--texto-suave); }
}

/* Texto vindo do Markdown */
.prosa { max-width: 46em; }
.prosa > * + * { margin-top: 14px; }
.prosa h2 { font: 800 32px/1.1 var(--display); text-transform: uppercase; color: var(--tinta); margin-top: 40px; scroll-margin-top: 88px; }
.prosa h3 { font-size: 20px; color: var(--tinta); margin-top: 28px; scroll-margin-top: 88px; }
.prosa ul, .prosa ol { padding-left: 1.4em; display: grid; gap: 6px; }
.prosa a { color: var(--campo); font-weight: 600; }
.prosa .ancora { margin-left: 8px; font-weight: 400; color: var(--texto-suave); text-decoration: none; opacity: 0; }
.prosa h2:hover .ancora, .prosa h3:hover .ancora { opacity: 1; }
.prosa code { font: 400 .84em var(--mono); background: var(--papel-2); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.prosa pre { background: var(--tinta); color: var(--papel); padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
.prosa pre code { background: none; padding: 0; color: inherit; overflow-wrap: normal; }
.prosa blockquote { margin-inline: 0; padding: 12px 16px; background: var(--ipe-fundo); border-left: 4px solid var(--ipe); border-radius: 0 10px 10px 0; }
/* tabela larga rola dentro do próprio bloco, não na página */
.prosa table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.prosa th, .prosa td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--linha); min-width: 120px; }
.prosa th { color: var(--tinta); }

/* Fotos das telas: o nome do arquivo define o tamanho (-celular, tela-pi-, -recorte). */
.prosa img { display: block; width: 100%; height: auto; border: 1px solid var(--linha); border-radius: 10px; background: #fff; }
.prosa img[src*="-celular"] { width: min(300px, 100%); }
.prosa img[src*="tela-pi-"] { width: min(360px, 100%); border-color: var(--tinta); }
.prosa img[src*="-recorte"] { width: auto; max-width: 100%; }

/* Academy */
.acad-barra { background: var(--campo); color: var(--papel); font-size: 14px; }
.acad-barra__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 9px 0; }
.acad-barra__marca { font-size: 12px; font-weight: 600; text-decoration: none; }
.acad-barra__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.acad-barra__acoes a, .acad-barra__acoes button { color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.acad-barra__nome { font-weight: 700; }
.acad-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.acad-aulas a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fffdf6; border: 1px solid var(--linha); border-radius: 10px; text-decoration: none; color: var(--tinta); }
.acad-aulas a:hover { border-color: var(--campo-2); }
.acad-aulas__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--papel-2); font-size: 13px; font-weight: 600; }
.acad-aulas .is-feita .acad-aulas__n { background: var(--campo-2); color: #fff; }
.acad-aulas__titulo { flex: 1; min-width: 0; font-weight: 600; }
.acad-aulas__titulo small { display: block; font-weight: 400; color: var(--campo-2); }
.acad-aulas a > small { flex: none; font-size: 12px; color: var(--texto-suave); }
.acad-acao { margin-top: 16px; }
.acad-aula { padding: 28px 0 72px; max-width: 760px; }
.acad-voltar { display: block; width: fit-content; margin-bottom: 18px; font-size: 15px; color: var(--campo); font-weight: 600; }
.acad-video { width: 100%; border-radius: var(--raio); background: #000; margin-bottom: 20px; }
.acad-nota { margin-top: 10px; font-size: 14px; color: var(--campo-2); }
.acad-aula > .auth__alert { margin-top: 16px; }
.acad-prova { display: grid; gap: 18px; margin-top: 22px; }
.acad-prova fieldset { margin: 0; padding: 16px 18px; background: #fffdf6; border: 1px solid var(--linha); border-radius: var(--raio); display: grid; gap: 8px; min-width: 0; }
.acad-prova fieldset.tem-erro { border-color: #b42318; }
.acad-prova legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-weight: 700; color: var(--tinta); }
.acad-prova label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-radius: 8px; cursor: pointer; clear: both; }
.acad-prova label:hover { background: var(--papel-2); }
.acad-prova input { margin-top: 5px; flex: none; }
.field small:not(.field__err) { font-weight: 400; color: var(--texto-suave); }

/* Certificado: A4 deitado na impressão */
.cert-pagina { padding: 28px 0 72px; }
.cert-valido { padding: 12px 16px; background: #e4f5e0; border-left: 5px solid var(--campo-2); border-radius: 0 10px 10px 0; color: var(--campo); margin-bottom: 16px; }
.cert-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cert { max-width: 900px; margin-inline: auto; padding: clamp(24px, 6vw, 56px); background: #fff; color: var(--tinta); text-align: center; border: 2px solid var(--campo); outline: 8px solid var(--ipe-fundo); outline-offset: -14px; border-radius: 6px; display: grid; gap: 8px; justify-items: center; }
.cert__logo { height: 46px; width: auto; margin-bottom: 10px; }
.cert__titulo { font: 900 clamp(32px, 6vw, 54px)/1 var(--display); text-transform: uppercase; color: var(--campo); margin-bottom: 14px; }
.cert__nome { font: 800 clamp(28px, 5vw, 44px)/1.1 var(--display); border-bottom: 2px solid var(--ipe); padding: 0 24px 6px; overflow-wrap: anywhere; }
.cert__curso { font-size: clamp(20px, 3.5vw, 26px); font-weight: 700; }
.cert__rodape { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 26px; font-size: 13px; text-align: left; }
.cert__rodape > span:first-child { font-weight: 700; }
.cert__codigo { text-align: right; overflow-wrap: anywhere; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body::before, .nav, .foot, .cert-valido, .cert-acoes, .auth__alert { display: none !important; }
    html, body { background: #fff !important; }
    .wrap.cert-pagina { width: 100%; padding: 0; }
    .cert { max-width: none; min-height: 180mm; align-content: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}