/* Páginas de case (/cases/<id>): o formato de página de projeto, na matéria da PineCone (preto, bronze, luz). */
main section { position: relative; }
.cs-rotulo { color: var(--bronze); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cs-rotulo sup { color: var(--muted-light); font-size: 10px; margin-left: 6px; vertical-align: top; }

/* 1 · abertura */
.cs-abertura { padding: 120px 0 80px; }
.cs-volta a { color: var(--muted-light); text-decoration: none; }
.cs-volta a::before { content: "↩ "; }
.cs-nome { font-size: clamp(36px, 5.4vw, 88px); line-height: .95; letter-spacing: .04em; margin: 18px 0 14px; }
.cs-linha { color: var(--muted-light); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; max-width: 48em; }
.cs-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 6vh; }
.cs-ficha dt { color: var(--muted-light); font-size: 12px; margin-bottom: 10px; }
.cs-ficha dt i { font-style: normal; color: var(--bronze); }
.cs-ficha dd { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light, #F1F2EC); }
.cs-ficha .cs-desafio { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--muted-light); }
.cs-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.cs-etiquetas li { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border: 1px solid var(--line-light); border-radius: 999px; }

/* 2 · a frase e 3 · as entregas */
.cs-texto { padding: 12vh 0 10vh; }
.cs-frase { border-top: 1px solid var(--line-light); padding-top: 18px; }
.cs-frase p { margin-top: 26px; font-size: clamp(20px, 2.3vw, 36px); line-height: 1.32; max-width: 30em; }
.cs-seta { color: var(--bronze); margin-right: 18px; }
.cs-lista { margin-top: 12vh; border-top: 1px solid var(--line-light); padding-top: 18px; }
.cs-lista ol { list-style: none; padding: 0; margin: 22px 0 0; }
.cs-lista li { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line-light); font-size: clamp(15px, 1.2vw, 18px); }
.cs-lista li .mono { color: var(--bronze); font-size: 11px; }

/* 4 · galeria */
.cs-galeria { padding: 4vh 0 8vh; display: grid; gap: 8vh; }
.cs-peca { margin: 0 auto; width: min(1180px, calc(100% - 32px)); border-radius: 18px; overflow: hidden; border: 1px solid var(--line-light); }
.cs-peca img, .cs-peca video { display: block; width: 100%; height: auto; }
.cs-peca.cs-cheia { width: 100%; border-radius: 0; border-left: 0; border-right: 0; }
.cs-marca { background: #F1F2EC; display: grid; place-items: center; padding: 14vh 8vw; }
.cs-marca img { width: min(720px, 100%); }
/* grade: fileiras da mesma altura, cada peça na largura da sua proporção (flex-grow = largura/altura) */
.cs-grade { width: min(1180px, calc(100% - 32px)); margin: 0 auto; display: grid; gap: 16px; }
.cs-fileira { display: flex; gap: 16px; }
.cs-fileira .cs-peca { flex: var(--p) 1 0; min-width: 0; margin: 0; }
@media (max-width: 760px) {   /* no celular, duas colunas que se encaixam */
  .cs-grade { display: block; columns: 2; column-gap: 10px; }
  .cs-fileira { display: contents; }
  .cs-fileira .cs-peca { break-inside: avoid; margin-bottom: 10px; }
}
.cs-vaga { text-align: center; color: rgba(201,165,140,.7); border: 1px dashed rgba(201,165,140,.35); padding: 12px 16px; width: max-content; margin: 0 auto; }

/* 5 · ficha técnica */
.cs-tecnica { padding: 8vh 0; }
.cs-linha-tec { border-top: 1px solid var(--line-light); padding: 18px 0 28px; }
.cs-linha-tec p { margin-top: 16px; color: var(--muted-light); max-width: 52em; font-size: clamp(15px, 1.15vw, 18px); }
.cs-linha-tec ul { list-style: none; padding: 0; margin: 14px 0 0; }
.cs-linha-tec li { padding: 9px 0; border-bottom: 1px solid var(--line-light); font-size: clamp(14px, 1.1vw, 17px); }
.cs-linha-tec li:last-child { border-bottom: 0; }
.cs-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 12px rgba(255,196,130,.8); margin-right: 10px; vertical-align: middle; }

/* 6 · chamada */
.cs-chamada { padding: 6vh 0 10vh; }
.cs-cartao { display: block; text-decoration: none; color: inherit; border-radius: 22px; padding: clamp(32px, 5vw, 64px); border: 1px solid rgba(201,165,140,.25);
  background: radial-gradient(ellipse at 75% 60%, rgba(255,196,130,.16), transparent 60%), linear-gradient(140deg, #1B1E28, #07080B 70%); }
.cs-cartao .title { font-size: clamp(34px, 5.4vw, 80px); line-height: 1; max-width: 9em; }
.cs-cartao .mono { color: var(--muted-light); margin-top: 22px; max-width: 30em; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.cs-botao { display: inline-block; margin-top: 28px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--bronze); color: var(--bronze); transition: background .4s, color .4s; }
.cs-cartao:hover .cs-botao { background: var(--bronze); color: #000; }

/* 7 · próximo case */
.cs-proximo { height: 150vh; }
.cs-fixo { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.cs-fixo > .mono { color: var(--muted-light); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.cs-anel { width: 76px; height: 76px; transform: rotate(-90deg); }
.cs-anel circle { fill: none; stroke: var(--line-light); stroke-width: 2; }
.cs-anel .cheio { stroke: var(--bronze); stroke-dasharray: 1; stroke-dashoffset: 1; }
.cs-anel text { transform: rotate(90deg); transform-origin: 40px 40px; fill: var(--bronze); font-size: 22px; text-anchor: middle; }
.cs-prox-nome { font-size: clamp(30px, 4.4vw, 64px); text-decoration: none; color: inherit; }
/* o desenho do próximo, em pontos de luz, atrás do nome (como a "Próxima semente" das outras páginas) */
.cs-fixo { position: sticky; overflow: hidden; }
.cs-fixo > :not(.cs-prox-cena) { position: relative; z-index: 1; }
.cs-prox-cena { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cs-prox-cena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s var(--grow); }
.cs-proximo.viva .cs-prox-cena canvas { opacity: .7; }
body.atravessando .cs-fixo > :not(.cs-prox-cena) { opacity: 0; transition: opacity .45s; }