/* ============================================================
   BOOKATOON — Página Pitch
   Etapa 4 da migração de @layer (docs/layer-proposal.md).
   Reaproveita os componentes do design system (.dado, .relato,
   .intro-card, .universo__item, .porta, .section-head…); este
   arquivo só cobre o que é exclusivo desta página.
   ============================================================ */
@layer sections {

.pitch-hero {
  background: var(--creme);
  padding: clamp(4.5rem, 10vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: clip;
}

/* Nas 4 páginas com hero de coluna única (sem .pitch-hero__foto-wrap ao
   lado), o texto ocupava a largura inteira do .container sem isso — era
   repetido como inline style idêntico em cada uma. Em pitch.html (hero de
   duas colunas) a coluna do grid já fica mais estreita que 46rem, então
   este default não muda nada lá. */
.pitch-hero__copy {
  max-width: 46rem;
}

.pitch-hero .section-title {
  /* Título do hero usava a escala de título de SEÇÃO (--fs-section),
     bem menor que o h1 do hero da home (--fs-hero) — por isso parecia
     pequeno perto da home mesmo já usando a mesma tag/classe. Sobe
     pra uma escala de hero, mas mais contida que --fs-hero puro: essa
     frase é bem mais longa que a da home ("De um piloto no Hospital
     de Amor a uma plataforma..." vs "Onde o medo dá lugar à
     música"), e no tamanho cheio do token ela quebrava em ~9 linhas. */
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  margin-top: 1rem;
  max-width: 20ch;
}

.pitch-hero .section-lead {
  margin-top: 1.25rem;
  max-width: 56ch;
}

.pitch-hero .hero__ctas {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---------------- Manifesto ---------------- */

.pitch-manifesto {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.pitch-manifesto + .pitch-manifesto {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------------- Seções ---------------- */

.pitch-secao {
  background: var(--branco);
  padding-block: var(--section-pad);
}

.pitch-secao--roxa {
  background: var(--roxo-profundo);
  color: var(--papel-sobre-escuro);
}

.pitch-secao--roxa .section-lead {
  color: var(--text-muted-on-dark);
}

/* Piloto data-surface="deep": background/color de .chip e .universo__item
   já vêm do retinte genérico da seção (ver [data-surface="deep"] em
   tokens.css). Aqui só o que é extra em relação ao padrão claro: borda
   âmbar + sombra mais forte no .chip. */
.pitch-secao--roxa .chip {
  border-color: var(--ambar);
  box-shadow: 0.18rem 0.22rem 0 rgba(0, 0, 0, 0.3);
}

/* Só o ícone do .intro-card tem fundo colorido (âmbar/rosa/azul) — o
   título fica direto sobre o roxo da seção. var(--branco), não
   var(--on-deep): propositalmente mais branco que o --papel-sobre-escuro
   padrão do corpo de texto nesta superfície — não é o mesmo papel
   semântico de ".pitch-secao--roxa" em geral, por isso não usa --on-deep
   aqui. .intro-card p já pega --muted-on-page (→ --muted-on-deep) do
   retinte genérico da seção, sem precisar de override próprio. */
.pitch-secao--roxa .intro-card h3 {
  color: var(--branco);
}

/* ---------------- Consequências do problema ---------------- */

.pitch-consequencias {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 48rem) {
  .pitch-consequencias {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Contrato semântico: --surface-card-warm/--border-on-page. */
.pitch-consequencia {
  background: var(--surface-card-warm);
  border: var(--stroke) solid var(--border-on-page);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sticker);
}

.pitch-consequencia strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
  color: var(--coral-escuro);
}

.pitch-consequencia p {
  color: var(--muted-on-page);
  font-size: var(--fs-small);
}

.pitch-virada {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-destaque);
  font-weight: 500;
  line-height: 1.25;
  max-width: 26ch;
}

/* ---------------- Frase de destaque solta ---------------- */

.pitch-destaque {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 52ch;
}

.pitch-acessibilidade {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------------- Caminhos de execução (2 colunas) ---------------- */

.pitch-caminhos {
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .pitch-caminhos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------- Grades .dado desta página (sempre 3 itens) ----------------
   O componente original (.impacto__grid) assume 4 itens e vai para 2 colunas
   em 48rem e 4 em 64rem — com 3 itens isso deixa um card órfão na tablet e
   uma coluna vazia no desktop. Aqui trava em 3 colunas nas duas faixas. */

@media (min-width: 48rem) {
  .pitch-secao .impacto__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pitch-lista-simples {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: var(--fs-small);
}

.pitch-lista-simples li {
  padding-left: 1.4rem;
  position: relative;
}

.pitch-lista-simples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--porta-cor, var(--ambar));
}

/* ---------------- Legibilidade ----------------
   Textos de apoio nesta página (fontes de dados, itens de lista,
   citações) usavam tamanhos menores que o resto do site — aqui sobe
   todos eles pra ficar confortável de ler, sem mexer nos mesmos
   componentes usados em outras páginas (por isso a escala fica presa
   a .pitch-secao). */
.pitch-secao .dado__fonte {
  font-size: 1.05rem;
  line-height: 1.45;
}

.pitch-secao .dado__label {
  font-size: 1.15rem;
}

.pitch-secao .universo__item p,
.pitch-secao .porta p,
.pitch-secao .relato figcaption,
.pitch-secao .pitch-consequencia p,
.pitch-secao .pitch-lista-simples {
  font-size: 1.1rem;
}

.pitch-secao .universo__item strong {
  font-size: 1.3rem;
}

.pitch-secao .pitch-consequencia strong {
  font-size: 1.25rem;
}

.pitch-secao .chip {
  font-size: 1.05rem;
}

.pitch-secao .porta h3 {
  font-size: 1.75rem;
}

/* ---------------- Imagens ilustrativas (placeholder) ----------------
   Marcador visual de onde entra arte autoral depois — borda
   tracejada deixa claro que é um placeholder, nunca a arte final. */
.pitch-placeholder {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  min-height: 220px;
  padding: var(--sp-6);
  text-align: center;
  background: var(--creme);
  border: 3px dashed var(--ink-suave);
  border-radius: var(--r-lg);
  color: var(--ink-suave);
}

.pitch-placeholder svg {
  width: 52px;
  height: 52px;
  opacity: 0.6;
}

.pitch-placeholder span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 26ch;
}

.pitch-secao--roxa .pitch-placeholder {
  background: var(--roxo-ink);
  border-color: var(--ambar-suave);
  color: var(--text-muted-on-dark);
}

/* ---------------- Texto + arte lado a lado ----------------
   Usado no hero e em qualquer section-head que ganhe uma imagem ao
   lado (ex.: Propriedade intelectual). */
.pitch-media-row {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .pitch-media-row {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* No hero especificamente o título é bem mais comprido que o da
   home — dá mais espaço de texto pra não quebrar em linhas demais. */
@media (min-width: 56rem) {
  .pitch-hero .pitch-media-row {
    grid-template-columns: 1.5fr 1fr;
  }
}

.pitch-hero .pitch-placeholder {
  min-height: 280px;
}

/* Foto real do hero: mesmo "recorte" (proporção + cantos) que o
   placeholder tinha, só que como máscara de verdade sobre a imagem.
   Moldura (aspect-ratio + overflow:hidden) separada da <img> — mesma
   receita do .quadro__video — pra não depender de aspect-ratio direto
   num <img> com width/height no HTML, que em alguns navegadores
   ignora o aspect-ratio do CSS e usa o tamanho intrínseco do arquivo. */
/* Envelope solto: o blob orgânico mora fora do recorte retangular da
   foto (que tem overflow:hidden), por isso precisa de um wrapper à
   parte — senão o próprio recorte da foto cortaria o blob. */
.pitch-hero__foto-wrap {
  position: relative;
}

.pitch-hero__foto-wrap figcaption {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: var(--sp-3) auto 0;
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  font-weight: 800;
  text-align: center;
  background: var(--ambar-suave);
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
}

.pitch-hero__blob {
  position: absolute;
  inset: -9% -14% -14% -9%;
  z-index: 0;
  background: var(--coral);
  border: var(--stroke) solid var(--ink);
  border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%;
}

.pitch-hero__foto {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
}

.pitch-hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pitch-media-row .section-head {
  margin-bottom: 0;
}

/* Key art da propriedade intelectual: arte solta, sem moldura de card,
   como os personagens que flutuam no hero da home. */
.pitch-ip__arte {
  position: relative;
  z-index: 1;
  width: min(115%, 34rem);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: visible;
  background: transparent;
}

.pitch-ip__fundo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

.pitch-ip__layer {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  z-index: 1;
  --float-x: 0px;
  --float-y: -9px;
  --float-r: 0.5deg;
  --float-duration: 4s;
  --float-delay: 0s;
  will-change: transform;
}

@keyframes pitch-ip-float {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--float-x), var(--float-y)) rotate(var(--float-r)); }
}

.pitch-ip__layer--portal    { left: 25%; top: 18%; width: 53%; --float-y: -5px;  --float-r: 0.2deg;  --float-duration: 5.8s; --float-delay: -1.2s; }
.pitch-ip__layer--vr        { left: 4%;  top: 10%; width: 25%; --float-x: -3px; --float-y: -12px; --float-r: -0.8deg; --float-duration: 4.1s; --float-delay: -0.4s; }
.pitch-ip__layer--nota-1    { left: 39%; top: 6%;  width: 9%;  --float-x: 4px;  --float-y: -15px; --float-r: 1.6deg;  --float-duration: 3.2s; --float-delay: -1.6s; }
.pitch-ip__layer--livro     { left: 69%; top: 5%;  width: 27%; --float-x: 3px;  --float-y: -10px; --float-r: 0.7deg;  --float-duration: 4.8s; --float-delay: -2.1s; }
.pitch-ip__layer--tabuleiro { left: 1%;  top: 57%; width: 31%; --float-x: -4px; --float-y: -8px;  --float-r: -0.5deg; --float-duration: 5.2s; --float-delay: -0.9s; }
.pitch-ip__layer--cartas    { left: 6%;  top: 76%; width: 19%; --float-x: 3px;  --float-y: -13px; --float-r: 1deg;    --float-duration: 4.4s; --float-delay: -2.8s; }
.pitch-ip__layer--tela      { left: 75%; top: 55%; width: 21%; --float-x: 4px;  --float-y: -11px; --float-r: 0.65deg; --float-duration: 4.6s; --float-delay: -1.7s; }
.pitch-ip__layer--pelucia   { left: 64%; top: 70%; width: 15%; --float-x: -3px; --float-y: -9px;  --float-r: -0.7deg; --float-duration: 5.5s; --float-delay: -3.2s; }

.pitch-ip__personagem {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: contain;
  transform-origin: 50% 55%;
  will-change: transform;
}

.pitch-ip__personagem--capy {
  left: 21%;
  top: 17%;
  width: 58%;
  height: 68%;
  --float-x: 2px;
  --float-y: -14px;
  --float-r: 0.8deg;
  --float-duration: 3.8s;
  --float-delay: -1.1s;
}

/* Todos os quadros da Capy usam canvas 1:1 idêntico. Assim a troca de
   poses preserva o centro e a escala, como no ciclo de poses do Chris. */
[data-capy-item-animation] .pitch-ip__personagem--capy {
  object-position: center;
}

.motion-on:not([data-decor-paused="true"]) .pitch-ip__arte.is-in .pitch-ip__layer,
.motion-on:not([data-decor-paused="true"]) .pitch-ip__arte.is-in .pitch-ip__personagem {
  animation: pitch-ip-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
}

@media (max-width: 55.99rem) {
  .pitch-ip__arte {
    width: min(100%, 34rem);
  }
}

/* Subtítulo solto dentro de uma .pitch-secao, sem card — usado quando uma
   seção precisa de uma segunda pergunta/tópico no meio do conteúdo, sem
   virar uma sub-seção nova. */
.pitch-subhead {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: 1.3rem;
}

.pitch-subhead + * {
  margin-top: 1rem;
}

.pitch-subhead--destaque {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--branco);
}

/* ---------------- Banner ilustrativo dentro de seção ---------------- */

.pitch-banner {
  margin-top: clamp(2rem, 4vw, 3rem);
}

} /* fim de @layer sections */