/* Treinamentos Pandexa (pandexa.com.br/treinamentos): o visual do site, so tema claro, sem animacao ao rolar.
   Fonte Plus Jakarta Sans servida daqui (SIL OFL 1.1, OFL.txt no repositorio). Do celular (320 px) ao monitor largo, nada rola de lado. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonte.woff2") format("woff2"); }

:root {
  --navy: #0B2A47; --navy-2: #103D68; --blue: #1769C2; --blue-dark: #0F4F96; --accent: #6EE7D8;
  --ink: #0F1B2D; --text: #3B4A5E; --muted: #66758A; --line: #E2E8F0; --soft: #F3F6FA;
  --ok: #067647; --ok-bg: #E7F8EF; --warn: #A15C07; --warn-bg: #FEF4E2; --bad: #B42318; --bad-bg: #FDECEA;
  --radius: 14px; --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; background: #fff; color: var(--text); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0 0 12px; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }
svg { width: 1em; height: 1em; flex: none; }
.faixa { width: min(1200px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; left: -9999px; }
.pular { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.pular:focus { left: 8px; }
:focus-visible { outline: 3px solid #F5B301; outline-offset: 3px; border-radius: 6px; }
.ajuda { color: var(--muted); font-size: 15px; }
.miudo { font-size: 13.5px; }
mark { background: #FFF1B8; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---------- cabecalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; }
.nav { display: flex; align-items: center; gap: 18px; min-height: 68px; position: relative; }
.marca { display: inline-flex; flex: none; align-items: center; color: #fff; }   /* flex none: sem isso a logo encolhe ate sumir a 1100 px */
.marca img { display: block; height: 30px; width: auto; }
.selo-topo { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.selo-topo:hover { color: #fff; }
.links { display: flex; gap: 2px; margin: 0 auto 0 0; padding: 0; list-style: none; }
.links a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: rgba(255, 255, 255, .86); font-weight: 600; font-size: 15px; white-space: nowrap; }
.links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 22px; height: 22px; }

/* ---------- busca ---------- */
.busca { position: relative; display: flex; align-items: stretch; margin: 0; }
.busca input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 14px; border: 1.5px solid rgba(255, 255, 255, .35); border-right: 0; border-radius: 999px 0 0 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 500 15px var(--font); }
.busca input::placeholder { color: rgba(255, 255, 255, .6); }
.busca input:focus { outline: none; background: rgba(255, 255, 255, .16); border-color: var(--accent); }
.busca button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 0 999px 999px 0; background: var(--blue); color: #fff; font: 700 15px var(--font); cursor: pointer; }
.busca button:hover { background: var(--blue-dark); }
.busca button svg { width: 18px; height: 18px; }
.topo .busca { width: 300px; }
.topo .busca button span { display: none; }
.busca-grande { max-width: 760px; margin: 26px auto 0; }
.busca-grande input { min-height: 56px; padding: 10px 22px; font-size: 17px; background: #fff; color: var(--ink); border-color: #fff; }
.busca-grande input::placeholder { color: var(--muted); }
.busca-grande input:focus { background: #fff; }
.busca-grande button { min-height: 56px; padding: 0 24px; font-size: 16px; }
.interna .pagina .busca-grande input { border-color: #CBD5E1; }
.busca-viva { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -24px rgba(4, 16, 32, .45); color: var(--text); text-align: left; }
.busca-viva ul { margin: 0; padding: 0; list-style: none; }
.busca-viva a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.busca-viva a:hover, .busca-viva a:focus { background: var(--soft); }
.viva-onde { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.viva-titulo { display: block; color: var(--ink); font-weight: 750; font-size: 15.5px; }
.viva-trecho { display: block; font-size: 13.5px; color: var(--text); }
.viva-todos { display: block; padding: 10px 12px; font-weight: 700; font-size: 14.5px; }
.viva-nada { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 14.5px; }

/* ---------- abertura ---------- */
.abertura { background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 64px 0 72px; text-align: center; }
.pre { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.abertura .pre { color: var(--accent); }
.abertura h1 { color: #fff; font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -.03em; }
.abertura .realce { color: var(--accent); }
.abertura .lead { max-width: 640px; margin: 18px auto 0; font-size: 18px; color: rgba(255, 255, 255, .86); }

/* ---------- inicio ---------- */
.secao { padding: 56px 0 0; }
.secao h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 20px; }
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.produto { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; color: var(--text); box-shadow: 0 10px 30px -24px rgba(15, 27, 45, .35); }
.produto:hover { border-color: var(--blue); color: var(--text); }
.produto.destaque { grid-column: 1 / -1; padding: 32px; background: linear-gradient(135deg, #E6F0FB, #fff 60%); border-color: #B9D3F0; }
.produto-nome { color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.produto.destaque .produto-nome { font-size: 30px; }
.produto-frase { font-size: 16px; }
.produto-conta { margin-top: 8px; color: var(--blue); font-weight: 700; font-size: 14.5px; }
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 64px; }
.modulo { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); text-decoration: none; color: var(--text); }
.modulo:hover { background: #E6F0FB; border-color: #B9D3F0; color: var(--text); }
.modulo .ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--blue); color: #fff; margin-bottom: 6px; }
.modulo-nome { color: var(--ink); font-size: 18px; font-weight: 750; }
.modulo-desc { font-size: 14.5px; }
.modulo-conta { margin-top: auto; padding-top: 8px; color: var(--blue); font-weight: 700; font-size: 13.5px; }

/* ---------- paginas internas ---------- */
.pagina { padding: 22px 0 64px; flex: 1; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; }
.trilha li + li::before { content: "›"; margin: 0 6px; color: var(--muted); }
.trilha a { color: var(--muted); text-decoration: none; }
.trilha a:hover { color: var(--blue); }
.trilha [aria-current] { color: var(--ink); font-weight: 650; }
.cabeca { margin-bottom: 22px; }
.cabeca h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.cabeca .pre .ico { width: 18px; height: 18px; }
.cabeca .lead { margin-top: 12px; font-size: 18px; max-width: 760px; }
.cabeca .meta { margin-top: 8px; color: var(--muted); font-size: 14px; }
.modulos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.modulo-bloco { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.modulo-bloco h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 8px; }
.modulo-bloco h2 .ico { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--blue); color: #fff; }
.modulo-bloco h2 a { color: var(--ink); text-decoration: none; }
.modulo-bloco h2 a:hover { color: var(--blue); }
.lista-tutoriais { margin: 10px 0 0; padding-left: 22px; }
.lista-tutoriais li { margin: 0 0 6px; }
.lista-tutoriais a { text-decoration: none; font-weight: 600; }
.lista-tutoriais a:hover { text-decoration: underline; }

.duas-colunas { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 36px; align-items: start; }
/* menu do modulo: lista no branco da pagina, colada no cabecalho fixo (top = altura do cabecalho), sem cartao; assim nao sobra
   faixa branca entre o cabecalho e o menu quando a pagina rola */
.lateral { position: sticky; top: 68px; max-height: calc(100vh - 68px); overflow: auto; padding: 12px 18px 28px 0; border-right: 1px solid var(--line); background: #fff; font-size: 15px; scrollbar-width: thin; }
.lateral-produto { margin: 0 0 6px; padding: 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lateral-produto a { color: inherit; text-decoration: none; }
.lateral-produto a:hover { color: var(--blue); }
.lateral details { border-top: 1px solid var(--line); }
.lateral summary { display: flex; align-items: center; gap: 8px; padding: 10px 6px; cursor: pointer; color: var(--ink); font-weight: 700; list-style: none; }
.lateral summary::-webkit-details-marker { display: none; }
.lateral summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 800; }
.lateral details[open] summary::after { content: "−"; }
.lateral summary .ico { width: 18px; height: 18px; color: var(--blue); }
.lateral ol { margin: 0 0 8px; padding: 0 0 0 10px; list-style: none; }
.lateral ol a { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14.5px; }
.lateral ol a:hover { background: #E6F0FB; }
.lateral ol a[aria-current] { background: var(--blue); color: #fff; font-weight: 700; }

.conteudo { min-width: 0; }
.tutoriais { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cartao-tutorial { display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; color: var(--text); }
.cartao-tutorial:hover { border-color: var(--blue); color: var(--text); }
.cartao-tutorial .numero { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue); color: #fff; font-weight: 800; }
.cartao-tutorial .titulo { display: block; color: var(--ink); font-size: 18px; font-weight: 750; }
.cartao-tutorial .resumo { display: block; font-size: 15px; margin-top: 2px; }

/* ---------- texto do tutorial ---------- */
.sumario { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.sumario p { margin: 0 0 6px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sumario ol { margin: 0; padding-left: 20px; font-size: 15px; }
.sumario a { text-decoration: none; font-weight: 600; }
.texto { font-size: 17px; }
.texto h2 { margin: 36px 0 12px; font-size: 26px; padding-top: 6px; }
.texto h3 { margin: 24px 0 8px; font-size: 20px; }
.texto p { margin: 0 0 14px; }
.texto ul { margin: 0 0 16px; padding-left: 24px; }
.texto li { margin: 0 0 8px; }
.texto ol.passos { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: passo; }
.texto ol.passos li { position: relative; padding: 4px 0 4px 52px; min-height: 40px; margin-bottom: 12px; counter-increment: passo; }
.texto ol.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.texto kbd { display: inline-block; padding: 1px 8px; border: 1px solid #CBD5E1; border-bottom-width: 3px; border-radius: 7px; background: var(--soft); color: var(--ink); font: 700 14px var(--font); white-space: nowrap; }
.texto code { padding: 1px 6px; border-radius: 6px; background: var(--soft); font: 500 15px Consolas, "Cascadia Mono", monospace; }
.texto .aviso { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); border-left-width: 5px; background: var(--soft); }
.texto .aviso strong { margin-right: 4px; }
.texto .aviso.dica { border-left-color: var(--ok); background: var(--ok-bg); }
.texto .aviso.atencao, .texto .aviso.cuidado { border-left-color: var(--warn); background: var(--warn-bg); }
.texto .aviso.nota { border-left-color: var(--blue); background: #E6F0FB; }
.texto figure.tela { margin: 6px 0 24px; }
.texto figure.tela img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 20px 44px -26px rgba(15, 27, 45, .55); cursor: zoom-in; }
.texto figcaption { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.texto .falta { color: var(--bad); font-weight: 650; }
.texto hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.video { margin: 6px 0 24px; }
.video-capa { position: relative; display: block; max-width: 720px; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.video-capa img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.video-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.video-capa:hover .video-play { background: var(--blue-dark); }
.video-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-weight: 700; }
.video-nota { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.video iframe { display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; }
.video-link { padding: 12px 16px; border-radius: 12px; background: var(--soft); }
.passo-a-passo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.passo-a-passo a { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 700; }
.passo-a-passo a:hover { border-color: var(--blue); }
.passo-a-passo a small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; }
.passo-a-passo .proximo { text-align: right; }

/* ---------- busca (pagina) ---------- */
.resultados { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 860px; }
.resultado a { display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--text); background: #fff; }
.resultado a:hover { border-color: var(--blue); }
.resultado .onde { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.resultado .titulo { display: block; color: var(--ink); font-size: 18px; font-weight: 750; }
.resultado .trecho { display: block; margin-top: 4px; font-size: 15px; }

/* ---------- rodape e zoom ---------- */
.rodape { margin-top: auto; padding: 22px 0; border-top: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: 14px; }
.rodape p { margin: 0 0 6px; }
.zoom { max-width: min(96vw, 1600px); max-height: 96vh; padding: 0; border: 0; border-radius: 14px; background: #000; }
.zoom::backdrop { background: rgba(4, 16, 32, .8); }
.zoom img { display: block; max-width: 96vw; max-height: 96vh; width: auto; height: auto; }
.zoom-fechar { position: absolute; right: 10px; top: 10px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zoom-fechar svg { width: 20px; height: 20px; }

/* ---------- telas menores ---------- */
@media (max-width: 1200px) {   /* entre 860 e 1200 px o cabecalho nao cabe inteiro: busca menor, links mais justos, sem o selo */
  .nav { gap: 12px; }
  .selo-topo { display: none; }
  .links a { padding: 8px 9px; font-size: 14.5px; }
  .topo .busca { width: 210px; }
}
@media (max-width: 1000px) {
  .duas-colunas { grid-template-columns: 1fr; gap: 20px; }
  .lateral { position: static; max-height: none; order: 2; padding: 18px 0 0; border-right: 0; border-top: 1px solid var(--line); }   /* no celular o texto vem antes do menu do modulo */
  .lateral details:not([open]) ol { display: none; }
}
@media (max-width: 1000px) {   /* abaixo de 1000 px os links nao cabem ao lado da busca: vao para o menu do botao */
  .topo .busca { width: auto; flex: 1; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 10px; background: var(--navy-2); border-top: 1px solid rgba(255, 255, 255, .12); }
  .links.aberto { display: flex; }
  .menu-btn { display: inline-flex; }   /* margin-left auto: fica na direita tambem no inicio, que nao tem a busca no cabecalho */
  .nav { gap: 10px; }
  .selo-topo { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .faixa { width: min(1200px, 100% - 28px); }
  .marca img { height: 24px; }   /* a logo nao encolhe sozinha (flex none): menor, para a busca e o botao do menu caberem a 320 px */
  .nav { gap: 8px; }
  .topo .busca { min-width: 0; }
  .topo .busca input { width: 60px; padding-inline: 12px; }
  .topo .busca button { padding: 0 12px; }
  .abertura { padding: 40px 0 48px; }
  .busca-grande { flex-direction: column; gap: 8px; }
  .busca-grande input, .busca-grande button { border-radius: 999px; border-right: 1.5px solid var(--line); }
  .busca-viva { left: 0; right: 0; }
  .produto.destaque { padding: 22px; }
  .texto { font-size: 16px; }
  .texto h2 { font-size: 22px; }
  .texto ol.passos li { padding-left: 46px; }
  .texto ol.passos li::before { width: 34px; height: 34px; font-size: 15px; }
  .passo-a-passo { grid-template-columns: 1fr; }
  .passo-a-passo .proximo { text-align: left; }
  .cartao-tutorial { padding: 14px; gap: 12px; }
}
@media print { .topo, .rodape, .lateral, .passo-a-passo, .busca { display: none; } .duas-colunas { grid-template-columns: 1fr; } }