/* =========================================================
   PÁGINAS DE PRODUTO (Ponto Zero, Inevitáveis)
   Componentes compartilhados com prefixo pz-. Estilos exclusivos de cada
   página ficam no CSS da pasta dela. Usa tokens, botões, títulos, FAQ e
   footer de styles.css. Medidas do Figma (base 1920px) escalam com --px.
   ========================================================= */

.pz-center { text-align: center; }

/* Foto com zoom extra para reproduzir o recorte do Figma */
.pz-zoom { overflow: hidden; }
.pz-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-position, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--zoom-origin, 50% 50%);
}

/* Foto com recorte exato do Figma: largura e deslocamento medidos em
   relação à caixa (--fit-w, --fit-x, --fit-y), definidos inline no HTML */
.pz-fit { position: relative; overflow: hidden; }
.pz-fit img {
  position: absolute;
  left: var(--fit-x, 0%);
  top: var(--fit-y, 0%);
  width: var(--fit-w, 100%);
  max-width: none;
  height: auto;
}

/* Parallax: a foto é mais alta que a moldura e anda mais devagar que o
   scroll (produto.js → setupParallax), parecendo estar atrás do conteúdo.
   --parallax: quanto a foto sobra acima/abaixo da moldura (e pode andar). */
.pz-parallax {
  --parallax: 18%;
  position: relative;
  overflow: hidden;
}
.pz-parallax img {
  position: absolute;
  left: 0;
  top: calc(var(--parallax) * -1);
  width: 100%;
  height: calc(100% + var(--parallax) * 2);
  max-width: none;
  object-fit: cover;
  object-position: var(--parallax-pos, 50% 50%);
  will-change: transform;
}

/* Título médio em creme (seções "Quando a empresa…", "Por que…", "E o que…") */
.pz-heading {
  font-size: max(30px, calc(60 * var(--px)));
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap; /* as linhas seguem a quebra do Figma */
}
/* A máscara da animação acompanha a largura do texto (não da coluna),
   senão corta a parte do título que invade a foto */
.pz-heading .mask-line { width: max-content; max-width: none; }
.pz-text {
  font-size: max(15px, calc(20 * var(--px)));
  line-height: 1.08;
  color: var(--white);
}
.pz-text strong { font-weight: 700; }

/* =========================================================
   HERO
   ========================================================= */
.pz-hero {
  position: relative;
  height: max(640px, calc(992 * var(--px)));
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background-color: var(--ink);
  background-image: url("assets/hero-ponto-zero.png");
  background-repeat: no-repeat;
  /* Enquadramento do Figma: foto ampliada, rosto e botão "0" do elevador à direita */
  /* (escala 0,755 e deslocamento medidos comparando pixel a pixel com o layout) */
  background-size: calc(2462 * var(--px)) auto;
  background-position: calc(-228 * var(--px)) calc(-308 * var(--px));
}
/* Gradiente de preto para transparente: mais contraste atrás do texto.
   Curva medida no layout do Figma (preto na borda, some na metade da tela). */
.pz-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.75) 10%,
    rgba(0, 0, 0, 0.56) 21%,
    rgba(0, 0, 0, 0.35) 31%,
    rgba(0, 0, 0, 0.14) 42%,
    rgba(0, 0, 0, 0) 52%
  );
}
.pz-hero__content {
  position: relative;
  z-index: 1;
  margin-top: max(40px, calc(28 * var(--px)));
}
.pz-hero__title {
  max-width: calc(470 * var(--px) + 40px);
  font-size: max(40px, calc(68 * var(--px)));
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.pz-hero .btn {
  margin-top: max(28px, calc(44 * var(--px)));
  width: max(260px, calc(315 * var(--px)));
}

/* =========================================================
   QUANDO A EMPRESA JÁ CRESCEU
   Título sobrepõe o topo da foto (fica por cima dela).
   ========================================================= */
/* Pin: o espaçador (::after) é a distância de scroll em que a seção fica
   presa; nela a foto sobe e depois entram o texto e o botão. O `top` do
   sticky é ajustado por JS quando a seção é mais alta que a tela. */
.pz-rise-pin {
  --pin-distance: 130vh;
  background: var(--ink);
}
.pz-rise-pin::after {
  content: "";
  display: block;
  height: var(--pin-distance);
}
.pz-intro {
  position: sticky;
  top: 0;
  background: var(--ink);
  padding: max(64px, calc(103 * var(--px))) 0 max(48px, calc(60 * var(--px)));
}
.pz-intro__head {
  position: relative;
  z-index: 2;
  margin-left: calc(204 * var(--px));
}
.pz-intro__img {
  position: relative;
  z-index: 1;
  width: calc(1206 * var(--px));
  aspect-ratio: 1206 / 556;
  object-fit: cover;
  margin: calc(-58 * var(--px)) auto 0;
}
/* Desktop: a seção fica presa e precisa caber inteira na tela, mantendo o
   respiro acima do título. Em telas mais baixas a foto perde altura (o recorte
   fica mais panorâmico) em vez de empurrar o título para fora do topo.
   430px = respiro do topo + parte do título acima da foto + texto + base. */
@media (min-width: 901px) {
  .pz-intro__img {
    aspect-ratio: auto;
    height: max(280px, min(calc(556 * var(--px)), calc(100vh - 430 * var(--px) - 40px)));
  }
}
.pz-intro__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  width: calc(1206 * var(--px));
  margin: max(32px, calc(55 * var(--px))) auto 0;
}
.pz-intro__foot .pz-text { max-width: calc(545 * var(--px) + 20px); }

/* Sequência "foto que sobe" (controlada por produto.js → setupRisePin):
   1) título pela máscara; 2) foto sobe acompanhando o scroll;
   3) quando a foto encaixa, o bloco .pz-rise-after sobe com fade. */
.js .pz-rise-img { will-change: transform; }
.js .pz-rise-after > * {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .pz-rise-after.is-in > * { opacity: 1; transform: none; }
.js .pz-rise-after.is-in > :nth-child(2) { transition-delay: 0.15s; }
.js .pz-rise-after.is-in > :nth-child(3) { transition-delay: 0.3s; }
.js .pz-rise-after:not(.is-in) > * { transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  .js .pz-rise-after > * { opacity: 1; transform: none; transition: none; }
  .pz-rise-pin::after { display: none; }
  .pz-results-pin::after,
  .pz-process-pin::after { display: none; }
  .pz-card,
  .pz-step { transform: none !important; }
  .js .pz-results__cta { opacity: 1; transform: none; transition: none; }
}
.pz-intro__foot .btn {
  flex-shrink: 0;
  width: max(240px, calc(315 * var(--px)));
  margin-top: calc(18 * var(--px));
}

/* =========================================================
   SEIS SEMANAS DEPOIS
   ========================================================= */
/* Pin: a seção fica presa enquanto os cards entram, um por um, pela direita
   (mesma mecânica dos cards da home). Desktop apenas. */
.pz-results-pin {
  --pin-distance: 160vh;
  background: var(--ink);
}
.pz-results-pin::after {
  content: "";
  display: block;
  height: var(--pin-distance);
}
.pz-results {
  position: sticky;
  top: 0;
  overflow: clip; /* cards fora da tela não geram scroll horizontal */
  background: var(--ink);
  padding: max(64px, calc(120 * var(--px))) var(--gutter) max(64px, calc(100 * var(--px)));
}
.pz-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: max(16px, calc(20 * var(--px)));
  margin-top: max(36px, calc(75 * var(--px)));
}
.pz-card,
.pz-step { will-change: transform; }
.pz-card__img {
  width: 100%;
  aspect-ratio: 593 / 356;
  object-fit: cover;
}
/* Desktop: a seção presa precisa caber na tela; em telas baixas as fotos
   perdem altura em vez de empurrar o título para fora do topo.
   640px = respiro + título + textos dos cards + botão + base. */
@media (min-width: 901px) {
  .pz-card__img {
    aspect-ratio: auto;
    height: max(200px, min(calc(356 * var(--px)), calc(100vh - 640 * var(--px) - 30px)));
  }
}
/* Botão aparece depois do último card */
.js .pz-results__cta {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .pz-results__cta.is-in { opacity: 1; transform: none; }
.js .pz-results__cta:not(.is-in) { transition-duration: 0s; }
.pz-card__title {
  margin-top: max(20px, calc(34 * var(--px)));
  font-size: max(22px, calc(36 * var(--px)));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.pz-card__text {
  margin-top: max(8px, calc(12 * var(--px)));
  max-width: calc(420 * var(--px) + 20px);
  font-size: max(14px, calc(18 * var(--px)));
  line-height: 1.12;
}
.pz-results .pz-center .btn {
  margin-top: max(40px, calc(64 * var(--px)));
  width: max(240px, calc(315 * var(--px)));
}

/* =========================================================
   DO INÍCIO AO FIM
   ========================================================= */
/* Pin: a seção (mais alta que a tela) trava com a base alinhada à base da
   tela enquanto as etapas entram, uma por uma, pela direita. Desktop apenas. */
.pz-process-pin {
  --pin-distance: 260vh;
  background: var(--ink);
}
.pz-process-pin::after {
  content: "";
  display: block;
  height: var(--pin-distance);
}
.pz-process {
  position: sticky;
  top: 0;
  overflow: clip; /* etapas fora da tela não geram scroll horizontal */
  background: var(--ink);
  padding-top: max(80px, calc(240 * var(--px)));
  /* respiro abaixo da linha do tempo enquanto a seção está presa */
  padding-bottom: max(48px, calc(120 * var(--px)));
}
.pz-process__head { padding: 0 var(--gutter); }
.pz-process__lead {
  margin: max(20px, calc(30 * var(--px))) auto 0;
  max-width: calc(740 * var(--px) + 40px);
  text-align: center;
  font-size: max(17px, calc(27 * var(--px)));
  line-height: 1.12;
}
.pz-process__lead p + p { margin-top: 1.1em; }
.pz-process__img {
  --img-position: 50% 62%;
  width: 100%;
  aspect-ratio: 1920 / 572;
  margin-top: max(48px, calc(78 * var(--px)));
}
.pz-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: max(32px, calc(50 * var(--px))) var(--gutter) 0;
}
.pz-step__tag {
  display: inline-block;
  padding: 2px 9px;
  background: var(--white);
  color: var(--ink);
  font-size: max(13px, calc(16 * var(--px)));
}
.pz-step__title {
  margin-top: max(18px, calc(24 * var(--px)));
  font-size: max(18px, calc(24 * var(--px)));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.pz-step__text {
  margin-top: 6px;
  max-width: calc(410 * var(--px) + 10px);
  font-size: max(14px, calc(18 * var(--px)));
  line-height: 1.12;
}

/* =========================================================
   TESE / DEPOIS DO DIA 90
   Texto e foto lado a lado; o título invade um pouco a foto.
   ========================================================= */
.pz-split {
  display: grid;
  align-items: start;
  width: calc(1206 * var(--px));
  margin: 0 auto;
  background: var(--ink);
}
.pz-split__body { position: relative; z-index: 2; }
.pz-split__img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 745 / 367;
  object-fit: cover;
}
.pz-split .pz-text { margin-top: max(20px, calc(31 * var(--px))); }

/* Tese: texto à esquerda, foto à direita (começa 80px abaixo do título) */
.pz-split--thesis {
  grid-template-columns: calc(461 * var(--px)) calc(745 * var(--px));
  /* 250px do Figma menos os 120px já dados pela seção anterior */
  padding-top: max(40px, calc(130 * var(--px)));
}
.pz-split--thesis .pz-heading { width: calc(500 * var(--px)); }
/* Largura fixa (maior que a coluna de 461px): o parágrafo invade a foto, como no Figma */
.pz-split--thesis .pz-text { width: calc(490 * var(--px)); max-width: none; }
.pz-split--thesis .pz-split__img { margin-top: calc(80 * var(--px)); }

/* Depois do dia 90: foto à esquerda, texto à direita (título começa acima da foto) */
.pz-split--after {
  grid-template-columns: calc(691 * var(--px)) calc(515 * var(--px));
  padding-top: max(64px, calc(135 * var(--px)));
}
.pz-split--after .pz-split__img {
  width: calc(746 * var(--px));
  max-width: none; /* passa da coluna e fica por baixo do texto, como no Figma */
  margin-top: calc(35 * var(--px));
}
.pz-split--after .pz-heading { width: calc(530 * var(--px)); }
.pz-split--after .pz-text { max-width: calc(480 * var(--px)); }

/* FAQ desta página: espaço acima vindo da seção anterior */
.pz .faq { padding-top: max(80px, calc(166 * var(--px))); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 900px) {
  .pz-hero {
    height: max(100svh, 560px);
    align-items: flex-end;
    padding-bottom: 56px;
    background-size: cover;
    background-position: 62% center;
  }
  .pz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ink) 0%, rgba(13, 13, 13, 0.85) 30%, rgba(13, 13, 13, 0) 65%);
  }
  .pz-hero__content { margin-top: 0; width: 100%; }
  /* linhas equilibradas + "no setor" inseparável: sem palavra viúva */
  .pz-hero__title { font-size: min(44px, 11vw); max-width: none; text-wrap: balance; }
  .pz-hero .btn { width: auto; }

  .pz-heading { white-space: normal; }
  .pz-heading .mask-line { width: auto; }
  .pz-intro { padding: 64px var(--gutter) 56px; }
  .pz-intro__head { margin-left: 0; }
  .pz-intro__img { width: 100%; aspect-ratio: 4 / 3; margin-top: 24px; }
  .pz-intro__foot {
    width: 100%;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .pz-intro__foot .pz-text { max-width: none; }
  .pz-intro__foot .btn { width: auto; margin-top: 0; }

  .pz-results__grid { grid-template-columns: 1fr; gap: 40px; }
  /* Mobile: sem pin; cada card desliza da direita ao aparecer na tela */
  .pz-results-pin::after,
  .pz-process-pin::after { display: none; }
  .pz-results,
  .pz-process { position: relative; }
  .js .pz-card,
  .js .pz-step {
    transform: translate3d(100vw, 0, 0);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .pz-card.is-in,
  .js .pz-step.is-in { transform: none; }
  .pz-card__text { max-width: none; }
  .pz-results .pz-center .btn { width: auto; }

  .pz-process__lead { max-width: none; }
  /* Personagem centralizado: ele fica a ~87% da largura da foto original,
     então a foto encosta à direita e ganha um zoom ancorado perto dele */
  .pz-process__img {
    aspect-ratio: 4 / 5;
    --img-position: 100% 50%;
    --zoom: 1.4;
    --zoom-origin: 96% 85%;
  }
  .pz-timeline { grid-template-columns: 1fr; gap: 32px; }
  .pz-process { padding-bottom: 0; }
  .pz-step__text { max-width: none; }

  .pz-split,
  .pz-split--thesis,
  .pz-split--after {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0 var(--gutter);
    gap: 24px;
  }
  .pz-split--thesis { padding-top: 80px; }
  .pz-split--after { padding-top: 64px; flex-direction: column-reverse; }
  .pz-split .pz-heading,
  .pz-split .pz-text { width: auto; max-width: none; }
  .pz-split .pz-split__img,
  .pz-split--after .pz-split__img { width: 100%; margin-top: 0; aspect-ratio: 4 / 3; }
}