/* Camada ASCII da página de Agentes · prancha 01 (Ponte JK).
   A página é um app JS (bundle em #root): as cenas são injetadas por
   agentes-ascii-inject.js depois do render. A página não carrega o
   styles.css do estudo, então a base das cenas vive toda aqui. */

/* O grid de quadrados do fundo original compete com o tecido ASCII:
   sai a malha, ficam só os washes de cor do bundle. */
body.agents-v4-shell {
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(233, 78, 27, 0.04), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(106, 216, 220, 0.05), transparent 60%);
  background-position: 0 0, 0 0;
  background-size: auto, auto;
}

/* Respiro entre o hero e a vitrine dos agentes: os CTAs terminavam a
   64px do rótulo "Conheça seu time". */
#root > main > .hero {
  padding-bottom: clamp(64px, 6vw, 96px);
}

/* Hero cheio em desktop, como a home: abre mostrando só o hero e as
   marcas aparecem no scroll. Mobile mantém o fluxo natural do bundle. */
@media (min-width: 781px) {
  #root > main > .hero {
    min-height: max(520px, calc(100svh - 360px));
    display: grid;
    align-items: center;
  }
}

/* Sem botões no hero: o apoio fecha o bloco. */
#root > main > .hero .hero__subline {
  margin-bottom: 0;
}

/* ---- Base das cenas ---- */
.ascii-scene {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ascii-scene img,
.ascii-scene canvas {
  display: block;
  max-width: none;
}

.ascii-scene__label {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: "JetBrains Mono", Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(46, 42, 35, 0.4);
}

/* Conteúdo do app acima das cenas. */
#root .hero,
#root .agent-display,
#root .agents-ops,
#root .how,
#root .agents-authority,
#root .site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#root .hero__inner,
#root .agent-display__layout,
#root .agents-ops__inner,
#root .how__inner,
#root .agents-authority__inner,
#root .site-footer__inner {
  position: relative;
  z-index: 1;
}

/* ---- Hero · tabuleiro horizontal atrás do H1, arcos escapando pelas
   laterais. A ponte fica parada: o único motion é o shimmer interno de
   glifos do canvas (driver da home); o img denso é o fallback. Elipse
   de proteção central sobre H1 + apoio + CTAs; a máscara vertical zera
   antes da borda inferior da arte (regra da emenda). ---- */
.ascii-scene--ponte-hero {
  --hero-art-w: max(1240px, 106vw);
  --hero-art-h: calc(var(--hero-art-w) * 0.51667);
  --hero-art-top: 0px;
  inset: 0;
  -webkit-mask-image:
    radial-gradient(ellipse 40% 26% at 50% 52%, transparent 0 34%, rgba(0, 0, 0, 0.5) 66%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 16px, #000 44px, #000 calc(var(--hero-art-h) * 0.7 + var(--hero-art-top)), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) + var(--hero-art-top) - 90px), transparent calc(var(--hero-art-h) + var(--hero-art-top) - 26px));
  mask-image:
    radial-gradient(ellipse 40% 26% at 50% 52%, transparent 0 34%, rgba(0, 0, 0, 0.5) 66%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 16px, #000 44px, #000 calc(var(--hero-art-h) * 0.7 + var(--hero-art-top)), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) + var(--hero-art-top) - 90px), transparent calc(var(--hero-art-h) + var(--hero-art-top) - 26px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.ascii-scene--ponte-hero img,
.ascii-scene--ponte-hero canvas {
  transition: opacity 320ms cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  top: var(--hero-art-top);
  left: calc(50% - (var(--hero-art-w) / 2));
  width: var(--hero-art-w);
  height: var(--hero-art-h);
  opacity: 0.32;
  mix-blend-mode: multiply;
}

.ascii-scene--ponte-hero canvas {
  opacity: 0;
}

.ascii-scene--ponte-hero.is-motion-ready img {
  opacity: 0;
}

.ascii-scene--ponte-hero.is-motion-ready canvas {
  opacity: 0.32;
}

/* ---- Faixa de marcas entre o hero e a vitrine dos agentes: a mesma
   trust-strip das outras páginas (markup congelado da consultoria;
   regras trazidas do styles.css, que esta página não carrega — logos
   nunca recebem tecido). ---- */
/* No fluxo contínuo do estudo a faixa é transparente, sem bordas:
   as marcas assentam direto no papel da página. */
.trust-strip {
  position: relative;
  z-index: 1;
  background: transparent;
}

.trust-strip .container {
  width: min(calc(100% - (clamp(20px, 5.55vw, 80px) * 2)), 1280px);
  margin-inline: auto;
}

/* Mesmo respiro das irmãs acima do título de confiança: com o hero cheio,
   o título fica abaixo do fold e aparece só no scroll. */
.trust-strip__inner {
  padding-block: 48px 110px;
}

.trust-strip__title {
  margin: 0 0 28px;
  color: #2e2a23;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: center;
}

.trust-strip--brand-logos .trust-names {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

.trust-strip--brand-logos .trust-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}

.trust-strip--brand-logos .trust-name img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(140px, 100%);
  max-height: 36px;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.64;
}

.trust-strip--brand-logos .trust-name--wide img {
  max-height: 26px;
}

.trust-strip--brand-logos .trust-name--compact img {
  max-height: 38px;
}

.trust-strip--brand-logos .trust-name--vieira img,
.trust-strip--brand-logos .trust-name--enkrateia img {
  max-height: 40px;
}

.trust-strip--brand-logos .trust-name--bolt img {
  max-height: 37px;
}

.trust-strip--brand-logos .trust-name--lagos img {
  max-height: 38px;
}

.trust-strip--brand-logos .trust-name--artfex img {
  max-height: 31px;
}

.trust-strip--brand-logos .trust-name--empreende img {
  max-height: 33px;
}

.trust-strip--brand-logos .trust-name--moai img {
  width: 92px;
  max-width: 92px;
  max-height: 27px;
}

/* Um único tecido e uma única origem por par de seções. A camada decorativa
   é recortada; os filhos mantêm seus próprios limites de cards e carrosséis. */
#root .agents-fabric-flow {
  position: relative;
  isolation: isolate;
}

.ascii-scene--fabric-demo-ops,
.ascii-scene--fabric-method-team {
  inset: 0;
}

.ascii-scene__tile {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

/* Triângulos contínuos nas goteiras da demonstração e da operação.
   Entrada e saída pertencem ao par; não há fade na fronteira interna. */
.ascii-scene--fabric-demo-ops .ascii-scene__tile {
  background-image: url("/assets/ascii/tecido-triangulos-ascii.svg?v=fine-1");
  opacity: 0.14;
}

.ascii-scene--fabric-demo-ops {
  -webkit-mask-image:
    linear-gradient(to right, #000 0 6%, rgba(0, 0, 0, 0.6) 13%, rgba(0, 0, 0, 0.22) 20%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0.6) 87%, #000 94%),
    linear-gradient(to bottom, transparent 0 120px, rgba(0, 0, 0, 0.35) 170px, #000 225px, #000 calc(100% - 180px), transparent calc(100% - 24px));
  mask-image:
    linear-gradient(to right, #000 0 6%, rgba(0, 0, 0, 0.6) 13%, rgba(0, 0, 0, 0.22) 20%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0.6) 87%, #000 94%),
    linear-gradient(to bottom, transparent 0 120px, rgba(0, 0, 0, 0.35) 170px, #000 225px, #000 calc(100% - 180px), transparent calc(100% - 24px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Quadrante acompanha Método e Time pela esquerda, com a proteção lateral
   de retratos e bios do Time. O centro permanece sem tecido. */
.ascii-scene--fabric-method-team .ascii-scene__tile {
  background-image: url("/assets/ascii/tecido-quadrante-ascii.svg?v=fine-1");
  opacity: 0.12;
}

.ascii-scene--fabric-method-team {
  -webkit-mask-image:
    linear-gradient(to right, #000 0 5%, rgba(0, 0, 0, 0.55) 11%, rgba(0, 0, 0, 0.2) 17%, transparent 26%),
    linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 160px), transparent calc(100% - 24px));
  mask-image:
    linear-gradient(to right, #000 0 5%, rgba(0, 0, 0, 0.55) 11%, rgba(0, 0, 0, 0.2) 17%, transparent 26%),
    linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 160px), transparent calc(100% - 24px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---- Time no padrão do estudo (home/treinamentos/consultoria):
   retrato circular 240px sobre #ece8e2, grade fluida — no lugar dos
   cards largos 4:3 do bundle. ---- */
#root .agents-leadership {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#root .agents-leader__photo-frame {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #ece8e2;
}

#root .agents-leader__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  .ascii-scene--ponte-hero {
    --hero-art-w: max(720px, 178vw);
    --hero-art-top: 26px;
  }

  .ascii-scene--ponte-hero img,
  .ascii-scene--ponte-hero.is-motion-ready canvas {
    opacity: 0.26;
  }

  .ascii-scene--ponte-hero canvas,
  .ascii-scene--ponte-hero.is-motion-ready img {
    opacity: 0;
  }

  .ascii-scene--ponte-hero .ascii-scene__label {
    display: none;
  }

  .ascii-scene--fabric-demo-ops .ascii-scene__tile {
    opacity: 0.13;
  }

  .ascii-scene--fabric-method-team .ascii-scene__tile {
    opacity: 0.1;
  }

  #root .agents-leader__photo-frame {
    width: 160px;
    height: 160px;
  }

  #root .agents-leader__name {
    font-size: 23px;
  }

  .trust-strip__inner {
    padding-block: 26px 30px;
  }

  .trust-strip--brand-logos .trust-names {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
  }

  .trust-strip--brand-logos .trust-name {
    min-height: 48px;
  }

  .trust-strip--brand-logos .trust-name img {
    max-width: min(118px, 100%);
    max-height: 30px;
  }

  .trust-strip--brand-logos .trust-name--wide img {
    max-height: 22px;
  }

  .trust-strip--brand-logos .trust-name--compact img {
    max-height: 32px;
  }

  .trust-strip--brand-logos .trust-name--vieira img,
  .trust-strip--brand-logos .trust-name--enkrateia img {
    max-height: 34px;
  }

  .trust-strip--brand-logos .trust-name--bolt img {
    max-height: 31px;
  }

  .trust-strip--brand-logos .trust-name--lagos img {
    max-height: 32px;
  }

  .trust-strip--brand-logos .trust-name--artfex img {
    max-height: 27px;
  }

  .trust-strip--brand-logos .trust-name--empreende img {
    max-height: 29px;
  }

  .trust-strip--brand-logos .trust-name--moai img {
    width: 82px;
    max-width: 82px;
    max-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-scene--ponte-hero canvas {
    display: none;
  }
}

/* A arte do hero termina antes da faixa de marcas (pedido de 31/08). */
@media (min-width: 781px) {
  .ascii-scene--ponte-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 150px;
    background: linear-gradient(to bottom, transparent, #f4f2f2 82%);
    pointer-events: none;
  }
}

/* Entrada progressiva dos logos, mesma receita da home (styles.css):
   ativada por agents-header.js via [data-logo-reveal]. */
.trust-strip--brand-logos .trust-names.is-reveal-ready .trust-name {
  opacity: 0;
  filter: blur(4px);
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--logo-reveal-index, 0) * 257ms);
}

.trust-strip--brand-logos .trust-names.is-reveal-ready.is-revealed .trust-name {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip--brand-logos .trust-names.is-reveal-ready .trust-name {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}