/* ============================================================
   OSS YOGA · resumo-curso.css
   "Em resumo" + "Onde este curso se encaixa", logo depois do topo
   das paginas de formacao e de modulo (padronizacao de 30/09/2026).

   O desenho segue o piloto publicado no Vinyasa Aperfeicoamento 100h
   (pages/vinyasa-100h.html, 626713a), que continua com o CSS dele.
   Aqui tudo sai de --page-accent: cada pagina mantem a propria cor.

   --rc-sobre-acento e a cor do texto em cima da cor do curso: escuro
   no ouro (PRO), claro no indigo, no bambu, no cobre e no azul.
   ============================================================ */
.rc-resumo{
  --rc-sobre-acento:var(--pergaminho);
  background:var(--floresta-2);color:var(--text-claro,#F5F1E8);
  padding:96px 0 150px;position:relative;
}
.rc-resumo .container{max-width:1240px;margin:0 auto;padding:0 48px}
.rc-col{max-width:860px}
.rc-resumo .eyebrow{margin-bottom:22px}
.rc-resumo h2{
  font-family:Georgia,'Times New Roman',serif;font-weight:300;line-height:1.1;
  font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--pergaminho);margin-bottom:34px;
}
.rc-resumo h2 em,.rc-encaixe-tit em{color:var(--page-accent);font-style:italic}

.rc-lista{border-top:1px solid rgba(245,241,232,.14);margin:0}
.rc-lista>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid rgba(245,241,232,.14)}
.rc-lista dt{font-size:.66rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--page-accent) 60%,var(--pergaminho));padding-top:4px}
.rc-lista dd{margin:0;font-size:1rem;line-height:1.65;color:rgba(245,241,232,.86)}
.rc-lista .rc-destaque{
  background:color-mix(in srgb,var(--page-accent) 12%,transparent);
  border-left:3px solid var(--page-accent);
  padding-left:18px;padding-right:14px;margin-left:-21px;
}
.rc-lista .rc-destaque dd{color:var(--pergaminho)}
.rc-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.rc-encaixe{margin-top:88px;padding-top:56px;border-top:1px solid rgba(245,241,232,.14)}
.rc-encaixe .eyebrow{margin-bottom:18px}
.rc-encaixe-tit{
  font-family:Georgia,'Times New Roman',serif;font-weight:300;line-height:1.15;
  font-size:clamp(1.6rem,3vw,2.2rem);color:var(--pergaminho);margin-bottom:28px;
}
.rc-escolha{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.rc-botao{
  font:600 .74rem/1.2 Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(245,241,232,.8);background:transparent;border:1px solid rgba(245,241,232,.3);
  padding:15px 20px;min-height:48px;cursor:pointer;border-radius:0;
  transition:border-color .25s,color .25s,background .25s;
}
.rc-botao:hover{border-color:var(--page-accent);color:var(--pergaminho)}
.rc-botao[aria-pressed="true"]{background:var(--page-accent);border-color:var(--page-accent);color:var(--rc-sobre-acento)}
.rc-botao:focus-visible,.rc-link:focus-visible,.rc-resumo .btn:focus-visible{outline:2px solid var(--pergaminho);outline-offset:3px}

/* A barra e uma grade: 500 horas em colunas proporcionais. Linha 1 leva
   a chave do curso (so a do curso da pagina); linha 2, os segmentos. */
.rc-trilho{display:grid;grid-template-columns:100fr 100fr 50fr 50fr 50fr 50fr 50fr 50fr;grid-template-rows:26px 46px;column-gap:4px;row-gap:8px}
.rc-chave{
  grid-row:1;border-top:1px solid var(--page-accent);border-left:1px solid var(--page-accent);border-right:1px solid var(--page-accent);
  opacity:0;transition:opacity .3s;min-width:0;
  display:flex;justify-content:center; /* rotulo mais largo que a chave cresce para os dois lados */
}
.rc-chave span{
  display:inline-block;white-space:nowrap;transform:translateY(-60%);background:var(--floresta-2);
  padding:0 10px;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--pergaminho);
}
.rc-chave.is-on{opacity:1}
/* chave nas ultimas colunas: o rotulo cresce para a esquerda e nunca passa da borda */
.rc-chave--dir{justify-content:flex-end}
.rc-seg{
  grid-row:2;display:flex;align-items:center;justify-content:center;min-width:0;
  font-size:.72rem;font-weight:700;letter-spacing:1px;
  background:rgba(245,241,232,.06);color:rgba(245,241,232,.3);
  border:1px dashed rgba(245,241,232,.16);transition:background .35s,color .35s,border-color .35s;
}
.rc-seg.is-on[data-tom="curso"]{background:var(--page-accent);color:var(--rc-sobre-acento);border:1px solid var(--page-accent)}
.rc-seg.is-on[data-tom="curso2"]{background:color-mix(in srgb,var(--page-accent) 50%,transparent);color:var(--pergaminho);border:1px solid var(--page-accent)}
.rc-seg.is-on.is-forte{background:var(--page-accent);color:var(--rc-sobre-acento);border:1px solid var(--page-accent)}
.rc-seg.is-on[data-tom="outra"]{background:rgba(245,241,232,.72);color:var(--floresta);border:1px solid rgba(245,241,232,.72)}

.rc-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;padding:0;font-size:.84rem;color:rgba(245,241,232,.4)}
.rc-legenda li{display:flex;align-items:center;gap:8px;transition:color .3s}
.rc-legenda li::before{content:"";width:12px;height:12px;flex:none;border:1px dashed rgba(245,241,232,.3)}
.rc-legenda li.is-on{color:var(--pergaminho)}
.rc-legenda li.is-on[data-tom="curso"]::before{background:var(--page-accent);border:1px solid var(--page-accent)}
.rc-legenda li.is-on[data-tom="curso2"]::before{background:color-mix(in srgb,var(--page-accent) 50%,transparent);border:1px solid var(--page-accent)}
.rc-legenda li.is-on[data-tom="outra"]::before{background:rgba(245,241,232,.72);border:1px solid rgba(245,241,232,.72)}

.rc-escalas{margin-top:30px;max-width:820px}
.rc-escala+.rc-escala{margin-top:26px}
.rc-escala[hidden]{display:none}
.rc-escala-num{font-family:Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--pergaminho);margin:0 0 8px}
.rc-escala p:not(.rc-escala-num){margin:0;font-size:1rem;line-height:1.7;color:rgba(245,241,232,.82)}
.rc-link{display:inline-block;margin-top:12px;font-size:.74rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--pergaminho);border-bottom:1px solid var(--page-accent);padding-bottom:4px}
.rc-link:hover{color:var(--page-accent)}

@media(max-width:600px){
  .rc-resumo{padding:72px 0 120px}
  .rc-resumo .container{padding:0 22px}
  .rc-lista>div{grid-template-columns:minmax(0,1fr);gap:6px}
  .rc-lista .rc-destaque{margin-left:-12px;padding-left:9px;padding-right:10px}
  .rc-acoes .btn,.rc-botao{width:100%;text-align:center}
  .rc-trilho{grid-template-rows:24px 38px;column-gap:3px}
  .rc-chave span{padding:0 6px;letter-spacing:1.2px;font-size:.6rem}
  .rc-seg{font-size:0}
  .rc-legenda{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .rc-seg,.rc-legenda li,.rc-chave,.rc-botao{transition:none}
}
