/* =====================================================================
   processo.css — página "Processo criativo" (como a marca foi feita)
   ===================================================================== */
.pc-capa { padding: 56px var(--margem) 64px; }
.caminho { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; letter-spacing: 0.08em; color: var(--broto); }
.caminho a { color: var(--broto); }
.caminho .barra { color: var(--musgo); }
.pc-capa-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: end; margin-top: 48px; }
.pc-capa-txt { display: flex; flex-direction: column; gap: 20px; }
.pc-intro { margin: 0; font-family: var(--f-serifa); font-size: 30px; line-height: 1.2; }
.pc-logo { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; font-weight: 400; overflow: hidden; }
.glifo-xl { font-size: 13px; line-height: 15px; color: var(--musgo); }
.pc-creative { font-family: var(--f-mono); font-weight: 500; font-size: 20px; letter-spacing: 0.62em; color: var(--broto); margin-right: -0.62em; }

.pc-secao { padding: 32px var(--margem) 56px; }
.secao-topo .rotulo { color: var(--broto); }
.secao-topo .n { color: var(--musgo); }
em { font-style: normal; color: var(--broto); }

.pc-conceito { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pc-conceito > div { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--musgo-escuro); }
.pc-conceito p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--papel-2); }

.pc-cores { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 4px; }
.pc-cor { min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.pc-cor:first-child { box-shadow: inset 0 0 0 1px var(--musgo-escuro); }
.pc-cor.claro { color: var(--papel); }
.pc-cor.escuro { color: #171C10; }
.pc-cor-nome { font-family: var(--f-serifa); font-size: 34px; line-height: 1; }
.pc-cor-info { font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; }
.pc-nota { margin: 18px 0 0; font-size: 11px; line-height: 1.6; letter-spacing: 0.06em; color: var(--broto); }

.pc-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pc-tipo { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--musgo-escuro); background: rgba(23,28,16,0.6); }
.pc-amostra { height: 160px; display: flex; align-items: center; justify-content: center; }
.glifo-j { font-size: 7px; line-height: 7.5px; }
.pc-amostra.helv { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.068em; font-size: 120px; line-height: 1; }
.pc-amostra.fell { font-family: var(--f-serifa); font-size: 120px; line-height: 1; color: var(--broto); }
.pc-amostra.mono { font-family: var(--f-mono); font-size: 110px; line-height: 1; }
.pc-tipo p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--papel-2); }
.pc-tipo .rotulo { font-size: 11px; line-height: 1.7; color: var(--musgo); margin-top: auto; }

.pc-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pc-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--musgo-escuro); }
.pc-fig figcaption { font-size: 11px; letter-spacing: 0.08em; color: var(--broto); }
.pc-grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pc-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 40px 0; }
.pc-fim { padding: 24px var(--margem) 48px; }
.pc-fim p { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--musgo); }
.pc-fim a { color: var(--broto); }

@media (max-width: 1100px) {
  .pc-capa-grid { grid-template-columns: 1fr; }
  .pc-logo { align-items: flex-start; }
  .pc-conceito, .pc-tipos, .pc-grade4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-cores { grid-template-columns: repeat(2, 1fr); }
  .pc-cor:first-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .pc-capa { padding-top: 32px; }
  .pc-intro { font-size: 24px; }
  .glifo-xl { font-size: 5.6px; line-height: 6.5px; }
  .pc-creative { font-size: 14px; }
  .pc-conceito, .pc-tipos, .pc-grade3 { grid-template-columns: 1fr; }
  .pc-grade4 { gap: 12px; }
  .pc-cor { min-height: 150px; }
  .pc-cor-nome { font-size: 28px; }
}