/* =========================================================
   PRÉ-EDITAL DPE/RN — landing do curso
   Usa o sistema de styles.css. Aqui só o que é próprio da
   página: a ficha do concurso, a grade dos 4 grupos, as
   apostilas por aba e o Juris de Impacto (o bloco noturno).
   ========================================================= */

/* ---------- hero ---------- */
.curso-hero .hero-titulo { font-size: clamp(3rem, 6.6vw, 5.25rem); }
.hero-titulo .sub { display: block; font-size: .5em; letter-spacing: -.02em; margin-top: var(--s2); color: var(--ink-2); }
.hero-rotulo { display: block; margin-bottom: var(--s4); color: var(--voz); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.provas b span { display: inline; margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
.provas-fonte { padding-bottom: var(--s5); color: var(--ink-3); font-size: .8125rem; }
@media (max-width: 640px) {
  .hero-titulo .sub { font-size: .56em; }
  .grupo b { font-size: 2.5rem; }
  .grupo, .grupo + .grupo { padding-right: var(--s3); }
  .grupo + .grupo { padding-left: var(--s3); }
  .grupo:nth-child(3) { padding-left: 0; }
}

/* ---------- a prova: 100 questões em 4 grupos ---------- */
.grupos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-2); }
.grupo { padding: var(--s5) var(--s4) var(--s4) 0; }
.grupo + .grupo { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.grupo-n { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--voz); }
.grupo b { display: block; margin-top: var(--s2); font-family: var(--serif); font-weight: 500; font-size: 3rem; line-height: 1; letter-spacing: -.03em; }
.grupo b small { font-size: 1rem; letter-spacing: 0; color: var(--ink-3); margin-left: 6px; }
.grupo p { margin-top: var(--s3); color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.barra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: var(--s5); }
.barra span { height: 8px; border-radius: 2px; background: var(--orange); }
.barra span:nth-child(even) { background: var(--voz); }
.prova-regra { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--ink-3); font-size: .9375rem; }
.prova-regra b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
  .grupos { grid-template-columns: repeat(2, 1fr); }
  .grupo:nth-child(3) { padding-left: 0; border-left: 0; }
  .grupo:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 359px) {
  .grupos { grid-template-columns: 1fr; }
  .grupo, .grupo + .grupo { padding: var(--s4) 0; border-left: 0; }
  .grupo + .grupo { border-top: 1px solid var(--rule); }
}

/* ---------- o curso: pilares ---------- */
.pilar dt { display: flex; gap: var(--s3); align-items: baseline; }
.pilar dt span { flex: none; min-width: 2ch; font-family: var(--serif); color: var(--voz); }
.pilar dd ul { display: grid; gap: 6px; }
.pilar dd li { position: relative; padding-left: 20px; }
.pilar dd li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--orange); }

.dia-prova { margin-top: var(--s8); }
.dia-prova h3 { font-family: var(--serif); font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.2; letter-spacing: -.015em; }
.dia-prova > p { margin-top: var(--s3); color: var(--ink-2); max-width: 60ch; }
.extras { margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.extra { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: var(--s5); }
.extra h4 { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.01em; }
.extra p { margin-top: var(--s2); color: var(--ink-2); font-size: .9688rem; }
@media (max-width: 900px) { .extras { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dia-prova { margin-top: var(--s7); } .extra { padding: var(--s4); } }

/* ---------- disciplinas: abas por grupo ---------- */
.legenda { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s4); font-size: .9375rem; color: var(--ink-2); }
.legenda span { display: inline-flex; align-items: center; gap: var(--s2); }
.marca { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.marca.alta { background: var(--orange); }
.marca.media { border: 2px solid var(--voz); }

.abas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.no-js .abas { display: none; }
.aba-painel + .aba-painel { margin-top: var(--s6); }
.js-abas .aba-painel + .aba-painel { margin-top: 0; }
.aba-painel[hidden] { display: none; }
.aba-titulo { font-family: var(--serif); font-size: 1.5rem; margin-bottom: var(--s4); }
.js-abas .aba-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.apostilas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.apostila { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: var(--s5); min-width: 0; }
.apostila-n { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.apostila h3 { margin-top: var(--s2); font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; }
.temas { margin-top: var(--s4); display: grid; gap: 10px; }
.temas li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: baseline; font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.temas li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
.temas li.a { color: var(--ink); }
.temas li.a::before { background: var(--orange); }
.temas li.m::before { border: 2px solid var(--voz); }
.aviso { margin-top: var(--s5); padding-left: var(--s3); border-left: 2px solid var(--voz); color: var(--ink-2); font-size: .9375rem; max-width: 72ch; }
@media (max-width: 980px) { .apostilas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .apostilas { grid-template-columns: 1fr; } .apostila { padding: var(--s4); } }

/* ---------- Juris de Impacto: o bloco noturno ---------- */
.juris-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.juris-passos li { border-top: 1px solid var(--n-rule); padding-top: var(--s4); }
.juris-passos span { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--n-orange); }
.juris-passos h3 { margin-top: var(--s2); font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; }
.juris-passos p { margin-top: var(--s2); color: var(--n-ink-2); font-size: .9688rem; }

.juris-demo { margin-top: var(--s7); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s6); align-items: start; }
.jficha { background: var(--night-2); border: 1px solid var(--n-rule); border-left: 4px solid var(--orange); border-radius: 10px; padding: var(--s5); }
.jficha-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); align-items: center; font-size: .875rem; }
.jficha-topo span:first-child { color: var(--n-ink-2); font-weight: 600; }
.jficha-selo { padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: .75rem; font-weight: 600; }
.jficha-tese { margin-top: var(--s4); font-family: var(--serif); font-size: 1.375rem; line-height: 1.4; color: #fff; }
.jficha dl { margin-top: var(--s4); display: grid; gap: var(--s3); border-top: 1px solid var(--n-rule); padding-top: var(--s4); }
.jficha dt { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(246, 242, 251, .64); }
.jficha dd { color: var(--n-ink-2); font-size: .9688rem; }
.jlegenda { margin-top: var(--s3); font-size: .875rem; color: rgba(246, 242, 251, .64); }

.amostra h3 { font-family: var(--serif); font-size: 1.375rem; }
.amostra > p { margin-top: var(--s2); color: var(--n-ink-2); font-size: .9375rem; }
.amostra details { border-bottom: 1px solid var(--n-rule); }
.amostra details:first-of-type { margin-top: var(--s4); border-top: 1px solid var(--n-rule); }
.amostra summary {
  list-style: none; cursor: pointer; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  font-weight: 600; font-size: 1rem;
}
.amostra summary::-webkit-details-marker { display: none; }
.amostra summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--n-orange); transition: transform .3s var(--ease); }
.amostra details[open] summary::after { transform: rotate(45deg); }
.amostra ul { display: grid; gap: 12px; padding-bottom: var(--s4); }
.amostra li { color: var(--n-ink-2); font-size: .9375rem; line-height: 1.5; }
.amostra li b { display: block; color: #fff; font-weight: 600; font-size: .875rem; }
@media (max-width: 900px) { .juris-passos, .juris-demo { grid-template-columns: 1fr; } .juris-passos { gap: var(--s4); } }
@media (max-width: 640px) { .jficha { padding: var(--s4); } .jficha-tese { font-size: 1.1875rem; } }

/* ---------- cronograma ---------- */
.fases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.fase { border-top: 2px solid var(--voz); padding-top: var(--s4); }
.fase.pos { border-top-color: var(--orange); }
.fase span { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.fase h3 { margin-top: var(--s2); font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.fase p { margin-top: var(--s2); color: var(--ink-2); font-size: .9688rem; }

.semana { margin-top: var(--s7); }
.semana h3 { font-family: var(--serif); font-size: 1.375rem; }
.semana > p { margin-top: var(--s2); color: var(--ink-2); font-size: .9375rem; }
.tabela { margin-top: var(--s4); overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--white); }
.tabela table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9375rem; }
.tabela th, .tabela td { padding: 14px var(--s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela th { font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
.tabela td:first-child { font-weight: 600; color: var(--ink); }
.tabela td { color: var(--ink-2); }
@media (max-width: 980px) { .fases { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); } }
@media (max-width: 560px) { .fases { grid-template-columns: 1fr; } }

/* ---------- rodapé: fonte ---------- */
.foot-fonte { margin-top: var(--s5); color: rgba(246, 242, 251, .68); font-size: .875rem; max-width: 80ch; line-height: 1.6; }
.foot-fonte a { color: var(--n-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- abas (não usa .filtro para não cair no filtro de cursos do app.js) ---------- */
.aba {
  min-height: 44px; font-size: .9375rem; font-weight: 500; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: var(--white); color: var(--ink-2); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.aba:hover { border-color: var(--ink); color: var(--ink); }
.aba[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.aba small { margin-left: 6px; opacity: .7; }

/* =========================================================
   MOVIMENTO
   Uma curva só (--ease), três durações (.5 / .9 / 1.4s),
   deslocamentos curtos. Nada entra girando nem quicando.
   Tudo depende de html.anima: com movimento reduzido, a
   página é a mesma, parada.
   ========================================================= */
:root { interpolate-size: allow-keywords; }

/* abas: pílula que desliza entre os grupos */
.abas { position: relative; }
.aba { position: relative; z-index: 1; }
.aba[aria-selected="true"] { background: transparent; border-color: transparent; }
.aba-pilula { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--ink); pointer-events: none; }
.abas.pronto .aba-pilula { transition: transform .5s var(--ease), width .5s var(--ease); }
.no-js .aba[aria-selected="true"] { background: var(--ink); }

/* nav: progresso de leitura e seção ativa */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange); transform-origin: left; transform: scaleX(var(--p, 0));
}
.nav-links a.ativo { color: var(--ink); }
.nav-links a.ativo::after { transform: scaleX(1); }

/* cartões: resposta ao cursor, discreta */
.apostila, .extra { transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.apostila:hover, .extra:hover { border-color: var(--rule-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.btn-1:active, .btn-2:active { transform: translateY(1px); }

/* details com altura animada onde o navegador suporta */
.faq details::details-content, .amostra details::details-content {
  height: 0; overflow: clip;
  transition: height .5s var(--ease), content-visibility .5s allow-discrete;
}
.faq details[open]::details-content, .amostra details[open]::details-content { height: auto; }

/* painel de aba entrando */
@keyframes painelEntra { from { opacity: 0; transform: translateY(12px); } }
.anima .aba-painel.entra .apostila { animation: painelEntra .5s var(--ease) both; }
.anima .aba-painel.entra .apostila:nth-child(2) { animation-delay: .06s; }
.anima .aba-painel.entra .apostila:nth-child(3) { animation-delay: .12s; }

/* ---------- hero: entrada ao carregar ---------- */
@keyframes sobe { from { transform: translateY(105%); } }
@keyframes aparece { from { opacity: 0; transform: translateY(16px); } }
/* só deslocamento, sem transparência: o texto conta para o LCP desde o primeiro quadro */
@keyframes desliza { from { transform: translateY(16px); } }
@keyframes revelaFoto { from { clip-path: inset(100% 0 0 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
@keyframes assenta { from { transform: scale(1.12); } }
@keyframes traco { from { transform: scaleX(0); } }

.hero-titulo .ln { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-titulo .ln > span { display: inline-block; }
.anima .hero-rotulo { animation: aparece .9s var(--ease) .05s both; }
.anima .hero-titulo .ln > span { animation: sobe 1.1s var(--ease) both; }
.anima .hero-titulo .ln:nth-child(1) > span { animation-delay: .12s; }
.anima .hero-titulo .ln:nth-child(2) > span { animation-delay: .22s; }
.anima .hero-titulo .sub { animation: desliza .9s var(--ease) .42s both; }
.anima .curso-hero .lead { animation: desliza .9s var(--ease) .52s both; }
.anima .curso-hero .cta-row { animation: desliza .9s var(--ease) .62s both; }
.anima .curso-hero .fundadora-foto { animation: revelaFoto 1.4s var(--ease) .2s both; }
.anima .curso-hero .fundadora-foto img { animation: assenta 1.8s var(--ease) .2s both; }
.anima .curso-hero .fundadora figcaption { animation: aparece .9s var(--ease) .9s both; }

/* anel da marca: parallax lento ao rolar */
.curso-hero::before { transform: translate3d(0, calc(var(--sy, 0) * .18px), 0) rotate(calc(var(--sy, 0) * .02deg)); will-change: transform; }

/* números do concurso: linha que se desenha e itens em sequência */
.anima .provas { border-top-color: transparent; }
.anima .provas::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule-2);
  transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease);
}
.anima .provas.in::before { transform: none; }
.anima .provas li { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.anima .provas.in li { opacity: 1; transform: none; }
.anima .provas.in li:nth-child(2) { transition-delay: .08s; }
.anima .provas.in li:nth-child(3) { transition-delay: .16s; }
.anima .provas.in li:nth-child(4) { transition-delay: .24s; }
[data-n] { font-variant-numeric: tabular-nums; }

/* ---------- revelação ao rolar ---------- */
.anima .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.anima .rv.in { opacity: 1; transform: none; }

/* grupos entram em sequência; a barra se preenche grupo a grupo */
.anima .grupos.rv, .anima .motivos.rv, .anima .juris-passos.rv, .anima .fases.rv { opacity: 1; transform: none; }
.anima .grupos.rv .grupo, .anima .motivos.rv .motivo, .anima .juris-passos.rv li, .anima .fases.rv .fase {
  opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.anima .rv.in .grupo, .anima .rv.in .motivo, .anima .rv.in li, .anima .fases.rv.in .fase { opacity: 1; transform: none; }
.anima .rv.in > :nth-child(2) { transition-delay: .08s; }
.anima .rv.in > :nth-child(3) { transition-delay: .16s; }
.anima .rv.in > :nth-child(4) { transition-delay: .24s; }
.anima .rv.in > :nth-child(5) { transition-delay: .32s; }

.anima .barra.rv { opacity: 1; transform: none; }
.anima .barra span { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.anima .barra.in span { transform: none; }
.anima .barra.in span:nth-child(2) { transition-delay: .15s; }
.anima .barra.in span:nth-child(3) { transition-delay: .3s; }
.anima .barra.in span:nth-child(4) { transition-delay: .45s; }

/* cronograma: o traço de cada fase se desenha em sequência */
.anima .fase { border-top-color: transparent; position: relative; }
.anima .fase::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--voz);
  transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease);
}
.anima .fase.pos::before { background: var(--orange); }
.anima .fases.in .fase::before { transform: none; }
.anima .fases.in .fase:nth-child(2)::before { transition-delay: .25s; }
.anima .fases.in .fase:nth-child(3)::before { transition-delay: .5s; }
.anima .fases.in .fase:nth-child(4)::before { transition-delay: .75s; }

/* Juris: a ficha é carimbada */
.anima .jficha { border-left-color: transparent; position: relative; }
.anima .jficha::before {
  content: ""; position: absolute; left: -4px; top: -1px; bottom: -1px; width: 4px; border-radius: 10px 0 0 10px;
  background: var(--orange); transform-origin: top; transform: scaleY(0); transition: transform 1.1s var(--ease) .2s;
}
.anima .jficha.in::before { transform: none; }
@keyframes carimbo { 0% { opacity: 0; transform: scale(1.6) rotate(-6deg); } 60% { opacity: 1; transform: scale(.96) rotate(0); } 100% { opacity: 1; transform: none; } }
.anima .jficha-selo { opacity: 0; }
.anima .jficha.in .jficha-selo { animation: carimbo .6s var(--ease) .7s both; }

@media (prefers-reduced-motion: reduce) {
  .curso-hero::before { transform: none; }
  .abas.pronto .aba-pilula { transition: none; }
}