/* ═══════════════════════════════════════════════════════════════════════════
 * arke-ecossistema.css — o bloco "Este serviço não trabalha sozinho".
 *
 * POR QUE EXISTE: até agora cada página de serviço era um beco. O visitante
 * (e o buscador, e o assistente de IA) chegava, lia e saía. As 14 páginas de
 * módulo e as 7 de produto existiam sem que nenhuma página de serviço as
 * citasse — metade da malha do site estava construída e desligada.
 *
 * Este bloco é o fio: entra no fim de TODA página de serviço e liga serviços ↔
 * produtos ↔ módulos ↔ conteúdo. É índice, não decoração — por isso a
 * hierarquia é tipográfica e cada item leva a uma página que existe de verdade.
 *
 * 🔴 REGRA DO BLOCO: nada aqui aponta para página inexistente. Se um conceito
 * não tem página, ou ele não entra, ou aponta para a âncora da seção que já o
 * cobre. Uma malha de links para 404 é exatamente o que a página de SEO &
 * Dados condena.
 *
 * AUTOSSUFICIENTE de propósito: não depende de arke-home.css nem de
 * arke-tokens.css, para poder cair em qualquer um dos 39 cascos. Só usa
 * var(--accent) com fallback.
 *
 * As cores de produto vêm de lib/cores-arke.ts — a mesma fonte do admin.
 * Nunca de metadados.cor, que fica velho.
 * ═══════════════════════════════════════════════════════════════════════════ */

.eco-bloco {
  position: relative;
  background: var(--st-bg-1c, #0A0A0C);
  padding-block: clamp(56px, 6vw, 92px);
  border-top: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .10);
  font-family: inherit;
}
.eco-bloco::before {
  content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb, 196,151,58), .45) 26%,
                              rgba(var(--accent-rgb, 196,151,58), .45) 74%, transparent);
}
.eco-wrap { width: min(1320px, calc(100% - 40px)); margin-inline: auto; }

/* ── CABEÇALHO ───────────────────────────────────────────────────────────── */
.eco-cab { max-width: 62ch; margin-bottom: clamp(34px, 3.8vw, 54px); }
.eco-k {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent, var(--st-c-c4973a, #C4973A));
}
.eco-t {
  margin: 0 0 14px; font-size: clamp(25px, 2.8vw, 40px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.032em; color: var(--st-ink-1b, #F2EFE9);
}
.eco-t em {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  color: var(--accent, var(--st-c-c4973a, #C4973A));
}
.eco-d { margin: 0; font-size: 15px; line-height: 1.7; color: var(--st-ink-5, #8B8680); }

/* ── GRADE ───────────────────────────────────────────────────────────────── */
.eco-grade {
  display: grid; grid-template-columns: 1fr 1fr 1.5fr;
  gap: clamp(24px, 3vw, 52px);
}
.eco-col__t {
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .12);
  font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--st-ink-6, #6B6560);
}
.eco-col__t + .eco-col__t, .eco-tags + .eco-col__t { margin-top: clamp(26px, 2.8vw, 38px); }
@media (max-width: 991px) { .eco-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .eco-grade { grid-template-columns: 1fr; } }

/* ── LISTAS DE LINK ──────────────────────────────────────────────────────── */
.eco-lista { margin: 0; padding: 0; list-style: none; }
.eco-lista li { border-bottom: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .06); }
.eco-lista a, .eco-lista > li > span {
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 0; text-decoration: none;
  font-size: 15px; line-height: 1.35; color: var(--st-ink-3, #C9C4BC);
  transition: color .25s ease, padding-left .25s ease;
}
.eco-lista a:hover { color: var(--accent, var(--st-c-c4973a, #C4973A)); padding-left: 6px; }
.eco-lista i {
  font-style: normal; margin-left: auto;
  font-family: var(--font-mono, monospace); font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--st-t-4a4640, #4A4640); white-space: nowrap;
}

/* a página em que o visitante já está: não é link, e diz isso */
.eco-lista .is-aqui > span { color: var(--accent, var(--st-c-c4973a, #C4973A)); cursor: default; }
.eco-lista .is-aqui i { color: rgba(var(--accent-rgb, 196,151,58), .6); }

/* ponto da cor do produto — fonte: lib/cores-arke.ts */
.eco-lista--prod a::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--prod, var(--accent, #C4973A)); transform: translateY(-2px);
}
.eco-lista--prod [data-produto="core"]   { --prod: #8B5CF6; }
.eco-lista--prod [data-produto="me"]     { --prod: #3B82F6; }
.eco-lista--prod [data-produto="on"]     { --prod: #22C55E; }
.eco-lista--prod [data-produto="flow"]   { --prod: #F59E0B; }
.eco-lista--prod [data-produto="os"]     { --prod: #EF4444; }
.eco-lista--prod [data-produto="cms"]    { --prod: #06B6D4; }
.eco-lista--prod [data-produto="studio"] { --prod: #A855F7; }

/* ── TAGS (módulos e aprofundamento) ─────────────────────────────────────── */
.eco-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.eco-tags a {
  display: inline-block; padding: 7px 12px; border-radius: 3px;
  border: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .10); background: rgba(var(--st-ink-rgb, 245, 242, 237), .03);
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .05em;
  color: var(--st-ink-4, #A29C93); text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.eco-tags a:hover {
  border-color: rgba(var(--accent-rgb, 196,151,58), .5);
  background: rgba(var(--accent-rgb, 196,151,58), .06);
  color: var(--accent, var(--st-c-c4973a, #C4973A));
}
.eco-tags--forte a {
  border-color: rgba(var(--accent-rgb, 196,151,58), .26);
  background: rgba(var(--accent-rgb, 196,151,58), .05);
  color: var(--st-t-d8cbb0, #D8CBB0);
}

/* ── REMATE ──────────────────────────────────────────────────────────────── */
.eco-fecho {
  margin-top: clamp(34px, 3.6vw, 50px); padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(var(--st-ink-rgb, 245, 242, 237), .10);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
}
.eco-fecho p {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.4; color: var(--st-ink-5, #8B8680);
}
.eco-fecho a {
  font-family: var(--font-mono, monospace); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent, var(--st-c-c4973a, #C4973A));
  text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb, 196,151,58), .4);
  padding-bottom: 2px; transition: border-color .25s ease;
}
.eco-fecho a:hover { border-color: var(--accent, #C4973A); }

@media (prefers-reduced-motion: reduce) {
  .eco-lista a, .eco-tags a { transition: none; }
}