/* =========================================================================
   Desafio ABS de Bailarina — o que é só desta página
   A base é o sistema do Desafio 21 Dias (jazz.css, copiado sem mudança):
   tokens, botão, faixa, blocos, lista, oferta, garantia, FAQ, reveal.
   Aqui entram a abertura com duas fotos e os blocos novos da copy.
   ========================================================================= */

/* =========================================================================
   ABERTURA — texto à esquerda, as duas fotos à direita (opção D, 12/out)
   O quadro do vídeo (abdômen) é a peça principal; a selfie entra menor,
   emoldurada em papel, sobrepondo o canto de baixo à esquerda.

   [12/out, 2ª passada] Título em quatro linhas (escolha do Henrique no ?v):
   a linha mais longa ocupa 5,46em, então a coluna de texto encolhe pra 5/12
   e as fotos ocupam o resto da linha, com o abdômen mais alto (10:9) pra
   fazer par com a altura do bloco de texto.
   ========================================================================= */

.hero--abs .hero__grid { justify-items: stretch; text-align: left; }
.hero--abs .hero__texto { align-items: flex-start; }

/* As duas quebras moram no HTML como <br>: .q4 = quatro linhas (Conquiste o /
   abdômen de / bailarina em / 21 dias, a base), .q3 = três (Conquiste o
   abdômen / de bailarina / em 21 dias, só pra comparar no ?v).
   Tamanho: a linha mais longa (5,46em) cabe sempre na coluna — 11,5vw no
   celular (deixa a foto aparecer na 1ª tela), 6,5vw no desktop (900px → 58px, 1024 → 67px), teto de 72px. */
/* [12/out, 3ª passada] "o título tá muito grande": desceu pra 60px no teto,
   e o subtítulo passou a ter a largura exata do título (a linha mais longa,
   5,46em), pra os dois blocos fecharem na mesma margem direita. */
.hero--abs .hero__texto { --t-hero: min(10vw, 2.75rem); }
@media (min-width: 900px) { .hero--abs .hero__texto { --t-hero: clamp(2.75rem, 4.2vw, 3.75rem); } }
.hero--abs .hero__titulo { font-size: var(--t-hero); line-height: 1.04; }
.hero--abs .hero__titulo .q3 { display: none; }
.hero--abs .hero__titulo .acento { font-size: 1.1em; letter-spacing: -0.02em; line-height: 1; }
@media (min-width: 900px) { .hero--abs .hero__sub { max-width: calc(var(--t-hero) * 5.46); } }

.hero__fotos { position: relative; width: 100%; display: flex; flex-direction: column; }
.hero__foto { margin: 0; }
.hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-midia);
  background: var(--bg-placeholder);
}
/* 10:9 corta só as laterais do quadro (1408×1117): o corpo fica no centro */
.hero__foto--abd { width: 86%; margin-left: auto; aspect-ratio: 10 / 9; }
.hero__foto--abd img { object-position: 50% 35%; }
.hero__foto--selfie {
  position: absolute;
  left: 0;
  bottom: -8%;
  z-index: 1;
  width: 34%;
  padding: 8px;
  background: var(--base-paper);
  border-radius: calc(var(--r-midia) + 8px);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--base-accent-d) 55%, transparent);
}
.hero__foto--selfie img { aspect-ratio: 3 / 4; }

@media (min-width: 900px) {
  /* a coluna de texto tem a largura do próprio texto (título e subtítulo
     com a mesma medida); as fotos ocupam o resto. Numa grade de 12 o
     título menor deixava um vão entre o texto e a selfie. */
  .hero--abs .hero__grid {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(56px, 7vw, 120px);
    align-items: center;
  }
  .hero--abs .hero__texto { grid-column: 1; }
  .hero--abs .hero__fotos { grid-column: 2; margin-bottom: 8%; }
}

/* celular: texto no eixo, fotos embaixo na mesma composição */
@media (max-width: 899px) {
  .hero--abs .hero__grid { justify-items: center; text-align: center; }
  .hero--abs .hero__texto { align-items: center; }
  .hero--abs .hero__fotos { max-width: 460px; margin-bottom: 10%; }
}

/* =========================================================================
   SEÇÕES
   ========================================================================= */

/* fotos da página atual: chegam com o recorte próprio, só ganham o canto.
   A proporção vem do arquivo (--ar no <img>): aspect-ratio: auto apagaria a
   reserva de width/height e a foto teria 0px até carregar (a página pula). */
.foto--abs {
  aspect-ratio: var(--ar);
  border-radius: var(--r-midia);
}
.foto--retrato { max-width: 440px; }

/* o título da dor mora dentro da coluna de texto, ao lado da foto */
.cabeca-dor {
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: var(--track-h2);
  color: var(--tone-strong);
}
strong.cor { color: var(--accent); }

.cabeca__apoio {
  margin-top: var(--s-4);
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--tone-body);
}

.prosa .lead { font-size: var(--t-lead); line-height: var(--lh-lead); }
.prosa .lead strong { color: var(--tone-strong); }

/* POR QUE É DIFERENTE [12/out, rodada 4, opção 3]: os seis ganhos em
   cartões brancos, como o Para quem é — dois por linha e de mesma altura
   no desktop, um cartão só com filete entre os itens no celular. O número
   fica na itálica do acento (o mesmo número dos cartões do Desafio). */
.pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pilares li {
  display: grid;
  grid-template-columns: 2.25em 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-card);
  border-radius: calc(var(--r-midia) * .7);
  font-size: var(--t-body);
  line-height: 1.3;
  color: var(--tone-strong);
}
.pilares__n {
  font-family: var(--font-acento);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--accent);
}
@media (max-width: 699px) {
  .pilares { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; padding: var(--s-2) var(--s-5); background: var(--bg-card); border-radius: calc(var(--r-midia) * .7); }
  .pilares li { padding: var(--s-4) 0; background: none; border-radius: 0; }
  .pilares li + li { border-top: 1px solid var(--border); }
}
/* a frase que fecha a seção: o tracejado lia como espaço vazio a
   preencher; vira cartão liso com filete vinho à esquerda */
.bloco--invertido .destaque {
  border: 0;
  border-left: 3px solid var(--accent);
  padding: var(--s-5) var(--s-6);
  border-radius: 0 calc(var(--r-midia) * .7) calc(var(--r-midia) * .7) 0;
}

/* SOBRE: a foto acompanha a leitura no desktop (a coluna de texto é longa) */
.bloco--sobre { align-items: start; }
@media (min-width: 900px) {
  .bloco--sobre .bloco__midia { position: sticky; top: var(--s-6); }
}
.cabeca-interna--menor { font-size: var(--t-lead); line-height: 1.4; }
/* destaques da carreira [12/out, rodada 5, opção 2]: eram uma parede de
   texto cinza; viram um cartão branco com filete entre os itens e o check
   no disco vinho, como o Para quem é */
.lista--carreira {
  gap: 0;
  padding: var(--s-2) var(--s-5);
  background: var(--bg-card);
  border-radius: calc(var(--r-midia) * .7);
}
.lista--carreira li {
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--tone-strong);
}
.lista--carreira li + li { border-top: 1px solid var(--border); }
.lista--carreira svg {
  width: 30px; height: 30px; flex-basis: 30px;
  margin: 0; padding: 7px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
}
@media (max-width: 699px) {
  .lista--carreira { padding-inline: var(--s-4); }
  .lista--carreira li { gap: var(--s-3); }
}

/* O QUE TEM NO DESAFIO: os quatro itens em cartão; o quarto não tem
   descrição na copy, então vira o cartão escuro que fecha a grade */
.entregas {
  display: grid;
  gap: var(--gutter);
}
@media (min-width: 700px) { .entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.entregas .recurso { display: flex; flex-direction: column; }
.recurso--escuro {
  justify-content: flex-end;
  background: linear-gradient(142deg, var(--base-accent-d) 0%, #4a1220 100%);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--base-accent-d) 80%, transparent);
}
.recurso--escuro h3 { color: #fff; font-family: var(--font-acento); font-style: italic; letter-spacing: -0.01em; }
.recurso--escuro .recurso__icone { background: var(--base-paper); color: var(--base-accent-d); }

/* PREÇO: no lugar da lista do Desafio, o texto da copy; o preço à direita */
.oferta__texto p { color: color-mix(in srgb, #fff 88%, transparent); }
.oferta__gancho {
  font-family: var(--font-acento);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff !important;
}
.oferta__chamada { font-weight: var(--w-medium); color: #fff !important; }

/* GARANTIA: a copy traz o título como h2; aqui ele assume o degrau do h3
   do cartão do Desafio */
.garantia--abs h2 {
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  color: var(--tone-strong);
}
.garantia--abs .garantia__linha { margin-top: var(--s-2); color: var(--tone-strong); }

/* =========================================================================
   REVISÃO DE UI [12/out] — espaçamentos e acabamento
   ========================================================================= */

/* PARA QUEM É: a grade de cartões ocupa a largura toda, então o título,
   o remate e o botão vão pro eixo, como nas outras seções de grade */
.quem-bloco .remate { text-align: center; }

/* SOBRE: a foto preenche a coluna (antes parava em 440px e abria um vão
   até o texto) e acompanha a leitura abaixo da barra do topo */
@media (min-width: 900px) {
  .bloco--sobre .foto--retrato { max-width: none; }
}

/* OFERTA: o gancho perdia pra regra geral da prosa e saía no corpo do
   texto; aqui ele assume o degrau do h3 que foi pensado pra ele */
.oferta__texto .oferta__gancho { font-size: var(--t-h3); line-height: 1.3; }
.oferta--abs .oferta__texto { align-self: center; }
/* o botão quebrava em duas linhas ("…com / desconto") */
.oferta--abs .preco .cta { white-space: nowrap; padding-inline: var(--s-4); }
@media (max-width: 599px) { .oferta--abs .preco .cta { font-size: var(--t-sm); } }

/* GARANTIA: o botão numa terceira coluna espremia o texto em 445px (o
   parágrafo quebrava em quatro linhas curtas). Aqui o botão desce pra
   baixo do texto, na mesma coluna, e o texto ganha a largura toda. */
@media (min-width: 900px) {
  .garantia--abs { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-8); row-gap: var(--s-6); }
  .garantia--abs .selo { grid-row: 1 / span 2; }
  .garantia--abs .cta { grid-column: 2; justify-self: start; }
}

/* PARA QUEM É no celular [12/out, rodada 3, opção 1]: os seis cartões
   empilhados viravam seis caixas brancas (seção de 1.137px). Abaixo de
   700px a lista vira um cartão só, com filete entre os itens. */
@media (max-width: 699px) {
  .quem { gap: 0; padding: var(--s-2) var(--s-5); background: var(--bg-card); border-radius: calc(var(--r-midia) * .7); }
  .quem li { grid-template-columns: 30px 1fr; padding: var(--s-4) 0; background: none; border-radius: 0; }
  .quem li + li { border-top: 1px solid var(--border); }
  .quem svg { width: 30px; height: 30px; flex-basis: 30px; padding: 7px; }
}

/* O QUE TEM NO DESAFIO no celular [12/out, rodada 6, opção 1]: os quatro
   cartões somavam 1.335px (ícone de 60px em cima do título + 48px de
   respiro). Abaixo de 700px o ícone fica menor, ao lado do título. */
@media (max-width: 699px) {
  .entregas { gap: 12px; }
  .entregas .recurso { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4); align-items: center; padding: var(--s-5); }
  .entregas .recurso__icone { width: 22px; height: 22px; padding: 11px; margin: 0; }
  .entregas .recurso p { grid-column: 1 / -1; }
  .recurso--escuro { justify-content: initial; }
}

/* =========================================================================
   VITRINE [13/out] — mockup dos dispositivos + ilustração da capa do e-book
   (imagens que o Henrique trouxe). A ilustração vem do mesmo desenho da
   capa do "Core de Bailarina": ao lado do mockup, ela tira a figura do
   livro e põe pra dançar. Movimento: na rolagem a ilustração anda num
   ritmo e o mockup em outro (--py, do jazz.js) e ela balança de leve.
   Lugar [13/out, rodada 7, opção 2]: duas colunas na seção 6, a
   ilustração em cima e o mockup na frente; os cartões à direita.
   ========================================================================= */
.vitrine { position: relative; isolation: isolate; padding-top: 74%; margin-bottom: var(--s-6); }
.vitrine img { display: block; height: auto; }
.vitrine__mockup {
  position: relative; z-index: 2; width: 100%;
  transform: translate3d(0, var(--py, 0px), 0);
  filter: drop-shadow(0 28px 34px color-mix(in srgb, var(--base-accent-d) 20%, transparent));
}
.vitrine__ilustra {
  position: absolute; z-index: 1;
  transform: translate3d(0, var(--py, 0px), 0);
  transform-origin: 50% 100%;
  animation: vitrine-balanca 6s ease-in-out infinite alternate;
  /* a ilustração vem cortada na coxa: o pé da figura some em degradê
     em vez de terminar numa linha reta solta no ar */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.vitrine__fundo {
  position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--base-accent) 10%, var(--base-paper));
}
@keyframes vitrine-balanca { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
@media (prefers-reduced-motion: reduce) { .vitrine__ilustra { animation: none; } }

.vitrine__ilustra { left: 50%; top: 0; width: 50%; margin-left: -25%; }
.vitrine__fundo { left: 50%; top: 9%; width: 70%; margin-left: -35%; }
.vitrine__mockup { margin-top: -18%; }
@media (min-width: 900px) {
  .inclui-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .vitrine { margin-bottom: 0; }
  /* coluna estreita: os quatro cartões empilham, ícone ao lado do título (como no celular) */
  .inclui-grade .entregas { grid-template-columns: 1fr; gap: 12px; }
  .inclui-grade .recurso { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-4); align-items: center; padding: var(--s-5) var(--s-6); }
  .inclui-grade .recurso__icone { width: 22px; height: 22px; padding: 11px; margin: 0; }
  .inclui-grade .recurso p { grid-column: 2; margin-top: var(--s-1); }
  .inclui-grade .recurso--escuro { justify-content: initial; }
}
@media (max-width: 699px) {
  .vitrine { padding-top: 62%; }
  .vitrine__ilustra { width: 42%; margin-left: -21%; }
  .vitrine__fundo { width: 58%; margin-left: -29%; }
}