/* Página de vendas estática (29/09/2026). O corpo deste arquivo é cópia de
   portal/src/app/vendas.css, que continua sendo a referência de desenho.
   Só o bloco abaixo é novo: as fontes, que no Next vinham do next/font, e o
   botão de troca de moeda. */
body { margin: 0 }
.pv {
  --fonte-corpo: 'Archivo', system-ui, sans-serif;
  --fonte-dado: 'IBM Plex Mono', ui-monospace, monospace;
  --fonte-titulo: var(--fonte-corpo);
}
.pv-troca {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--tinta-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.pv-troca:hover { color: var(--tinta) }
.pv-troca:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px }
[hidden] { display: none !important }

/* ============================================================================
   Página de vendas da VOLUMIA.
   Isolada em .pv para não brigar com o globals.css do painel.

   DIREÇÃO: catálogo de aparelho médico, não site de startup. A referência são
   os materiais da Zeiss e das fabricantes de equipamento estético: muito
   branco, uma grotesca disciplinada, uma cor de destaque só, e detalhe técnico
   onde mora a personalidade.

   ASSINATURA: a régua de traços. O logo tem um anel dourado em volta do O, o
   produto inteiro é sobre medir, e o paciente decide quando enxerga a medida.
   Então o divisor de seção é uma régua, não uma linha. É o vocabulário do
   próprio assunto, não enfeite.
   ============================================================================ */

.pv {
  --tinta:      #16283c;
  --tinta-2:    #46586e;
  --tinta-3:    #77879a;
  --ouro:       #b8912f;
  --ouro-claro: #d9b661;
  --ouro-fraco: #e8dcc0;
  --ouro-fundo: #fbf6ea;
  --papel:      #f5f7f9;   /* off-white de viés frio: creme puxa para editorial */
  --branco:     #ffffff;
  --linha:      #e0e5ec;
  --fundo-forte:#0f1c2c;

  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo), system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

.pv *, .pv *::before, .pv *::after { box-sizing: border-box }
.pv img, .pv video, .pv svg { max-width: 100% }

/* ---------------------------------------------------------------- estrutura */
.pv-largura { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px }
.pv-secao { padding: 88px 0 }
.pv-secao.escura { background: var(--fundo-forte); color: #eaeef4 }
.pv-secao.escura .pv-titulo { color: #fff }
.pv-secao.escura .pv-linha-fina { color: #a9b7c8 }

/* ---------------------------------------------------------------- tipografia */
.pv-etiqueta {
  font-family: var(--fonte-dado), monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ouro); margin: 0 0 14px;
}
.pv-secao.escura .pv-etiqueta { color: var(--ouro-claro) }

.pv-display {
  font-family: var(--fonte-titulo), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6.2vw, 76px);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 0 0 22px;
  text-wrap: balance;
  font-stretch: 112%;
}
.pv-titulo {
  font-family: var(--fonte-titulo), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.08; letter-spacing: -.025em;
  margin: 0 0 16px; text-wrap: balance;
}
.pv-sub {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55; color: var(--tinta-2);
  margin: 0 0 30px; max-width: 54ch;
}
.pv-linha-fina { color: var(--tinta-2); margin: 0 0 26px; max-width: 58ch }

/* ---------------------------------------------------- a régua, a assinatura */
.pv-regua {
  height: 15px;
  border-top: 1px solid var(--ouro-fraco);
  background-repeat: repeat-x;
  background-image:
    linear-gradient(90deg, var(--ouro) 0 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--ouro-fraco) 0 1px, transparent 1px);
  background-size: 84px 15px, 12px 7px;
  background-position: 0 0, 0 0;
  margin: 0 0 26px;
  max-width: 520px;
}
.pv-secao.escura .pv-regua { border-top-color: #2c3d52 }
.pv-regua.cheia { max-width: none }

/* ------------------------------------------------------------------- topo */
.pv-topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,247,249,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.pv-topo-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 13px 24px; max-width: 1120px; margin: 0 auto;
}
.pv-logo { display: block; width: 148px; height: auto }
.pv-topo nav { display: flex; align-items: center; gap: 8px }

/* ------------------------------------------------------------------ botões */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-weight: 650; font-size: 16px;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 6px;
  background: var(--tinta); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.pv-btn:hover { background: #0f2033; transform: translateY(-1px) }
.pv-btn:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px }
.pv-btn.ouro { background: var(--ouro); color: #241a04 }
.pv-btn.ouro:hover { background: #a37f27 }
.pv-btn.vazio {
  background: transparent; color: var(--tinta);
  border-color: var(--linha); min-height: 44px; font-size: 15px; padding: 0 18px;
}
.pv-btn.vazio:hover { background: var(--branco); border-color: var(--tinta-3) }
.pv-secao.escura .pv-btn.vazio { color: #eaeef4; border-color: #2c3d52 }

.pv-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.pv-nota { font-size: 14px; color: var(--tinta-3) }

/* ------------------------------------------------------------------- vídeo */
.pv-video {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--branco); overflow: hidden; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  box-shadow: 0 1px 2px rgba(22,40,60,.05), 0 22px 44px -30px rgba(22,40,60,.4);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pv-video:hover { transform: translateY(-2px); border-color: var(--ouro-fraco);
  box-shadow: 0 1px 2px rgba(22,40,60,.05), 0 30px 56px -30px rgba(22,40,60,.5) }
.pv-video:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px }
.pv-video .quadro { position: relative; width: 100%; aspect-ratio: 16/9; background: #eef1f5 }
.pv-video.retrato .quadro { aspect-ratio: 4/3 }
.pv-video video { width: 100%; height: 100%; object-fit: cover; display: block }

/* placeholder: precisa parecer proposital, não quebrado */
.pv-espera {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--tinta-3);
  background:
    linear-gradient(135deg, #f3f6f9 0%, #e9eef4 100%),
    var(--branco);
}
.pv-espera::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(90deg, var(--ouro-fraco) 0 1px, transparent 1px),
    linear-gradient(0deg, var(--ouro-fraco) 0 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
}
/* Classe própria, não descendente de .pv-espera: o mesmo ícone é usado dentro
   da ampliação, onde aquele pai não existe — e ali ele saía com 0 por 0. */
.pv-play {
  position: relative; width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  background: var(--branco); border: 1px solid var(--ouro-fraco);
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -12px rgba(22,40,60,.5);
}
.pv-play::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid var(--ouro);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.pv-lupa .pv-play { background: #16283c; border-color: #2f455e }
.pv-espera small {
  position: relative;
  font-family: var(--fonte-dado), monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
}
/* A cor precisa ser declarada, não herdada: dentro da seção escura o cartão
   herdava o texto claro e a etiqueta ficava branca sobre a barra branca. */
.pv-video .rotulo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-top: 1px solid var(--linha); background: var(--branco);
  color: var(--tinta);
}
.pv-secao.escura .pv-video .rotulo { color: var(--tinta) }
.pv-secao.escura .pv-video .rotulo span { color: var(--tinta-3) }
.pv-video .rotulo b { font-size: 15px; font-weight: 650 }
.pv-video .rotulo span {
  font-family: var(--fonte-dado), monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
  white-space: nowrap;
}

/* ------------------------------------------------------------- ampliação */
.pv-lupa {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(9,17,27,.82); backdrop-filter: blur(6px);
}
.pv-lupa[data-aberta='1'] { display: flex }
.pv-lupa .caixa {
  width: min(1000px, 94vw); background: #0f1c2c;
  border: 1px solid #24384f; border-radius: 12px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.pv-lupa .caixa video { width: 100%; display: block; background: #0b1420 }
.pv-lupa .vazio {
  aspect-ratio: 16/9; display: grid; place-items: center; gap: 10px;
  align-content: center; color: #8fa2b8; text-align: center; padding: 24px;
}
.pv-lupa .pv-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-top: 1px solid #24384f; color: #dbe3ec;
}
.pv-lupa .pv-barra b { font-size: 15.5px; font-weight: 650 }
.pv-lupa .fechar {
  background: transparent; color: #cdd8e4;
  border: 1px solid #2f455e; border-radius: 6px;
  font: inherit; font-size: 14px; padding: 7px 14px; cursor: pointer;
}
.pv-lupa .fechar:hover { background: #1a2b3f }

/* -------------------------------------------------------------- listas */
.pv-grade { display: grid; gap: 22px }
.pv-grade.tres { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)) }
.pv-grade.dois { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) }

.pv-cartao {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 10px; padding: 26px;
}
.pv-secao.escura .pv-cartao { background: #16283c; border-color: #24384f }
.pv-cartao h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 8px }
.pv-cartao p { margin: 0; color: var(--tinta-2); font-size: 15.5px; line-height: 1.55 }
.pv-secao.escura .pv-cartao p { color: #a9b7c8 }

/* passos: aqui a numeração é honesta, é sequência de verdade */
.pv-passos { counter-reset: passo; display: grid; gap: 0 }
.pv-passo {
  counter-increment: passo;
  display: grid; grid-template-columns: 62px 1fr; gap: 0 20px;
  padding: 24px 0; border-top: 1px solid var(--linha);
}
.pv-passo:last-child { border-bottom: 1px solid var(--linha) }
.pv-passo::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--fonte-dado), monospace; font-size: 13px; font-weight: 600;
  color: var(--ouro); padding-top: 3px;
}
.pv-passo h3 { margin: 0 0 5px; font-size: 18px; font-weight: 650 }
.pv-passo p { margin: 0; color: var(--tinta-2); font-size: 15.5px }

/* -------------------------------------------------------------- números */
.pv-fatos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: 10px; overflow: hidden;
}
.pv-fato { background: var(--branco); padding: 20px 22px }
.pv-fato b {
  display: block; font-family: var(--fonte-titulo), sans-serif;
  font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
}
.pv-fato span {
  display: block; margin-top: 4px;
  font-family: var(--fonte-dado), monospace; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3);
}

/* -------------------------------------------------------------- preços */
.pv-plano {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 10px; padding: 28px; display: flex; flex-direction: column;
}
.pv-plano.destaque { border: 2px solid var(--ouro); box-shadow: 0 24px 60px -40px rgba(184,145,47,.9) }
.pv-plano .selo {
  align-self: flex-start; font-family: var(--fonte-dado), monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ouro); background: var(--ouro-fundo);
  border-radius: 20px; padding: 4px 11px; margin-bottom: 12px;
}
.pv-plano .valor {
  font-family: var(--fonte-titulo), sans-serif;
  font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.pv-plano .por { color: var(--tinta-3); font-size: 15px }
.pv-plano ul { list-style: none; margin: 20px 0 26px; padding: 0; font-size: 15.5px }
.pv-plano li { display: flex; gap: 9px; margin-bottom: 9px; color: var(--tinta-2) }
.pv-plano li::before { content: '—'; color: var(--ouro); flex: 0 0 auto }
.pv-plano .pv-btn { margin-top: auto }

/* -------------------------------------------------------------- perguntas */
.pv-faq details {
  border-top: 1px solid var(--linha); padding: 4px 0;
}
.pv-faq details:last-of-type { border-bottom: 1px solid var(--linha) }
.pv-faq summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 0; position: relative;
  font-weight: 620; font-size: 17px;
}
.pv-faq summary::-webkit-details-marker { display: none }
.pv-faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 13px;
  font-size: 22px; color: var(--ouro); font-weight: 400; line-height: 1;
}
.pv-faq details[open] summary::after { content: '–' }
.pv-faq summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px }
.pv-faq .resposta { padding: 0 40px 20px 0; color: var(--tinta-2); font-size: 16px; margin: 0 }

/* -------------------------------------------------------------- formulário */
.pv-form { display: grid; gap: 12px; max-width: 430px }
/* o select entrou junto com o input na regra: sem isto ele herda o estilo do
   sistema e sai branco no meio da seção escura */
.pv-form input, .pv-form select {
  font: inherit; font-size: 16px; padding: 13px 15px;
  border: 1px solid #2c3d52; border-radius: 6px;
  background: #16283c; color: #fff; width: 100%;
}
.pv-form select { appearance: none; cursor: pointer }
.pv-form option { background: #16283c; color: #fff }
.pv-form input::placeholder { color: #7f92a8 }
.pv-form input:focus-visible,
.pv-form select:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px }

/* -------------------------------------------------------------- rodapé */
.pv-rodape {
  border-top: 1px solid var(--linha); padding: 34px 0;
  font-size: 14px; color: var(--tinta-3);
}
.pv-rodape a { color: var(--tinta-2) }

/* -------------------------------------------------------------- respeito */
@media (prefers-reduced-motion: reduce) {
  .pv *, .pv *::before, .pv *::after { animation: none !important; transition: none !important }
}
@media (max-width: 640px) {
  .pv-secao { padding: 60px 0 }
  .pv-acoes .pv-btn { width: 100% }
  .pv-topo nav .pv-btn.vazio { display: none }
  .pv-passo { grid-template-columns: 44px 1fr }
}

/* ------------------------------------------------------------- hero em duas
   colunas. O vídeo ocupava 655px de altura sozinho embaixo do texto e comia a
   dobra inteira. Ao lado, ele divide o espaço e o visitante vê a promessa e a
   prova na mesma tela. Empilha no celular. */
.pv-hero-grade {
  display: grid; gap: 44px; align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
.pv-hero .pv-sub { margin-bottom: 26px }
.pv-hero .pv-display { font-size: clamp(38px, 4.4vw, 60px) }
@media (max-width: 940px) {
  .pv-hero-grade { grid-template-columns: 1fr; gap: 34px }
  .pv-hero .pv-display { font-size: clamp(36px, 8vw, 54px) }
}

/* Observação dentro de um passo. Marcada com a barra dourada porque é um
   argumento que responde objeção, não texto de apoio. */
.pv-obs {
  margin: 12px 0 0 !important;
  padding: 11px 15px;
  background: var(--ouro-fundo);
  border-left: 3px solid var(--ouro);
  border-radius: 0 6px 6px 0;
  font-size: 14.5px !important;
  line-height: 1.5;
  color: var(--tinta-2);
  max-width: 62ch;
}
.pv-obs b { color: var(--tinta) }

/* ------------------------------------------------------- as oito telas
   Um cartão por tela: o vídeo em cima, o argumento embaixo. Com três blocos
   dava para separar vídeo e texto em duas fileiras; com oito, o olho perde a
   ligação entre o filme e o parágrafo que fala dele. */
.pv-blocos {
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pv-bloco { display: flex; flex-direction: column; gap: 0 }
.pv-bloco .pv-video { border-radius: 10px 10px 0 0; border-bottom: 0 }
.pv-bloco .corpo {
  background: #16283c; border: 1px solid #24384f; border-top: 0;
  border-radius: 0 0 10px 10px; padding: 18px 18px 20px; flex: 1;
}
.pv-bloco h3 {
  margin: 0 0 7px; font-size: 16.5px; font-weight: 650;
  letter-spacing: -.01em; color: #fff; line-height: 1.25;
}
.pv-bloco p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #a9b7c8 }
/* o cartão inteiro sobe junto no hover, não só o vídeo */
.pv-bloco:hover .pv-video { transform: none }

@media (max-width: 1080px) { .pv-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px)  { .pv-blocos { grid-template-columns: 1fr } }

/* Dentro dos oito blocos o vídeo perde a barra de rótulo: o cartão já tem
   título próprio, e dois títulos empilhados em 260px de largura quebravam em
   três linhas e desalinhavam a fileira inteira. A etiqueta vira sobrancelha
   do texto, que é onde ela informa sem competir. */
.pv-bloco .pv-video .rotulo { display: none }
.pv-bloco .pv-video { box-shadow: none }
.pv-bloco .marca-bloco {
  display: block; margin-bottom: 7px;
  font-family: var(--fonte-dado), monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-claro);
}

/* ---------------------------------------------------------------- whatsapp --
   Botão flutuante de atendimento humano.

   z-index 100 é deliberado: fica ACIMA do cabeçalho grudado (50) e ABAIXO da
   janela do vídeo (200). Assim ele não some ao rolar a página e não fica
   boiando por cima do vídeo ampliado.

   O rótulo só aparece no hover e em tela grande. No celular seria uma barra
   permanente cobrindo conteúdo, e dedo não faz hover. */
.pv-zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; align-items: center; gap: 0;
  text-decoration: none; color: #fff;
  border-radius: 999px;
  background: #25d366;
  box-shadow: 0 4px 14px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.14);
  transition: box-shadow .18s ease, transform .18s ease;
}
.pv-zap:hover { box-shadow: 0 8px 22px rgba(0,0,0,.28); transform: translateY(-1px) }
.pv-zap:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px }

.pv-zap-bola {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex: none;
}

/* largura 0 fechado, abre no hover. max-width em vez de width para a transição
   funcionar sem número mágico. */
.pv-zap-txt {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: max-width .22s ease, padding .22s ease;
  padding: 0;
}
@media (hover: hover) and (min-width: 700px) {
  .pv-zap:hover .pv-zap-txt,
  .pv-zap:focus-visible .pv-zap-txt { max-width: 160px; padding: 0 4px 0 18px }
}

@media (max-width: 700px) {
  .pv-zap { right: 14px; bottom: 14px }
  .pv-zap-bola { width: 52px; height: 52px }
}

@media (prefers-reduced-motion: reduce) {
  .pv-zap, .pv-zap-txt { transition: none }
  .pv-zap:hover { transform: none }
}