/* EscutAdor — site/assets/css/pagina.css
   Casca de leitura das páginas internas (pt e en), carregada DEPOIS do site.css. Só acrescenta; não mexe no site.css.
   Classes que a casca oferece:
   .pagina          o <main>: espaço vertical da página; o .pagina-in dentro vira grade sumário | leitura a partir de 1100 px
   .pagina-cabeca   cabeçalho: .kicker, h1 (menor que o da home; <em class="accent"> quebra linha), .lede e .meta (dl em mono)
   .toc             sumário <nav class="toc"> com <ol> de links #: fichas em linha no celular, lista fixa (sticky) na coluna esquerda em tela larga
   .prosa           coluna de leitura (~68ch): p, h2 com <span class="num">, h3, ul (traço coral), ol (numeral mono), a (azul sublinhado), code, hr
   .resumo          <ol> de resumo com numeral grande em serifa itálica coral (o "resumo em cinco linhas")
   .etapas          <ol> de passos (1, 2, 3…) com h3 + p; mesma cara dos passos da home, sem reusar .passos
   .tabela-rolavel  <div> em volta de uma <table>: cabeçalho mono, células serifa; no celular rola só a tabela, nunca a página
   .destaque        cartão de destaque; .destaque-azul (o que fica no Mac), .destaque-coral (o que sai); <p class="frase"> para a sentença grande
   .faq             perguntas e respostas: <article> com h3 (a pergunta, "?" em <span class="qm">) e p (a resposta), separados por linha
   .pagina-pe       nota de fim de página em mono (par em outra língua, volta ao início) */

.pagina{padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,7rem)}
.pagina-in{display:block}
.pagina-cabeca{padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line);margin-bottom:clamp(2rem,4vw,3rem)}
.pagina-cabeca .kicker{margin-bottom:1.4rem}
.pagina-cabeca h1{font-size:clamp(2.6rem,5vw + .5rem,5.4rem);line-height:.98;max-width:18ch}
.pagina-cabeca .lede{max-width:56ch}
.pagina-cabeca .meta{margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem 2rem;padding-top:1.1rem;border-top:1px dashed var(--line2);
  font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.04em;line-height:1.55;color:var(--ink2)}
.pagina-cabeca .meta dt{text-transform:uppercase;letter-spacing:var(--track);color:var(--mute);font-weight:500;margin-bottom:.25rem}
.pagina-cabeca .meta dd{overflow-wrap:anywhere}
.pagina-cabeca .meta a{color:var(--blue);border-bottom:1px solid rgba(134,182,255,.35)}
.pagina-cabeca .meta a:hover{border-color:var(--blue)}

/* ---------- sumário ---------- */
.toc{font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.04em;line-height:1.5;margin-bottom:clamp(2rem,4vw,3rem)}
.toc .kicker{margin-bottom:.8rem}
.toc ol{display:flex;flex-wrap:wrap;gap:.5rem}
.toc a{display:inline-flex;align-items:center;gap:.6em;padding:.45em .85em;color:var(--mute);border:1px solid var(--line2);border-radius:999px;transition:color .2s ease,border-color .2s ease}
.toc a:hover{color:var(--ink);border-color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink)}

/* ---------- coluna de leitura ---------- */
.prosa{max-width:68ch;min-width:0;line-height:1.5;color:var(--ink2)}
.prosa section{scroll-margin-top:1.5rem}
.prosa section + section{margin-top:clamp(2.6rem,5vw,4rem)}
.prosa h2{font-size:clamp(1.7rem,1.4vw + 1rem,2.4rem);line-height:1.08;color:var(--ink);padding-top:1.4rem;border-top:1px solid var(--line)}
.prosa h2 .num{display:block;font-family:var(--mono);font-size:var(--mono-s);font-weight:500;letter-spacing:.1em;color:var(--coral);margin-bottom:.7rem;line-height:1}
.prosa h3{font-size:1.35rem;line-height:1.15;color:var(--ink);margin-top:2rem}
.prosa h2 + p,.prosa h3 + p,.prosa h2 + ul,.prosa h3 + ul,.prosa h2 + ol,.prosa h3 + ol{margin-top:1rem}
.prosa p + p,.prosa ul + p,.prosa ol + p,.prosa p + ul,.prosa p + ol,.prosa .destaque + p,.prosa .tabela-rolavel + p,.prosa p + .destaque{margin-top:1em}
.prosa .tabela-rolavel + ul,.prosa .tabela-rolavel + ol,.prosa .destaque + ul{margin-top:1.3rem}
.prosa a{color:var(--blue);border-bottom:1px solid rgba(134,182,255,.35);transition:border-color .2s ease;overflow-wrap:anywhere}
.prosa a:hover{border-color:var(--blue)}
.prosa strong{color:var(--ink);text-decoration-line:underline;text-decoration-color:rgba(255,107,74,.5);text-decoration-thickness:1px;text-underline-offset:.14em}
.prosa code{font-family:var(--mono);font-size:.82em;color:var(--ink);background:rgba(134,182,255,.09);border:1px solid var(--line);border-radius:5px;padding:.08em .4em;overflow-wrap:anywhere}
.prosa kbd{font-family:var(--mono);font-size:.82em;color:var(--ink);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:.05em .4em}
.prosa hr{border:0;border-top:1px solid var(--line);margin-block:2rem}
.prosa ul li{position:relative;padding-left:1.5em}
.prosa ul li + li{margin-top:.45em}
.prosa ul li::before{content:"";position:absolute;left:0;top:.78em;width:.8em;height:1px;background:var(--coral)}
.prosa ol:not(.resumo):not(.etapas){counter-reset:item}
.prosa ol:not(.resumo):not(.etapas) li{counter-increment:item;position:relative;padding-left:2.2em}
.prosa ol:not(.resumo):not(.etapas) li + li{margin-top:.45em}
.prosa ol:not(.resumo):not(.etapas) li::before{content:counter(item);position:absolute;left:0;top:.2em;font-family:var(--mono);font-size:var(--mono-s);font-weight:500;letter-spacing:.06em;color:var(--coral)}
.prosa .nota{font-size:.95rem;color:var(--mute);line-height:1.45}
.prosa .caminho{display:block;margin-top:1rem;font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.02em;color:var(--mute);overflow-wrap:anywhere;line-height:1.6}
.prosa .caminho code{font-size:1em}   /* piso de 12 px: o code herda o tamanho do .caminho, não encolhe de novo */

/* ---------- resumo em cinco linhas ---------- */
.resumo{margin-top:1.2rem;border-top:1px solid var(--line);counter-reset:resumo}
.resumo li{counter-increment:resumo;position:relative;padding:1rem 0 1rem 3.4rem;border-bottom:1px solid var(--line);line-height:1.45}
.resumo li::before{content:counter(resumo);position:absolute;left:0;top:.95rem;font-family:var(--serif);font-style:italic;font-size:2.1rem;line-height:.9;color:var(--coral)}

/* ---------- etapas (antes de começar) ---------- */
.etapas{margin-top:1.4rem;border-top:1px solid var(--line);counter-reset:etapa}
.etapas li{counter-increment:etapa;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.etapas li::before{content:counter(etapa);font-family:var(--serif);font-style:italic;font-size:2.2rem;line-height:.9;color:var(--coral)}
.etapas h3{font-size:1.4rem;line-height:1.1;margin-top:0}
.etapas p{margin-top:.4rem}
.etapas p + p{margin-top:.6rem}

/* ---------- tabela que rola no celular ---------- */
.tabela-rolavel{margin-top:1.4rem;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:rgba(11,17,32,.6)}
.tabela-rolavel table{width:100%;min-width:560px;border-collapse:collapse;line-height:1.4}
.tabela-rolavel th,.tabela-rolavel td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.tabela-rolavel thead th{font-family:var(--mono);font-size:var(--mono-s);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--mute);background:rgba(4,6,12,.5)}
.tabela-rolavel tbody th{font-weight:400;color:var(--ink);font-size:1.02rem;line-height:1.3;width:32%}
.tabela-rolavel td{font-size:.98rem;color:var(--ink2)}
.tabela-rolavel tbody tr:last-child th,.tabela-rolavel tbody tr:last-child td{border-bottom:0}
.tabela-rolavel td code{white-space:nowrap}
.tabela-rolavel .sim{color:var(--ink)}.tabela-rolavel .nao{color:var(--mute)}.tabela-rolavel .ctx{color:var(--coral)}

/* ---------- destaque ---------- */
.destaque{margin-top:1.6rem;padding:1.3rem clamp(1rem,3vw,1.8rem) 1.4rem;border:1px solid var(--line);border-radius:14px;background:rgba(11,17,32,.6)}
.destaque-azul{box-shadow:inset 3px 0 0 var(--blue)}
.destaque-coral{box-shadow:inset 3px 0 0 var(--coral)}
.destaque .kicker{margin-bottom:.8rem}
.destaque .frase{font-size:clamp(1.3rem,1.1vw + .8rem,1.75rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.destaque .frase .accent{font-style:italic}
.destaque p + p{margin-top:.7em}
.destaque .frase + p,.destaque .frase + ul{margin-top:.9rem}
.destaque ul li::before{background:currentColor;opacity:.6}
.destaque-coral ul li::before{background:var(--coral);opacity:1}
.destaque-azul ul li::before{background:var(--blue);opacity:1}

/* ---------- perguntas e respostas ---------- */
.faq{margin-top:1.2rem;border-top:1px solid var(--line)}
.faq article{padding:1.3rem 0;border-bottom:1px solid var(--line)}
.faq h3{margin-top:0;font-size:1.35rem;line-height:1.15}
.faq .qm{color:var(--coral)}
.faq p{margin-top:.6rem}
.faq p + p{margin-top:.6rem}

/* ---------- pé da página ---------- */
.pagina-pe{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  font-family:var(--mono);font-size:var(--mono-s);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.pagina-pe a{color:var(--mute);border-bottom:1px solid var(--line2);transition:color .2s ease,border-color .2s ease}
.pagina-pe a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- tela larga: sumário fixo à esquerda, leitura à direita ---------- */
@media (min-width:1100px){
  .pagina-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 clamp(2.5rem,5vw,5rem);align-items:start}
  .pagina-cabeca{grid-column:1/-1}
  .toc{position:sticky;top:1.5rem;max-height:calc(100svh - 3rem);overflow:auto;margin-bottom:0;padding-right:.5rem}
  .toc ol{display:grid;gap:0}
  .toc a{display:flex;padding:.55em 0;border:0;border-bottom:1px solid var(--line);border-radius:0;gap:.7em;align-items:baseline}
  .toc a::before{content:"";flex:none;width:.6em;height:1px;background:var(--coral);transform:scaleX(.5);transform-origin:left;transition:transform .3s var(--ease-out)}
  .toc a:hover::before{transform:scaleX(1)}
  .toc a:hover{border-color:var(--line)}
  .pagina-pe{grid-column:2}
}
@media (max-width:480px){
  .pagina-cabeca h1{font-size:clamp(2.2rem,11vw,2.8rem)}
  .tabela-rolavel th,.tabela-rolavel td{padding:.7rem .8rem}
  .resumo li{padding-left:2.8rem}
  .etapas li{grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem}
}