/* =====================================================================
   Conversar · /conversar  (frente socios-conversar)
   Página Papel inteira (o rodapé é a Noite). Sem botão fixo: a página é o contato.
   Celular: título, José em linha (avatar de 56 px + "Quem responde é o José"), botão grande do WhatsApp, formulário, a conta.
   Computador: título em cima; foto + WhatsApp à esquerda; formulário em janela + a conta à direita.
   ===================================================================== */

.cv{padding-top:calc(var(--cabecalho-altura) + var(--e3));padding-bottom:var(--e9)}
.cv-grade{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeca" "foto" "acoes" "lado";row-gap:var(--e5)}
.cv-cabeca{grid-area:cabeca}
.cv-foto{grid-area:foto}
.cv-acoes{grid-area:acoes}
.cv-lado{grid-area:lado;min-width:0}

.cv-titulo{margin-top:var(--e3);font-size:var(--t-titulo);letter-spacing:-.038em;line-height:1.02;max-width:15ch}

/* foto do José: no computador 1:1 com a legenda dentro; no celular vira avatar de 56 px em linha com
   a legenda (o título vem primeiro e o botão do WhatsApp sobe pra ~300 px) */
.cv-foto{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--r-painel);overflow:hidden;background:var(--noite-painel);isolation:isolate}
.cv-foto picture,.cv-foto img{display:block;width:100%;height:100%}
.cv-foto img{object-fit:cover;object-position:50% 9%}
.cv-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,11,13,.86) 0%, rgba(10,11,13,.45) 50%, rgba(10,11,13,0) 100%)}
.cv-foto-legenda{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:4px}
.cv-foto-rotulo{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#D4D6DB;text-transform:uppercase;letter-spacing:.02em}
.cv-foto-rotulo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--menta);flex:none}
.cv-foto-nome{font-size:var(--t-destaque);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--claro)}

.cv-acoes{display:flex;flex-direction:column;align-items:stretch;gap:var(--e3)}
@media (max-width:1023px){
  .cv-cabeca>.rotulo{display:none}
  .cv-titulo{margin-top:0}
  .cv-acoes{gap:var(--e2)}
  /* José em linha: avatar redondo + rótulo e nome ao lado */
  .cv-foto{display:flex;align-items:center;gap:14px;aspect-ratio:auto;border-radius:0;overflow:visible;background:none}
  .cv-foto::after{content:none}
  .cv-foto picture{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--noite-painel)}
  .cv-foto img{object-position:50% 14%}
  .cv-foto-legenda{position:static;gap:2px}
  .cv-foto-rotulo{color:var(--apoio);font-size:12px}
  .cv-foto-nome{font-size:20px;color:var(--texto);letter-spacing:-.025em}
  .cv-foto + .cv-acoes{margin-top:calc(var(--e1) * -1)}
}
.cv-telefone{text-align:center;color:var(--apoio)}

/* ---------- formulário em passos ---------- */
.cv-lado{margin-top:var(--e7)}
.cv-form-titulo{margin-top:var(--e3);font-size:var(--t-destaque);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.cv-janela{margin-top:var(--e5);background:var(--painel);box-shadow:0 1px 2px rgba(17,17,19,.05), 0 20px 50px rgba(17,17,19,.08)}
.cv-barra-texto{margin-left:auto;font-size:11px;color:var(--apoio);text-transform:uppercase;letter-spacing:.02em}
.cv-corpo{position:relative;padding:20px 18px 20px}
@media (min-width:600px){ .cv-corpo{padding:28px 32px 32px} }

.cv-progresso{display:flex;align-items:center;gap:10px;min-height:44px}
.cv-etapa{width:22px;height:22px}
.cv-contador{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em;font-size:13px}
.cv-voltar{margin-left:auto;min-height:44px;min-width:44px;padding:0 4px;font-size:15px;font-weight:600;color:var(--texto);display:inline-flex;align-items:center;gap:6px}
.cv-voltar::before{content:"←";font-weight:400}

.cv-passos{position:relative;margin-top:var(--e4)}
.cv-passo{border:0;padding:0;margin:0;min-width:0}
.cv-pergunta{display:block;padding:0;font-size:clamp(1.375rem, 1.17rem + .88vw, 1.875rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--texto);text-wrap:balance;margin-bottom:var(--e4)}
.cv-opcional{font-weight:500;color:var(--apoio)}

/* passo 2: os quatro campos empilhados numa tela, rótulo sempre visível acima do campo */
.cv-passo--dados .cv-pergunta{margin-bottom:var(--e5)}
.cv-campos{display:grid;gap:var(--e4)}
.cv-item{min-width:0}
.cv-rotulo{display:block;margin-bottom:8px;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--texto)}
@media (min-width:600px){ .cv-campos{gap:var(--e5)} }

/* cartões de escolha com rádio de 28 px; o escolhido ganha borda Verde de 2 px e o check */
.cv-opcoes{display:grid;gap:8px}
.cv-opcao{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;border:1px solid var(--linha-forte);border-radius:12px;background:var(--painel);
  font-size:17px;font-weight:500;letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--d-ui),box-shadow var(--d-ui),background-color var(--d-ui)}
.cv-opcao input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cv-radio{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:2px solid var(--linha-forte);transition:border-color var(--d-ui),background-color var(--d-ui)}
.cv-radio::after{content:"";position:absolute;left:8px;top:4px;width:7px;height:12px;border:solid var(--claro);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform var(--d-ui) var(--ease-entra),opacity var(--d-ui)}
.cv-opcao:has(input:checked){border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento);background:var(--campo)}
.cv-opcao:has(input:checked) .cv-radio{border-color:var(--acento);background:var(--acento)}
.cv-opcao:has(input:checked) .cv-radio::after{opacity:1;transform:rotate(45deg) scale(1)}
.cv-opcao:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .cv-opcao:hover{border-color:var(--grafite)} }
/* telas de 320 a 359 px: "Vender pelo WhatsApp" cabe numa linha (sem "WhatsApp" sozinho embaixo) */
@media (max-width:359px){ .cv-opcao{gap:10px;padding-inline:12px} }

/* campo: fundo claro, filete de 2 px embaixo que vira Verde no foco, texto 18 px */
.cv-campo{
  display:block;width:100%;min-height:56px;padding:14px 16px 12px;border:0;border-bottom:2px solid var(--filete-forte);border-radius:var(--r-campo);
  background:var(--papel);font-family:var(--fonte);font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--texto);
  transition:border-color var(--d-ui),background-color var(--d-ui);-webkit-appearance:none;appearance:none;
}
.cv-campo::placeholder{color:#8A8A90;opacity:1}
.cv-campo:focus{outline:none;border-bottom-color:var(--acento);background:var(--campo)}
.cv-campo:focus-visible{outline:none}
.cv-campo[aria-invalid="true"]{border-bottom-color:var(--tinta)}
.cv-campo--numero{font-variant-numeric:tabular-nums}
.cv-arroba{position:relative}
.cv-arroba-sinal{position:absolute;left:16px;top:50%;transform:translateY(-48%);font-size:18px;font-weight:500;color:var(--apoio);pointer-events:none}
.cv-arroba .cv-campo{padding-left:36px}

/* erro gentil: Grafite, com ponto, embaixo do campo (nunca vermelho gritando) */
.cv-erro{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:15px;font-weight:500;line-height:1.35;color:var(--grafite)}
.cv-erro::before{content:"";width:7px;height:7px;margin-top:.45em;border-radius:50%;background:var(--tinta);flex:none}

.cv-pe{margin-top:var(--e5)}
.cv-seguir[aria-busy="true"]{opacity:.7;cursor:progress}

/* campo escondido fora da tela */
.cv-mel{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- estados: recebido e falha ---------- */
.cv-estado{outline:none}
.cv-estado:focus-visible{outline:2px solid var(--acento);outline-offset:4px;border-radius:12px}
.cv-check,.cv-aviso{width:52px;height:52px;color:var(--acento);margin-bottom:var(--e4)}
.cv-aviso{color:var(--tinta)}
.cv-check circle,.cv-check path{stroke-dasharray:160;stroke-dashoffset:0}
.cv-sucesso.desenha .cv-check circle{animation:cv-traco .6s var(--ease-entra) both}
.cv-sucesso.desenha .cv-check path{animation:cv-traco .45s .35s var(--ease-entra) both}
@keyframes cv-traco{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
.cv-estado-titulo{margin-top:var(--e3);font-size:clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.cv-falha .cv-estado-titulo{margin-top:0}
.cv-estado-apoio{margin-top:var(--e4);color:var(--apoio);max-width:36ch}
.cv-estado-acoes{margin-top:var(--e5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e5)}
@media (max-width:599px){ .cv-estado-acoes{flex-direction:column;align-items:stretch} .cv-estado-acoes .link-seta{align-self:flex-start} }

/* ---------- a conta (recolhida) ---------- */
.cv-conta{margin-top:var(--e6);border-top:1px solid var(--linha-forte);border-bottom:1px solid var(--linha-forte)}
.cv-conta-abrir{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e5) 0;text-align:left;min-height:88px;-webkit-tap-highlight-color:transparent}
.cv-conta-cabeca{display:flex;flex-direction:column;gap:6px;min-width:0}
.cv-conta-titulo{font-size:var(--t-destaque);font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--texto);text-wrap:balance}
.cv-conta-sinal{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--linha-forte);border-radius:12px;font-size:13px;color:var(--texto);text-transform:uppercase;letter-spacing:.02em;transition:border-color var(--d-ui),background-color var(--d-ui)}
.cv-conta-sinal::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--d-ui) var(--ease-entra)}
.cv-conta-fecha{display:none}
.cv-conta-abrir[aria-expanded="true"] .cv-conta-abre{display:none}
.cv-conta-abrir[aria-expanded="true"] .cv-conta-fecha{display:inline}
.cv-conta-abrir[aria-expanded="true"] .cv-conta-sinal::after{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover) and (pointer:fine){ .cv-conta-abrir:hover .cv-conta-sinal{border-color:var(--texto)} }
@media (max-width:599px){
  .cv-conta-abrir{flex-direction:column;align-items:flex-start}
  .cv-conta-sinal{align-self:stretch;justify-content:center}
}
.cv-conta-corpo{overflow:hidden}
.cv-conta-dentro{padding:0 0 var(--e6)}
.cv-conta-apoio{color:var(--apoio)}
.cv-conta-campos{margin-top:var(--e5);display:grid;gap:var(--e5)}
.cv-conta-rotulo{display:block;margin-bottom:10px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cv-conta-ajuda{margin-top:8px;font-size:15px;color:var(--apoio)}
.cv-passador{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px;align-items:stretch}
.cv-passador .cv-campo{text-align:center}
.cv-menos,.cv-mais{min-height:56px;border:1px solid var(--linha-forte);border-radius:12px;background:var(--painel);font-size:24px;font-weight:400;line-height:1;color:var(--texto);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color var(--d-ui)}
.cv-menos:active,.cv-mais:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .cv-menos:hover,.cv-mais:hover{border-color:var(--texto)} }

.cv-resultado{margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--linha)}
.cv-resultado-valor{font-size:clamp(3rem, 2.2rem + 3.4vw, 4.5rem);font-weight:700;letter-spacing:-.01em;line-height:.95;color:var(--acento);font-variant-numeric:tabular-nums}
.cv-resultado-valor[data-vazio]{color:var(--apagado)}
/* conta grande (R$ 23.701.739.296.750): a letra encolhe pra o valor caber numa linha, sem sair da caixa.
   --n = quantos caracteres tem o valor (conversar.js); um caractere ocupa até ~0,56 da letra */
.cv-resultado-numero{white-space:nowrap}
@supports (width:1cqi){
  .cv-resultado{container-type:inline-size}
  .cv-resultado-valor{font-size:min(clamp(3rem, 2.2rem + 3.4vw, 4.5rem), calc(100cqi / (var(--n, 9) * .58)))}
}
.cv-resultado-legenda{margin-top:var(--e2);font-size:var(--t-texto);font-weight:500;color:var(--apoio)}
.cv-resultado-ritmo{margin-top:var(--e1);font-size:15px;line-height:1.4;color:var(--apoio);text-wrap:pretty}
.cv-resultado-um{margin-top:var(--e4);font-size:13px;color:var(--texto);text-transform:uppercase;letter-spacing:.02em}
.cv-conta-nota{margin-top:var(--e4);font-size:15px;line-height:1.45;color:var(--apoio);max-width:52ch}
.cv-conta-whats{margin-top:var(--e5)}
.cv-conta-whats[aria-disabled="true"]{opacity:.38;pointer-events:none}

/* ---------- computador ---------- */
@media (min-width:1024px){
  .cv{padding-top:calc(var(--cabecalho-altura) + var(--e7));padding-bottom:var(--e10)}
  .cv-grade{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:0;
    grid-template-areas:
      "cabeca cabeca cabeca cabeca cabeca cabeca cabeca cabeca cabeca cabeca cabeca cabeca"
      "foto foto foto foto . lado lado lado lado lado lado lado"
      "acoes acoes acoes acoes . lado lado lado lado lado lado lado"
      ". . . . . lado lado lado lado lado lado lado";
    grid-template-rows:auto auto auto 1fr}
  .cv-titulo{font-size:clamp(3rem, 1.8rem + 3vw, 4.5rem);max-width:none}
  .cv-foto{margin-top:var(--e7);aspect-ratio:1/1}
  .cv-foto img{object-position:50% 2%}
  .cv-foto-legenda{left:28px;right:28px;bottom:26px;gap:8px}
  .cv-foto-rotulo{font-size:13px}
  .cv-foto-nome{font-size:clamp(1.75rem, 1rem + 1.2vw, 2.25rem)}
  .cv-acoes{margin-top:var(--e5)}
  .cv-lado{margin-top:var(--e7)}
  .cv-form-titulo{font-size:clamp(1.75rem, 1rem + 1.2vw, 2.5rem)}
  .cv-opcoes{grid-template-columns:1fr 1fr}
  .cv-opcao:last-child{grid-column:1 / -1}
  .cv-pe{display:flex;justify-content:flex-start}
  .cv-pe .botao{width:auto;min-width:200px}
  .cv-conta-campos{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .cv-conta-rotulo{min-height:2.6em}
}
/* de 1024 a 1279 px a coluna do formulário é estreita: as opções e os três campos da conta ficam um embaixo do outro
   (lado a lado, o texto quebrava palavra por palavra e o campo do número sumia entre o − e o +) */
@media (min-width:1024px) and (max-width:1279px){
  .cv-opcoes,.cv-conta-campos{grid-template-columns:minmax(0,1fr)}
  .cv-conta-campo{max-width:400px}
  .cv-conta-rotulo{min-height:0}
}
.cv-conta-rotulo{text-wrap:balance}
.cv-conta .cv-campo{background:var(--painel)}
.cv-conta .cv-campo:focus{background:var(--campo)}

/* ---------- "Quanto custa?" recolhido embaixo da conta (o FAQ inteiro mora em O que a gente faz) ---------- */
.cv-custo{border-bottom:1px solid var(--linha-forte);interpolate-size:allow-keywords}
.cv-custo-pergunta{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);min-height:64px;padding:var(--e3) 0;
  font-size:var(--t-destaque);font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--texto);text-wrap:balance;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.cv-custo-pergunta::-webkit-details-marker{display:none}
.cv-custo-pergunta::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border:solid currentColor;border-width:0 1.8px 1.8px 0;
  transform:translateY(-3px) rotate(45deg);transition:transform var(--d-ui) var(--ease-entra)}
.cv-custo[open] .cv-custo-pergunta::after{transform:translateY(2px) rotate(-135deg)}
.cv-custo-pergunta:focus-visible{outline:2px solid var(--acento);outline-offset:4px;border-radius:6px}
.cv-custo-resposta{padding:0 0 var(--e5);color:var(--apoio);max-width:46ch;text-wrap:pretty}
.cv-custo::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease-entra),content-visibility .35s allow-discrete}
.cv-custo[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){ .cv-custo::details-content{transition:none} }
@media (min-width:1024px){ .cv-custo-pergunta{font-size:clamp(1.5rem, 1rem + .9vw, 1.875rem)} }

/* chegada por /conversar#formulario: a âncora é a própria janela, logo abaixo do cabeçalho.
   O html já desconta o cabeçalho (scroll-padding-top); o [id] da base soma de novo, então aqui fica só a folga. */
#formulario{scroll-margin-top:8px}

/* ---------- celular: página de decisão acaba logo depois do formulário (até 3 telas) ---------- */
@media (max-width:1023px){
  .cv{padding-bottom:var(--e6)}
  /* do telefone ao "Ou deixe o seu contato": 40 px no total (24 do vão da grade + 16), e o título do cartão já aparece na primeira tela */
  .cv-lado{margin-top:var(--e4)}
  .cv-janela{margin-top:var(--e4)}
  .cv-conta{margin-top:var(--e4)}
  .cv-conta-abrir{padding:var(--e4) 0;min-height:0}
  .cv-custo-pergunta{min-height:56px}
  /* passo 2: os quatro campos de 56 px com menos respiro, pra o botão caber acima do teclado */
  .cv-corpo{padding:14px 16px 18px}
  .cv-passos{margin-top:var(--e2)}
  .cv-passo--dados .cv-pergunta{margin-bottom:var(--e3)}
  .cv-campos{gap:var(--e3)}
  .cv-rotulo{margin-bottom:6px;font-size:15px}
  .cv-pe{margin-top:var(--e4)}
}