/* =========================================================================
   Por Dentro da Coisa · página de venda (raiz: pordentrodacoisa.com.br)
   Precisa do tokens.css e do componentes.css antes. Só usa cores, fontes e
   medidas do manual (4-marca\manual). A tabela "Antes de escolher, compare" usa o
   desenho da tabela do PDF (componentes-pdf.css, .pdf-compara): a coluna forte em destaque.
   Celular primeiro; a partir de 900 px, computador.
   ========================================================================= */

/* o ponto dos rótulos vira quadradinho, como o miolo do logo (pedido da Daiane, 26/10/2026); o brilho continua */
.pdc-ponto { border-radius: 1.5px; }

/* o que é só do lançamento (ou só de depois dele) some de verdade, mesmo nas peças que têm display próprio */
[data-fase][hidden] { display: none !important; }

/* topo: cabeçalho fixo (fica no alto da tela durante a rolagem), escuro a 75% com desfoque por trás e uma borda fina embaixo.
   Logo, "Com Claude Code e ElevenLabs" e o botão vermelho "Quero começar agora →" (mais baixo que o principal; o texto fica
   em 19 px, o mínimo do manual para branco no vermelho). No celular, a frase vira a linha fina logo abaixo, fora do fixo.
   O aviso de cookies (z-index 50) e o vídeo aberto (camada do topo) ficam acima dele. */
:root { --vnd-topo-h: 56px; }
html { scroll-padding-top: var(--vnd-topo-h); } /* as âncoras (#oferta e as outras) param abaixo do cabeçalho */
.vnd-topo { position: sticky; top: 0; z-index: 20; height: var(--vnd-topo-h); display: flex; align-items: center; gap: 12px; background: rgba(11, 11, 15, .75); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(242, 242, 242, .08); }
.vnd-topo picture { margin-right: auto; display: flex; }
.vnd-topo__logo { height: 27px; width: auto; } /* alturas com +5%: o logo corrigido de 23/10 tem 4 unidades de folga em volta (viewBox 693 x 176) */
.vnd-topo__botao { flex: none; min-height: 38px; padding: 4px 14px; gap: .4em; font-size: 19px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 6px 18px rgba(255, 59, 48, .28); }
.vnd-topo__com { display: none; }
.vnd-topo-com { margin: 0; padding: 7px var(--pdc-margem); background: var(--pdc-preto); text-align: center; font: 700 10px/1.2 var(--pdc-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pdc-cinza); }
/* no celular, a seta do botão do topo sai para o texto caber ao lado do logo sem baixar de 19 px; abaixo de 351 px, o logo vira o símbolo */
@media (max-width: 899px) { .vnd-topo { gap: 10px; } .vnd-topo__botao .pdc-seta { display: none; } }
@media (max-width: 380px) { .vnd-topo__logo { height: 23px; } .vnd-topo__botao { padding-inline: 10px; } }
@media (max-width: 350px) { .vnd-topo__logo { height: 32px; } }
@media (max-width: 899px) { .vnd-abertura .pdc-abertura__texto > .pdc-rotulo { letter-spacing: .06em; } }
/* preço da primeira tela: no computador ele fica em 2 linhas, e o ponto que separa some */
.vnd-sep { font-style: normal; }

/* botão de compra: o texto é longo; no celular ele quebra em 2 linhas equilibradas, com a seta ao lado */
.pdc-botao { text-align: center; text-wrap: balance; padding-block: 10px; }

/* primeira tela: no celular, o título no tamanho do H1 do manual (cabe com o botão e o preço acima do aviso de cookies) */
.vnd-abertura .pdc-titulo { text-wrap: pretty; }
.vnd-abertura { padding-top: 18px; }

/* a cena: texto em tamanho de abertura, a última frase em destaque */
.vnd-cena__texto { margin-top: var(--pdc-e-5); max-width: 40rem; display: grid; gap: 1em; font: 400 var(--pdc-t-lead)/1.6 var(--pdc-f-texto); color: var(--pdc-cor-texto); }
.vnd-cena__texto p:last-child { font-weight: 700; color: var(--pdc-cor-titulo); }

/* a prova: a legenda do vídeo é longa; no celular, ela quebra dentro da tela */
.vnd-play { white-space: normal; width: max-content; max-width: 92%; line-height: 1.3; }

/* o que você vai fazer: o computador que a pessoa já tem, em destaque antes dos selos */
.vnd-computador { margin-top: var(--pdc-e-6); display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 18px 20px; border-radius: 14px; background: var(--pdc-superficie); border: 1px solid var(--pdc-linha); font: 400 16px/1.55 var(--pdc-f-texto); color: var(--pdc-texto-2); max-width: 52rem; }
.vnd-computador svg { width: 22px; height: 22px; margin-top: 2px; color: var(--pdc-vermelho); }
.vnd-computador b { color: var(--pdc-branco); }

/* "Alguns dos nossos vídeos": painel escuro com o chão em grade e os 3 vídeos em telas de celular (o do meio em destaque).
   No celular, os vídeos deslizam para o lado; no computador, ficam os 3 lado a lado. */
.vnd-nossos { margin-top: var(--pdc-faixa); }
.vnd-nossos__painel { position: relative; overflow: hidden; padding: 36px 0 32px; border-radius: 20px; background: radial-gradient(420px 300px at 50% 75%, rgba(255, 59, 48, .16), rgba(255, 59, 48, 0) 70%), var(--pdc-preto); --horizonte: 62%; }
.vnd-nossos__painel .pdc-cab { position: relative; z-index: 2; padding-inline: 20px; }
.vnd-carrossel { position: relative; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px; margin-top: var(--pdc-e-6); padding: 6px 20px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
.vnd-carrossel::-webkit-scrollbar { display: none; }
.vnd-carrossel li { scroll-snap-align: center; }
.vnd-telefone { padding: 6px; border-radius: 28px; background: var(--pdc-preto); border: var(--pdc-traco) solid var(--pdc-linha); box-shadow: var(--pdc-sombra-tela); }
.vnd-telefone--foco { border-color: rgba(255, 59, 48, .45); box-shadow: 0 40px 80px rgba(0, 0, 0, .85), 0 0 70px rgba(255, 59, 48, .28); }
.vnd-telefone video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; background: var(--pdc-preto); object-fit: cover; }

/* oferta: a faixa "As aulas são opcionais", logo abaixo do título */
.vnd-opcionais { margin-top: var(--pdc-e-5); max-width: 52rem; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--pdc-linha); border-left: 4px solid var(--pdc-vermelho); background: var(--pdc-superficie); font: 400 17px/1.5 var(--pdc-f-texto); color: var(--pdc-texto-2); }
.vnd-opcionais b { color: var(--pdc-branco); }

/* 8b · antes de comprar: o que a pessoa precisa ter (fica logo antes do bloco do preço) */
.vnd-antes { display: grid; gap: 10px; padding: 20px 20px 22px; border-radius: 14px; background: var(--pdc-superficie); border: 1px solid var(--pdc-linha); }
.vnd-antes > p { font: 400 15.5px/1.5 var(--pdc-f-texto); color: var(--pdc-texto-2); }
.vnd-antes ul { display: grid; gap: 10px; }
.vnd-antes li { position: relative; padding-left: 20px; font: 400 15px/1.5 var(--pdc-f-texto); color: var(--pdc-texto-2); }
.vnd-antes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 1.5px; background: var(--pdc-vermelho); }
.vnd-antes b { color: var(--pdc-branco); }

/* o que você leva: os 3 modelos do kit no mesmo desenho da imagem da abertura (telas de celular sobre o chão em grade) */
.vnd-modelos { position: relative; overflow: hidden; margin-top: var(--pdc-e-6); padding: 28px 20px 26px; border-radius: 20px; background: var(--pdc-preto); --horizonte: 330px; }
.vnd-modelos .pdc-brilho { position: absolute; inset: 0; background: radial-gradient(300px 260px at 50% 230px, rgba(255, 59, 48, .18), rgba(255, 59, 48, 0) 70%); }
.vnd-modelos > .pdc-rotulo { position: relative; z-index: 3; }
.vnd-modelos__vitrine { margin: 18px 0 0; height: 380px; }
.vnd-modelos__vitrine .pdc-v2e, .vnd-modelos__vitrine .pdc-v2d { --d: 0; }
.vnd-modelos__vitrine .pdc-tela { display: grid; place-items: center; }
.vnd-modelos__vazio { position: relative; z-index: 2; padding: 10px; text-align: center; font: 700 10px/1.3 var(--pdc-f-mono); letter-spacing: .08em; color: var(--pdc-cinza); }
.vnd-modelos__nomes { position: relative; z-index: 3; display: grid; gap: 12px; margin-top: 4px; }
.vnd-modelos__nomes li { display: grid; gap: 3px; text-align: center; }
.vnd-modelos__nomes b { font: 800 17px/1.3 var(--pdc-f-texto); color: var(--pdc-branco); }
.vnd-modelos__nomes span { font: 400 14.5px/1.45 var(--pdc-f-texto); color: var(--pdc-texto-2); }
/* a frase de baixo vira um selo em pílula: fundo vermelho a 8%, borda a 45%, ícone num círculo e só um trecho em branco forte */
.vnd-modelos__frase { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 8px 14px 8px 10px; border: 1px solid rgba(255, 59, 48, .45); border-radius: 18px; background: rgba(255, 59, 48, .08); font: 400 14px/1.45 var(--pdc-f-texto); color: var(--pdc-texto-2); text-wrap: pretty; }
.vnd-modelos__frase b { font-weight: 700; color: var(--pdc-branco); }
.vnd-modelos__marca { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--pdc-vermelho); color: var(--pdc-branco); }
.vnd-modelos__marca .pdc-icone { width: 14px; height: 14px; stroke-width: 3; }

/* o que você leva: o carrossel do que vem junto (mockups com legenda curta) e o botão no fim */
.vnd-mockups { position: relative; margin-top: var(--pdc-e-6); }
.vnd-mockups__lista { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; margin-inline: calc(var(--pdc-margem) * -1); padding: 4px var(--pdc-margem) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pdc-margem); scrollbar-width: none; }
.vnd-mockups__lista::-webkit-scrollbar { display: none; }
.vnd-mockups__lista li { scroll-snap-align: start; }
.vnd-mockups__lista figure { display: grid; gap: 12px; }
.vnd-mockups__lista img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--pdc-linha-papel); box-shadow: var(--pdc-sombra-papel); background: var(--pdc-preto); }
.vnd-mockups__lista figcaption { display: grid; gap: 4px; }
.vnd-mockups__lista figcaption b { font: 800 17px/1.3 var(--pdc-f-texto); color: var(--pdc-cor-titulo); }
.vnd-mockups__lista figcaption span { font: 400 15px/1.45 var(--pdc-f-texto); color: var(--pdc-cor-texto); }
.vnd-mockups__setas { display: none; }
.vnd-leva__fim { margin-top: var(--pdc-e-5); }
.vnd-leva__fim .pdc-botao { width: 100%; }

/* preço: a linha de confiança */
.vnd-confianca { margin-top: 14px; text-align: center; font: 500 13px/1.45 var(--pdc-f-texto); color: var(--pdc-cinza); }

/* a prova: o botão do meio da página, logo depois do vídeo */
.vnd-meio-botao { position: relative; z-index: 2; } /* a sombra do celular de cima não passa por cima do botão */
.vnd-meio-botao .pdc-botao { width: 100%; }

/* chamada final: o texto dos 4 Rs */
.vnd-final-texto { max-width: 46ch; margin: var(--pdc-e-5) auto 0; font: 400 var(--pdc-t-lead)/1.55 var(--pdc-f-texto); color: var(--pdc-cor-texto); }

/* assim que você paga: cada item é uma frase só, com o começo em negrito */
.vnd-recebe p { margin-top: 0; font-size: 16px; }
.vnd-recebe b { display: inline; font-size: inherit; }

/* preço: o "uma vez só" ao lado do número */
.vnd-uma-vez { align-self: flex-end; margin: 0 0 .55em -6px; font: 600 16px/1.2 var(--pdc-f-texto); letter-spacing: 0; color: var(--pdc-texto-2); }
.vnd-abertura .pdc-hud-base { justify-content: space-between; }

/* a prova: o fecho embaixo dos 3 passos */
.vnd-fecho { margin-top: var(--pdc-e-5); font: 700 17px/1.45 var(--pdc-f-texto); color: var(--pdc-cor-titulo); }

/* 2b · que vídeos dá para fazer: um cartão por tipo de vídeo, no papel, e os nichos em selos */
.vnd-tipos { display: grid; gap: 10px; margin-top: var(--pdc-e-6); }
.vnd-tipos li { display: grid; align-content: start; gap: 6px; padding: 16px 18px 18px; border-radius: 14px; background: var(--pdc-papel-2); border: 1px solid var(--pdc-linha-papel); }
.vnd-tipos .pdc-rotulo { font-size: 12px; }
.vnd-tipos p { font: 500 16px/1.45 var(--pdc-f-texto); color: var(--pdc-cor-titulo); }
/* nichos alinhados: todos do mesmo tamanho, 2 por linha no celular (o último na linha inteira) e 5 por linha no computador */
.vnd-nichos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--pdc-e-5); }
.vnd-nichos .pdc-selo { justify-content: center; text-align: center; white-space: normal; min-height: 40px; font-size: 13px; line-height: 1.2; }
.vnd-nichos li:last-child { grid-column: 1 / -1; }
/* cada nicho é um botão: tocar mostra a ideia de vídeo no quadro escuro logo abaixo */
.vnd-nichos__dica { margin-top: var(--pdc-e-5); font: 600 15px/1.4 var(--pdc-f-texto); color: var(--pdc-cor-titulo); }
.vnd-nichos__dica + .vnd-nichos { margin-top: 12px; }
.vnd-nichos button.pdc-selo { width: 100%; cursor: pointer; font-family: var(--pdc-f-mono); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.vnd-nichos button.pdc-selo:hover { border-color: var(--pdc-cor-titulo); color: var(--pdc-cor-titulo); }
.vnd-nichos button.pdc-selo[aria-pressed="true"] { background: var(--pdc-preto); border-color: var(--pdc-preto); color: var(--pdc-branco); }
.vnd-ideia { margin-top: 12px; display: grid; gap: 10px; min-height: 112px; align-content: center; padding: 20px 22px; border-radius: 14px; background: var(--pdc-preto); scroll-margin: 16px; }
.vnd-ideia p { font: 800 20px/1.3 var(--pdc-f-texto); color: var(--pdc-branco); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .vnd-nichos button.pdc-selo { transition: none; } }

/* vídeo do processo, por cima da página */
.vnd-video { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.vnd-video::backdrop { background: rgba(11, 11, 15, .92); }
.vnd-video video { display: block; height: min(80vh, 860px); width: auto; max-width: 92vw; aspect-ratio: 9 / 16; border-radius: var(--pdc-raio-3); background: var(--pdc-preto); box-shadow: var(--pdc-sombra-tela), 0 0 80px rgba(255, 59, 48, .18); }
.vnd-video__fechar { position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: var(--pdc-traco) solid var(--pdc-linha); background: var(--pdc-superficie); color: var(--pdc-branco); font: 700 18px/1 var(--pdc-f-mono); cursor: pointer; }
.vnd-video__fechar:hover { border-color: var(--pdc-branco); }

/* ---------- a oferta: pilha + tabela à esquerda, preço à direita (no computador, o preço acompanha a rolagem) ---------- */
#oferta { scroll-margin-top: 24px; }
.pdc-faixa.vnd-faixa-oferta { overflow: clip; }
.vnd-oferta__lista { display: grid; gap: var(--pdc-e-6); min-width: 0; }
/* no celular, o botão do preço cabe numa linha só (390 px) */
.vnd-preco { padding-inline: 18px; }
.vnd-preco .pdc-botao { padding-inline: 12px; }


/* oferta: o vídeo do acesso, deitado (16:9). Sem o vídeo, fica o quadro parado com o logo e o "▶" */
.vnd-acesso { display: grid; gap: 14px; }
.vnd-acesso__tela { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 14px; overflow: hidden; border: 1px solid var(--pdc-linha);
  background: radial-gradient(60% 70% at 50% 45%, rgba(255, 59, 48, .14), rgba(255, 59, 48, 0) 70%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 32px 32px, var(--pdc-superficie); }
.vnd-acesso__logo { height: 31px; width: auto; opacity: .55; transform: translateY(-14px); }
.vnd-acesso .pdc-play { top: auto; bottom: 14px; }

/* oferta: "Antes de escolher, compare" (Estúdio Completo × o que costuma aparecer). No celular, cada linha vira um par de cartões */
.vnd-compara-bloco { display: grid; gap: 12px; }
.vnd-compara-bloco__texto { font: 400 16px/1.55 var(--pdc-f-texto); color: var(--pdc-texto-2); }
.vnd-compara2 { width: 100%; border-collapse: collapse; margin-top: 6px; }
.vnd-compara2 thead, .vnd-compara2 tbody { display: block; }
.vnd-compara2 tr { display: grid; grid-template-columns: 1fr 1fr; }
.vnd-compara2 thead td { display: none; }
.vnd-compara2 thead th { padding: 12px 10px 10px; text-align: left; vertical-align: bottom; font-weight: 400; }
.vnd-compara2 thead th.forte { background: var(--pdc-superficie); border-radius: 12px 12px 0 0; box-shadow: inset 0 3px 0 var(--pdc-vermelho); }
.vnd-compara2 thead b { font: 900 12px/1.15 var(--pdc-f-texto); text-transform: uppercase; color: var(--pdc-branco); }
.vnd-compara2 tbody th { grid-column: 1 / -1; padding: 12px 0 6px; border-top: 1px solid var(--pdc-linha); text-align: left; font: 700 11px/1.35 var(--pdc-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pdc-cinza); }
.vnd-compara2 tbody td { padding: 2px 10px 12px; font: 400 14px/1.4 var(--pdc-f-texto); color: var(--pdc-cinza); }
.vnd-compara2 td.forte { background: var(--pdc-superficie); color: var(--pdc-branco); font-weight: 600; }
.vnd-compara2 td.forte i { font: 800 15px/1 var(--pdc-f-texto); font-style: normal; color: var(--pdc-vermelho); margin-right: 6px; }
.vnd-compara2 tbody tr:last-child td.forte { border-radius: 0 0 12px 12px; }
.vnd-compara2__nota { margin-top: 4px; }

/* o que você leva (antes das perguntas): 3 cartões no papel, as aulas, o material de apoio e o bônus (este no escuro, em destaque) */
.vnd-leva { display: grid; gap: 12px; margin-top: var(--pdc-e-6); }
.vnd-leva > li { display: grid; align-content: start; gap: 10px; padding: 20px 20px 22px; border-radius: 14px; background: var(--pdc-papel-2); border: 1px solid var(--pdc-linha-papel); }
.vnd-leva h3 { font: 800 19px/1.3 var(--pdc-f-texto); color: var(--pdc-cor-titulo); }
.vnd-leva p { font: 400 16px/1.55 var(--pdc-f-texto); color: var(--pdc-cor-texto); }
.vnd-leva ul { display: grid; gap: 8px; }
.vnd-leva ul li { position: relative; padding-left: 24px; font: 400 15px/1.5 var(--pdc-f-texto); color: var(--pdc-cor-texto); }
.vnd-leva ul li::before { content: "✓"; position: absolute; left: 0; top: 0; font: 700 14px/1.6 var(--pdc-f-mono); color: var(--pdc-cor-rotulo); }
.vnd-leva ul b { color: var(--pdc-cor-titulo); }
.vnd-leva > li.vnd-leva__bonus { background: var(--pdc-preto); border-color: var(--pdc-preto); }
/* o cartão do bônus é uma coluna: o botão fica sempre no fim do cartão, embaixo */
.vnd-leva > li.vnd-leva__bonus { display: flex; flex-direction: column; }
.vnd-leva__bonus .pdc-selo { align-self: flex-start; }
.vnd-leva__botao { margin-top: auto; width: 100%; padding-inline: 14px; white-space: nowrap; }
.vnd-leva__bonus p { margin-bottom: 14px; }

/* preço: o contador só com dias e horas */
.vnd-contador .pdc-contador__caixas { grid-template-columns: repeat(2, 1fr); }

/* vídeo deitado (o do acesso), por cima da página */
.vnd-video[data-formato="deitado"] video { width: min(92vw, 1100px); height: auto; max-height: 80vh; aspect-ratio: 16 / 9; }


/* ---------- computador ---------- */
@media (min-width: 900px) {
  :root { --vnd-topo-h: 68px; }
  .vnd-topo { gap: 16px; }
  .vnd-topo__logo { height: 38px; }
  .vnd-topo__com { display: inline; font: 700 11px/1.2 var(--pdc-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pdc-cinza); }
  .vnd-topo-com { display: none; }
  .vnd-abertura { min-height: calc(var(--vh, 100vh) - var(--vnd-topo-h)); }
  .vnd-topo__botao { min-height: 42px; padding-inline: 18px; }
  .vnd-acesso__logo { height: 42px; }
  .vnd-leva { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }
  .vnd-leva > li { padding: 24px 24px 26px; }
  .vnd-nossos__painel { padding: 56px 48px 52px; }
  .vnd-carrossel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 250px)); justify-content: center; align-items: center; gap: 36px; padding-inline: 0; overflow: visible; }
  .vnd-telefone--foco { transform: scale(1.08); }
  .vnd-modelos { padding: 40px 48px 36px; --horizonte: 560px; }
  .vnd-modelos .pdc-brilho { background: radial-gradient(520px 380px at 50% 330px, rgba(255, 59, 48, .18), rgba(255, 59, 48, 0) 70%); }
  .vnd-modelos__vitrine { height: 560px; --w1: 270px; --y1: 30px; --w2: 230px; --y2: 70px; --x2: 270px; }
  .vnd-modelos__nomes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; gap: 24px; }
  .vnd-mockups__lista { grid-auto-columns: calc((100% - 2 * 18px) / 3.15); gap: 18px; margin-inline: 0; padding-inline: 0; }
  .vnd-mockups__setas { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
  .vnd-mockups__setas button { width: 44px; height: 44px; border-radius: 50%; border: var(--pdc-traco) solid var(--pdc-cor-linha); background: var(--pdc-papel-2); color: var(--pdc-cor-titulo); font: 700 18px/1 var(--pdc-f-mono); cursor: pointer; }
  .vnd-mockups__setas button:hover { border-color: var(--pdc-cor-titulo); }
  /* na ponta do carrossel, a seta daquele lado fica cinza clarinha e sem clique */
  .vnd-mockups__setas button[aria-disabled="true"] { color: var(--pdc-linha-papel); border-color: var(--pdc-linha-papel); background: transparent; cursor: default; pointer-events: none; }
  .vnd-leva__fim .pdc-botao { width: auto; }
  .vnd-antes { padding: 24px 26px 26px; }
  .vnd-ideia { padding: 24px 28px; }
  .vnd-ideia p { font-size: 24px; }
  .vnd-compara2 { display: table; table-layout: fixed; }
  .vnd-compara2 thead { display: table-header-group; } .vnd-compara2 tbody { display: table-row-group; } .vnd-compara2 tr { display: table-row; }
  .vnd-compara2 thead td { display: table-cell; width: 28%; }
  .vnd-compara2 thead th { padding: 16px 12px 14px; }
  .vnd-compara2 thead b { font-size: 14px; }
  .vnd-compara2 tbody th { padding: 12px 10px 12px 0; vertical-align: top; }
  .vnd-compara2 tbody td { padding: 12px; border-top: 1px solid var(--pdc-linha); font-size: 14.5px; vertical-align: top; }
  .vnd-compara2 tbody tr:last-child td.forte { border-radius: 0 0 14px 14px; }
  .vnd-abertura { grid-template-columns: minmax(0, 660px) minmax(0, 1fr); }
  .vnd-abertura .pdc-titulo { --t: var(--pdc-t-h2); }
  .vnd-abertura .pdc-lead { max-width: 40ch; }
  .vnd-abertura .pdc-acao { flex-wrap: wrap; row-gap: 14px; }
  .vnd-abertura .pdc-acao .vnd-sep { display: none; }
  .vnd-abertura .pdc-acao .pdc-botao { flex: none; white-space: nowrap; }
  .vnd-prova { row-gap: var(--pdc-e-6); }
  .vnd-meio-botao { grid-column: 1; }
  .vnd-meio-botao .pdc-botao { width: auto; }
  .vnd-tipos { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .vnd-tipos li { padding: 20px 22px 22px; }
  .vnd-tipos li:last-child { grid-column: span 2; } /* 7 cartões: o último ocupa 2 colunas e fecha a grade */
  .vnd-tipos p { font-size: 17px; }
  .vnd-nichos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .vnd-nichos li:last-child { grid-column: auto; }
  .vnd-nichos .pdc-selo { font-size: 14px; }
  .vnd-preco { position: sticky; top: calc(var(--vnd-topo-h) + 24px); padding-inline: 34px; } /* para abaixo do cabeçalho fixo */
  .vnd-preco .pdc-botao { padding-inline: 16px; }
}
/* computador com tela baixa (notebook 1366 x 768): título menor para o botão e o preço caberem na primeira tela */
@media (min-width: 900px) and (max-height: 820px) {
  .vnd-abertura .pdc-titulo { --t: 2.75rem; }
}