/* ==========================================================================
   LP — MANIFESTO DO ESPORTE
   Só o que é específico desta página. Tudo mais vem do design system.
   ========================================================================== */

/* ---------- Topo -------------------------------------------------------- */

.lp-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(54px, 4.6vw, 64px);
  padding: 0 var(--gutter-page);
  background: var(--surface-brand);
  border-bottom: var(--border-hairline) solid var(--eu-white-a24);
}
.lp-top img {
  width: clamp(148px, 16vw, 208px);
}

/* ---------- Dobra 1: manifesto -----------------------------------------
   Composição centralizada e compacta: a dobra inteira precisa caber numa
   tela de notebook com o card do quiz já espiando na borda de baixo.
   ------------------------------------------------------------------------ */

.manifesto {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px) var(--gutter-page) clamp(112px, 11vw, 152px);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  text-align: center;
  overflow: hidden;
}

.manifesto__pattern {
  position: absolute;
  right: -180px;
  top: -120px;
  width: 780px;
  opacity: 0.09;
  filter: brightness(0) invert();
  pointer-events: none;
  user-select: none;
}

.manifesto__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 1000px;
  margin: 0 auto;
}
.manifesto .tag-row {
  justify-content: center;
  margin-bottom: clamp(14px, 1.3vw, 18px);
}

/* A leitura desce em quatro tempos: pergunta → credencial → tese → evidência.
   Cada tempo muda de tamanho e de cor, então a hierarquia se lê antes do
   texto ser lido. */

/* 1. Pergunta. Quebras de linha decididas à mão até 760px — o rag da manchete
   é composição, não sobra do navegador. */
.manifesto h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.022em;
  text-wrap: initial;
  text-shadow: var(--text-shadow-hero);
}
.manifesto h1 .l {
  display: block;
}
@media (max-width: 760px) {
  .manifesto h1 {
    text-wrap: balance;
  }
  .manifesto h1 .l {
    display: inline;
  }
}

/* 2. Credencial. Uma frase só, no maior corpo de texto da página. */
/* Sem filete: a mudança de corpo e de peso já separa a manchete da
   credencial, e o traço só somava ruído embaixo do título. */
.manifesto__standfirst {
  max-width: 840px;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: var(--weight-semibold);
  line-height: 1.38;
  color: var(--eu-white);
}
.manifesto__standfirst span {
  display: block;
  max-width: 56ch;
  margin: 0 auto;
}

/* 3. Tese. Única linha em display dentro do corpo. A medida é larga o
   bastante para ela caber numa linha só no desktop. */
.manifesto__thesis {
  max-width: 42ch;
  margin: clamp(18px, 2.1vw, 28px) auto 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.3125rem, 2.3vw, 2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--eu-yellow-500);
}

/* ---- Ler mais ----------------------------------------------------------
   A evidência do manifesto fica recolhida por padrão: é o que devolve ar
   para o título e ainda deixa o formulário dentro da primeira dobra.
   ------------------------------------------------------------------------ */

.manifesto__more summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(18px, 2vw, 26px);
  padding: 9px 2px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--eu-yellow-500);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-instant), color var(--dur-instant);
}
.manifesto__more summary::-webkit-details-marker {
  display: none;
}
.manifesto__more summary:hover {
  border-bottom-color: var(--eu-yellow-500);
}
.manifesto__more summary i {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-instant) var(--ease-out-quart);
}
.manifesto__more[open] summary i {
  transform: translateY(1px) rotate(-135deg);
}
.manifesto__more[open] [data-fechado],
.manifesto__more:not([open]) [data-aberto] {
  display: none;
}

.manifesto__more .manifesto__body {
  padding-top: clamp(18px, 2vw, 26px);
}

/* Com JS ativo o controle migra para o fim do texto: quem terminou de ler
   está lá embaixo, não lá em cima. Sem JS o summary continua à vista, senão
   não haveria como fechar. */
.manifesto__more.is-js[open] > summary {
  display: none;
}
.manifesto__fechar {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  gap: 9px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: 9px 2px;
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--eu-yellow-500);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-instant);
}
.manifesto__fechar:hover {
  border-bottom-color: var(--eu-yellow-500);
}
.manifesto__fechar i {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px) rotate(-135deg);
}
.manifesto__more:not(.is-js) .manifesto__fechar {
  display: none;
}

/* A altura abre na hora, como o <details> nativo faz — nada de animar
   `block-size: auto` via ::details-content: há motor que aceita a regra,
   passa no @supports e depois trava o conteúdo em altura zero. O que suaviza
   a abertura é uma animação de entrada no conteúdo, que roda em todo lugar. */
.manifesto__more[open] .manifesto__body {
  animation: manifesto-abre 0.42s var(--ease-out-quint) both;
}
@keyframes manifesto-abre {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 4. Evidência. Começa com um parágrafo à vista: o "ler mais" tem que abrir
   um texto que já começou, não um bloco do nada. */
.manifesto__teaser {
  max-width: 62ch;
  margin: clamp(18px, 2vw, 26px) auto 0;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.6;
  letter-spacing: var(--ls-lead);
  color: var(--eu-blue-100);
}

/* Aberto, o texto vira uma coluna só: quem clicou em "ler mais" quer ler,
   e uma medida única de ~66 caracteres lê melhor que duas colunas curtas. */
.manifesto__body {
  max-width: 66ch;
  margin: 0 auto;
  text-align: left;
}
.manifesto__body p {
  break-inside: avoid;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  line-height: 1.55;
  letter-spacing: var(--ls-lead);
  color: var(--eu-blue-100);
}
.manifesto__body p + p {
  margin-top: var(--space-2);
}

.manifesto__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  max-width: 840px;
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--eu-white-a35);
}
.manifesto__sign b {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.manifesto__sign span {
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--eu-yellow-500);
}

/* ---------- Dobra 1b: quiz --------------------------------------------- */

.quiz-section {
  padding: 0 var(--gutter-page) clamp(52px, 6vw, 84px);
  background: var(--surface-action);
}
/* Sobe para dentro da primeira dobra, parando antes do fim do manifesto: a
   diferença para o padding-bottom de .manifesto é o respiro entre a copy e o
   formulário. Posicionamento é desta página, não do cartão. */
.quiz-section .quiz {
  margin-top: clamp(-124px, -9.2vw, -92px);
}


/* ---------- Princípios --------------------------------------------------
   Linha de cards curtos que fecha a seção branca. Reaproveita .card do
   sistema com um modificador compacto; sem numeração, porque os princípios
   não têm ordem. Uma cor da marca por card, sempre com a tinta que passa no
   contraste: branco no azul e no royal, azul no verde e no amarelo.
   ------------------------------------------------------------------------ */

.principles {
  padding: 0 var(--gutter-section) clamp(52px, 6vw, 84px);
  background: var(--surface-paper);
}
.principles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .principles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .principles__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Dobra 2: sobre --------------------------------------------- */

.sobre {
  display: grid;
  /* minmax(0, …) e não 0.9fr direto: o mínimo automático de uma faixa é o
     min-content do item, e o retrato de 380px travaria a coluna nesse valor,
     estourando a página para o lado no telefone. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  /* clip e não hidden: contém o sangramento do adesivo (inclusive o estado
     inicial da animação de entrada) sem virar container de rolagem. */
  overflow-x: clip;
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  padding: clamp(54px, 6.4vw, 88px) var(--gutter-section);
  background: var(--surface-paper);
}
.sobre__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.sobre .portrait {
  width: min(380px, 100%);
  height: clamp(340px, 38vw, 460px);
}
/* O visual do CTA de WhatsApp mora no design system; aqui só a posição. */
.sobre .sticker--wa {
  bottom: 8%;
  right: -18px;
}

.sobre h2 {
  margin-bottom: var(--space-4);
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: var(--lh-display-3);
  letter-spacing: var(--ls-display-2);
}
.sobre__lead {
  margin-bottom: var(--space-4);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}
.sobre p + p {
  margin-top: var(--space-3);
}
.sobre__text p {
  max-width: var(--measure);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-secondary);
}
.sobre .stat-row {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top-color: var(--eu-slate-300);
}
.sobre .stat__value {
  color: var(--eu-blue-500);
}
.sobre .stat__label {
  color: var(--text-secondary);
}

/* ---------- Rodapé ------------------------------------------------------ */

/* Só a logo no rodapé, então ela fica centralizada em vez de encostada à
   esquerda como no layout de duas pontas do sistema. */
.footer {
  justify-content: center;
}

/* Identificação legal da campanha. Texto pequeno por norma, mas ainda acima
   do mínimo legível: 11px em azul-200 sobre azul-900 dá 7,3:1. */
.footer__legal {
  padding: var(--space-4) var(--gutter-page) var(--space-6);
  background: var(--eu-blue-900);
  color: var(--eu-blue-200);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
}
.footer__legal p {
  max-width: 80ch;
  margin: 0 auto;
}

/* ---------- Responsivo -------------------------------------------------- */

/* Notebook baixo (1366×768, 1280×720): a largura é de desktop mas a altura
   não é. Com a evidência recolhida basta um ajuste leve — nada de encolher a
   tipografia até o manifesto ficar apertado. */
@media (min-width: 901px) and (max-height: 800px) {
  .lp-top {
    height: 54px;
  }
  .manifesto {
    padding-top: 16px;
    padding-bottom: 116px;
  }
  .manifesto h1 {
    font-size: clamp(1.875rem, 3.8vw, 3rem);
  }
  .manifesto__standfirst {
    margin-top: 20px;
    font-size: 1.0625rem;
  }
  .manifesto__thesis {
    margin-top: 20px;
    font-size: 1.625rem;
  }
  .manifesto__more summary {
    margin-top: 18px;
  }
  .quiz-section .quiz {
    margin-top: -100px;
  }
}

@media (max-width: 900px) {
  .sobre {
    grid-template-columns: minmax(0, 1fr);
  }
  .sobre__visual {
    order: -1;
  }
}

@media (max-width: 560px) {
  .manifesto {
    padding-right: 20px;
    padding-bottom: 92px;
    padding-left: 20px;
  }
  .quiz-section {
    padding-right: 20px;
    padding-left: 20px;
  }
  .quiz-section .quiz {
    margin-top: -66px;
  }
  /* No telefone o adesivo não pode sangrar para fora: não há margem sobrando
     à direita e ele levaria a página inteira para o lado. */
  .sobre .sticker--wa {
    right: 0;
  }
}