/* ============================================================
   CONSULTORIA · ASCII — camada isolada sobre o sistema do estudo.
   Prancha 03 (Catedral): hero com a coroa irradiando atrás do H1,
   miolo com tecido urbano, entrega clareada e fechamento nas
   agulhas com a calibração aprovada do contato da home (0.54/0.42,
   já servida pelas regras existentes de .ascii-scene--cathedral).
   Escopo: apenas backgrounds; copy intacta.
   ============================================================ */

/* ---- Canvas contínuo: as seções da rota abrem mão dos fundos
   próprios da linhagem antiga e entram no fluxo neutro. ---- */
.page-v4 .continuous-flow > .offer-hero,
.page-v4 .continuous-flow > .offer-section,
.page-v4 .continuous-flow > .transformation-problem {
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

.page-v4.page-transformation .offer-hero {
  isolation: isolate;
  overflow: visible;
  background: transparent;
}

.page-v4.page-transformation .offer-hero::before,
.page-v4.page-transformation .offer-hero::after {
  content: none;
}

.page-v4 .offer-hero__depth {
  display: none;
}

/* A página é longa: o miolo ganha mais respiro entre as seções para
   os padrões e o conteúdo respirarem no fluxo contínuo. */
.page-v4 .continuous-flow > .transformation-problem,
.page-v4 .continuous-flow > .offer-section {
  padding-block: clamp(108px, 11vw, 168px);
}

/* ---- Hero · a Catedral inteira, da coroa à base, atrás do H1. A arte
   1200×620 é única (razão fixa 0.51667) e entra menor que o quadro
   para a silhueta completa caber: as agulhas nascem abaixo do header
   e o respiro protege apoio e CTAs sem engolir a coroa. O degradê
   inferior da máscara zera antes da borda da caixa do SVG. ---- */
.ascii-scene--catedral-hero {
  --scene-exit: clamp(140px, 12vw, 210px);
  --hero-art-w: max(1180px, 116vw);
  --hero-art-h: calc(var(--hero-art-w) * 0.51667);
  --hero-art-top: 0px;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: calc(0px - var(--scene-exit));
  left: 0;
  /* O respiro fica ABAIXO do H1 (apoio + CTAs): a coroa atravessa as
     primeiras linhas do título em presença cheia, que é o que torna
     a Catedral reconhecível. Fade de topo curto para as agulhas
     nascerem logo sob o header. */
  -webkit-mask-image:
    radial-gradient(ellipse 42% 23% at 50% 60%, transparent 0 30%, rgba(0, 0, 0, 0.45) 62%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 14px, #000 38px, #000 calc(var(--hero-art-h) * 0.72), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) - 90px), transparent calc(var(--hero-art-h) - 26px));
  mask-image:
    radial-gradient(ellipse 42% 23% at 50% 60%, transparent 0 30%, rgba(0, 0, 0, 0.45) 62%, #000 100%),
    linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.4) 14px, #000 38px, #000 calc(var(--hero-art-h) * 0.72), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) - 90px), transparent calc(var(--hero-art-h) - 26px));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* A Catedral fica parada: nenhuma translação. O único motion é o
   shimmer interno de glifos do canvas (mesmo motor do fechamento,
   que nunca move coordenadas). O img denso é o fallback estático. */
.ascii-scene--catedral-hero img,
.ascii-scene--catedral-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--catedral-hero canvas {
  opacity: 0;
}

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

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

.ascii-scene--catedral-hero .ascii-scene__label {
  right: var(--gutter);
  bottom: calc(var(--scene-exit) + 24px);
}

/* Véu de proteção só do apoio para baixo: o H1 aguenta a coroa a
   0.32 multiply (peso 700, corpo grande); apoio e CTAs ganham o
   colchão de leitura. */
.page-v4 .offer-hero__inner {
  isolation: isolate;
}

.page-v4 .offer-hero__inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 52% -40px -44px;
  background: radial-gradient(
    ellipse at 50% 55%,
    color-mix(in srgb, var(--ascii-canvas) 94%, transparent) 0%,
    color-mix(in srgb, var(--ascii-canvas) 80%, transparent) 58%,
    transparent 100%
  );
  filter: blur(12px);
  pointer-events: none;
}

/* ---- Miolo: a entrega ("A primeira prioridade sai do papel")
   clareia; o escuro da página passa a existir só no fechamento.
   Cartões seguem a receita de vidro claro do estudo. ---- */
.page-v4 .offer-section--ink {
  background: transparent;
  color: var(--ink);
}

.page-v4 .offer-section--ink .section-heading {
  color: var(--ink-strong);
}

.page-v4 .transformation-delivery__intro > p {
  color: var(--ink-muted);
}

.page-v4 .transformation-delivery__grid article {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.53), rgba(244, 242, 242, 0.34)),
    color-mix(in srgb, var(--cream) 44%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(46, 42, 35, 0.035),
    0 16px 42px rgba(28, 25, 23, 0.07),
    0 2px 8px rgba(28, 25, 23, 0.035);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.page-v4 .transformation-delivery__icon {
  color: var(--ink-strong);
}

.page-v4 .transformation-delivery__icon-accent {
  color: var(--orange);
  stroke: var(--orange);
}

.page-v4 .transformation-delivery__grid h3 {
  color: var(--ink-strong);
}

.page-v4 .transformation-delivery__grid p {
  color: var(--ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .page-v4 .transformation-delivery__grid article:hover {
    border-color: rgba(233, 78, 27, 0.34);
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 20px 48px rgba(28, 25, 23, 0.09);
  }
}

/* Uma origem de quadrante acompanha problema, diagnóstico, método, entrega
   e autonomia. Apenas a decoração é recortada; as seções mantêm sua geometria. */
.page-v4.page-transformation .consultoria-fabric-flow {
  position: relative;
  isolation: isolate;
}

/* Repõe o contrato dos seletores diretos de continuous-flow após o wrapper. */
.page-v4.page-transformation .consultoria-fabric-flow > section {
  position: relative;
  z-index: 1;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  padding-block: clamp(108px, 11vw, 168px);
}

.page-v4.page-transformation .consultoria-fabric-flow > section > .container {
  position: relative;
  z-index: 1;
}

.page-v4 .transformation-problem,
.page-v4 .transformation-method,
.page-v4 .transformation-delivery,
.page-v4 .transformation-autonomy {
  isolation: isolate;
  overflow: hidden;
}

.page-v4.page-transformation .ascii-scene--consultoria-fabric {
  z-index: 0;
  inset: 0;
  /* Keep the reading gutter and outer fades separate from the long,
     overlapping lateral reveals. The tile itself keeps one origin. */
  --fabric-gutters: linear-gradient(to right, #000 0 5%, rgba(0, 0, 0, 0.55) 11%, rgba(0, 0, 0, 0.2) 17%, transparent 26% 74%, rgba(0, 0, 0, 0.2) 83%, rgba(0, 0, 0, 0.55) 89%, #000 95%);
  --fabric-edges: linear-gradient(to bottom, transparent 0, #000 120px, #000 76%, rgba(0, 0, 0, 0.6) 88%, transparent calc(100% - 48px));
  --fabric-direction:
    radial-gradient(ellipse 48% 66% at -2% 16%, #000 0 24%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0.28) 72%, transparent 100%),
    radial-gradient(ellipse 48% 55% at 102% 78%, #000 0 24%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0.28) 72%, transparent 100%);
  -webkit-mask-image: var(--fabric-gutters), var(--fabric-edges);
  mask-image: var(--fabric-gutters), var(--fabric-edges);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.consultoria-fabric__tile {
  position: absolute;
  inset: 0;
  background-image: url("/assets/ascii/tecido-quadrante-ascii.svg?v=fine-1");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.12;
  -webkit-mask-image: var(--fabric-direction);
  mask-image: var(--fabric-direction);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* ---- Fechamento · a Catedral do contato da home: as regras de
   .ascii-scene--cathedral (calibração 0.54 desktop / 0.42 mobile,
   invert + motion) já vivem em styles.css e continuous-flow.css. ---- */

/* O CTA do fechamento herda a aparência primária: botão ink some
   sobre o painel escuro do fluxo contínuo. */
.page-v4 .contact-action .button--ink {
  border-color: rgb(255 255 255 / 42%);
  color: var(--on-orange);
}

.page-v4 .contact-action .button--ink:hover {
  border-color: rgb(255 255 255 / 52%);
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  .ascii-scene--catedral-hero {
    --scene-exit: 96px;
    --hero-art-w: max(660px, 164vw);
    --hero-art-top: 30px;
    -webkit-mask-image:
      radial-gradient(ellipse 46% 20% at 50% 58%, transparent 0 26%, rgba(0, 0, 0, 0.44) 60%, #000 100%),
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 18px, #000 42px, #000 calc(var(--hero-art-h) * 0.68 + var(--hero-art-top)), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) + var(--hero-art-top) - 82px), transparent calc(var(--hero-art-h) + var(--hero-art-top) - 24px));
    mask-image:
      radial-gradient(ellipse 46% 20% at 50% 58%, transparent 0 26%, rgba(0, 0, 0, 0.44) 60%, #000 100%),
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 18px, #000 42px, #000 calc(var(--hero-art-h) * 0.68 + var(--hero-art-top)), rgba(0, 0, 0, 0.3) calc(var(--hero-art-h) + var(--hero-art-top) - 82px), transparent calc(var(--hero-art-h) + var(--hero-art-top) - 24px));
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

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

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

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

  .page-v4.page-transformation .ascii-scene--consultoria-fabric {
    --fabric-gutters: linear-gradient(to right, #000 0 3%, rgba(0, 0, 0, 0.5) 7%, rgba(0, 0, 0, 0.18) 13%, transparent 20% 80%, rgba(0, 0, 0, 0.18) 87%, rgba(0, 0, 0, 0.5) 93%, #000 97%);
    /* Method starts earlier in the taller mobile chain. */
    --fabric-direction:
      radial-gradient(ellipse 44% 62% at -2% 12%, #000 0 24%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0.28) 72%, transparent 100%),
      radial-gradient(ellipse 44% 55% at 102% 73%, #000 0 24%, rgba(0, 0, 0, 0.65) 48%, rgba(0, 0, 0, 0.28) 72%, transparent 100%);
  }

  .consultoria-fabric__tile {
    opacity: 0.095;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* O driver já limpa o canvas e devolve o img estático; esconder o
     canvas é só cinto de segurança. */
  .ascii-scene--catedral-hero canvas {
    display: none;
  }
}

/* Com a faixa de marcas dentro da primeira viewport, a saída de cena da
   Catedral (que avançava sob a seção seguinte) recolhe no desktop: a arte
   termina no rodapé do hero e o véu esmaece a base antes das marcas. */
@media (min-width: 781px) {
  .ascii-scene--catedral-hero {
    --scene-exit: 0px;
  }
}