/* ==========================================================================
   v7-paginas.css: o ENTORNO de Praticar, Cursos, Engenharia Civil e das páginas comuns (page.php). Dona: Frente 6.
   Fonte: C:\AI\projects\ensino-ulysses\themes\ensino-tema\css\v7-paginas.css
   Veste só o que cerca o conteúdo: cabeçalho da página (carta náutica ao amanhecer ou céu estrelado), rótulo, título,
   migalhas, navegação entre páginas irmãs, cabeçalho de seção. NADA dentro dos painéis do motor de atividades
   (.ensino-praticar, .ensino-atv*, .ensino-atv-painel, cartões e grades de atividade) nem dentro das grades de cartões.
   Escopo por classe do <body> (F1: j-pagina-praticar | cursos | engenharia | outra), nunca por tag solta.
   Regras: fronteira .ensino-atv intacta; movimento só transform/opacity (aqui só há transição de hover); html[data-calmo] zera.
   ========================================================================== */

/* ---------- 1. Cabeçalho da página com o "mundo" no topo (céu de carta náutica; estrelas fixas, custo zero de quadro) ---------- */
body.j-pagina-praticar .e-pagina--praticar>.e-pagina__cabeca,
body.j-pagina-cursos .e-cursos>.e-cat-cabeca,
body.j-pagina-outra .e-pagina:not(.e-pagina--funil):not(.e-pagina--praticar)>.e-pagina__cabeca{
  position:relative;overflow:hidden;
  padding:clamp(1.25rem,.8rem + 2vw,2.25rem) clamp(1.25rem,.8rem + 2.4vw,2.5rem) clamp(1.25rem,.8rem + 1.6vw,2rem);
  color:var(--j-tinta);
  border:1px solid var(--j-linha-2);border-radius:6px;
  box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-ceu-1),inset 0 0 0 4px var(--j-linha);
  background-color:var(--j-ceu-1);
  background-image:
    radial-gradient(1.4px 1.4px at 38px 34px,var(--j-estrela),transparent 60%),
    radial-gradient(1px 1px at 150px 74px,var(--j-estrela),transparent 60%),
    radial-gradient(1.6px 1.6px at 262px 22px,var(--j-estrela),transparent 60%),
    radial-gradient(1px 1px at 94px 118px,var(--j-estrela),transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 115%,var(--j-sol),transparent 70%),
    linear-gradient(180deg,var(--j-ceu-1) 0%,var(--j-ceu-2) 100%);
  background-size:300px 150px,300px 150px,300px 150px,300px 150px,auto,auto;
  background-repeat:repeat,repeat,repeat,repeat,no-repeat,no-repeat}
@supports (corner-shape:bevel){
  body.j-pagina-praticar .e-pagina--praticar>.e-pagina__cabeca,
  body.j-pagina-cursos .e-cursos>.e-cat-cabeca,
  body.j-pagina-outra .e-pagina:not(.e-pagina--funil):not(.e-pagina--praticar)>.e-pagina__cabeca{border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}
}
/* a régua dourada do v6 continua no pé do cabeçalho; só fica um pouco mais viva */
body.j-pagina-praticar .e-pagina--praticar>.e-pagina__cabeca::after,
body.j-pagina-cursos .e-cursos>.e-cat-cabeca::after,
body.j-pagina-outra .e-pagina:not(.e-pagina--funil):not(.e-pagina--praticar)>.e-pagina__cabeca::after{background:linear-gradient(90deg,var(--j-ouro-vivo),var(--j-ouro))}

/* ---------- 2. Rótulo (sobrelinha) e título: Chakra Petch e Fraunces, um acento só (ouro) ---------- */
body.j-pagina-praticar .e-pagina__cabeca :is(.e-eyebrow,.e-sobrelinha),
body.j-pagina-cursos :is(.e-cat-cabeca,.e-cat-disc__titulo,.e-curso__intro) .e-sobrelinha,
body.j-pagina-cursos .e-curso__intro .e-eyebrow,
body.j-pagina-outra .e-pagina__cabeca :is(.e-eyebrow,.e-sobrelinha),
body.j-pagina-engenharia :is(.e-eng-cabeca,.e-eng-sec__cabeca) :is(.e-eyebrow,.e-sobrelinha){
  display:inline-flex;align-items:center;gap:.6em;
  font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto)}
body.j-pagina-praticar .e-pagina__cabeca :is(.e-eyebrow,.e-sobrelinha)::before,
body.j-pagina-cursos .e-cat-cabeca .e-sobrelinha::before,
body.j-pagina-outra .e-pagina__cabeca :is(.e-eyebrow,.e-sobrelinha)::before,
body.j-pagina-engenharia .e-eng-cabeca :is(.e-eyebrow,.e-sobrelinha)::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.8}
body.j-pagina-praticar .e-pagina__cabeca h1,
body.j-pagina-cursos :is(.e-cat-cabeca,.e-curso__intro) h1,
body.j-pagina-outra .e-pagina__cabeca h1,
body.j-pagina-engenharia .e-eng-cabeca h1{font-family:var(--j-fonte-logo);font-weight:700;letter-spacing:-.025em;color:var(--j-tinta);text-wrap:balance}
body.j-pagina-praticar .e-pagina__cabeca h1,
body.j-pagina-outra .e-pagina__cabeca h1{line-height:1.02}
body.j-pagina-cursos .e-cat-lede,body.j-pagina-cursos .e-cat-lede p,body.j-pagina-outra .e-pagina__resumo,
body.j-pagina-engenharia .e-eng-lede{color:var(--j-tinta-2)}

/* cabeçalho de seção (Cursos, Guias, Por disciplina): título em Fraunces com o mesmo fio */
body.j-pagina-cursos .e-cat-disc__titulo h2,
body.j-pagina-engenharia .e-eng-sec__cabeca h2{font-family:var(--j-fonte-logo);font-weight:700;letter-spacing:-.02em;color:var(--j-tinta)}
body.j-pagina-cursos .e-cat-disc__conta,body.j-pagina-engenharia .e-eng-sec__cabeca>p,body.j-pagina-engenharia .e-eng-grupo__conta{color:var(--j-tinta-2)}
body.j-pagina-outra .e-secao__titulo-menor{font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto)}

/* ---------- 3. Migalhas e trilha ---------- */
body.j-pagina-cursos .e-cat-migalha,body.j-pagina-engenharia .e-cat-migalha,
body.j-pagina-outra .e-trilha-nav ol{font:600 .875rem/1.3 var(--j-fonte-ui);color:var(--j-tinta-2)}
body.j-pagina-cursos .e-cat-migalha a,body.j-pagina-engenharia .e-cat-migalha a,body.j-pagina-outra .e-trilha-nav a{color:var(--j-tinta);font-weight:600;text-decoration:none}
body.j-pagina-cursos .e-cat-migalha a:hover,body.j-pagina-engenharia .e-cat-migalha a:hover,body.j-pagina-outra .e-trilha-nav a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--j-tinta)}
body.j-pagina-cursos .e-cat-migalha [aria-current],body.j-pagina-engenharia .e-cat-migalha [aria-current],body.j-pagina-outra .e-trilha-nav [aria-current]{color:var(--j-ouro-texto);font-weight:700}
body.j-pagina-outra .e-trilha-nav li+li::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;margin-right:.2rem}

/* ---------- 4. Cabeçalho da página do curso e prancha de Engenharia: a mesma moldura de placa ---------- */
body.j-pagina-cursos .e-curso__cabeca{border-color:var(--j-linha-2);border-radius:6px;box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-painel),inset 0 0 0 4px var(--j-linha);background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel))}
body.j-pagina-cursos .e-curso__cabeca::before{background:linear-gradient(90deg,var(--j-ouro-vivo),var(--j-ouro))}
body.j-pagina-cursos .e-curso__fatos li{color:var(--j-tinta-2);background:var(--j-fundo-1);border-color:var(--j-linha-2)}
body.j-pagina-engenharia .e-eng-cabeca{border-color:var(--j-linha-2);border-radius:6px;box-shadow:var(--j-sombra-painel)}
@supports (corner-shape:bevel){
  body.j-pagina-cursos .e-curso__cabeca,body.j-pagina-engenharia .e-eng-cabeca{border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}
}

/* ---------- 5. Entre páginas irmãs (page.php): placas de seleção; a seta anda no hover ---------- */
body.j-pagina-outra .e-irmaos-nav{border-top-color:var(--j-linha-2)}
body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima){
  position:relative;color:var(--j-tinta);text-decoration:none;
  background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));border:1px solid var(--j-linha-2);border-radius:6px;
  box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-painel),inset 0 0 0 4px var(--j-linha);
  transition:transform var(--j-d-3) var(--j-mola-suave),border-color var(--j-d-1)}
@supports (corner-shape:bevel){body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima){border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}}
body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima):hover{transform:translate3d(0,-4px,0);border-color:var(--j-linha-ouro)}
body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima)>span{font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--j-ouro-texto)}
body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima)>strong{font-family:var(--j-fonte-logo);color:var(--j-tinta)}

/* ---------- 6. Celular e movimento reduzido ---------- */
@media (max-width:30rem){
  body.j-pagina-praticar .e-pagina--praticar>.e-pagina__cabeca,
  body.j-pagina-cursos .e-cursos>.e-cat-cabeca,
  body.j-pagina-outra .e-pagina:not(.e-pagina--funil):not(.e-pagina--praticar)>.e-pagina__cabeca{background-size:240px 130px,240px 130px,240px 130px,240px 130px,auto,auto}
}
@media (prefers-reduced-motion:reduce){body.j-pagina-outra .e-irmaos-nav :is(.e-irmaos-nav__anterior,.e-irmaos-nav__proxima):hover{transform:none}}
@media print{
  body.j-pagina-praticar .e-pagina--praticar>.e-pagina__cabeca,body.j-pagina-cursos .e-cursos>.e-cat-cabeca,
  body.j-pagina-outra .e-pagina>.e-pagina__cabeca{background:none!important;box-shadow:none!important;border-color:#999!important}
}

/* ---------- 9. "Jogar a matéria" (plugin comum ensino-jogar, injetado na saída; a lógica e o HTML são dele, aqui só a pele) ----------
   O plugin escreve um <style> no corpo da página com seletores de uma classe; os de baixo levam html[data-v7] para ganhar sem !important. */
html[data-v7] .e-jogar{gap:.9rem 1.75rem;margin:clamp(1.25rem,1rem + 1vw,2rem) 0;padding:1.25rem 1.5rem;border:1px solid var(--j-linha-2);border-radius:6px;color:var(--j-tinta);
  background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-painel),inset 0 0 0 4px var(--j-linha)}
@supports (corner-shape:bevel){html[data-v7] .e-jogar{border-radius:var(--j-chanfro) var(--j-chanfro-p);corner-shape:bevel}}
html[data-v7] .e-jogar::before{inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--j-ouro-vivo),var(--j-ouro))}
html[data-v7] .e-jogar .e-sobrelinha{display:block;margin:0 0 .25rem;font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto)}
html[data-v7] .e-jogar h2,html[data-v7] .e-jogar h3{margin:0 0 .3rem;font-family:var(--j-fonte-logo);font-weight:700;letter-spacing:-.01em;color:var(--j-tinta)}
html[data-v7] .e-jogar p{color:var(--j-tinta-2);font-size:1rem;line-height:1.5;max-width:52ch}
html[data-v7] .e-jogar__acoes{gap:.75rem;align-items:center;justify-content:flex-end}
html[data-v7] .e-jogar__btn{min-height:48px}
html[data-v7] .e-jogar__btn small{opacity:.9}
html[data-v7] .e-jogar p.e-jogar__extras{max-width:none}
html[data-v7] .e-jogar__extras{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1.25rem;margin:0;padding-top:.7rem;border-top:1px solid var(--j-linha-2);font:600 .9375rem/1.4 var(--j-fonte-ui);color:var(--j-tinta-3)}
html[data-v7] .e-jogar__extras a{margin:0;padding:.4rem 0;color:var(--j-ouro-texto);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
html[data-v7] .e-jogar__extras a:hover{color:var(--j-tinta)}
html[data-v7] .e-jogar__admin{font-family:var(--j-fonte-ui)}
@media (max-width:47.99rem){
  html[data-v7] .e-jogar{padding:1.1rem 1.1rem 1.1rem 1.35rem}
  html[data-v7] .e-jogar__acoes{justify-content:stretch}
  html[data-v7] .e-jogar__btn{flex:1 1 100%;justify-content:center}
}
/* em /escola/ o plugin põe o bloco dentro de um .e-container que já está dentro de outro: sem isto o respiro lateral dobra */
html[data-v7] .e-container .e-container:has(>.e-jogar--lista){width:auto;margin-inline:0}
@media print{html[data-v7] .e-jogar{display:none}}