/* =========================================================================
   O VISUAL DO FORMULÁRIO — as duas partes leem daqui.

   29/08/2026: o formulário foi dividido em duas páginas (parte 1 até a lista
   de serviços, parte 2 daí em diante). O visual saiu de dentro do HTML e veio
   para cá para existir NUM LUGAR SÓ -- duas cópias do mesmo desenho é a
   receita para as duas telas ficarem diferentes sem ninguém perceber.

   ⚠ MEXEU AQUI: troque o ?v= do <link> NOS DOIS HTML. A regra de "página
   sempre fresca" do .htaccess vale só para .html e .php; folha de estilo o
   navegador guarda, e sem o ?v novo a pessoa vê o desenho velho.
   ========================================================================= */


  /* ===================================================== o vocabulário ======
     Uma curva de tempo só, as cores da casa, e nada mais.                    */
  :root {
    --ease: cubic-bezier(.22, 1, .36, 1);
    --fundo: #0c1729;
    --marinho: #101e38;
    --vermelho: #e10e1b;
    --papel: #f7f7f2;
    --ceu: #8cbadb;      /* a terceira cor (27/08): o que e positivo e importante */
    --tinta: #0c1729;
    --linha: rgba(247,247,242,.16);
    --apagado: rgba(247,247,242,.58);
    --alt: 100vh;
  }
  @supports (height: 100dvh) { :root { --alt: 100dvh; } }

  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; }
  body {
    background:
      radial-gradient(circle at 78% 8%, rgba(225,14,27,.15), transparent 36rem),
      radial-gradient(circle at 12% 62%, rgba(247,247,242,.05), transparent 28rem),
      var(--fundo);
    color: var(--papel);
    font-family: 'Sora', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: var(--vermelho); text-decoration: none; }
  ::selection { background: var(--vermelho); color: var(--papel); }
  button { font-family: inherit; }

  /* os dois véus parados: é o que tira o ar de tela */
  .cv-veu, .cv-grade { position:fixed; inset:0; pointer-events:none; z-index:1; }
  .cv-veu { opacity:.16;
    background-image: radial-gradient(rgba(247,247,242,.20) 1px, transparent 1px);
    background-size: 4px 4px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); }
  .cv-grade { opacity:.09;
    background-image: linear-gradient(rgba(247,247,242,.14) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(247,247,242,.14) 1px, transparent 1px);
    background-size: 58px 58px; }


  /* =========================================================== A ABERTURA ===
     Nasce escondida. Só o JavaScript a acende — sem script, ninguém vê tela
     nenhuma e o formulário funciona igual.                                    */
  .cv-ab { position:fixed; inset:0; z-index:200; display:none; background:var(--fundo);
    touch-action:none; overscroll-behavior:contain; will-change:transform; }
  .cv-ab.cv-ab-ativa { display:flex; align-items:center; justify-content:center; }
  html.cv-ab-travado, body.cv-ab-travado { overflow:hidden !important; height:100%; }
  .cv-ab-sai { transform:translateY(-100%); transition:transform .9s cubic-bezier(.76,0,.24,1); }
  .cv-ab-miolo { display:flex; flex-direction:column; align-items:center; gap:26px; padding:0 24px; }
  .cv-ab-marca { display:flex; align-items:center; gap:16px;
    opacity:0; transform:translateY(18px); filter:blur(10px);
    will-change:transform, opacity, filter;
    transition:opacity .9s ease-out, transform .9s var(--ease), filter .9s ease-out; }
  .cv-ab-marca svg { display:block; flex:none; width:clamp(44px,11vw,60px); height:auto; }
  .cv-ab-marca b { font-weight:800; font-size:clamp(18px,4.4vw,26px); letter-spacing:.2em;
    text-transform:uppercase; line-height:1; }
  .cv-ab-anda .cv-ab-marca { opacity:1; transform:none; filter:blur(0); }
  .cv-ab-fecha .cv-ab-marca { opacity:0; transform:translateY(-20px); filter:blur(8px);
    transition:opacity .5s ease-in, transform .5s ease-in, filter .5s ease-in; }
  .cv-ab-trilho { width:min(300px,64vw); height:2px; overflow:hidden; background:rgba(247,247,242,.14); }
  .cv-ab-barra { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
    background:linear-gradient(90deg, var(--vermelho), rgba(247,247,242,.82)); }
  .cv-ab-anda .cv-ab-barra { transform:scaleX(1); transition:transform 1.1s ease-in-out .2s; }
  .cv-ab-meta { display:flex; justify-content:space-between; width:min(300px,64vw); opacity:0;
    transition:opacity .6s ease-out .3s; font-weight:600; font-size:10px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--apagado); }
  .cv-ab-anda .cv-ab-meta { opacity:1; }


  /* ================================================== a moldura permanente ===
     Fita de progresso no topo, marca e contador. Ficam parados; só o miolo
     troca.                                                                    */
  .cv-fita { position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
    background:rgba(247,247,242,.10); }
  .cv-fita i { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left center;
    background:linear-gradient(90deg, var(--vermelho), #ff7a4d);
    transition:transform .6s var(--ease); }

  .cv-topo { position:fixed; top:0; left:0; right:0; z-index:55;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:calc(18px + env(safe-area-inset-top)) clamp(20px,5vw,44px) 18px; }
  .cv-marca { display:flex; align-items:center; gap:12px; }
  .cv-marca svg { display:block; flex:none; }
  .cv-marca span { font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--papel); }
  @media (max-width:420px) { .cv-marca span { display:none; } }
  .cv-conta { font-weight:700; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--apagado); white-space:nowrap; }


  /* ============================================================= O PALCO =====
     Uma pergunta por tela, no meio da tela. Em dvh, para o teclado do celular
     encolher a área em vez de tapar o botão.                                  */
  .cv-palco { position:relative; z-index:2; }
  .cv-passo { min-height:var(--alt);
    padding:calc(96px + env(safe-area-inset-top)) clamp(20px,5vw,44px)
            calc(96px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; }
  /* margin:auto em vez de justify-content:center — assim, quando a tela final
     fica mais alta que o celular, o topo não é cortado. */
  .cv-dentro { width:100%; max-width:660px; margin:auto; }

  /* sem JavaScript, todas as perguntas aparecem empilhadas e o formulário
     continua funcionando como um formulário comum */
  html.cv-js .cv-passo { display:none; }
  html.cv-js .cv-passo.cv-vez { display:flex; }

  /* A troca. Indo para a frente: a que sai sobe, a que entra vem de baixo.
     Voltando, o contrário — é o que faz o "voltar" parecer voltar mesmo.
     --dir vale 1 indo, -1 voltando. Sem JavaScript nada disso existe e as
     perguntas aparecem todas, empilhadas.                                    */
  html.cv-js .cv-entra > * { opacity:0; transform:translateY(calc(30px * var(--dir, 1))); }
  .cv-passo.cv-abre > .cv-dentro > * { opacity:1; transform:none;
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:var(--d, 0ms); }
  .cv-passo.cv-sai > .cv-dentro > * { opacity:0; transform:translateY(calc(-26px * var(--dir, 1)));
    transition:opacity .3s ease-in, transform .3s ease-in; transition-delay:0ms; }

  /* --- a fala da Legado, acima da pergunta --- */
  .cv-fala { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
  .cv-fala i { flex:none; width:7px; height:7px; border-radius:999px; background:var(--vermelho);
    box-shadow:0 0 18px rgba(225,14,27,.6); }
  .cv-fala-conta { margin-left:auto; flex:none; font-weight:700; font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--apagado); white-space:nowrap; }
  .cv-fala span { font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--apagado); }

  /* --- a pergunta --- */
  .cv-pergunta { margin:0 0 14px; font-weight:700; letter-spacing:-.035em; line-height:1.06;
    font-size:clamp(28px,6.4vw,50px); }
  /* A Cormorant tem altura de x 28% menor que a Sora (40 contra 56, medido no
     mesmo corpo): no mesmo tamanho ela LE menor. 1.28em iguala o miolo das duas
     em 91% e deixa a maiuscula um tico mais alta, que e o certo para um italico.
     Peso 700 nas duas pontas: e o maximo que a Cormorant tem, e a Sora desceu de
     800 para nao atropelar (a Sora deixa 2,5x mais tinta que a Cormorant). */
  .cv-pergunta em { font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:700;
    font-size:1.28em; line-height:1; color:var(--vermelho);
    white-space:nowrap; }   /* a frase em italico e uma unidade: nunca parte no meio */

  /* No celular a frase em italico comeca em linha propria, inteira.
     Medido a 320, 360, 390 e 430px: a mais comprida ("data de nascimento")
     cabe com folga e nenhuma pergunta cria rolagem lateral. */
  @media (max-width:560px) {
    .cv-pergunta em::before { content:'\A'; white-space:pre; }
  }
  .cv-dica { margin:0 0 30px; font-size:clamp(14.5px,1.5vw,16.5px); line-height:1.7;
    color:var(--apagado); max-width:46ch; }
  .cv-dica b { color:var(--papel); font-weight:700; }

  /* --- o campo: uma linha, grande, sem caixa --- */
  .cv-campo { position:relative; margin:0 0 8px; }
  .cv-campo input, .cv-campo select {
    display:block; width:100%; min-height:60px; padding:10px 2px; background:transparent;
    border:0; border-bottom:1px solid var(--linha); border-radius:0; color:var(--papel);
    font-family:'Sora',sans-serif; font-weight:600; font-size:clamp(19px,4.6vw,26px);
    letter-spacing:-.02em; -webkit-appearance:none; appearance:none;
    transition:border-color .45s var(--ease); }
  /* o COMENTARIO e o unico campo de varias linhas. Herda a mesma moldura sem
     caixa dos outros, so que menor de corpo -- texto longo em 26px nao cabe. */
  .cv-campo textarea {
    display:block; width:100%; min-height:104px; padding:10px 2px; background:transparent;
    border:0; border-bottom:1px solid var(--linha); border-radius:0; color:var(--papel);
    font-family:'Sora',sans-serif; font-weight:500; font-size:clamp(17px,3.6vw,20px);
    line-height:1.5; letter-spacing:-.01em; resize:vertical; -webkit-appearance:none; appearance:none;
    transition:border-color .45s var(--ease); }
  .cv-campo textarea:focus { outline:none; border-bottom-color:rgba(247,247,242,.45); }
  .cv-campo textarea::placeholder { color:rgba(247,247,242,.26); font-weight:500; }
  .cv-conta-letras { display:block; margin:6px 0 0; font-size:12px; color:var(--apagado); }
  .cv-campo input::placeholder { color:rgba(247,247,242,.26); font-weight:500; }
  .cv-campo input:focus, .cv-campo select:focus { outline:none; border-bottom-color:rgba(247,247,242,.45); }
  /* o filete vermelho que cresce sob o campo em que a pessoa está */
  .cv-campo::after { content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--vermelho); transform:scaleX(0); transform-origin:left center;
    transition:transform .5s var(--ease); }
  .cv-campo:focus-within::after { transform:scaleX(1); }
  .cv-campo select { color:var(--papel);
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f7f2' stroke-width='2'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center; background-size:20px;
    padding-right:34px; }
  .cv-campo select option { background:var(--marinho); color:var(--papel); }
  /* o par cidade + estado divide a mesma tela */
  .cv-par { display:grid; gap:clamp(14px,3vw,26px); grid-template-columns:1fr; }
  @media (min-width:560px) { .cv-par { grid-template-columns:1fr 130px; } }
  .cv-rotulo { display:block; margin-bottom:2px; font-weight:700; font-size:10.5px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--apagado); }

  /* --- as opções --- */
  .cv-opcoes { display:grid; gap:10px; margin:0 0 8px; }
  .cv-opcao { position:relative; display:flex; align-items:flex-start; gap:14px;
    padding:16px 18px; background:rgba(247,247,242,.035); border:1px solid var(--linha);
    cursor:pointer; text-align:left;
    transition:border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); }
  .cv-opcao:hover { border-color:rgba(247,247,242,.4); background:rgba(247,247,242,.07);
    transform:translateY(-2px); }
  .cv-opcao input { position:absolute; width:1px; height:1px; opacity:0; }
  .cv-opcao .cv-marca-op { flex:none; width:19px; height:19px; margin-top:3px; border-radius:999px;
    border:1.6px solid rgba(247,247,242,.4);
    transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .cv-opcao.cv-escolhida { border-color:var(--vermelho); background:rgba(225,14,27,.12); }
  .cv-opcao.cv-escolhida .cv-marca-op { border-color:var(--vermelho); background:var(--vermelho);
    box-shadow:inset 0 0 0 3.5px var(--fundo); }
  .cv-opcao input:focus-visible ~ .cv-marca-op { outline:2px solid var(--papel); outline-offset:3px; }
  .cv-op-txt { min-width:0; font-size:15.5px; line-height:1.5; color:rgba(247,247,242,.86); }
  .cv-opcao.cv-escolhida .cv-op-txt { color:var(--papel); }
  /* a etiqueta vai SEMPRE em linha própria: colada no fim do texto ela some */
  .cv-etiq { display:block; width:-moz-fit-content; width:fit-content; margin-top:10px;
    padding:3px 9px; font-weight:700; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; }
  .cv-gratis { background:var(--vermelho); color:var(--papel); }
  .cv-pago { background:var(--ceu); color:var(--tinta); }

  /* --- o aceite --- */
  .cv-aceite { display:flex; align-items:flex-start; gap:14px; cursor:pointer; margin:0 0 10px;
    padding:18px; border:1px solid var(--linha); background:rgba(247,247,242,.035);
    transition:border-color .45s var(--ease), background .45s var(--ease); }
  .cv-aceite:hover { border-color:rgba(247,247,242,.4); }
  .cv-aceite input { position:absolute; width:1px; height:1px; opacity:0; }
  .cv-quadro { flex:none; width:22px; height:22px; margin-top:1px; border:1.6px solid rgba(247,247,242,.4);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s var(--ease), border-color .25s var(--ease); }
  .cv-quadro svg { opacity:0; transition:opacity .18s ease; }
  .cv-aceite.cv-marcado { border-color:var(--vermelho); background:rgba(225,14,27,.10); }
  .cv-aceite.cv-marcado .cv-quadro { background:var(--vermelho); border-color:var(--vermelho); }
  .cv-aceite.cv-marcado .cv-quadro svg { opacity:1; }
  .cv-aceite input:focus-visible ~ .cv-quadro { outline:2px solid var(--papel); outline-offset:3px; }
  .cv-aceite span { font-size:14.5px; line-height:1.65; color:rgba(247,247,242,.86); }
  .cv-aceite a { border-bottom:1.4px solid var(--vermelho); padding-bottom:1px; color:var(--papel); }

  /* --- o erro --- */
  .cv-erro { display:block; overflow:hidden; max-height:0; opacity:0; margin:0;
    font-size:13.5px; line-height:1.55; font-weight:600; color:#ff7a6a;
    transition:max-height .35s var(--ease), opacity .35s var(--ease), margin .35s var(--ease); }
  .cv-ruim .cv-erro { max-height:80px; opacity:1; margin:12px 0 0; }
  .cv-ruim .cv-campo { border-color:var(--vermelho); }
  .cv-ruim .cv-campo input, .cv-ruim .cv-campo select { border-bottom-color:var(--vermelho); }
  .cv-ruim .cv-campo::after { background:var(--vermelho); transform:scaleX(1); }
  .cv-treme { animation:cv-treme .4s ease; }
  @keyframes cv-treme { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)}
    50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }

  /* --- os botões --- */
  .cv-acoes { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; }
  .cv-avancar { position:relative; overflow:hidden; display:inline-flex; align-items:center;
    justify-content:center; gap:13px; min-height:58px; padding:0 32px; border:0;
    background:var(--vermelho); color:var(--papel); font-weight:700; font-size:13.5px;
    letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease); }
  .cv-avancar:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(225,14,27,.3); }
  .cv-avancar:active { transform:translateY(0); box-shadow:none; }
  .cv-avancar[disabled] { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
  .cv-avancar svg { transition:transform .28s var(--ease); }
  .cv-avancar:hover svg { transform:translateX(5px); }
  /* o brilho que atravessa o botão */
  .cv-avancar::before { content:''; position:absolute; top:0; left:-130%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
    transform:skewX(-18deg); }
  .cv-avancar:hover::before { animation:cv-brilho .85s ease; }
  @keyframes cv-brilho { to { left:150%; } }
  @media (max-width:520px) { .cv-avancar { width:100%; } }

  .cv-fraco { background:none; border:0; padding:6px 2px; color:var(--apagado); cursor:pointer;
    font-weight:600; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
    border-bottom:1px solid transparent; transition:color .45s var(--ease), border-color .45s var(--ease); }
  .cv-fraco:hover { color:var(--papel); border-bottom-color:var(--vermelho); }
  .cv-enter { display:none; margin-top:16px; font-size:12px; color:rgba(247,247,242,.4); }
  @media (min-width:760px) { .cv-enter { display:block; } }
  .cv-enter b { color:rgba(247,247,242,.7); font-weight:700; }

  /* --- o pé: a segurança fica em toda tela, presa embaixo ---
     Some enquanto a pessoa digita no celular, para não brigar com o teclado. */
  .cv-pe { position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:flex; align-items:flex-start; gap:11px;
    padding:34px clamp(20px,5vw,44px) calc(18px + env(safe-area-inset-bottom));
    font-size:12px; line-height:1.55; color:rgba(247,247,242,.42);
    background:linear-gradient(to top, var(--fundo) 0%, var(--fundo) 66%, rgba(12,23,41,0) 100%);
    transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .cv-pe > span { max-width:660px; }
  .cv-pe svg { flex:none; margin-top:1px; }
  .cv-pe b { color:rgba(247,247,242,.72); font-weight:700; }
  /* no celular o aviso fica na versão curta: comprido demais, ele rouba a tela */
  .cv-pe-mais { display:none; }
  @media (min-width:760px) { .cv-pe-mais { display:inline; } }
  @media (max-width:900px) {
    body.cv-digitando .cv-pe { opacity:0; transform:translateY(12px); pointer-events:none; }
  }

  /* ================================ O AVISO DO E-MAIL ========================
     Direto ao ponto: um e-mail do monday.com vai chegar, e é por ele que a
     coisa continua. Nada aqui pode PARECER botão — a versão anterior imitava
     um e-mail de verdade e a pessoa tentava clicar no convite falso.         */
  /* os passos, um embaixo do outro: instrução se lê em lista, não em colunas */
  .cv-lista { list-style:none; margin:32px 0 0; padding:0; max-width:600px; }
  .cv-lista li { display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--linha); }
  .cv-lista li:first-child { border-top-color:var(--vermelho); }
  .cv-lista b { flex:none; width:32px; font-weight:800; font-size:19px; letter-spacing:-.04em;
    line-height:1.4; color:var(--vermelho); }
  .cv-lista span { font-size:clamp(14.5px,1.5vw,15.5px); line-height:1.65;
    color:rgba(247,247,242,.78); }
  .cv-lista strong { color:var(--papel); font-weight:700; }

  /* O e-mail que a pessoa digitou, em cima do filme. Pequeno, mas e a UNICA
     coisa da tela final que muda de pessoa para pessoa -- e onde quem errou o
     endereco percebe. Quebra em qualquer lugar: e-mail comprido nao estoura. */
  .cv-filme-eco { max-width:340px; margin:0 0 14px; display:block; }
  .cv-filme-eco span { display:block; margin-bottom:8px;
    font-weight:700; font-size:10.5px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--apagado); }
  .cv-filme-eco b { display:block; font-weight:700; letter-spacing:-.025em;
    font-size:clamp(19px,4.8vw,24px); line-height:1.2;
    color:var(--papel); overflow-wrap:anywhere; }

  /* --- o filme da tela final -------------------------------------------------
     Entra PARADO e toca no toque, COM SOM. Nao e escolha de gosto: navegador
     nenhum deixa som comecar sozinho, e a narracao aqui e a mensagem -- entao
     comecar mudo seria perder a voz de quem nao tocar em nada.
     Quadrado e sem canto arredondado, como o resto da casa. O botao e um
     quadrado vermelho, a mesma forma do selo de ok que a tela final tinha antes
     de ser enxugada. Sem rotulo, so o icone. */
  .cv-filme { position:relative; max-width:340px; margin:30px 0 0;
    border:1px solid var(--linha); background:#0c1729; }
  .cv-filme video { display:block; width:100%; aspect-ratio:9/16; height:auto;
    max-height:min(66vh, 560px); object-fit:contain; background:#0c1729; }
  /* (06/09) MORREU O QUADRADO VERMELHO: quando o filme espera um toque, o
     quadro fica LIMPO — a capa vira um alvo invisivel cobrindo o filme
     inteiro (tocar em qualquer lugar toca o filme) e quem chama e o chip
     "Assistir" no pe, o mesmo do som. Nada tapa o filme, nunca. */
  .cv-filme-capa { position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; width:100%; padding:0; border:0; cursor:pointer;
    color:var(--papel); font-family:inherit;
    background:transparent;
    transition:opacity .45s var(--ease); }
  .cv-filme-capa i { display:none; }
  .cv-filme-capa:focus-visible { outline:2px solid var(--papel); outline-offset:-4px; }
  /* A capa some por tres caminhos ao mesmo tempo, de proposito: opacidade para
     a transicao ficar suave, pointer-events para nao roubar o toque, e
     visibility para garantir que ela SAIA mesmo se a transicao de opacidade
     nao rodar (ha navegador que engasga nisso). */
  /* O chip de som. Quadrado e em versal como o .cv-etiq da casa -- chip aqui
     nao e pilula. Fica FLUTUANDO sobre o filme, no rodape dele, e some no
     instante em que o som entra. Alvo de toque de 44px, que e o minimo. */
  .cv-filme-chip { position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
    border:0; cursor:pointer; font-family:inherit;
    background:var(--vermelho); color:var(--papel);
    font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
    opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease), visibility 0s linear .4s; }
  .cv-filme.cv-filme-mudo .cv-filme-chip {
    opacity:1; visibility:visible; transition:opacity .4s var(--ease) .5s, visibility 0s; }
  /* filme parado a espera de gesto: o chip e o unico convite */
  .cv-filme:not(.cv-filme-toca) .cv-filme-chip {
    opacity:1; visibility:visible; transition:opacity .4s var(--ease) .2s, visibility 0s; }
  .cv-filme-chip svg { flex:none; }
  .cv-filme-chip:focus-visible { outline:2px solid var(--papel); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce) { .cv-filme-chip { transition:none; } }

  .cv-filme.cv-filme-toca .cv-filme-capa {
    opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .45s var(--ease), visibility 0s linear .45s; }
  @media (prefers-reduced-motion: reduce) {
    .cv-filme-capa, .cv-filme-capa i { transition:none; }
  }

  /* --- a tela final --- */
  .cv-selo { display:inline-flex; }
  .cv-selo img { display:block; height:46px; width:auto; border-radius:8px; }
  .cv-selo { transition:transform .45s var(--ease); }
  .cv-selo:hover { transform:translateY(-3px); }

  /* --- quem não quer movimento, não vê movimento --- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; }
    .cv-ab { display:none !important; }
    .cv-entra > *, .cv-passo > .cv-dentro > * { opacity:1 !important; transform:none !important; }
  }