/* ═══════════════════════════════════════════════════════════════════════════
 * arke-arche.css — peças narrativas das páginas profundas do site.
 * Nasceu na /site/arche e é reaproveitada por /site/o-que-fazemos (a cadeia,
 * o grafo que se conecta, as lentes, as linhas de sistema, o card orbitado).
 * O que é de UMA página só fica no CSS daquela página.
 *
 * Tudo que já existe vem de `arke-home.css` (a camada de componentes do site:
 * .ark-card, .ark-badge, .ark-kv, .ark-rel, .ark-const, .ark-window, .ark-sec…)
 * e os tokens vêm de `css/arke-tokens.css` — a mesma fonte do arkēCORE.
 * Aqui entra SÓ o que a /arche inventa: o hero-manifesto, a cadeia
 * pergunta→ação, o card-entidade orbitado, as lentes, a memória que se conecta
 * e o ciclo. Nada é repetido de propósito.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Nesta página o protagonista tipográfico é o wordmark do hero — os títulos de
   seção são apoio. Um teto menor evita que palavra longa ("RESPONSABILIDADE.")
   estoure a coluna e mantém a hierarquia certa. Vale só aqui. */
.ark-sec .tp-section-title-playfair { font-size: clamp(29px, 3.2vw, 52px); line-height: 1.06; overflow-wrap: break-word; }

/* ═══ §1 · HERO-MANIFESTO ═══════════════════════════════════════════════════ */
.arq-hero {
  position: relative; overflow: hidden;
  min-height: min(100svh, 900px);
  display: grid; place-items: center;
  padding: clamp(120px, 16vh, 200px) 0 clamp(70px, 9vh, 120px);
  background: #0A0A0A;
}
.arq-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.arq-hero::after {                       /* halo do núcleo, ouro em baixa intensidade */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(52% 46% at 50% 42%, rgba(var(--accent-rgb),.10), transparent 72%);
}
.arq-hero > .container { position: relative; z-index: 2; text-align: center; }

.arq-hero__mark {
  display: block; margin: 0 auto clamp(26px, 3vw, 44px);
  width: clamp(96px, 11vw, 168px); height: auto;
  color: var(--accent, #C4973A);
  filter: drop-shadow(0 0 40px rgba(var(--accent-rgb),.34));
}
/* O símbolo "respira": lembra que a estrutura está viva, sem virar animação de tela. */
@media (prefers-reduced-motion: no-preference) {
  .arq-hero__mark { animation: arqPulso 7s ease-in-out infinite; }
  @keyframes arqPulso {
    0%, 100% { filter: drop-shadow(0 0 34px rgba(var(--accent-rgb),.28)); }
    50%      { filter: drop-shadow(0 0 54px rgba(var(--accent-rgb),.46)); }
  }
}

.arq-hero__word {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(66px, 15vw, 210px); line-height: .84; font-weight: 500;
  letter-spacing: -.035em; color: #F5F2ED; margin: 0;
}
.arq-hero__word em { font-style: italic; color: var(--accent, #C4973A); }
.arq-hero__sub {
  margin: clamp(22px, 2.6vw, 38px) 0 0;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(20px, 2.6vw, 38px); line-height: 1.18; letter-spacing: -.01em;
  color: var(--accent, #C4973A);
}
.arq-hero__txt {
  margin: clamp(30px, 3.4vw, 48px) auto 0; max-width: 60ch;
  color: #C9C4BC; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.78;
}
.arq-hero__txt span { display: block; }
.arq-hero__txt span + span { margin-top: 14px; }
.arq-hero__txt strong { color: #F5F2ED; font-weight: 600; }

.arq-down {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(34px, 4vw, 56px);
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #C9C4BC;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid rgba(245,242,237,.20);
  transition: color .35s ease, border-color .35s ease, background .35s ease;
}
.arq-down:hover { color: var(--accent, #C4973A); border-color: var(--accent, #C4973A); background: rgba(var(--accent-rgb),.07); }
.arq-down svg { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.arq-down:hover svg { transform: translateY(4px); }

/* ═══ §2 · A CADEIA pergunta → contexto → entidade → ação ═══════════════════ */
.arq-chain {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 26px); align-items: stretch;
  margin-top: clamp(44px, 5vw, 76px);
}
.arq-chain__step { position: relative; }
/* seta entre os elos — some no último e no mobile */
.arq-chain__step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2;
  top: 50%; right: calc(clamp(14px, 1.6vw, 26px) / -2 - 3px);
  width: 8px; height: 8px; margin-top: -4px;   /* cabe dentro do gap, não invade o card vizinho */
  border-top: 1px solid rgba(var(--accent-rgb),.75);
  border-right: 1px solid rgba(var(--accent-rgb),.75);
  transform: rotate(45deg);
}
.arq-chain__k {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #6B6560;
}
.arq-chain .ark-card { height: 100%; }

/* ═══ §4 · A ENTIDADE ORBITADA ═════════════════════════════════════════════ */
.arq-orbit {
  display: grid; grid-template-columns: 1fr minmax(0, 460px) 1fr;
  align-items: center; gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(40px, 5vw, 72px);
}
.arq-orbit__rel { display: grid; gap: 12px; }
.arq-orbit__rel--dir { justify-items: end; }
.arq-orbit__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px;
  background: var(--surface, #141414); border: 1px solid var(--border, #2A2A2A);
  color: #C9C4BC; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: border-color .35s ease, color .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.arq-orbit__chip:hover { border-color: rgba(var(--accent-rgb),.55); color: #F5F2ED; transform: translateX(4px); }
.arq-orbit__rel--dir .arq-orbit__chip:hover { transform: translateX(-4px); }
.arq-orbit__chip i {
  font-style: normal; font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6B6560;
}
.arq-orbit__chip::before {
  content: ""; width: 18px; height: 1px; flex: 0 0 auto; background: rgba(var(--accent-rgb),.5);
}
/* O card central é o herói: maior, com anel de destaque. */
.arq-entidade { border-color: rgba(var(--accent-rgb),.30) !important; padding: 26px !important; }
.arq-entidade__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(245,242,237,.10);
}
.arq-entidade__t { margin: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; color: #F5F2ED; letter-spacing: -.01em; }
.arq-entidade__tipo {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent, #C4973A);
}

/* As cinco qualidades da entidade (identidade, propriedades, contexto…) */
.arq-qual { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(40px, 4.4vw, 66px);
  background: rgba(245,242,237,.09); border: 1px solid rgba(245,242,237,.09); }
.arq-qual > div { background: #0C0C0C; padding: clamp(20px, 2.2vw, 30px); }
.arq-qual b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #F5F2ED; margin-bottom: 9px; }
.arq-qual p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #8B8680; }

/* ═══ §6 · AS SETE CAMADAS, uma a uma ══════════════════════════════════════ */
.arq-sys {
  display: grid; grid-template-columns: 200px minmax(0,1fr) minmax(0,.95fr);
  gap: clamp(18px, 2.6vw, 46px); align-items: start;
  padding: clamp(34px, 3.6vw, 56px) 0;
  border-top: 1px solid rgba(245,242,237,.10);
}
.arq-sys__nome {
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; color: #F5F2ED; letter-spacing: -.01em; margin: 0 0 6px;
}
.arq-sys__papel {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent, #C4973A);
}
.arq-sys__frase {
  margin: 0 0 14px; font-size: clamp(21px, 2.3vw, 33px); font-weight: 700;
  line-height: 1.08; letter-spacing: -.02em; color: #F5F2ED;
}
.arq-sys__frase em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: var(--accent, #C4973A); }
.arq-sys__txt { margin: 0; font-size: 14px; line-height: 1.7; color: #9A9590; }

/* ═══ §8 · AS LENTES — uma entidade, sete leituras ═════════════════════════ */
.arq-lentes { margin-top: clamp(40px, 4.6vw, 70px); }
.arq-lentes__bar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: clamp(24px, 2.6vw, 38px);
}
.arq-lente {
  background: none; border: 1px solid rgba(245,242,237,.16); color: #8B8680;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.arq-lente:hover { color: #F5F2ED; border-color: rgba(245,242,237,.34); }
.arq-lente.is-on {
  color: #0A0A0A; background: var(--accent, #C4973A); border-color: var(--accent, #C4973A);
}
/* O topo NÃO muda de lente para lente — é a prova visual da tese. */
.arq-lentes__palco {
  border: 1px solid var(--border, #2A2A2A); border-radius: 6px;
  background: var(--surface, #141414); overflow: hidden;
  box-shadow: 0 34px 80px rgba(0,0,0,.55);
}
.arq-lentes__fixo {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--border, #2A2A2A);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),.02) 100%);
}
.arq-lentes__selo {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #6B6560; text-align: right; line-height: 1.7;
}
.arq-lentes__selo b { display: block; color: var(--accent, #C4973A); font-weight: 600; }
.arq-lentes__corpo { padding: clamp(20px, 2.2vw, 30px); min-height: 264px; }
.arq-lentes__corpo > [data-lente] { animation: arqLente .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes arqLente { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.arq-lente-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.arq-lente-nota {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(245,242,237,.08);
  font-size: 12.5px; line-height: 1.6; color: #8B8680;
}
.arq-lente-nota b { color: var(--accent, #C4973A); font-weight: 600; }

/* ═══ §9 · A MEMÓRIA QUE SE CONECTA ════════════════════════════════════════ */
.arq-mem { position: relative; margin-top: clamp(44px, 5vw, 78px); aspect-ratio: 16 / 8.4; }
.arq-mem__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arq-mem__link {
  stroke: rgba(var(--accent-rgb),.55); stroke-width: 1; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1);
}
.arq-mem.is-linked .arq-mem__link { stroke-dashoffset: 0; }
.arq-mem__peca {
  position: absolute; z-index: 2; width: min(190px, 27%);   /* 27% + x=17/83 mantém tudo dentro da caixa */
  left: var(--x); top: var(--y); transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0));
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
.arq-mem.is-linked .arq-mem__peca { --dx: 0px; --dy: 0px; }
.arq-mem__peca .ark-card { padding: 14px; }
.arq-mem__nucleo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 3; display: grid; place-items: center; gap: 8px; text-align: center;
  opacity: 0; transition: opacity 1s ease .5s;
}
.arq-mem.is-linked .arq-mem__nucleo { opacity: 1; }
.arq-mem__nucleo b {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(17px, 1.7vw, 24px);
  color: #F5F2ED; font-weight: 500;
}
.arq-mem__nucleo span {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #6B6560;
}

/* ═══ §10 · AGENTE → SKILLS → WORKFLOW → RESULTADO ═════════════════════════ */
.arq-cadeia-ag {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: clamp(36px, 4vw, 60px);
}
.arq-cadeia-ag .ark-card { height: 100%; }
.arq-cadeia-ag__k {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #C4973A);
}

/* ═══ §12 · O CICLO ════════════════════════════════════════════════════════ */
.arq-ciclo { position: relative; margin-top: clamp(40px, 4.6vw, 72px); aspect-ratio: 1 / .78; }
.arq-ciclo__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.arq-ciclo__anel { fill: none; stroke: rgba(var(--accent-rgb),.24); stroke-width: 1; stroke-dasharray: 4 6; }
.arq-ciclo__etapa {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  width: min(210px, 27%); text-align: center;
}
.arq-ciclo__etapa b {
  display: block; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700;
  letter-spacing: .04em; color: #F5F2ED; margin-bottom: 5px;
}
.arq-ciclo__etapa i {
  font-style: normal; font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #6B6560;
}
.arq-ciclo__etapa span.arq-ciclo__n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px;
  border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.45);
  font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent, #C4973A);
  background: #0A0A0A;
}
.arq-ciclo__miolo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  text-align: center; width: min(340px, 42%);
}
.arq-ciclo__miolo p {
  margin: 14px 0 0; font-size: 13px; line-height: 1.65; color: #8B8680;
}

/* ═══ §13 · MANIFESTO (quebra clara) ═══════════════════════════════════════ */
.arq-manifesto { background: #F0EDE6; color: #14110C; padding-block: clamp(96px, 12vw, 180px); }
.arq-manifesto__t {
  margin: 0 auto; max-width: 20ch; text-align: center;
  font-size: clamp(30px, 5vw, 74px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em;
  color: #14110C;
}
.arq-manifesto__t em {
  display: block; margin-top: .22em;
  font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif;
  color: #8A6A22;
}
.arq-manifesto__p {
  margin: clamp(34px, 4vw, 56px) auto 0; max-width: 46ch; text-align: center;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.75; color: #4A443A;
}
.arq-manifesto__assin {
  margin-top: clamp(40px, 4.4vw, 64px); text-align: center;
  padding-top: 28px; border-top: 1px solid rgba(20,17,12,.14);
}
.arq-manifesto__assin b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: #14110C; letter-spacing: -.01em;
}
.arq-manifesto__assin span {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #7A6F5C;
}

/* ═══ CTAs do fim ══════════════════════════════════════════════════════════ */
.arq-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 3vw, 48px); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — no celular grafo vira sequência, hover vira toque (§Regras)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .arq-chain { grid-template-columns: repeat(2, 1fr); }
  .arq-chain__step:nth-child(2)::after { display: none; }
  .arq-qual { grid-template-columns: repeat(3, 1fr); }
  .arq-cadeia-ag { grid-template-columns: repeat(2, 1fr); }
  .arq-sys { grid-template-columns: 160px minmax(0,1fr); }
  .arq-sys > :last-child { grid-column: 1 / -1; }
  .arq-lente-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .arq-orbit { grid-template-columns: 1fr; }
  .arq-orbit__rel { grid-template-columns: repeat(2, 1fr); }
  .arq-orbit__rel--dir { justify-items: stretch; }
  /* O grafo da memória e o ciclo não cabem: viram sequência vertical. */
  .arq-mem, .arq-ciclo { aspect-ratio: auto; }
  .arq-mem__svg, .arq-ciclo__svg { display: none; }
  .arq-mem__peca, .arq-ciclo__etapa {
    position: static; transform: none !important; width: 100%; margin-bottom: 12px; text-align: left;
  }
  .arq-mem__nucleo, .arq-ciclo__miolo { position: static; transform: none; width: 100%; opacity: 1; margin: 22px 0; }
  .arq-ciclo__etapa { padding-left: 0; }
}

@media (max-width: 767px) {
  .arq-chain { grid-template-columns: 1fr; }
  .arq-chain__step::after { display: none !important; }
  .arq-qual { grid-template-columns: 1fr; }
  .arq-cadeia-ag { grid-template-columns: 1fr; }
  .arq-sys { grid-template-columns: 1fr; gap: 16px; }
  .arq-orbit__rel { grid-template-columns: 1fr; }
  .arq-lente-grid { grid-template-columns: 1fr; }
  .arq-lentes__fixo { flex-direction: column; align-items: flex-start; }
  .arq-lentes__selo { text-align: left; }
  .arq-hero { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .arq-hero__mark { animation: none !important; }
  .arq-mem__peca { transition: none !important; --dx: 0 !important; --dy: 0 !important; }
  .arq-mem__link { transition: none !important; stroke-dashoffset: 0 !important; }
  .arq-mem__nucleo { opacity: 1 !important; }
  .arq-lentes__corpo > [data-lente] { animation: none !important; }
}