/* vendas.css — a página de vendas do Broto PRO (index.html), redesenhada em 04/10/2026.
   As peças vivas (a vitrine do painel, a grade das análises, o formulário de entrar)
   continuam com o estilo de `estilo.css`; aqui fica só a casca da página. */

.pv { --pv-raio: 22px; background: var(--papel); }
.pv * { box-sizing: border-box; }
.pv h1, .pv h2, .pv h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
.pv p { margin: 0; text-wrap: pretty; }
.pv-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.pv-secao { padding-block: clamp(72px, 10vw, 136px); scroll-margin-top: 72px; }
.pv-olho { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lima-tinta); }
.pv-olho::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pv-h2 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.02; }
.pv-lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--tinta-suave); max-width: 58ch; }
.pv-cabeca { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 780px; }
.pv-cabeca.centro { margin-inline: auto; text-align: center; align-items: center; }
.pv-nota { font-size: 13.5px; line-height: 1.5; color: var(--tinta-fraca); }
.pv-escuro { background: var(--escuro); color: var(--papel); }
.pv-escuro .pv-lede, .pv-escuro .pv-nota { color: var(--sobre-escuro); }
.pv-escuro .pv-olho { color: var(--lima); }
.pv-escuro .pv-h2 { color: var(--papel); }

/* botões */
.pv-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 16px; border: 2px solid var(--tinta); font-family: var(--display); font-weight: 600; font-size: 16.5px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s; }
.pv-bt:hover { text-decoration: none; }
.pv-bt svg { width: 19px; height: 19px; flex-shrink: 0; }
.pv-bt-lima { background: var(--lima); color: var(--tinta); box-shadow: 0 4px 0 0 var(--tinta); }
.pv-bt-lima:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--tinta); }
.pv-bt-lima:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--tinta); }
.pv-escuro .pv-bt-lima, .pv-topo .pv-bt-lima { border-color: var(--lima); box-shadow: 0 4px 0 0 #0E0D0A; }
.pv-bt-linha { background: transparent; color: var(--tinta); }
.pv-bt-linha:hover { background: rgba(26,24,19,.05); }
.pv-escuro .pv-bt-linha, .pv-topo .pv-bt-linha { color: var(--papel); border-color: rgba(251,247,239,.35); }
.pv-escuro .pv-bt-linha:hover, .pv-topo .pv-bt-linha:hover { background: rgba(251,247,239,.08); border-color: var(--papel); }
.pv-bt-tinta { background: var(--tinta); color: var(--papel); }

/* nav */
.pv-nav { position: sticky; top: 0; z-index: 50; background: rgba(38,36,29,.88); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid rgba(251,247,239,.08); }
.pv-nav-miolo { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.pv-marca { display: flex; align-items: center; gap: 10px; color: var(--papel); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 18px; }
.pv-marca:hover { text-decoration: none; }
.pv-marca-icone { width: 32px; height: 32px; border-radius: 10px; background: var(--lima); display: grid; place-items: center; }
.pv-marca-icone svg { width: 19px; height: 19px; }
.pv-selo { font-weight: 600; font-size: 10px; letter-spacing: 1px; color: var(--tinta); background: var(--lima); border-radius: 100px; padding: 3px 7px; }
.pv-links { display: flex; gap: 2px; margin-left: auto; }
.pv-links a { font-size: 14.5px; font-weight: 500; color: var(--sobre-escuro); text-decoration: none; padding: 10px 12px; border-radius: 10px; }
.pv-links a:hover { color: var(--papel); background: rgba(251,247,239,.06); text-decoration: none; }
.pv-nav .pv-bt { min-height: 42px; padding: 0 16px; font-size: 14.5px; border-radius: 12px; box-shadow: none; }
.pv-entrar { color: var(--papel); font-weight: 600; font-size: 14.5px; padding: 10px 12px; }
@media (max-width: 900px) { .pv-links { display: none; } .pv-entrar { margin-left: auto; } }

/* topo */
.pv-topo { position: relative; overflow: hidden; background: var(--escuro); color: var(--papel); padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(150px, 18vw, 260px); text-align: center; }
.pv-topo::before { content: ""; position: absolute; inset: auto -10% -40% -10%; height: 80%; background: radial-gradient(50% 60% at 50% 100%, rgba(183,232,70,.22), transparent 70%); pointer-events: none; }
.pv-topo > * { position: relative; }
.pv-topo h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .95; letter-spacing: -.045em; max-width: 13ch; margin: 22px auto 0; color: var(--papel); }
.pv-topo h1 em { font-style: normal; color: var(--lima); }
.pv-topo .pv-lede { color: var(--sobre-escuro); margin: 26px auto 0; text-align: center; }
.pv-topo-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.pv-selo-topo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 100px; background: rgba(251,247,239,.07); border: 1px solid rgba(251,247,239,.14); font-size: 13.5px; color: var(--sobre-escuro); }
.pv-selo-topo b { background: var(--lima); color: var(--tinta); border-radius: 100px; padding: 3px 9px; font-size: 11.5px; letter-spacing: .04em; font-family: var(--display); }
.pv-confia { display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; margin-top: 26px; font-size: 14px; color: var(--sobre-escuro); }
.pv-confia span { display: inline-flex; align-items: center; gap: 8px; }
.pv-confia svg { width: 17px; height: 17px; color: var(--lima); }

/* o painel, subindo por cima do topo */
.pv-painel { margin-top: calc(-1 * clamp(110px, 14vw, 210px)); position: relative; z-index: 5; }
.pv-painel .pv-nota { text-align: center; margin-top: 16px; }

/* perguntas */
.pv-perguntas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pv-perguntas { grid-template-columns: 1fr; } }
.pv-pergunta { padding: 26px; border-radius: var(--pv-raio); background: var(--branco); border: 1.5px solid var(--linha); display: flex; flex-direction: column; gap: 14px; }
.pv-pergunta b { font-family: var(--display); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -.015em; }
.pv-pergunta p { font-size: 15px; color: var(--tinta-suave); }
.pv-pergunta .pv-aba { align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 100px; background: var(--papel2); color: var(--tinta-suave); }
.pv-frase { margin-top: clamp(40px, 5vw, 64px); display: flex; gap: 20px 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--escuro); color: var(--papel); }
.pv-frase p { flex: 1 1 420px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -.02em; }
.pv-frase p span { color: var(--lima); }
.pv-frase .pv-bt { border-color: var(--papel); background: var(--papel); color: var(--tinta); }

/* análises: a grade vem de analises.js e já é escura por dentro */
.pv-analises { background: var(--escuro); }

/* do outro lado: o app do paciente */
.pv-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .pv-lado { grid-template-columns: 1fr; } }
.pv-momentos { display: flex; flex-direction: column; gap: 10px; }
.pv-momento { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 20px; border-radius: var(--pv-raio); background: var(--branco); border: 1.5px solid var(--linha); }
.pv-momento .pv-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.pv-momento .pv-ic svg { width: 21px; height: 21px; }
.pv-momento small { display: block; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
.pv-momento b { display: block; font-family: var(--display); font-size: 19px; letter-spacing: -.01em; margin: 3px 0 5px; }
.pv-momento p { font-size: 15px; color: var(--tinta-suave); }
.pv-fones { position: relative; height: clamp(520px, 50vw, 660px); }
.pv-fone { position: absolute; width: clamp(200px, 20vw, 270px); aspect-ratio: 1206/2622; border-radius: 13%/6%; padding: 3.2%; background: #14130F; box-shadow: 0 30px 60px -28px rgba(26,24,19,.5); }
.pv-fone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 10.5%/4.9%; background: var(--papel2); display: block; }
.pv-fone::before { content: ""; position: absolute; top: 2.4%; left: 50%; width: 28%; height: 3.1%; transform: translateX(-50%); background: #14130F; border-radius: 100px; z-index: 2; }
.pv-fone.a { left: 4%; top: 6%; transform: rotate(-5deg); }
.pv-fone.b { right: 4%; top: 0; z-index: 2; transform: rotate(4deg); }
@media (max-width: 560px) { .pv-fone.a { left: -2%; } .pv-fone.b { right: -2%; } }
.pv-atividade { margin-top: 12px; padding: 22px; border-radius: var(--pv-raio); background: var(--escuro); color: var(--papel); }
.pv-atividade b { font-family: var(--display); font-size: 19px; display: block; margin-bottom: 6px; }
.pv-atividade p { color: var(--sobre-escuro); font-size: 15px; }

/* confiança */
.pv-confianca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .pv-confianca { grid-template-columns: 1fr; } }
.pv-confianca article { padding: 28px; border-radius: var(--pv-raio); background: var(--escuro2); display: flex; flex-direction: column; gap: 12px; }
.pv-confianca .pv-ic { width: 48px; height: 48px; border-radius: 15px; background: var(--lima); color: var(--tinta); display: grid; place-items: center; }
.pv-confianca .pv-ic svg { width: 23px; height: 23px; }
.pv-confianca h3 { font-size: 22px; line-height: 1.15; color: var(--papel); }
.pv-confianca p { font-size: 15px; color: var(--sobre-escuro); }
.pv-grupos-lib { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pv-grupos-lib span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px; background: var(--escuro2); color: var(--papel); font-size: 14px; font-weight: 500; }
.pv-grupos-lib i { width: 30px; height: 18px; border-radius: 100px; background: var(--lima-escuro, #9ACE2E); position: relative; }
.pv-grupos-lib i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 100px; background: var(--branco); }
.pv-grupos-lib i.off { background: rgba(251,247,239,.2); }
.pv-grupos-lib i.off::after { right: auto; left: 2px; }

/* preços */
.pv-precos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .pv-precos { grid-template-columns: 1fr; } }
.pv-plano { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: 28px; background: var(--branco); border: 1.5px solid var(--linha); }
.pv-plano.gratis { background: var(--escuro); color: var(--papel); border-color: transparent; }
.pv-plano.gratis .pv-nota, .pv-plano.gratis li { color: var(--sobre-escuro); }
.pv-plano.dest { border: 2px solid var(--tinta); box-shadow: 5px 6px 0 var(--tinta); }
.pv-plano-nome { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; }
.pv-tag { background: var(--lima); color: var(--tinta); border-radius: 100px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; font-family: var(--corpo); }
.pv-valor { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1; }
.pv-valor small { font-family: var(--corpo); font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--tinta-fraca); }
.pv-plano.gratis .pv-valor small { color: var(--sobre-escuro); }
.pv-plano ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pv-plano li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--tinta-suave); }
.pv-plano li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--lima-tinta); }
.pv-plano.gratis li svg { color: var(--lima); }
.pv-plano .pv-bt { margin-top: auto; }
.pv-vagas { display: flex; gap: 6px; }
.pv-vagas span { flex-grow: 1; height: 10px; border-radius: 6px; background: var(--lima); }

/* faq */
.pv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); }
@media (max-width: 900px) { .pv-faq { grid-template-columns: 1fr; } }
.pv-faq details { border-top: 1.5px solid var(--linha); }
.pv-faq details:last-child { border-bottom: 1.5px solid var(--linha); }
.pv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -.01em; }
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: "+"; font-size: 26px; font-weight: 500; color: var(--lima-tinta); transition: transform .2s; }
.pv-faq details[open] summary::after { transform: rotate(45deg); }
.pv-faq details p { padding: 0 0 22px; font-size: 16px; color: var(--tinta-suave); max-width: 62ch; }

/* entrar */
.pv-entrar-caixa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--papel2); }
@media (max-width: 900px) { .pv-entrar-caixa { grid-template-columns: 1fr; } }

/* fecho */
.pv-fecho { text-align: center; }
.pv-fecho h2 { font-size: clamp(40px, 6vw, 80px); line-height: .98; letter-spacing: -.04em; max-width: 16ch; margin: 0 auto; color: var(--papel); }
.pv-fecho h2 span { color: var(--lima); }

.pv-rodape { padding-block: 40px; border-top: 1px solid var(--linha); font-size: 13.5px; color: var(--tinta-fraca); }
.pv-rodape .pv-wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; align-items: center; }
.pv-rodape nav { display: flex; gap: 18px; flex-wrap: wrap; }
.pv-rodape a { color: var(--tinta-suave); }

:focus-visible { outline: 3px solid var(--lima-tinta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pv-bt, .pv-bt:hover { transition: none; transform: none; } }

/* celular: a barra cabe em 375px, e nada empurra a página pro lado */
.pv { overflow-x: hidden; overflow-x: clip; }
.pv-selo-topo b { white-space: nowrap; }
@media (max-width: 520px) {
  .pv-nav-miolo { gap: 8px; }
  .pv-marca .pv-selo { display: none; }
  .pv-entrar { padding: 10px 6px; }
  .pv-nav .pv-bt { padding: 0 12px; font-size: 14px; }
  .pv-fones { height: 470px; }
  .pv-fone { width: 58%; }
  .pv-fone.b { right: 0; }
}