/* ==========================================================================
   FACETAS (fct-*) — páginas de lente do portfólio
   Regras: componentes fct-* consomem SOMENTE vars --fct-* e --facet-accent.
   Light mode = um único bloco de remap (não herdar overrides do landing.css).
   ========================================================================== */

:root {
  --fct-surface: var(--color-bg-card);
  --fct-surface-elevated: var(--color-bg-elevated);
  --fct-border: var(--color-border);
  --fct-text: var(--color-text);
  --fct-text-2: var(--color-text-secondary);
  --fct-switcher-bg: rgba(6, 6, 15, 0.82);
  /* Opaque header surface: the sticky facet header must never let the (always
     dark) body show through, especially in light mode. */
  --fct-header-bg: #0a0a16;
}

[data-theme="light"] {
  --fct-surface: #ffffff;
  --fct-surface-elevated: #f1f5f9;
  --fct-border: rgba(15, 23, 42, 0.1);
  --fct-text: #0f172a;
  --fct-text-2: #475569;
  --fct-switcher-bg: rgba(248, 250, 252, 0.85);
  --fct-header-bg: #ffffff;
}

/* O body permanece escuro no tema claro (o landing.css clareia seção a
   seção) — seções fct-* precisam do próprio fundo claro. */
[data-theme="light"] .fct-hero {
  background: #f8fafc;
}

[data-theme="light"] .fct-cta .lp-cta__subtitle {
  color: var(--fct-text-2);
}

[data-theme="light"] .fct-metrics .lp-stats__number,
[data-theme="light"] .fct-metrics__number {
  background: linear-gradient(135deg, var(--facet-accent), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---- Acento por faceta (páginas via body[data-facet], cards do portal
   via [data-facet-card]) --------------------------------------------------- */
[data-facet="harness"], [data-facet-card="harness"]     { --facet-accent: #FF8A00; --facet-accent-rgb: 255, 138, 0; }
[data-facet="agents"], [data-facet-card="agents"]       { --facet-accent: #00D4FF; --facet-accent-rgb: 0, 212, 255; }
[data-facet="apps"], [data-facet-card="apps"]           { --facet-accent: #00FF88; --facet-accent-rgb: 0, 255, 136; }
[data-facet="marketing"], [data-facet-card="marketing"] { --facet-accent: #FF4D9D; --facet-accent-rgb: 255, 77, 157; }
[data-facet="infra"], [data-facet-card="infra"]         { --facet-accent: #7B61FF; --facet-accent-rgb: 123, 97, 255; }

/* No tema claro, acentos neon precisam escurecer pra manter contraste */
[data-theme="light"] [data-facet="harness"], [data-theme="light"] [data-facet-card="harness"]     { --facet-accent: #C96A00; --facet-accent-rgb: 201, 106, 0; }
[data-theme="light"] [data-facet="agents"], [data-theme="light"] [data-facet-card="agents"]       { --facet-accent: #0089A8; --facet-accent-rgb: 0, 137, 168; }
[data-theme="light"] [data-facet="apps"], [data-theme="light"] [data-facet-card="apps"]           { --facet-accent: #00A857; --facet-accent-rgb: 0, 168, 87; }
[data-theme="light"] [data-facet="marketing"], [data-theme="light"] [data-facet-card="marketing"] { --facet-accent: #D42A78; --facet-accent-rgb: 212, 42, 120; }
[data-theme="light"] [data-facet="infra"], [data-theme="light"] [data-facet-card="infra"]         { --facet-accent: #5B45D6; --facet-accent-rgb: 91, 69, 214; }

/* ---- Facet header — ONE sticky unit: slim brand strip + switcher tabs.
   Replaces the old fixed lp-nav + separately-sticky switcher that both
   pinned to top:0 and garbled on scroll. -------------------------------- */
.fhdr {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0; /* neutralize the generic .lp-nav--solid/--transparent padding */
  background: var(--fct-header-bg);
  border-bottom: 1px solid var(--fct-border);
  backdrop-filter: none;
  transition: box-shadow var(--transition-normal);
}
/* landing-nav toggles these generic classes on scroll (for the progress bar +
   shadow); pin the surface/padding so the header can't grow or go transparent
   — only the shadow reacts. */
.fhdr.lp-nav--solid,
.fhdr.lp-nav--transparent {
  padding: 0;
  background: var(--fct-header-bg);
  backdrop-filter: none;
}
.fhdr.lp-nav--solid { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32); }
[data-theme="light"] .fhdr.lp-nav--solid { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10); }

.fhdr__top { border-bottom: 1px solid var(--fct-border); }
.fhdr__top-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fhdr__brand { font-size: 20px; text-decoration: none; color: var(--fct-text); }
.fhdr__utilities { display: flex; align-items: center; gap: 14px; }
.fhdr__linkedin { font-size: 14px; }

/* Switcher = the primary nav, now a plain in-flow row inside .fhdr */
.fct-switcher {
  background: transparent;
}

.fct-switcher__track {
  display: flex;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.fct-switcher__track::-webkit-scrollbar { display: none; }

.fct-switcher__tab {
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--fct-text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.fct-switcher__tab:hover {
  color: var(--fct-text);
  background: rgba(var(--facet-accent-rgb), 0.08);
}

.fct-switcher__tab--active {
  color: var(--facet-accent);
  background: rgba(var(--facet-accent-rgb), 0.14);
  border-color: rgba(var(--facet-accent-rgb), 0.45);
}

.fct-switcher__tab--home {
  color: var(--fct-text-2);
  border-color: var(--fct-border);
}

/* On facet pages the footer facet list and the mobile FAB just re-list the
   five lenses the switcher already owns — hide them to kill the repetition. */
body[data-facet] .lp-footer__links--facets { display: none; }
body[data-facet] .lp-mobile-cta { display: none; }

/* Facet hero keyword pills: follow the facet accent instead of the hardcoded
   landing blue, so every lens' hero reads as one colour. */
body[data-facet] .lp-hero__marquee-tag {
  background: rgba(var(--facet-accent-rgb), 0.10);
  color: var(--facet-accent);
  border-color: rgba(var(--facet-accent-rgb), 0.28);
}
body[data-facet] .lp-hero__marquee-tag:hover {
  background: rgba(var(--facet-accent-rgb), 0.18);
  border-color: rgba(var(--facet-accent-rgb), 0.45);
}

/* ---- Hero da faceta ----------------------------------------------------- */
.fct-hero {
  position: relative;
  padding: 44px 24px 32px;
  overflow: hidden;
}

.fct-hero__content {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.fct-hero__tag {
  color: var(--facet-accent);
}

.fct-hero__title {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fct-text);
  background: linear-gradient(135deg, var(--fct-text) 30%, var(--facet-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.fct-hero__tagline {
  font-size: 20px;
  font-weight: 500;
  color: var(--fct-text);
  max-width: 720px;
  margin: 0 auto 20px;
}

.fct-hero__manifesto {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fct-text-2);
  max-width: 780px;
  margin: 0 auto 28px;
  text-align: left;
  border-left: 3px solid rgba(var(--facet-accent-rgb), 0.6);
  padding-left: 18px;
}

.fct-hero .lp-hero__actions {
  justify-content: center;
  margin-top: 28px;
}

/* ---- Métricas ----------------------------------------------------------- */
.fct-metrics .lp-stats__number,
.fct-metrics__number {
  background: linear-gradient(135deg, var(--facet-accent), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Narrativa ("o que isso significa") --------------------------------- */
.fct-narrative {
  padding-top: 24px;
  padding-bottom: 8px;
}

.fct-narrative__inner {
  max-width: 780px;
  margin: 0 auto;
}

.fct-narrative__p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--fct-text-2);
  margin-bottom: 20px;
}

.fct-narrative__p strong {
  color: var(--fct-text);
}

/* ---- Diagrama de arquitetura -------------------------------------------- */
.fct-diagram {
  padding-top: 16px;
  padding-bottom: 24px;
}

.fct-diagram__frame {
  max-width: 720px;
  margin: 0 auto;
  background: var(--fct-surface);
  border: 1px solid var(--fct-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px 20px;
}

.fct-diagram__diagram {
  max-width: 100%;
}

.fct-diagram__diagram .lp-arch-diagram__ascii {
  display: block;
  width: fit-content;
  margin: 0 auto;
  color: var(--facet-accent);
  text-shadow: 0 0 12px rgba(var(--facet-accent-rgb), 0.18);
}

.fct-diagram__caption {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fct-text-2);
  text-align: center;
  transition: color var(--transition-fast);
}

.fct-diagram__caption--node {
  color: var(--facet-accent);
}

/* ---- Nós interativos do diagrama ----------------------------------------- */
.arch-node {
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.18s ease, opacity 0.18s ease, text-shadow 0.18s ease;
}

/* Com um nó focado, o resto do diagrama recua */
.arch-diagram--focused .lp-arch-diagram__ascii {
  color: rgba(var(--facet-accent-rgb), 0.35);
}

.arch-diagram--focused .arch-node:not(.arch-node--active):not(.arch-node--linked) {
  opacity: 0.45;
}

.arch-node--active {
  color: var(--fct-text);
  text-shadow: 0 0 14px rgba(var(--facet-accent-rgb), 0.9);
}

.arch-node--linked {
  color: var(--facet-accent);
  text-shadow: 0 0 10px rgba(var(--facet-accent-rgb), 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .arch-node,
  .fct-diagram__caption {
    transition: none;
  }
}

/* ---- Cards de projeto (rodapé com cross-links) --------------------------- */
.fct-tag {
  color: var(--facet-accent);
}

.fct-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--fct-border);
}

.fct-crosslinks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}

.fct-crosslinks__label {
  color: var(--fct-text-2);
}

.fct-crosslinks__link {
  color: var(--facet-accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted rgba(var(--facet-accent-rgb), 0.5);
}

.fct-crosslinks__link:hover {
  border-bottom-style: solid;
}

/* ---- Portal de facetas (home) -------------------------------------------- */
.fct-portal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Em telas largas, as 5 lentes cabem numa linha só — sem card órfão */
@media (min-width: 1180px) {
  .fct-portal__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.fct-portal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 22px;
  background: var(--fct-surface);
  border: 1px solid var(--fct-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.fct-portal__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--facet-accent), transparent);
  opacity: 0.85;
}

.fct-portal__card:hover,
.fct-portal__card:focus-visible {
  border-color: rgba(var(--facet-accent-rgb), 0.6);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(var(--facet-accent-rgb), 0.14);
}

/* Com uma lente em foco, as irmãs recuam (hover e teclado) */
.fct-portal__grid:hover .fct-portal__card:not(:hover),
.fct-portal__grid:focus-within .fct-portal__card:not(:focus-visible):not(:hover) {
  opacity: 0.55;
}

.fct-portal__card {
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.fct-portal__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--facet-accent);
}

.fct-portal__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fct-text);
  margin: 0;
}

.fct-portal__tagline {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fct-text-2);
  margin: 0;
  flex-grow: 1;
}

.fct-portal__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--facet-accent);
}

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 768px) {
  .fhdr__top-inner { padding: 9px 14px; }
  .fhdr__brand { font-size: 18px; }
  .fhdr__linkedin { display: none; } /* keep the tabs primary on narrow */
  .fhdr__utilities { gap: 10px; }
  .fct-switcher__track {
    padding: 8px 14px;
    /* fade the horizontal-scroll edges only where the track actually scrolls */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .fct-switcher__tab { padding: 7px 15px; font-size: 13px; }

  .fct-hero {
    padding: 28px 18px 24px;
  }

  .fct-hero__tagline {
    font-size: 17px;
  }

  .fct-hero__manifesto {
    font-size: 15px;
  }

  .fct-diagram__frame {
    padding: 20px 12px 16px;
  }
}

/* ---- Movimento reduzido --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fct-switcher__tab,
  .fct-crosslinks__link {
    transition: none;
  }
}