/* ==========================================================================
   Busca Milhas Aprende — LP de Formação (página de vendas)
   Tokens e medidas do Figma "Busca Milhas Aprende" → canvas "Landing Page de
   Vendas" (desktop 1440 · mobile 393). Mobile-first, breakpoints do Bootstrap.

   Depende de aprende-calculadora.css, que traz o :root com os tokens --apr-*,
   a navbar da marca e o rodapé da sub-marca.

   Fundo das seções: o desktop do Figma deixa VSL, FAQ e holding sem preenchimento
   próprio, e o preto da prancheta (#0E0E0E) aparece por baixo com o texto em
   #232629 — ilegível. O mobile das mesmas dobras vem branco/#ECF2F8, então é o
   mobile que vale aqui.

   Largura das dobras: cada seção de primeiro nível recua os lados com --apr-margem, que
   vem de aprende-calculadora.css e reproduz a faixa do .container do Bootstrap — a mesma
   que o rodapé destas páginas já usa. As medidas de frame do Figma (1350, 1262 e afins)
   saíram: as bordas das dobras não coincidiam entre si nem com a do rodapé, e a diferença
   crescia em telas largas. O `100%` de dentro da variável é resolvido por quem a usa, então
   ela só vale em filha direta de .aprf.
   ========================================================================== */

:root {
  --aprf-azul-acao: #1250FF;
  --aprf-ciano: #15AFD7;
  /* Cores do Figma na faixa de números (Semântica/Sucesso e o cinza de rótulo). Atenção:
     sobre o #DCE4E6 da faixa dão 2,46:1 e 3,75:1 e reprovam o AA — a primeira entrega as
     escurecia para #16725C e #5E6574 (4,5:1); o design pediu as cores do Figma em 2026-09-02.
     Se o contraste voltar a ser critério, os dois valores antigos passam. */
  --aprf-verde: #20A383;
  --aprf-rotulo: #6A7282;
  /* Só para os traços decorativos da cruz da holding — texto usa --apr-fumaca. */
  --aprf-traco: #ADAAAA;
  --aprf-borda-modulo: rgba(18, 80, 255, 0.35);
  --aprf-sombra-modulo: 0 4px 9px rgba(37, 37, 41, 0.1);
}

.aprf {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--apr-tinta);
}

.aprf *,
.aprf *::before,
.aprf *::after {
  box-sizing: border-box;
}

/* Mesma razão de :where() da LP da calculadora: zera a margem do reboot sem
   somar especificidade e passar por cima das classes de componente. */
.aprf :where(p),
.aprf :where(ul),
.aprf :where(ol),
.aprf :where(figure),
.aprf :where(blockquote) {
  margin: 0;
}

.aprf :where(ul),
.aprf :where(ol) {
  padding: 0;
  list-style: none;
}

.aprf-laranja {
  color: var(--apr-laranja);
}

.aprf-azul {
  color: var(--apr-azul);
}

.aprf-azul-acao {
  color: var(--aprf-azul-acao);
}

/* Altura da barra da marca (vem do .apr-nav) e o deslocamento da barra do wp-admin, que
   só existe para quem está logado. Ficam em variável porque três medidas dependem delas:
   o respiro do conteúdo, o `top` da barra e a parada das âncoras. */
.aprf {
  --aprf-nav: 56px;
  --aprf-admin: 0px;
}

.logged-in.admin-bar .aprf {
  --aprf-admin: var(--wp-admin--admin-bar--height, 32px);
}

@media (min-width: 992px) {
  .aprf {
    --aprf-nav: 70px;
  }
}

/* Âncoras do menu param abaixo da barra fixa, com um respiro. */
.aprf [id] {
  scroll-margin-top: calc(var(--aprf-nav) + var(--aprf-admin) + 16px);
}

/* ── Tipografia de seção ────────────────────────────────────────────────── */

.aprf-h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--apr-tinta);
  /* Sem teto próprio: o teto de 1350 (DEC-022) saiu junto com o das dobras, e o recuo lateral
     delas (--apr-margem) já prende a linha na faixa do .container. As margens automáticas ficam
     porque centram o bloco em invólucro mais estreito e vencem o shorthand de margem acima. */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .aprf-h2 {
    font-size: 34px;
  }
}

@media (min-width: 992px) {
  .aprf-h2 {
    font-size: 48px;
    line-height: 1.1;
  }
}

.aprf-linha-fina {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--apr-fumaca);
}

/* ── Botão primário ─────────────────────────────────────────────────────── */

/* O botão da calculadora (.apr-btn) é pílula com texto em tinta; aqui o Figma pede
   canto de 7 a 12px e texto branco. São dois desenhos diferentes, não uma variação. */
.aprf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--apr-laranja);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.9px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  /* Tinta e não branco, apesar do Figma: branco sobre o laranja da marca dá 2,41:1 e
     reprova o AA. É a mesma decisão já tomada no .apr-btn da LP da calculadora — o
     padrão da sub-marca é laranja de fundo com tinta por cima (6,32:1). */
  color: var(--apr-tinta);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.aprf-btn:hover,
.aprf-btn:focus-visible {
  background: var(--apr-laranja-marca);
  color: var(--apr-tinta);
}

.aprf-btn:active {
  transform: translateY(1px);
}

.aprf-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.aprf-btn--inline {
  width: auto;
  min-width: 260px;
}

.aprf-btn--grande {
  border-radius: 12px;
  padding: 18px 24px;
}

@media (min-width: 992px) {
  .aprf-btn {
    font-size: 16px;
  }

  .aprf-btn--grande {
    padding: 24px;
    font-size: 20px;
    letter-spacing: 2px;
  }
}

/* ── Navbar da LP de vendas ─────────────────────────────────────────────── */

/* `fixed` e não `sticky`: o `main.css` tem `html, body, #page { height: 100% }`, então o
   <body> mede uma tela (413px medidos) enquanto o documento passa de 10.000px. O bloco de
   contenção de um sticky é o pai, então a barra grudaria durante a primeira tela de rolagem
   e sairia depois. É a mesma razão pela qual a navbar principal do site usa `.fixed-top`.
   O `.aprf` compensa a altura que sai do fluxo. */
.apr-nav--formacao {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  justify-content: space-between;
  gap: 16px;
  backdrop-filter: blur(12px);
}

/* A barra do wp-admin é fixa em cima de tudo e empurra o documento com um
   `margin-top` no <html>; quem é `fixed` não recebe esse empurrão e fica por baixo.
   Mesma correção que o tema pai já aplica em `.fixed-top`, com a variável do próprio
   WordPress, que troca sozinha entre 32px e 46px conforme a largura. */
.logged-in.admin-bar .apr-nav--formacao {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Compensa a altura que a barra tirou do fluxo ao virar `fixed`. */
.aprf {
  padding-top: var(--aprf-nav);
}

.aprf-nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.aprf-nav__barra {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--apr-tinta);
}

/* A navbar é renderizada por header.php, fora do wrapper .aprf — o reset de lista
   do topo deste arquivo não a alcança, então vai aqui. */
.aprf-nav__menu {
  position: absolute;
  top: 100%;
  right: 12px;
  left: 12px;
  display: none;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  list-style: none;
  padding: 22px 24px;
  border: 1px solid var(--apr-cinza);
  border-radius: 8px;
  background: var(--apr-branco);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
}

.aprf-nav__menu.is-aberto {
  display: flex;
}

.aprf-nav__menu a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--apr-tinta);
}

.aprf-nav__menu a:hover,
.aprf-nav__menu a:focus-visible {
  color: var(--apr-azul);
}

.aprf-btn--nav {
  display: none;
}

@media (min-width: 992px) {
  .aprf-nav__toggle {
    display: none;
  }

  .aprf-nav__menu {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .aprf-nav__menu a {
    font-size: 16px;
  }

  .aprf-btn--nav {
    display: inline-flex;
    width: auto;
    padding: 8px 24px;
    border-radius: 5px;
    font-size: 18px;
  }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.aprf-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 695px;
  padding: 32px var(--apr-margem) 40px;
  overflow: hidden;
}

/* Cada arquivo já tem a proporção da sua dobra, então `cover` quase não corta.
   Quando corta (texto mais longo no celular, por exemplo), ancorar no topo mantém a
   cabeça do André inteira. */
.aprf-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Véu do Figma. No mobile o texto senta na base da foto, então o gradiente é
   vertical; no desktop o card fica à esquerda e o gradiente acompanha. */
.aprf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%);
}

.aprf-hero__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.aprf-hero__titulo {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--apr-branco);
}

.aprf-hero__texto {
  font-size: 15px;
  line-height: 1.5;
  color: var(--apr-branco);
}

.aprf-hero__cta {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .aprf-hero__titulo {
    font-size: 34px;
  }
}

@media (min-width: 992px) {
  /* O retângulo do hero no Figma tem 1449x779 em 1440px de canvas (54,1% da largura), e a
     foto tem essa mesma proporção. Altura fixa em telas largas cortava a cabeça do André e
     deixava a dobra seguinte aparecer; acompanhando a largura, `cover` não corta nada. O
     card começa na borda esquerda da faixa do .container, a mesma do rodapé — em 1440 isso dá
     72px, no lugar dos 121px do frame do Figma. */
  .aprf-hero {
    align-items: center;
    min-height: max(720px, 54.1vw);
    padding: 40px var(--apr-margem);
  }

  .aprf-hero::after {
    background: linear-gradient(266deg, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 1) 99%);
  }

  .aprf-hero__card {
    gap: 22px;
    width: 587px;
  }

  .aprf-hero__titulo {
    font-size: 40px;
  }

  .aprf-hero__texto {
    font-size: 24px;
  }

  .aprf-hero__cta {
    width: 441px;
    height: 48px;
    margin-top: 16px;
    border-radius: 7px;
    border: 1px solid rgba(244, 136, 51, 0.2);
    padding: 0 28px;
  }
}

/* ── Fundador ───────────────────────────────────────────────────────────── */

.aprf-mentor {
  padding: 40px var(--apr-margem);
  background: var(--apr-azul);
}

.aprf-mentor__wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0 auto;
}

.aprf-mentor__figura {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.aprf-mentor__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 572 / 568;
  object-fit: cover;
  object-position: center;
}

/* No mobile o Figma põe o nome sobre a base da foto; no desktop ele volta a ser o
   h2 ao lado. A legenda é decorativa nos dois casos — o nome acessível é o h2, e o
   h3 do papel acompanha o h2: sozinho na tela ele seria um subtítulo sem sujeito. */
.aprf-mentor__legenda {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 60px 20px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  font-size: 26px;
  font-weight: 700;
  color: var(--apr-branco);
}

.aprf-mentor__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--apr-branco);
}

.aprf-mentor__nome {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--apr-branco);
}

/* É um <h3>: zera a margem e o peso que o main.css dá aos títulos. */
.aprf-mentor__papel {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--apr-branco);
}

@media (max-width: 991.98px) {

  .aprf-mentor__nome,
  .aprf-mentor__papel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 992px) {
  .aprf-mentor {
    padding: 40px var(--apr-margem);
  }

  .aprf-mentor__wrap {
    flex-direction: row;
    align-items: center;
    gap: 83px;
  }

  .aprf-mentor__figura {
    flex: 0 0 572px;
  }

  .aprf-mentor__legenda {
    display: none;
  }

  .aprf-mentor__texto {
    gap: 24px;
    font-size: 16px;
  }

  /* Encurta o gap de 24px da coluna: o papel pertence ao nome, não é bloco à parte. */
  .aprf-mentor__papel {
    margin-top: -12px;
  }
}

/* ── Números ────────────────────────────────────────────────────────────── */

.aprf-numeros {
  padding: 28px var(--apr-margem);
  background: var(--apr-gainsboro);
}

.aprf-numeros__lista {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 768px;
  margin: 0 auto;
}

.aprf-numeros__item {
  flex: 1 1 0;
  text-align: center;
}

.aprf-numeros__item + .aprf-numeros__item {
  border-left: 1px solid var(--apr-fumaca);
}

.aprf-numeros__valor {
  font-size: 26px;
  line-height: 1.2;
  color: var(--aprf-verde);
}

.aprf-numeros__rotulo {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--aprf-rotulo);
}

@media (min-width: 992px) {
  .aprf-numeros {
    padding: 41px var(--apr-margem);
  }

  .aprf-numeros__valor {
    font-size: 40px;
    line-height: 40px;
  }

  .aprf-numeros__rotulo {
    font-size: 16px;
    line-height: 20px;
  }
}

/* ── VSL ────────────────────────────────────────────────────────────────── */

.aprf-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px var(--apr-margem);
  background: var(--apr-branco);
}

.aprf-video__titulo {
  text-align: center;
}

.aprf-video__moldura {
  position: relative;
  width: 100%;
  border: 2px solid var(--apr-azul);
  /* 45px é o raio do Figma, e num quadro de 1262x714 ele é discreto; abaixo de 700px
     de largura o mesmo valor come o vídeo, então acompanha a largura. */
  border-radius: 24px;
  overflow: hidden;
  background: var(--apr-tinta);
}

.aprf-video__poster,
.aprf-video__moldura iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1262 / 714;
  border: 0;
}

.aprf-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* O ícone é pequeno no mobile (23px); o botão garante a área de toque. */
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
  border: 0;
  background: none;
  cursor: pointer;
}

.aprf-video__play img {
  /* Figma: o mesmo polígono girado 90°, 86,25x96,84 no quadro de 1262px (desktop) e
     23,25x25,93 no de 363px (mobile). Nos dois artboards isso é 5,95% da viewport, então
     uma só medida fluida reproduz ambos; o teto segura o ícone quando o quadro para de
     crescer na faixa do .container. */
  width: clamp(23px, 5.95vw, 86.25px);
  height: auto;
  aspect-ratio: 86.25 / 96.8352;
}

@media (min-width: 992px) {
  .aprf-video {
    gap: 32px;
    padding: 30px var(--apr-margem) 60px;
  }

  .aprf-video__moldura {
    border-radius: 45px;
  }
}

/* ── Dores ──────────────────────────────────────────────────────────────── */

.aprf-dores {
  padding: 40px var(--apr-margem) 30px;
  background: var(--apr-fundo);
  text-align: center;
}

.aprf-dores__linha-fina {
  max-width: 780px;
  margin: 12px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--apr-fumaca);
}

/* Figma mobile: cards de 250px centralizados, com a altura do próprio conteúdo, 24px entre
   eles e 64px abaixo do subtítulo. A partir de 768px o grid ocupa a coluna e os cards voltam
   às medidas do desktop (205px de altura, 44px entre ícone e texto). */
.aprf-dores__lista {
  display: grid;
  gap: 24px;
  max-width: 250px;
  margin: 64px auto 0;
  text-align: left;
}

.aprf-dores__item {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 16px;
  border-radius: 14px;
  background: var(--aprf-azul-acao);
}

.aprf-dores__icone {
  width: 45px;
  height: 46px;
}

/* É um <h3>: zera a margem e o peso que o main.css dá aos títulos. */
.aprf-dores__texto {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--apr-branco);
}

@media (min-width: 768px) {
  .aprf-dores {
    padding: 40px var(--apr-margem);
  }

  .aprf-dores__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: none;
    margin-top: 32px;
  }

  .aprf-dores__item {
    gap: 44px;
    min-height: 205px;
    padding: 12px 16px;
  }

  .aprf-dores__texto {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (min-width: 992px) {
  .aprf-dores {
    padding: 25px var(--apr-margem) 44px;
  }

  .aprf-dores__lista {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 36px;
  }
}

/* ── Depoimentos ────────────────────────────────────────────────────────── */

.aprf-deps {
  padding: 40px var(--apr-margem);
  background: var(--apr-branco);
}

.aprf-deps__titulo {
  text-align: center;
}

.aprf-deps__palco {
  margin: 32px auto 0;
}

.aprf-deps__trilho {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.aprf-dep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-align: center;
}

.aprf-dep__foto {
  width: 136px;
  height: 136px;
  border-radius: 8px;
  object-fit: cover;
}

.aprf-dep__nome {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--apr-tinta);
}

.aprf-dep__empresa {
  font-size: 15px;
  line-height: 1.5;
  color: var(--apr-fumaca);
}

.aprf-dep__estrelas {
  display: flex;
  gap: 4px;
}

.aprf-dep__estrelas img {
  width: 20px;
  height: 19px;
}

.aprf-dep__texto {
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: var(--apr-tinta);
}

@media (min-width: 992px) {
  .aprf-deps {
    padding: 41px var(--apr-margem) 60px;
  }

  .aprf-deps__palco {
    margin-top: 42px;
  }

  /* Os três depoimentos lado a lado, em colunas iguais. O passo de 396px entre as
     fotos no frame `2194:1479` sai de três colunas com 40px de vão numa faixa de
     1.188px — o mesmo `gap` que o trilho já usava. */
  .aprf-deps__trilho {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
  }

  .aprf-dep__texto {
    font-size: 16px;
  }
}

/* ── Método ─────────────────────────────────────────────────────────────── */

.aprf-metodo {
  padding: 40px var(--apr-margem);
  background: var(--apr-fundo);
  text-align: center;
}

.aprf-metodo__linha-fina {
  max-width: 806px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--apr-fumaca);
}

.aprf-metodo__lista {
  display: grid;
  gap: 24px;
  max-width: 952px;
  margin: 32px auto 0;
  text-align: left;
}

.aprf-metodo__card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--apr-branco);
  box-shadow: var(--aprf-sombra-modulo);
}

.aprf-metodo__cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aprf-metodo__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  font-size: 26px;
  font-weight: 700;
}

/* A letra é branca só onde o branco passa no AA: sobre o azul-ação dá 5,81:1, mas
   sobre o ciano dá 2,58:1 e sobre o laranja 2,41:1 — nesses dois vai tinta. */
.aprf-metodo__selo--aprenda {
  background: var(--aprf-azul-acao);
  color: var(--apr-branco);
}

.aprf-metodo__selo--acumula {
  background: var(--aprf-ciano);
  color: var(--apr-tinta);
}

.aprf-metodo__selo--viaja {
  background: var(--apr-laranja);
  color: var(--apr-tinta);
}

.aprf-metodo__nome {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--apr-tinta);
}

.aprf-metodo__texto {
  font-size: 16px;
  line-height: 22px;
  color: var(--apr-fumaca);
}

@media (min-width: 992px) {
  .aprf-metodo {
    padding: 40px var(--apr-margem) 60px;
  }

  .aprf-metodo__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 38px;
  }
}

/* ── Módulos ────────────────────────────────────────────────────────────── */

.aprf-modulos {
  padding: 40px var(--apr-margem);
  background: var(--apr-branco);
  text-align: center;
}

.aprf-modulos__linha-fina {
  max-width: 900px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--apr-fumaca);
}

.aprf-modulos__lista {
  display: grid;
  gap: 12px;
  max-width: 1176px;
  margin: 32px auto 0;
  text-align: left;
}

.aprf-modulos__item {
  border: 1px solid var(--aprf-borda-modulo);
  border-radius: 15px;
  background: var(--apr-branco);
  box-shadow: var(--aprf-sombra-modulo);
  overflow: hidden;
}

.aprf-modulos__cabecalho {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.aprf-modulos__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(18, 80, 255, 0.1);
  font-size: 13px;
  font-weight: 700;
  color: var(--aprf-azul-acao);
}

.aprf-modulos__nome {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--apr-tinta);
}

.aprf-modulos__texto {
  padding: 0 22px 20px 64px;
  font-size: 16px;
  line-height: 22px;
  color: var(--apr-fumaca);
}


@media (min-width: 992px) {
  .aprf-modulos {
    padding: 80px var(--apr-margem);
  }
}

/* ── Oferta ─────────────────────────────────────────────────────────────── */

.aprf-oferta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 40px var(--apr-margem);
  background: var(--apr-azul);
}

/* Teto do Figma: o card ("Lote 4") tem 992px em 1440; sem isso ele esticaria até a faixa
   inteira da dobra em monitores largos. */
.aprf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 992px;
  margin: 0 auto;
  padding: 28px 20px;
  border: 2px solid var(--apr-azul);
  border-radius: 16px;
  background: var(--apr-branco);
  text-align: center;
}

.aprf-card__titulo {
  max-width: 676px;
}

.aprf-card__texto {
  max-width: 892px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--apr-fumaca);
}

.aprf-card__promessa {
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  color: var(--apr-azul);
}

.aprf-preco__rotulo {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--apr-tinta);
}

.aprf-preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.aprf-preco__parcela {
  font-size: 18px;
  color: var(--apr-tinta);
}

.aprf-preco__valor {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--apr-tinta);
}

.aprf-preco__avista {
  margin-top: -12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--apr-azul);
}

.aprf-link-comunidade {
  display: block;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--apr-azul);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--apr-azul);
}

.aprf-link-comunidade:hover,
.aprf-link-comunidade:focus-visible {
  color: var(--aprf-azul-acao);
  text-decoration: underline;
}

.aprf-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
}

/* O #ADAAAA do Figma dá 2,31:1 sobre o branco do card — fumaça dá 5,74:1. */
.aprf-selos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--apr-fumaca);
}

@media (min-width: 992px) {
  .aprf-oferta {
    gap: 28px;
    padding: 60px var(--apr-margem);
  }

  .aprf-card {
    gap: 24px;
    padding: 50px;
  }

  .aprf-card__texto {
    font-size: 18px;
    line-height: 28px;
  }

  .aprf-card__promessa {
    font-size: 16px;
  }

  .aprf-preco__parcela {
    font-size: 24px;
  }

  .aprf-preco__valor {
    font-size: 72px;
    line-height: 72px;
  }

  .aprf-link-comunidade {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 2px;
    padding-bottom: 24px;
  }
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.aprf-faq {
  padding: 40px var(--apr-margem);
  background: var(--apr-fundo);
}

.aprf-faq__titulo {
  text-align: center;
}

.aprf-faq__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 946px;
  margin: 32px auto 0;
}

.aprf-faq__item {
  border: 1px solid var(--apr-azul);
  border-radius: 8px;
  background: var(--apr-branco);
  overflow: hidden;
}

/* Invólucro semântico do botão: a regra h1..h6 do main.css impõe margem e
   line-height próprios e venceria a herança. */
.aprf-faq__cabecalho {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.aprf-faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  color: var(--apr-tinta);
  cursor: pointer;
}

.aprf-faq__chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--apr-azul);
  border-bottom: 2px solid var(--apr-azul);
  transform: rotate(-135deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.aprf-faq__pergunta[aria-expanded="true"] .aprf-faq__chevron {
  transform: rotate(45deg) translate(-3px, -3px);
}

.aprf-faq__resposta {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--apr-tinta);
}

@media (min-width: 992px) {
  .aprf-faq {
    padding: 40px var(--apr-margem) 60px;
  }

  .aprf-faq__pergunta {
    padding: 24px;
    font-size: 20px;
  }

  .aprf-faq__resposta {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 20px;
  }
}

/* ── Holding ────────────────────────────────────────────────────────────── */

.aprf-holding {
  padding: 40px var(--apr-margem);
  background: var(--apr-branco);
}

.aprf-holding__titulo {
  text-align: center;
  font-size: 22px;
}

.aprf-holding__wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  margin: 32px auto 0;
}

.aprf-holding__texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 485px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--apr-tinta);
}

.aprf-holding__texto a {
  color: var(--apr-tinta);
  text-decoration: underline;
}

/* Cruz do Figma: in8 no centro, dot8 acima, busca milhas abaixo, super jovem e
   efeitoS nos lados. Os traços de ligação são os separadores das colunas. */
.aprf-holding__cruz {
  /* Geometria do Figma (2194:1800, 483x253): in8 de 144px no centro; dot8 e busca milhas
     alinhados ao CENTRO da imagem do in8 (x=241, o vazio entre o hexágono e a palavra), e
     não ao hexágono; traços de 33px que nascem a 9px das marcas de cima/baixo e a 21px das
     laterais e param 6px/21px antes da caixa do in8 — é isso que impede o traço de cortar a
     logo. O mobile (2704:1950, 335x176) é a mesma cruz em 69,4%, então tudo sai de uma
     escala só. */
  --aprf-cruz-escala: 0.694;
  --aprf-cruz-traco: calc(33px * var(--aprf-cruz-escala));
  --aprf-cruz-recuo-v: calc(9px * var(--aprf-cruz-escala));
  --aprf-cruz-recuo-h: calc(21px * var(--aprf-cruz-escala));

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  /* vão = recuo + traço + folga até o in8 (6px na vertical, 21px na horizontal) */
  gap: calc(48px * var(--aprf-cruz-escala)) calc(75px * var(--aprf-cruz-escala));
  width: 100%;
  max-width: 483px;
}

@media (min-width: 768px) {
  .aprf-holding__cruz {
    --aprf-cruz-escala: 1;
  }
}

.aprf-holding__marca img {
  display: block;
  height: auto;
}

.aprf-holding__marca--topo {
  grid-column: 2;
  grid-row: 1;
}

.aprf-holding__marca--esquerda {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}

.aprf-holding__marca--centro {
  grid-column: 2;
  grid-row: 2;
}

.aprf-holding__marca--direita {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
}

.aprf-holding__marca--base {
  grid-column: 2;
  grid-row: 3;
}

/* Cada traço nasce na marca vizinha e cresce em direção ao in8: assim ele acompanha
   a coluna/linha da grade sem depender de medida fixa do centro. */
.aprf-holding__marca--esquerda,
.aprf-holding__marca--direita,
.aprf-holding__marca--topo,
.aprf-holding__marca--base {
  position: relative;
}

.aprf-holding__marca--esquerda::after,
.aprf-holding__marca--direita::after,
.aprf-holding__marca--topo::after,
.aprf-holding__marca--base::after {
  content: "";
  position: absolute;
  background: var(--aprf-traco);
}

.aprf-holding__marca--esquerda::after,
.aprf-holding__marca--direita::after {
  top: 50%;
  width: var(--aprf-cruz-traco);
  height: 1px;
}

.aprf-holding__marca--esquerda::after {
  left: calc(100% + var(--aprf-cruz-recuo-h));
}

.aprf-holding__marca--direita::after {
  right: calc(100% + var(--aprf-cruz-recuo-h));
}

.aprf-holding__marca--topo::after,
.aprf-holding__marca--base::after {
  left: 50%;
  width: 1px;
  height: var(--aprf-cruz-traco);
}

.aprf-holding__marca--topo::after {
  top: calc(100% + var(--aprf-cruz-recuo-v));
}

.aprf-holding__marca--base::after {
  bottom: calc(100% + var(--aprf-cruz-recuo-v));
}

.aprf-holding__marca--centro img {
  width: calc(144px * var(--aprf-cruz-escala));
}

.aprf-holding__marca--topo img {
  width: calc(85px * var(--aprf-cruz-escala));
}

.aprf-holding__marca--esquerda img {
  width: calc(86px * var(--aprf-cruz-escala));
}

.aprf-holding__marca--direita img {
  width: calc(90px * var(--aprf-cruz-escala));
}

.aprf-holding__marca--base img {
  width: calc(118px * var(--aprf-cruz-escala));
}

@media (min-width: 992px) {
  .aprf-holding {
    padding: 75px var(--apr-margem);
  }

  .aprf-holding__titulo {
    font-size: 28px;
    line-height: 40px;
  }

  /* Figma (D10): texto de 485px e cruz de 483px com 50px entre eles, num bloco de 1018px
     centralizado sob o título. `space-between` empurrava os dois para as bordas da dobra e
     abria um vão de quase 400px em telas largas. */
  .aprf-holding__wrap {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-top: 60px;
  }

  .aprf-holding__texto {
    font-size: 20px;
    line-height: 31.4px;
  }
}

/* ── Modal do formulário ────────────────────────────────────────────────── */

.aprf-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.aprf-modal[hidden] {
  display: none;
}

.aprf-modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.6);
}

.aprf-modal__caixa {
  position: relative;
  width: 100%;
  max-width: 583px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 24px 24px;
  border: 2px solid var(--apr-azul);
  border-radius: 12px;
  background: var(--apr-branco);
}

.aprf-modal__fechar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.aprf-modal__fechar::before,
.aprf-modal__fechar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--apr-tinta);
}

.aprf-modal__fechar::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.aprf-modal__fechar::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.aprf-modal__titulo {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--apr-tinta);
}

.aprf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aprf-form__campo {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--apr-cinza);
  border-radius: 8px;
  background: var(--apr-branco);
  font-family: inherit;
  font-size: 16px;
  color: var(--apr-tinta);
}

.aprf-form__campo::placeholder {
  color: var(--apr-fumaca);
}

.aprf-form__campo:focus-visible {
  outline: 2px solid var(--apr-azul);
  outline-offset: 1px;
}

.aprf-form__campo.is-invalido {
  border-color: var(--apr-vermelho);
  background: var(--apr-vermelho-tint);
}

.aprf-form__aviso:empty {
  display: none;
}

.aprf-form__aviso {
  font-size: 14px;
  line-height: 1.4;
  color: var(--apr-vermelho);
  /* Uma mensagem por campo recusado, uma por linha. */
  white-space: pre-line;
}

.aprf-form__lgpd {
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: var(--apr-fumaca);
}

.aprf-form__lgpd a {
  color: var(--apr-azul);
}

@media (min-width: 992px) {
  .aprf-modal__caixa {
    padding: 48px 40px 40px;
  }

  .aprf-modal__titulo {
    font-size: 20px;
  }
}