/* Final overrides for the ephemeral Home V4 study. */

.page-v4 {
  --ascii-canvas: #f9f9f8;
  --ascii-label: rgba(46, 42, 35, 0.66);
  --plane-safe-gutter: clamp(4px, 0.5vw, 8px);
  --plane-art-width: calc(100vw - (var(--plane-safe-gutter) * 2));
  overflow-x: clip;
  background: var(--ascii-canvas);
}

.ascii-scene__label {
  font-size: 10px;
}

.ascii-scene--cathedral .ascii-scene__label {
  color: rgba(249, 249, 248, 0.56);
}

/* Enquadramento fluido: a forma usa o máximo da tela sem cortar as pontas. */
.ascii-scene--hero .ascii-scene__static,
.ascii-scene--hero .ascii-scene__motion {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  width: var(--plane-art-width);
  height: auto;
  aspect-ratio: 8 / 5;
  translate: -50% 0;
  scale: 1;
}

.page-v4 .hero,
.page-v4 .offers-section,
:is(.page-v4, .page-training) .contact-section {
  background: var(--ascii-canvas);
}

/* Remove as linhas-guia herdadas da antiga direção "Sinal central". */
.page-v4 .hero::before,
.page-v4 .hero::after {
  content: none;
}

.page-v4 .offers-section::before,
.page-v4 .offers-section::after,
:is(.page-v4, .page-training) .contact-section::before,
:is(.page-v4, .page-training) .contact-section::after {
  display: none;
}

.page-v4 .offers-section > .container,
.page-v4 .authority-layout,
.page-v4 .contact-panel__inner {
  position: relative;
  z-index: 2;
}

.page-v4 .authority-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
}

:is(.page-v4, .page-training) .contact-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* A faixa de confiança participa do mesmo canvas, sem criar uma seção branca. */
.page-v4 .trust-strip {
  position: relative;
  z-index: 1;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
}

@media (min-width: 681px) {
  .page-v4 .hero {
    overflow: visible;
    min-height: max(620px, calc(100svh - 268px));
  }

  /* Pausa entre o término do Plano Piloto e o bloco de confiança. */
  .page-v4 .trust-strip__inner {
    padding-block: 48px 34px;
  }

  .ascii-scene--hero {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 100%;
    transform: none;
    transform-origin: center top;
  }

  .ascii-scene--hero .ascii-scene__static,
  .ascii-scene--hero .ascii-scene__motion {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  .ascii-scene--hero .ascii-scene__label {
    bottom: 146px;
  }
}

/* Em telas amplas, a faixa respira além do container editorial padrão sem
   aumentar os logos nem alterar a composição dos breakpoints menores. */
@media (min-width: 1600px) {
  .page-v4 .trust-strip__inner {
    width: min(calc(100% - (var(--gutter) * 2)), 1520px);
  }

  .page-v4 .trust-strip--brand-logos .trust-names {
    column-gap: clamp(24px, 1.5vw, 32px);
  }
}

/* Retratos: mesma gramática do site atual — círculo simples, sem moldura ou sombra. */
:is(.page-v4, .page-training) .leader-photo-frame {
  width: 240px;
  height: 240px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #ece8e2;
}

:is(.page-v4, .page-training) .leader-photo {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.ascii-scene--cathedral {
  --cathedral-visual-opacity: 0.54;
}

.ascii-scene--cathedral .ascii-scene__static,
.ascii-scene--cathedral .ascii-scene__motion {
  filter: invert(1) contrast(1.2);
}

/* Motion CSS dos demais capítulos, preservando os ciclos lentos. */
@keyframes ascii-drift-x {
  0%,
  100% {
    translate: -12px 6px;
  }
  50% {
    translate: 15px -6px;
  }
}

@media (min-width: 1041px) {
  .ascii-scene--superquadra img {
    left: -8vw;
    width: 120vw;
  }
}

.ascii-scene--superquadra img {
  opacity: 0.32;
}

@media (min-width: 1600px) {
  .page-v4 .hero {
    min-height: max(620px, calc(100svh - 268px));
  }

  .page-v4 .trust-strip__inner {
    padding-block: 96px 38px;
  }
}

@media (max-width: 680px) {
  :is(.page-v4, .page-training) .leader-photo-frame {
    width: 160px;
    height: 160px;
  }

  .ascii-scene--hero {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    -webkit-mask-image: radial-gradient(
      ellipse 44% 27% at 50% 43%,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.16) 52%,
      rgba(0, 0, 0, 0.78) 80%,
      #000 100%
    );
    mask-image: radial-gradient(
      ellipse 44% 27% at 50% 43%,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.16) 52%,
      rgba(0, 0, 0, 0.78) 80%,
      #000 100%
    );
  }

  .ascii-scene--hero .ascii-scene__static,
  .ascii-scene--hero .ascii-scene__motion {
    object-fit: contain;
    object-position: 50% 43%;
  }

  .ascii-scene--hero.is-motion-ready .ascii-scene__static {
    opacity: 0.48;
  }

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

  .ascii-scene--superquadra img {
    opacity: 0.26;
  }

  .ascii-scene--bridge {
    --bridge-visual-opacity: 0.16;
  }

  .ascii-scene--bridge .ascii-scene__static,
  .ascii-scene--bridge .ascii-scene__motion {
    top: 24%;
    left: calc(50% - 380px);
    width: 760px;
    translate: 0 0;
  }

  .ascii-scene--cathedral {
    --cathedral-visual-opacity: 0.42;
  }

  .ascii-scene--cathedral .ascii-scene__static,
  .ascii-scene--cathedral .ascii-scene__motion {
    left: calc(64% - 360px);
    bottom: -18%;
    width: 720px;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ascii-scene--bridge .ascii-scene__motion {
    display: none;
  }
}