/* ==========================================================================
   HERO COM CAMPO DE CONVERSA — prefixo cnv-
   A primeira dobra é um campo: pergunta grande, caixa de texto com disco de
   envio e três chips de intenção.

   Tokens usados:
     --fg --fg-2 --fg-muted     tinta, pelo escopo .sec-dark da seção
     --rule --rule-2            filete da ressalva e borda dos chips
     --accent                   borda do chip em hover, ponto dos atributos
     --dark-rgb                 o scrim sobre a foto
     --sans                     tipografia do chip
     --radius-pill              forma do chip
     --nav-h                    folga do menu fixo
     --ease                     curva do projeto
   O fundo da seção é --bg, escrito pelo `section{background:var(--bg)}` do
   core; a família da pergunta é --display, escrita pela .display-xl. Nenhum
   dos dois aparece neste arquivo de propósito — quem os lê é o core.

   Primitivas do core que este arquivo NÃO reescreve, só alimenta:
     .display-xl   o desenho da pergunta (parafusos --display-xl/-lh, abaixo)
     .field        rótulo em caixa alta, controle sem caixa, régua que acende
     .btn-disc     o disco de envio (parafuso --disc-size)
     .sec-lead     a frase de apoio
     .nota         a ressalva — aqui só entram margem, alinhamento e filete,
                   que é exatamente o que a primitiva deixou local
     .visually-hidden  o contador que só o leitor de tela recebe
     .grain        o ruído sobre a foto
   ========================================================================== */

.cnv{
  /* PERGUNTA. Alimenta os dois parafusos da .display-xl do core. O teto é
     calibrado pela FRAÇÃO DO BLOCO que a linha mais longa ocupa, não pelo
     número: a 1440 o corpo resolve em 57.6px e "O que você quer resolver"
     mede 660px dentro dos 720px do bloco — 92%. É essa fração que se
     persegue quando a display do tema muda, e a folga de 8% é o que absorve
     uma face mais larga sem estourar a quebra do <br>. Medido: a 4.4vw a
     mesma linha dava 726px, 6px MAIS larga que o campo logo abaixo, e a
     pergunta passava a pender para fora da caixa que ela apresenta. */
  --display-xl:clamp(30px,4vw,60px);
  /* 1.04, e não o .95 padrão da primitiva: aquele serve a título de uma ou
     duas palavras, sem descendente para colidir. Aqui são duas linhas de
     frase inteira, com o "q" de "que" encontrando o "p" de "patrimônio". */
  --display-xl-lh:1.04;

  /* Corpo do que a pessoa escreve. É o maior texto editável da casa de
     propósito: a caixa tem de parecer um lugar de escrever, não um campo de
     cadastro. */
  --cnv-texto:clamp(17px,1.6vw,22px);

  /* Teto de crescimento da caixa. O script cresce a altura até aqui e depois
     deixa rolar por dentro — sem teto, um texto longo empurra os chips e a
     ressalva para fora da tela, e a dobra deixa de ser dobra. O valor é lido
     de volta pelo script em getComputedStyle: é o CSS que manda no limite. */
  --cnv-teto:34vh;

  /* Largura do bloco central: pergunta, apoio, campo e chips. Não é a coluna
     — a coluna continua sendo o .wrap (§4). É a medida de leitura de uma
     pergunta curta com um campo embaixo. */
  --cnv-max:720px;

  position:relative;
  overflow:hidden;
  min-height:100vh;
}

/* ---------------------------------------------------------------- arte */
/* Sangra porque está FORA do .wrap — nenhum margin negativo, nenhum 100vw
   (§4). O bloco inteiro é opcional: sem ele a pergunta lê --fg sobre --bg e o
   contraste é o do escopo. */
.cnv-arte{position:absolute;inset:0;z-index:0;overflow:hidden}
.cnv-arte-img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
  /* A foto é atmosfera, não assunto: o que precisa ser lido aqui é a
     pergunta. Em .34 ela some atrás do scrim quando a tela é estreita e
     reaparece quando há espaço — que é o comportamento certo para um fundo. */
  opacity:.34;
  filter:grayscale(.35);
}

/* SCRIM — dois gradientes chapados. Um vertical, que segura o topo (onde
   passa o menu fixo) e o pé (a emenda com a próxima dobra); um radial, que
   escurece o centro, onde moram a pergunta e o campo. Cor por token:
   rgba(var(--dark-rgb),…) lê o token e não inventa canal (§3). */
.cnv-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 52%,
      rgba(var(--dark-rgb),.88) 0%,
      rgba(var(--dark-rgb),.62) 46%,
      rgba(var(--dark-rgb),.30) 100%),
    linear-gradient(to bottom,
      rgba(var(--dark-rgb),.78) 0%,
      rgba(var(--dark-rgb),.20) 30%,
      rgba(var(--dark-rgb),.42) 66%,
      rgb(var(--dark-rgb)) 100%);
}

/* VÉU — backdrop-filter SEMPRE com máscara em gradiente (§6). Caixa reta
   produziria uma borda dura atravessando a foto na horizontal, e o olho lê
   isso como "faixa chapada em cima da imagem". A máscara entrega o desfoque
   cheio embaixo — onde está o campo, que é o que precisa de fundo calmo — e
   zero no alto, onde a foto ainda tem de respirar.
   O @supports evita a camada inteira onde backdrop-filter não existe: sem
   ele sobraria um retângulo sem efeito nenhum, e o scrim já basta. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cnv-veu{
    position:absolute;inset:0;pointer-events:none;
    backdrop-filter:blur(7px) saturate(112%);
    -webkit-backdrop-filter:blur(7px) saturate(112%);
    -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 44%,transparent 100%);
    mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.92) 44%,transparent 100%);
  }
}

/* ---------------------------------------------------------------- corpo */
/* Centrado nos dois eixos, como a referência. O texto do CAMPO não acompanha
   — ver .cnv-campo, que volta a alinhar à esquerda. */
.cnv-body{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
  padding-top:calc(var(--nav-h) + clamp(28px,5vh,64px));
  padding-bottom:clamp(40px,7vh,88px);
}

/* A pergunta divide a MESMA medida do campo, de propósito: ela é o rótulo da
   caixa que vem embaixo, e uma headline mais larga que o campo faz a dobra ler
   como duas peças empilhadas em vez de uma pergunta com um lugar de responder. */
/* O olho precisa de `align-self`, e a razão foi medida: a primitiva .eyebrow é
   `display:inline-flex`, e um flex item é BLOQUIFICADO — vira `flex` e passa a
   esticar na largura inteira da coluna (1096px a 1440), com o conteúdo dela
   ancorado à esquerda. O `text-align:center` do .cnv-body não alcança: ele
   alinha texto, e ali dentro o que existe é uma caixa flex. O sintoma é o olho
   sozinho na margem esquerda enquanto o resto da dobra está centrado. */
.cnv-olho{align-self:center}

.cnv-title{
  max-width:var(--cnv-max);margin:18px auto 0;
  /* O reset do core dá text-wrap:balance a todo h1..h4, e a .display-xl já o
     devolve a initial. A declaração fica aqui assim mesmo: quem trocar a
     primitiva por uma classe própria perde a quebra do <br> em silêncio, que
     é o defeito mais caro de achar deste arquivo. */
  text-wrap:initial;
}

/* Só a medida e a margem: o desenho é a primitiva .sec-lead do core.
   Seletor duplo de propósito — .cnv-lead e .sec-lead empatam em (0,1,0), e
   sem o ancestral quem venceria seria a folha carregada por último (§6.4). */
.cnv .cnv-lead{
  max-width:50ch;margin:22px auto 0;
  font-size:clamp(16px,1.4vw,19px);
  /* Texto centrado em três linhas deixa a última órfã — "compromisso." sozinho
     no meio da dobra. `balance` reparte as três, e aqui ele é seguro: o reset
     do core só dá balance a h1..h4, e o Chrome desiste do cálculo acima de
     seis linhas, que este apoio nunca alcança (o slot para em 28 palavras). */
  text-wrap:balance;
}

/* ---------------------------------------------------------------- campo */
.cnv-form{
  max-width:var(--cnv-max);
  width:100%;
  margin:clamp(28px,4vh,44px) auto 0;
}

/* O campo é a primitiva .field do core: régua embaixo, rótulo em caixa alta,
   borda que acende no foco. O que sobra para cá é o alinhamento — dentro de
   uma dobra centrada, rótulo e texto digitado continuam à esquerda, porque
   texto que a PESSOA escreve centralizado é ilegível a partir da segunda
   linha. */
.cnv-campo{text-align:left}

/* A linha é o par caixa + disco. align-items:flex-end ancora o disco no pé da
   caixa: quando o texto cresce, o disco desce junto e continua colado à régua,
   em vez de ficar boiando no meio de um campo de cinco linhas. */
.cnv-linha{display:flex;align-items:flex-end;gap:clamp(12px,1.6vw,20px)}

/* Seletor duplo pelo mesmo motivo do .cnv-lead, e aqui ele é obrigatório por
   outra razão: `.field textarea` do core vale (0,1,1) e `.cnv-texto` sozinha
   valeria (0,1,0) — perderia o corpo de 15px da primitiva. Com o ancestral
   são (0,2,0) e a conta fecha sem depender de ordem de folha. */
.cnv .cnv-texto{
  flex:1 1 auto;min-width:0;
  font-size:var(--cnv-texto);
  line-height:1.45;
  /* Sem teto o campo cresce para sempre e empurra chips e ressalva para fora
     da dobra; com teto, o excedente rola por dentro. */
  max-height:var(--cnv-teto);
  overflow-y:auto;
  /* SEM SCRIPT a alça nativa é a única forma de ver um texto longo inteiro —
     por isso ela nasce ligada. Quem a desliga é a regra logo abaixo, e só
     depois de o script assumir o crescimento. */
  resize:vertical;
}

/* O script põe .is-auto na raiz quando assume a altura. As duas coisas não
   podem conviver: a alça guarda uma altura que o próximo caractere digitado
   sobrescreveria, e a pessoa veria o campo "desfazer" o que ela arrastou. */
.cnv.is-auto .cnv-texto{resize:none}

/* Disco de envio: a primitiva .btn-disc do core, com o parafuso dela. 52px e
   não os 42 do padrão porque aqui ele não é seta de carrossel — é o botão
   principal da primeira dobra, e divide a linha com um texto de 22px. */
.cnv-enviar{--disc-size:clamp(44px,4vw,52px);margin-bottom:2px}
.cnv-seta{width:19px;height:19px}

/* ---------------------------------------------------------------- chips */
.cnv-chips{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;
  margin-top:20px;
}

/* `background:none` e `appearance:none` não são decoração: o <button> nativo
   pinta o cromo do sistema por baixo e `color-scheme:only light` (tokens.css)
   o deixa CINZA-CLARO em toda parte. Sem as duas linhas, o chip fica com
   fundo #f0f0f0 sob texto quase branco. O core registra o mesmo caso na
   primitiva .btn, medido no conversao/diagnostico-perfil. */
.cnv-chip{
  background:none;-webkit-appearance:none;appearance:none;
  font-family:var(--sans);font-weight:400;
  font-size:13.5px;line-height:1.3;letter-spacing:.01em;
  color:var(--fg-2);
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  padding:11px 18px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
/* Sem deslocamento e sem magnetismo, como a primitiva .btn da casa: o que
   muda no hover é a tinta e a borda. Um chip que salta obriga o olho a
   reencontrar os outros dois. */
.cnv-chip:hover{
  color:var(--fg);
  border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 9%,transparent);
}

/* ---------------------------------------------------------------- anexo */
/* Desligado no markup, e o CSS fica aqui de propósito: quem descomentar o
   bloco não precisa reescrever a forma, só responder às quatro perguntas da
   LGPD que o comentário do markup.html lista. O <input type="file"> real vive
   escondido pela .visually-hidden do core — fora da tela, dentro da árvore de
   acessibilidade e focável pelo teclado. */
.cnv-anexo{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:16px;
  font-size:13px;color:var(--fg-muted);
  cursor:pointer;
  transition:color .3s var(--ease);
}
.cnv-anexo:hover{color:var(--fg-2)}
.cnv-anexo-ico{width:15px;height:15px;flex:0 0 auto}

/* ---------------------------------------------------------------- ressalva */
/* A primitiva .nota do core entrega o trio tipográfico (12.5px, entrelinha
   1.6, --fg-muted). Daqui sai o que ela deixou local: margem, alinhamento e
   filete. À esquerda e não centrada — três linhas de ressalva centradas viram
   um triângulo que ninguém lê até o fim. */
.cnv-nota{
  --nota-max:none;
  text-align:left;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--rule);
}

/* ---------------------------------------------------------------- atributos */
.cnv-atrib{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(20px,3vw,40px);
  margin-top:clamp(30px,5vh,52px);
}
.cnv-atrib li{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--fg-muted);
}
.cnv-atrib li::before{
  content:"";flex:0 0 auto;
  width:4px;height:4px;border-radius:50%;
  background:var(--accent);
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:760px){
  /* 100vh no celular conta com a barra do navegador recolhida: a dobra fica
     alta demais e os chips caem abaixo da linha d'água — o único erro fatal
     possível num hero cuja ação é o campo. Deixar a altura ser o conteúdo é o
     que garante o campo à vista. Mesma correção do hero/centrado-prova-social. */
  .cnv{min-height:0}
  .cnv-body{
    min-height:0;
    padding-top:calc(var(--nav-h) + 30px);
    padding-bottom:52px;
  }
  .cnv .cnv-lead{max-width:40ch}
  /* A caixa perde metade do teto: com o teclado virtual aberto sobra cerca de
     45% da tela, e um campo de 34vh empurraria o disco de envio para debaixo
     do teclado. */
  .cnv{--cnv-teto:24vh}
  /* Os chips passam a caber um por linha e ficam de borda a borda do bloco:
     três pílulas de 13.5px em 390px quebram em duas linhas desalinhadas, e a
     fileira centrada vira escada. */
  .cnv-chips{flex-direction:column;align-items:stretch}
  .cnv-chip{width:100%;padding:13px 18px}
  .cnv-atrib{
    /* Em coluna, alinhados à esquerda: três linhas centradas com o ponto na
       frente desenham uma seta para o nada. */
    flex-direction:column;align-items:flex-start;
    text-align:left;
  }
}