/* ==========================================================================
   Página de produto da Caixa de Ferramentas — estilos (prefixo .pd-)
   Um só arquivo para os dois modelos: gratuito (`.pd-page--free`, conversão
   por formulário) e pago (`.pd-page--paid`, conversão por checkout). Cada
   página de produto leva a própria cópia, ao lado do HTML e do JS.
   Depende de site.css (chrome .lt-, cartão .lt-toolcard) e de base.css (.faq).
   ========================================================================== */

/*
 * Camada de cor da Caixa (tokens de site.css): roxo #a500ff (o do logo) como
 * cor forte, laranja #ff7900 como destaque, cinzas. Texto sobre roxo é branco;
 * sobre laranja, preto. Substitui o verde/azul herdado do curso (2026-09-24).
 */
:root {
  --lt-product-line: var(--cx-roxo);   /* filete do logo da Caixa no menu */
  --cx-roxo: #a500ff;           /* roxo da Caixa (logo, Figma 824:363); o --purple de base.css é outro */
  --cx-laranja: var(--orange);  /* laranja da Caixa: destaque (botões, filetes, marcações), texto preto */
  --lt-accent: var(--cx-laranja);
  --lt-strong: var(--cx-roxo);
  --lt-current: var(--cx-roxo);
  --lt-focus: var(--cx-roxo);
  --lt-focus-on-dark: var(--cx-laranja);
  --lt-link-hover: var(--cx-roxo);
  --lt-link-hover-line: currentColor;
  --lt-dark-hover-bg: var(--cx-roxo);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
  --lt-skip-bg: var(--cx-roxo);
}

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .pd-hero,
  .pd-includes,
  .pd-fit,
  .pd-steps,
  .pd-preview,
  .pd-access,
  .pd-related,
  .pd-page .faq,
  .lt-footer {
    --lt-u: 1px;
  }
}

/* Cabeçalho de seção: rótulo + título, à esquerda. */
.pd-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
}

.pd-includes h2,
.pd-steps h2,
.pd-preview h2,
.pd-related h2 {
  max-width: calc(860 * var(--lt-u));
  font-size: calc(56 * var(--lt-u));
  line-height: 0.92;
}

/* Tags do produto: status, tipo e tema — as mesmas da Caixa. */
.pd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-tags li {
  padding: calc(6 * var(--lt-u)) calc(8 * var(--lt-u));
  color: var(--gray-700);
  background: var(--white);
  font-family: var(--lt-mono);
  font-size: calc(10 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--gray-200);
}

.pd-tags__free {
  color: var(--black);
  background: var(--cx-laranja);
  box-shadow: none;
}

.pd-tags__paid {
  color: var(--white);
  background: var(--black);
  box-shadow: none;
}

/* Lista de checks (benefícios, incluso, prévia). */
.pd-checks {
  display: grid;
  gap: calc(10 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-checks li {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--lt-u));
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.pd-checks img {
  width: calc(14 * var(--lt-u));
  height: calc(13 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(5 * var(--lt-u));
}

/* Hover dos cartões chapados: o filete verde engrossa para dentro. */
.motion-enabled .pd-include,
.motion-enabled .pd-step {
  transition-property: opacity, transform, filter, box-shadow;
  transition-duration: var(--lt-entrada-card), var(--lt-entrada-card), var(--lt-entrada-card), 240ms;
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms;
}

.pd-include:hover {
  box-shadow: inset 0 calc(-5 * var(--lt-u)) 0 var(--cx-laranja);
}

/* ==========================================================================
   1. Hero do produto — largura total, mockup de fundo
   ========================================================================== */
/*
 * Tela cheia menos o menu. O mockup ocupa o fundo inteiro (imagem PLACEHOLDER
 * por enquanto), sem degradê lateral; só um véu de baixo para cima, onde mora
 * o texto, que nunca chega ao preto puro.
 * O conteúdo não tem largura fixa: 48 de margem de cada lado. Hierarquia:
 * rótulo → título grande → texto → oferta (preço + CTA) à direita, na mesma
 * linha da base do texto. Sem faixa de benefícios embaixo: repetia o que a
 * página inteira já conta.
 */
.pd-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--lt-header-h));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

/* A foto de borda a borda, sem máscara. */
.pd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/*
 * Véu de baixo para cima: segura o conteúdo branco sobre qualquer foto, por mais
 * colorida ou contrastada. Mais denso na base (texto e oferta), ainda firme na
 * altura do título e das tags, some antes do topo; nunca chega ao preto puro.
 * As paradas seguem uma curva suave para o degradê não fazer faixa.
 */
.pd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 0.8) 0%,
    rgb(0 0 0 / 0.72) 16%,
    rgb(0 0 0 / 0.58) 32%,
    rgb(0 0 0 / 0.4) 48%,
    rgb(0 0 0 / 0.2) 64%,
    rgb(0 0 0 / 0.06) 78%,
    rgb(0 0 0 / 0) 88%
  );
}

.pd-hero__inner {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(48 * var(--lt-u));
  padding: clamp(40px, 8svh, 96px) calc(48 * var(--lt-u)) clamp(32px, 6svh, 64px);
}

.pd-hero__copy {
  container-type: inline-size;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.4svh, 24px);
  min-width: 0;
  /* Em tela larga o título não passa de ~1100 e o mockup aparece à direita. */
  max-width: calc(1100 * var(--lt-u));
}

/*
 * Título e texto aparados na letra (do topo da maiúscula à linha de base,
 * como no Figma): assim o gap da coluna é o vão que se vê, e tag → título
 * mede o mesmo que título → texto. Sem o aparo, a entrelinha somava ~20 px
 * a mais embaixo do título e o segundo vão ficava quase o dobro do primeiro.
 */
.pd-hero h1,
.pd-hero__lead {
  text-box: trim-both cap alphabetic;
}

/* Navegador sem text-box: as mesmas sobras descontadas na margem (medidas da fonte). */
@supports not (text-box: trim-both cap alphabetic) {
  .pd-hero h1 {
    margin-block: -0.026em -0.154em;
  }

  .pd-hero__lead {
    margin-block: -0.405em -0.395em;
  }
}

/*
 * H1 de abertura do site (--lt-h1, site.css). Só encolhe se a coluna não
 * comporta: "APRESENTAÇÃO DE PROJETO" mede 10,4em, então 9,6cqi garante as duas
 * linhas; 15svh segura tela baixa.
 */
.pd-hero h1 {
  max-width: none;
  color: var(--white);
  font-size: min(var(--lt-h1), 9.6cqi, 15svh);
  line-height: 0.88;
}

.pd-hero__lead {
  max-width: calc(560 * var(--lt-u));
  color: var(--gray-200);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

/*
 * Tags do produto — as mesmas do cartão na página da Caixa (tipo e tema) — no
 * padrão de rótulo do site (.lt-label), só em branco e cinza: a foto do fundo
 * pode ter qualquer cor e um roxo ou laranja chapado brigaria com ela. A cor
 * fica dentro, no ponto do quadrado cinza: roxo da Caixa no tipo, laranja no
 * "Gratuito". O tema vai só texto, na mesma altura. Produto pago não leva tag
 * de "pago": o preço ao lado já diz.
 */
.pd-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-hero .lt-label {
  min-height: calc(32 * var(--lt-label-u));
  background: var(--white);
}

/* Oferta: preço em cima do CTA, na base, à direita; bandeiras de pagamento embaixo. */
.pd-hero__offer {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--lt-u));
}

/* Preço cheio riscado em cima, o preço de agora embaixo — sem "de"/"por" à vista (só para leitor de tela). */
.pd-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--lt-u));
  margin: 0;
}

.pd-price s {
  color: var(--gray-400);
  font-size: calc(18 * var(--lt-u));
  line-height: 1;
  text-decoration-thickness: 1.5px;
}

.pd-price strong {
  color: var(--white);
  font-family: var(--display);
  font-size: calc(72 * var(--lt-u));
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.pd-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(12 * var(--lt-u));
}

/*
 * CTA do hero em branco, no pago e no gratuito: é o que funciona sobre qualquer
 * foto. Sobre o escuro o hover preto sumiria, então vai ao laranja de destaque
 * (como o botão branco do cartão de ferramenta).
 */
.pd-hero .lt-btn--white:hover {
  color: var(--black);
  background-color: var(--lt-accent);
}

/* No gratuito, no lugar das bandeiras, a nota de como o acesso chega. */
.pd-hero__note {
  color: var(--gray-200);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.5;
  text-align: center;
}

/* As mesmas bandeiras da oferta do curso (cinza chapado), centradas sob o botão. */
.pd-hero__flags {
  align-self: center;
  width: calc(198 * var(--lt-u));
  height: calc(18 * var(--lt-u));
}

/* Entrada: o fundo assenta com um leve zoom (só transform). */
.motion-enabled .pd-hero__bg {
  transform: scale(1.06);
  transition: transform 1600ms var(--motion-ease-scale);
}

.motion-enabled.motion-loaded .pd-hero__bg {
  transform: none;
}

/* ==========================================================================
   2. O que vem no material / O que você recebe
   ========================================================================== */
.pd-includes {
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.pd-includes__inner {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
}

.pd-includes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-page--paid .pd-includes__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Ícone no alto, título e texto na base; entre título e texto só 10. */
.pd-include {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  min-height: calc(240 * var(--lt-u));
  padding: calc(24 * var(--lt-u));
  background: var(--gray-100);
  border-bottom: calc(5 * var(--lt-u)) solid var(--cx-laranja);
}

.pd-include__icon {
  display: grid;
  place-items: center;
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  background: var(--cx-roxo);
}

/* Ícones do que vem no pacote, desenhados retos (pontas e quinas secas). */
.pd-include__icon img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.pd-include h3 {
  margin-top: auto;
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.pd-include p {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

/* ==========================================================================
   3. Para quem é / não é
   ========================================================================== */
.pd-fit {
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--ink);
}

.pd-fit__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
}

.pd-fit__card {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
  padding: calc(40 * var(--lt-u));
  background: var(--white);
  border-bottom: calc(5 * var(--lt-u)) solid var(--cx-laranja);
}

.pd-fit__card--no {
  color: var(--white);
  background-color: var(--black);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.106) 0 calc(1.41 * var(--lt-u)),
    transparent calc(1.41 * var(--lt-u)) calc(6.36 * var(--lt-u))
  );
  border-bottom-color: var(--gray-700);
}

.pd-fit__mark {
  display: grid;
  place-items: center;
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  color: var(--black);
  background: var(--cx-laranja);
  font-size: calc(20 * var(--lt-u));
  font-weight: 700;
  line-height: 1;
}

.pd-fit__card--no .pd-fit__mark {
  color: var(--white);
  background: var(--gray-700);
}

.pd-fit__card h2 {
  color: var(--ink);
  font-size: calc(44 * var(--lt-u));
  line-height: 0.92;
}

.pd-fit__card--no h2 {
  color: var(--white);
}

.pd-fit__sub {
  margin-top: calc(-12 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
}

.pd-fit__card--no .pd-fit__sub {
  color: var(--gray-400);
}

.pd-fit__list {
  display: grid;
  gap: calc(12 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-fit__list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  padding-bottom: calc(12 * var(--lt-u));
  color: var(--ink);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
  border-bottom: 1px solid var(--gray-200);
}

.pd-fit__card--no .pd-fit__list li {
  color: var(--gray-200);
  border-bottom-color: var(--gray-700);
}

.pd-fit__list li::before {
  content: "+";
  flex: 0 0 auto;
  color: var(--cx-laranja);
  font-weight: 700;
}

.pd-fit__card--no .pd-fit__list li::before {
  content: "×";
  color: var(--gray-400);
}

/* ==========================================================================
   4. Como usar / Como funciona — 3 passos
   ========================================================================== */
.pd-steps {
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.pd-steps__inner {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
}

/*
 * No desenho de "Como o conteúdo do curso é organizado" (curso, 616:37475), nas
 * cores da Caixa: três blocos chapados (roxo, cinza, laranja) com o numeral
 * gigante entrando pelo topo, cortado ali, e o cartão branco embaixo. No pé, o
 * botão preto para a compra e a faixa de zigue-zague sob a terceira coluna.
 */
.pd-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-step {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  min-height: calc(420 * var(--lt-u));
  /* Corta a parte de cima do numeral, que sobe além da borda do bloco. */
  overflow: hidden;
}

.pd-step--roxo { background: var(--cx-roxo); }
.pd-step--cinza { background: var(--gray-400); }
.pd-step--laranja { background: var(--cx-laranja); }

.pd-step__top {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  /* Alinhado com a borda direita do cartão branco de baixo. */
  padding-right: calc(12 * var(--lt-u));
}

/* O numeral entra pelo topo e é cortado ali (medidas do curso, em `em`). */
.pd-step__num {
  margin-top: -0.328em;
  color: var(--white);
  font-family: var(--sans);
  font-size: calc(202 * var(--lt-u));
  font-weight: 400;
  line-height: 1;
  transform-origin: 100% 50%;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Algarismos proporcionais: o "1" tem mais respiro lateral que o "2" e o "3". */
.pd-step--roxo .pd-step__num { margin-right: -0.069em; }
.pd-step--cinza .pd-step__num { margin-right: -0.031em; }
.pd-step--laranja .pd-step__num { margin-right: -0.040em; }

/* Hover do curso: o numeral cresce um pouco e tomba no sentido horário. */
.pd-step:hover .pd-step__num {
  transform: rotate(4deg) scale(1.1);
}

.pd-step__card {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  margin: calc(12 * var(--lt-u));
  padding: calc(16 * var(--lt-u));
  background: var(--white);
}

.pd-step h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(26 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.pd-step p {
  color: var(--gray-600);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.pd-step .pd-step__note {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  margin-top: calc(6 * var(--lt-u));
  color: var(--ink);
  font-size: calc(14 * var(--lt-u));
}

.pd-step__note img {
  width: calc(13 * var(--lt-u));
  height: calc(12 * var(--lt-u));
  flex: 0 0 auto;
}

.pd-steps__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
}

.pd-steps__foot .lt-btn {
  justify-content: space-between;
}

.pd-steps__chevrons {
  grid-column: 3;
  align-self: center;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   5. Prévia do produto (só no pago)
   ========================================================================== */
.pd-preview {
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

.pd-preview__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: calc(64 * var(--lt-u));
}

.pd-preview__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
  min-width: 0;
}

.pd-preview .lt-label {
  background: var(--white);
}

.pd-preview__lead {
  max-width: calc(440 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.pd-preview__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}

.pd-preview__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pd-preview__media:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   6. Acesso — formulário (gratuito) ou bloco de compra (pago)
   ========================================================================== */
/*
 * Padrão das seções de preço e CTA do site (candidatura da mentoria, "Falar com
 * a gente" do contato): o título vira letreiro sangrado, quase apagado (branco
 * a 10 % sobre o preto, cor chapada), correndo colado no topo. Abaixo, o cartão
 * grafite na largura do conteúdo: o produto à esquerda e a compra num cartão
 * cinza, um nível acima, encostado nas bordas.
 */
.pd-access {
  position: relative;
  overflow: hidden;
  padding: 0 0 calc(120 * var(--lt-u));
  color: var(--white);
  background: var(--black);
}

/*
 * Colado no topo (as medidas da mentoria): a tinta da ABC Gravity começa
 * 0,146em abaixo do topo da linha; a fita sobe 0,0882em e a caixa do h2
 * (0,712em) termina rente à base das letras.
 */
.pd-access .pd-access__display {
  display: flow-root;
  height: 0.712em;
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--white) 10%, var(--black));
  font-size: 13.6vw;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.pd-access__fita {
  display: flex;
  width: max-content;
  margin-top: -0.0882em;
}

.pd-access__fila {
  display: flex;
}

/* Espaço no `margin-right` de cada item (não em `gap`), para a emenda fechar. */
.pd-access__fila i {
  margin-right: 0.28em;
  font-style: normal;
}

.motion-enabled .pd-access__fita {
  animation: pd-letreiro 50s linear infinite;
}

@keyframes pd-letreiro {
  to {
    transform: translateX(-50%);
  }
}

.pd-access__inner {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
  width: calc(100% - 2 * var(--lt-gutter));
  margin: calc(40 * var(--lt-u)) auto 0;
}

/* Compra com até 520, e nunca mais da metade do cartão. */
.pd-access__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(calc(520 * var(--lt-u)), 50%));
  align-items: stretch;
  background: var(--ink);
}

.pd-access__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: calc(40 * var(--lt-u)) calc(72 * var(--lt-u)) 0 calc(64 * var(--lt-u));
}

/* Etiquetas no padrão das seções de preço; a primeira na cor de destaque da Caixa. */
.pd-access__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
  margin: 0 0 calc(28 * var(--lt-u));
  padding: 0;
  list-style: none;
}

.pd-access__chips li {
  display: inline-flex;
  align-items: center;
  padding: calc(10 * var(--lt-u)) calc(14 * var(--lt-u));
  color: var(--white);
  background: var(--gray-700);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pd-access__chips li:first-child {
  color: var(--black);
  background: var(--cx-laranja);
}

.pd-access__info h3 {
  color: var(--white);
  font-family: var(--display);
  font-size: calc(48 * var(--lt-u));
  line-height: 0.95;
}

.pd-access__text {
  max-width: calc(420 * var(--lt-u));
  margin-top: calc(16 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(16 * var(--lt-u));
  line-height: 1.5;
}

.pd-access__label {
  margin-top: calc(32 * var(--lt-u));
  color: var(--white);
  font-size: calc(15 * var(--lt-u));
  font-weight: 500;
  line-height: 1.5;
}

/* Os mesmos ícones dos cartões de "O que você recebe", em laranja. */
.pd-access__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--lt-u));
  margin: calc(16 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

.pd-access__list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

.pd-access__list img {
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(2 * var(--lt-u));
}

/*
 * Pé da coluna: faixa baixa da malha de quadradinhos da marca (Figma 293:9390),
 * cinza chapado, dentro das margens, presa à base com o mesmo recuo (40).
 */
.pd-access__padrao {
  align-self: stretch;
  height: calc(40 * var(--lt-u));
  margin: auto 0 calc(40 * var(--lt-u));
  padding-top: calc(40 * var(--lt-u));
  background: url("./assets/pattern-tile-quadradinhos-cinza.svg") 0 0 / calc(10 * var(--lt-u)) calc(10 * var(--lt-u)) repeat;
  background-origin: content-box;
  background-clip: content-box;
  box-sizing: content-box;
}

/*
 * --- Formulário (gratuito) ---
 * No desenho do formulário da candidatura da mentoria: cartão cinza (um nível
 * acima do grafite do cartão), encostado nas bordas; campos pretos com o ícone
 * dentro e o rótulo só para leitor de tela — a cor separa, sem contorno.
 */
.pd-access__form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(40 * var(--lt-u));
  background: var(--gray-700);
}

.pd-form {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--lt-u));
  min-width: 0;
}

/* Um campo embaixo do outro: lado a lado ficavam curtos demais para o conteúdo. */
.pd-form__row {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--lt-u));
}

.pd-form__field {
  position: relative;
}

.pd-form__icon {
  position: absolute;
  top: calc(17 * var(--lt-u));
  left: calc(16 * var(--lt-u));
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  pointer-events: none;
}

.pd-form__field input {
  display: block;
  width: 100%;
  min-height: calc(52 * var(--lt-u));
  margin: 0;
  padding: calc(14 * var(--lt-u)) calc(16 * var(--lt-u)) calc(14 * var(--lt-u)) calc(46 * var(--lt-u));
  color: var(--white);
  background: var(--black);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  font-size: max(16px, calc(15 * var(--lt-u)));
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.pd-form__field ::placeholder {
  color: var(--gray-400);
  opacity: 1;
}

.pd-form__field input:focus-visible {
  outline: 2px solid var(--lt-focus-on-dark);
  outline-offset: 0;
}

/* Erro depois da interação: filete vermelho embaixo do campo. */
.pd-form__field input:user-invalid {
  box-shadow: inset 0 -3px 0 var(--red);
}

.pd-form__consent {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--lt-u));
  margin-top: calc(4 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
  cursor: pointer;
}

.pd-form__consent input {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex: 0 0 auto;
  margin: calc(1 * var(--lt-u)) 0 0;
  background: var(--black) center / 70% no-repeat;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Marcado: o laranja da Caixa com o check (na mentoria, o amarelo). */
.pd-form__consent input:checked {
  background-color: var(--cx-laranja);
  background-image: url("./assets/check.svg");
}

.pd-form__consent input:focus-visible {
  outline: 2px solid var(--lt-focus-on-dark);
  outline-offset: 2px;
}

.pd-form__consent input:user-invalid {
  box-shadow: inset 0 -3px 0 var(--red);
}

.pd-form .lt-btn {
  width: 100%;
  margin-top: calc(12 * var(--lt-u));
}

.pd-form__error {
  min-height: 1em;
  color: var(--red-light);
  font-size: calc(13 * var(--lt-u));
}

.pd-form__error:empty {
  display: none;
}

/* Aviso de dados: o padrão de todos os formulários do site (o da lista de espera do curso). */
.pd-form__note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--lt-u));
  margin-top: calc(4 * var(--lt-u));
  color: var(--gray-400);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.5;
}

.pd-form__note img {
  width: calc(14 * var(--lt-u));
  height: calc(14 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(3 * var(--lt-u));
}

.pd-form__note strong {
  color: var(--white);
  font-weight: 500;
}

.pd-form__note a {
  color: var(--gray-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O reCAPTCHA invisível não desenha nada; a caixa fica só como âncora. */
.pd-form__recaptcha {
  height: 0;
  overflow: hidden;
}

.pd-form__result {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Sucesso: substitui o formulário. O `[hidden]` precisa vencer o `display: flex`. */
.pd-form__success[hidden],
[data-form-view][hidden] {
  display: none;
}

/* No lugar do cartão do formulário, na mesma coluna: o laranja da Caixa. */
.pd-form__success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(12 * var(--lt-u));
  min-height: 100%;
  padding: calc(40 * var(--lt-u));
  color: var(--black);
  background: var(--cx-laranja);
}

.pd-form__success h3 {
  font-family: var(--sans);
  font-size: calc(24 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
}

.pd-form__success p {
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
}

/*
 * --- Bloco de compra (pago) ---
 * No desenho do cartão de preço do curso: faixa cinza-clara com o logo do
 * produto e a etiqueta, o corpo (um nível acima do grafite do cartão) com o
 * preço e o botão, e a nota de pagamento seguro alinhada ao pé do cartão,
 * no mesmo cinza do corpo. Encostado nas bordas do cartão.
 */
.pd-buy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--gray-700);
}

.pd-buy__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--lt-u));
  padding: calc(16 * var(--lt-u));
  background: var(--gray-100);
}

.pd-buy__logo {
  --lt-produto-h: calc(44 * var(--lt-u));
  display: flex;
  align-items: center;
}

.pd-buy__badge {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin: 0;
  background: var(--gray-700);
}

.pd-buy__badge img {
  width: calc(32 * var(--lt-u));
  height: calc(32 * var(--lt-u));
}

.pd-buy__badge span {
  display: grid;
  place-items: center;
  padding-inline: calc(12 * var(--lt-u));
  color: var(--white);
  font-size: calc(12 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pd-buy__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(48 * var(--lt-u));
  padding: calc(56 * var(--lt-u)) calc(32 * var(--lt-u)) calc(40 * var(--lt-u));
  text-align: center;
}

/* O preço cheio riscado em cima e o de agora embaixo, como no hero. */
.pd-buy__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--lt-u));
  margin: 0;
}

.pd-buy__price s {
  color: var(--gray-400);
  font-size: calc(18 * var(--lt-u));
  font-weight: 500;
  line-height: 1;
  text-decoration-thickness: 1.5px;
}

.pd-buy__price strong {
  color: var(--white);
  font-family: var(--display);
  font-size: calc(88 * var(--lt-u));
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.pd-buy__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--lt-u));
  width: min(100%, calc(358 * var(--lt-u)));
}

.pd-buy__action .lt-btn {
  width: 100%;
}

.pd-buy__flags {
  width: calc(198 * var(--lt-u));
  height: calc(18 * var(--lt-u));
}

.pd-buy__safe {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: calc(24 * var(--lt-u));
}

.pd-buy__safe span {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--lt-u));
  padding: calc(8 * var(--lt-u));
  color: var(--white);
  font-size: calc(14 * var(--lt-u));
  line-height: 1;
  letter-spacing: 0.03em;
}

.pd-buy__safe img {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex: 0 0 auto;
}

/* Garantia, sob o cartão de compra. */
.pd-warranty {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--lt-u));
  width: 100%;
  padding: calc(20 * var(--lt-u)) calc(24 * var(--lt-u));
  background: var(--ink);
  border-left: calc(5 * var(--lt-u)) solid var(--cx-laranja);
}

.pd-warranty img {
  width: calc(32 * var(--lt-u));
  height: calc(32 * var(--lt-u));
  flex: 0 0 auto;
}

.pd-warranty strong {
  display: block;
  color: var(--white);
  font-size: calc(15 * var(--lt-u));
  font-weight: 700;
}

.pd-warranty span {
  color: var(--gray-400);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
}

/* Sobre o preto, os botões invertem para branco/verde. */
.pd-access .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

.pd-access .lt-btn--white:hover {
  color: var(--black);
  background-color: var(--cx-laranja);
}

/* ==========================================================================
   7. Outras ferramentas — cartões .lt-toolcard, 3 colunas
   ========================================================================== */
.pd-related {
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--white);
}

.pd-related__inner {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
}

.pd-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
}

.pd-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   8. FAQ — o bloco do base.css, nas medidas das outras páginas
   ========================================================================== */
.pd-page .faq {
  width: 100%;
  min-height: 0;
  padding-block: calc(96 * var(--lt-u));
  padding-inline: var(--lt-gutter);
  background: var(--gray-100);
}

.pd-page .faq > .content-wide {
  width: 100%;
  max-width: none;
}

/* Seção cinza: o chip vai a branco — cinza sobre cinza sumia. */
.pd-page .faq .lt-label {
  background: var(--white);
}

.pd-faq__label {
  margin-bottom: calc(24 * var(--lt-u));
}

.pd-page .faq-heading {
  height: calc(64 * var(--lt-u));
  padding-bottom: 0;
  box-shadow: inset 0 -1px var(--gray-400);
}

.pd-page .faq-heading h2 {
  font-size: calc(48 * var(--lt-u));
}

.pd-page .faq-heading > span {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
}

.pd-page .faq-heading > span img {
  width: calc(24 * var(--lt-u));
  height: calc(24 * var(--lt-u));
}

.pd-page .faq-layout {
  grid-template-columns: minmax(0, 1fr) calc(368 * var(--lt-u));
  gap: calc(48 * var(--lt-u));
  margin-top: calc(56 * var(--lt-u));
}

.pd-page .questions summary {
  height: auto;
  min-height: calc(70 * var(--lt-u));
  gap: calc(24 * var(--lt-u));
  padding: calc(20 * var(--lt-u)) 0;
  font-size: calc(18 * var(--lt-u));
}

.pd-page .questions summary::after {
  width: calc(20 * var(--lt-u));
  height: calc(20 * var(--lt-u));
  flex-basis: auto;
  background-image: url("./assets/icon-chevron.svg");
  background-size: contain;
}

.pd-page .questions details > p {
  max-width: none;
  padding: 0 calc(40 * var(--lt-u)) calc(20 * var(--lt-u)) 0;
  font-size: calc(15 * var(--lt-u));
  line-height: 1.6;
}

.pd-page .support-card {
  min-height: calc(420 * var(--lt-u));
  justify-content: space-between;
  gap: calc(32 * var(--lt-u));
  padding: calc(32 * var(--lt-u));
  background: var(--white);
}

.pd-page .support-icon,
.pd-page .support-icon img {
  width: calc(44 * var(--lt-u));
  height: calc(44 * var(--lt-u));
  background: none;
}

.pd-page .support-body {
  gap: calc(32 * var(--lt-u));
}

.pd-page .support-copy {
  gap: calc(12 * var(--lt-u));
}

.pd-page .support-card h3 {
  font-size: calc(26 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.pd-page .support-card p {
  color: var(--gray-600);
  font-size: calc(16 * var(--lt-u));
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1279px) {
  .pd-includes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-page--paid .pd-includes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  /* Empilhado: sem a trava da coluna, vale o H1 de abertura (pode ir a mais linhas). */
  .pd-hero h1 {
    font-size: var(--lt-h1);
  }

  /* Hero empilhado: texto e oferta um embaixo do outro, benefícios em lista. */
  .pd-hero {
    min-height: 0;
  }

  .pd-hero__bg {
    left: 0;
    width: 100%;
    height: 55%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(0deg, transparent 0%, #000 45%);
  }

  .pd-hero::before {
    background: linear-gradient(0deg, rgb(0 0 0 / 0.88) 0%, rgb(0 0 0 / 0.6) 60%, rgb(0 0 0 / 0.2) 100%);
  }

  .pd-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 160px 32px 40px;
  }

  .pd-hero__copy {
    flex: 0 0 auto;
    align-self: stretch;
  }

  .pd-includes,
  .pd-fit,
  .pd-steps,
  .pd-preview,
  .pd-related,
  .pd-page .faq {
    padding-block: 72px;
  }

  /* O letreiro segue colado no topo: só o respiro de baixo muda. */
  .pd-access {
    padding-bottom: 80px;
  }

  .pd-includes h2,
  .pd-steps h2,
  .pd-preview h2,
  .pd-related h2 {
    max-width: none;
    font-size: clamp(40px, 7.5vw, 56px);
  }

  .pd-fit__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-fit__card {
    padding: 32px;
  }

  .pd-fit__card h2 {
    font-size: clamp(32px, 6vw, 44px);
  }

  .pd-steps__list,
  .pd-steps__foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .pd-step {
    min-height: 0;
  }

  .pd-step__top {
    min-height: 150px;
  }

  /* Em uma coluna a faixa desce para a linha de baixo, na largura toda. */
  .pd-steps__chevrons {
    grid-column: auto;
  }

  .pd-preview__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pd-access__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-access__info {
    padding: 40px 32px 0;
  }

  .pd-access__padrao {
    height: 30px;
    margin-bottom: 32px;
  }

  .pd-related__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pd-page .faq-heading h2 {
    font-size: 40px;
  }

  .pd-page .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pd-page .support-card {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .pd-hero__inner {
    padding: 120px 24px 32px;
  }

  .pd-hero__lead {
    font-size: 16px;
  }

  .pd-price strong {
    font-size: 56px;
  }

  .pd-hero__offer,
  .pd-hero__cta,
  .pd-hero__cta .lt-btn {
    width: 100%;
  }

  .pd-includes,
  .pd-fit,
  .pd-steps,
  .pd-preview,
  .pd-related,
  .pd-page .faq {
    padding-block: 56px;
  }

  /* O letreiro segue colado no topo: só o respiro de baixo muda. */
  .pd-access {
    padding-bottom: 64px;
  }

  .pd-includes h2,
  .pd-steps h2,
  .pd-preview h2,
  .pd-related h2 {
    font-size: clamp(32px, 10.5vw, 44px);
  }

  .pd-includes__grid,
  .pd-page--paid .pd-includes__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Sem altura mínima o título encosta no ícone: o respiro dele fica no ícone. */
  .pd-include {
    min-height: 0;
    gap: 8px;
    padding: 20px;
  }

  .pd-include__icon {
    margin-bottom: 16px;
  }

  .pd-fit__card {
    padding: 24px 20px;
  }

  .pd-access__info {
    padding: 32px 16px 0;
  }

  .pd-access__info h3 {
    font-size: 36px;
  }

  .pd-access__text,
  .pd-access__list li {
    font-size: 15px;
  }

  .pd-buy__body {
    padding: 40px 16px 32px;
  }

  .pd-access__form,
  .pd-form__success {
    padding: 24px 16px;
  }

  .pd-buy__top {
    flex-wrap: wrap;
  }

  .pd-buy__safe span {
    font-size: 13px;
  }

  .pd-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-buy__price strong {
    font-size: 72px;
  }

  .pd-warranty {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pd-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-page .faq-heading {
    height: auto;
    padding-bottom: 16px;
  }

  .pd-page .faq-heading h2 {
    font-size: 32px;
    transform: none;
  }

  .pd-page .questions summary {
    font-size: 16px;
  }

  .pd-page .support-card {
    padding: 24px;
  }

  /* O rótulo da FAQ ("Dúvidas frequentes · ferramentas gratuitas") pode não
     caber numa linha em 345 px; sem isto ele vazava para fora da tela.
     Em uma linha, 5 + 14 + 5 = os 24 do ícone. */
  .pd-faq__label span {
    padding-block: 5px;
    line-height: 1.4;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-hero__bg,
  .pd-preview__media img {
    transition: none;
  }
}