/* Canil Gelbes Wasser — paginas "problema primeiro" (v38). Prefixo esc- (escada: problema > consequencia > criterio > caminhos > o canil).
   Regras: todo o conteudo esta no HTML e visivel sem JS; movimento so em transform/opacity; nada anima o LCP (h1 e resposta curta);
   prefers-reduced-motion desliga tudo. Tokens da versao clara do blog (--paper, --ink, --gold, --gold-d, --line). */

/* resposta curta (primeiro paragrafo citavel) */
.esc-resposta{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.4rem 1.2rem;margin:0 0 2rem}
.esc-resposta .lead{margin-bottom:.6rem!important}
.esc-rotulo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .9rem;font-family:'Syne',sans-serif;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-d)}
.esc-nw{white-space:nowrap}
@media (max-width:520px){.esc-resposta{padding:1.2rem 1.1rem 1rem}.esc-resposta .lead{font-size:1.08rem!important}}
.esc-rotulo .esc-data{font-family:'DM Mono',monospace;letter-spacing:.04em;text-transform:none;font-weight:400;color:#5E574C;border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem}

/* a escada: 5 degraus como navegacao da pagina */
.esc-nav{position:relative;margin:0 0 2.6rem}
.esc-escada{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative;counter-reset:esc}
.esc-escada li{position:relative;counter-increment:esc}
.esc-escada a{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start;min-height:44px;padding:.75rem .2rem .9rem 0;text-decoration:none;color:var(--ink)}
.esc-escada a::before{content:counter(esc,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid #A8842E;background:var(--paper);font-family:'Syne',sans-serif;font-weight:800;font-size:.8rem;color:var(--gold-d);position:relative;z-index:1;transition:background .2s cubic-bezier(.2,.8,.2,1),color .2s cubic-bezier(.2,.8,.2,1)}
.esc-escada a:hover::before,.esc-escada a:focus-visible::before{background:#C9A84C;color:#0A0A0A}
.esc-escada a:focus-visible{outline:2px solid #C9A84C;outline-offset:3px;border-radius:10px}
.esc-escada b{display:block;font-family:'Syne',sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin:.15rem 0 .2rem}
.esc-escada span{display:block;font-size:.95rem;line-height:1.45;color:var(--ink)}
/* trilho que liga os degraus: elemento proprio, desenhado com scale (transform) */
.esc-trilho{position:absolute;left:21px;top:22px;bottom:22px;width:1.5px;background:#A8842E;opacity:.55;transform-origin:top center;pointer-events:none}
@media (min-width:760px){
  .esc-escada{grid-template-columns:repeat(5,1fr);gap:.8rem}
  .esc-escada a{grid-template-columns:1fr;gap:.6rem;padding:0 0 .4rem}
  .esc-trilho{left:22px;right:calc((100% - 3.2rem) / 5 - 22px);top:21px;bottom:auto;width:auto;height:1.5px;transform-origin:left center}
}

/* tabela de criterios */
.esc-tabela{width:100%;border-collapse:separate;border-spacing:0;margin:1.6rem 0 1rem;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.93rem}
.esc-tabela caption{caption-side:top;text-align:left;font-family:'Syne',sans-serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-d);padding:0 0 .7rem}
.esc-tabela th,.esc-tabela td{padding:.85rem .95rem;text-align:left;vertical-align:top;border-top:1px solid #EEE7DA;line-height:1.5}
.esc-tabela thead th{border-top:0;background:#1A1814;color:#F5F0E8;font-family:'Syne',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.esc-tabela tbody th{font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;color:var(--ink);width:24%}
.esc-tabela td{color:var(--ink2)}
.esc-tabela td small{display:block;margin-top:.35rem;font-family:'DM Mono',monospace;font-size:.7rem;color:#5E574C;letter-spacing:.02em}
@media (max-width:620px){
  .esc-tabela,.esc-tabela tbody,.esc-tabela tr,.esc-tabela th,.esc-tabela td{display:block;width:100%}
  .esc-tabela caption{display:block;width:100%;padding:1rem .95rem .2rem}
  .esc-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .esc-tabela tbody tr{border-top:1px solid #EEE7DA;padding:.4rem 0}
  .esc-tabela tbody tr:first-child{border-top:0}
  .esc-tabela tbody th{border-top:0;padding:.75rem .95rem .2rem;width:100%}
  .esc-tabela td{border-top:0;padding:.3rem .95rem .55rem}
  .esc-tabela td::before{content:attr(data-col);display:block;font-family:'Syne',sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-d);margin-bottom:.15rem}
}

/* passos e erros (listas com icone proprio) */
.esc-passos{list-style:none;margin:1.4rem 0 2rem;padding:0;display:grid;gap:.9rem;counter-reset:passo}
.esc-passos li{counter-increment:passo;display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.05rem;font-size:.98rem;line-height:1.6;color:var(--ink2)}
.esc-passos li::before{content:counter(passo);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1A1814;color:#C9A84C;font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem}
.esc-passos b,.esc-erros b{display:block;color:var(--ink);font-weight:700;margin-bottom:.15rem}
.esc-erros{list-style:none;margin:1.2rem 0 2rem;padding:0;display:grid;gap:.8rem}
.esc-erros li{display:grid;grid-template-columns:30px 1fr;gap:.85rem;align-items:start;padding:.9rem 1rem;border:1px solid #E6D3C8;border-radius:12px;background:#FBF6F3;font-size:.97rem;line-height:1.6;color:var(--ink2)}
.esc-erros svg,.esc-limite svg,.esc-metodo svg{width:30px;height:30px;fill:none;stroke:#A8842E;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.esc-erros svg{stroke:#9C6B52}

/* quando isso nao resolve (honestidade) */
.esc-limite{display:grid;grid-template-columns:30px 1fr;gap:1rem;margin:2.4rem 0;padding:1.4rem 1.4rem 1.2rem;border:1px solid var(--line);border-left:3px solid #A8842E;border-radius:4px 14px 14px 4px;background:#fff}
.esc-limite h2{margin:0 0 .7rem!important;font-size:clamp(1.5rem,3.4vw,2rem)!important}
.esc-limite p:last-child,.esc-limite ul:last-child{margin-bottom:0}
.esc-limite ul{margin:0 0 1rem 1.1rem;color:var(--ink2);line-height:1.7}
.esc-limite li{margin-bottom:.4rem}

/* como sabemos (metodologia) */
.esc-metodo{display:grid;grid-template-columns:30px 1fr;gap:1rem;margin:2.6rem 0;padding:1.3rem 1.4rem;border-radius:14px;background:var(--paper2);border:1px solid var(--line)}
.esc-metodo h2{font-family:'Syne',sans-serif!important;font-size:.7rem!important;letter-spacing:.2em;text-transform:uppercase;font-weight:700!important;color:var(--gold-d);margin:.4rem 0 .7rem!important}
.esc-metodo p{font-size:.95rem!important;margin-bottom:.8rem!important}
.esc-metodo p:last-child{margin-bottom:0!important}

/* ---------- movimento ---------- */
/* 1) navegacao entre paginas (mesmo site): transicao de documento, so como melhoria progressiva */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* 2) trilho da escada e linhas da tabela entram com a rolagem (CSS puro, onde o navegador suporta) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .esc-trilho{animation:esc-trilho linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
    .esc-tabela tbody tr,.esc-passos li,.esc-erros li{animation:esc-sobe linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes esc-trilho{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (min-width:760px){@keyframes esc-trilho{from{transform:scaleX(0)}to{transform:scaleX(1)}}}
/* so transform: o conteudo nunca fica invisivel, nem antes de rolar */
@keyframes esc-sobe{from{transform:translateY(18px)}to{transform:none}}

/* 3) sem animation-timeline: o JS marca o que esta abaixo da dobra (.esc-pre) e desliza uma vez (.esc-in). So transform: nada fica invisivel */
.esc-pre{transform:translateY(16px)}
.esc-in{transform:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media print{.esc-pre,.esc-in,.esc-trilho,.esc-tabela tbody tr,.esc-passos li,.esc-erros li{transform:none!important;animation:none!important}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .esc-pre{transform:none}
  .esc-in,.esc-escada a::before{transition:none}
  .esc-trilho,.esc-tabela tbody tr,.esc-passos li,.esc-erros li{animation:none}
}