/* 11 · CONVERSA · prefixo .cvs
   O fecho: laranja, só preto por cima. Três campos e um botão num painel preto. O símbolo é o
   supergráfico: preto, livre à direita do formulário, recortado pela borda direita e inferior.
   Textura e movimento: hachura preta de 15° no fundo (com paralaxe e deslize pelo ponteiro), luz
   mais clara sob o cursor, título que sobe em linhas, painel por cortina, botão magnético, traço
   que cresce no campo em foco, símbolo com paralaxe e eco em contorno, e o corte de 15° que varre
   o painel quando o envio é aceito. Estados iniciais só sob html.mov. */
.cvs{--cvs-f:clamp(2rem,10.3vw,4.5rem);--secao-y:clamp(4.5rem,7.5vw,7rem);--bh:clamp(40px,5vw,72px);--cvs-e:cubic-bezier(.16,1,.3,1);
  overflow:hidden;isolation:isolate;padding-top:calc(var(--secao-y) + var(--bh)*.6)}
.cvs .rotulo{margin-bottom:var(--e-6)}

/* ---------- borda superior: o preto da seção anterior desce por um degrau de 15° que corre com a rolagem ---------- */
.cvs-borda{--bx:calc(6% + (1 - var(--p,.45))*84%);position:absolute;left:0;right:0;top:-1px;height:var(--bh);background:var(--c-preto);pointer-events:none;
  clip-path:polygon(0 0,calc(var(--bx) + var(--bh)*var(--tan15)) 0,var(--bx) 100%,0 100%)}

/* ---------- fundo: hachura preta de 15° e luz sob o cursor ---------- */
.cvs-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cvs-desliza{position:absolute;inset:-90px -40px;transform:translate3d(calc(var(--sx,0)*-16px),calc(var(--sy,0)*-10px),0)}
.cvs-hachura{position:absolute;inset:0;
  background-image:repeating-linear-gradient(105deg,transparent 0 21px,color-mix(in srgb,var(--c-preto) 17%,transparent) 21px 22px);
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,var(--c-preto) 58%);mask-image:linear-gradient(100deg,transparent 4%,var(--c-preto) 58%)}
.cvs-luz{position:absolute;left:-340px;top:-340px;width:680px;height:680px;opacity:0;transform:translate3d(var(--fx,50vw),var(--fy,300px),0);transition:opacity 500ms var(--curva-entrada);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c-laranja-claro) 78%,transparent),transparent)}
.cvs.com-foco .cvs-luz{opacity:1}

/* ---------- chamada ---------- */
.cvs-titulo{font-size:var(--cvs-f);line-height:.98;margin-left:-.035em;text-wrap:wrap}
.cvs-l{display:block;position:relative;width:fit-content;max-width:100%}
/* a máscara de cada linha tem folga para o itálico do corte e para acentos e cedilha */
.cvs-titulo .lin{padding:.1em .14em .2em .04em;margin:-.1em -.14em -.2em -.04em}
.cvs-titulo .cvs-l2 .lin:nth-child(1)>span{--i:2}
.cvs-titulo .cvs-l2 .lin:nth-child(2)>span{--i:3}
.cvs-lead{margin-top:var(--e-6);color:var(--texto)}

/* ---------- painel e formulário ---------- */
.cvs-corpo{margin-top:var(--e-8);row-gap:var(--e-4)}
.cvs-painel,.cvs-ou{grid-column:1/-1}
.cvs-painel{position:relative;border-radius:var(--r-superficie);padding:var(--e-6) var(--e-4)}
.cvs-form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-4)}
.cvs-form .campo>label{font-size:var(--t-pequeno);transition:color 300ms var(--curva-entrada)}
.cvs-form .campo input{min-height:56px;font-size:1.0625rem}
/* traço laranja que cresce na base do campo em foco */
.cvs-entrada{position:relative;display:block}
.cvs-entrada::after{content:"";position:absolute;left:5px;right:5px;bottom:0;height:2px;background:var(--acento);pointer-events:none;transform:scaleX(0);transform-origin:0 50%;transition:transform 600ms var(--cvs-e)}
.cvs-entrada:focus-within::after{transform:scaleX(1)}
.cvs-form .campo:focus-within>label{color:var(--acento)}
.cvs-enviar{position:relative;overflow:hidden;min-height:56px;margin-top:var(--e-2);padding-inline:var(--e-3);font-size:1rem}
/* reflexo de 15° que cruza o botão quando o ponteiro chega */
.cvs-enviar::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:26%;background:var(--c-laranja-claro);pointer-events:none;transform:skewX(-15deg) translate3d(-120%,0,0)}
.cvs-enviar>*{position:relative}
@media (hover:hover){
  .cvs-enviar:hover::before{transform:skewX(-15deg) translate3d(640%,0,0);transition:transform 800ms cubic-bezier(.65,0,.35,1)}
}
/* ímã do kit (data-ima): devolve as transições do botão e faz o rótulo andar um pouco mais que a caixa */
.mov-ponteiro .cvs-painel .cvs-enviar{transition:transform 300ms var(--cvs-e),background-color var(--dur-micro) var(--curva-entrada)}
.mov-ponteiro .cvs-enviar .cvs-enviar-t{transform:translate3d(calc(var(--ix,0px)*.35),calc(var(--iy,0px)*.35),0);transition:transform 300ms var(--cvs-e)}
.cvs-enviando .campo{pointer-events:none}
.cvs-enviando .campo input{border-color:var(--linha);color:var(--texto-2)}
.cvs-enviando .btn-seta{display:none}
.cvs-status{display:flex;align-items:center;gap:var(--e-3);grid-column:1/-1;font-size:var(--t-pequeno);line-height:1.4;color:var(--texto)}
.cvs-status:empty{display:none}
.cvs-status.cvs-erro{color:var(--acento)}
.cvs-status.cvs-erro::before{content:"";flex:none;width:6px;height:6px;background:var(--acento)}
.cvs-ou{font-size:1.0625rem;color:var(--texto)}
.cvs-ou .link{display:inline-block;padding-block:10px;font-weight:700} /* alvo de toque de 44 px */

/* ---------- retorno: sucesso ou falha, no lugar do formulário ---------- */
.cvs-retorno{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.cvs-retorno:focus{outline:none} /* alvo de foco programático, não é controle: o leitor de tela anuncia o grupo */
.cvs-ret-t{font-size:clamp(1.75rem,2.6vw,2.25rem);line-height:1.1;letter-spacing:-.035em}
.cvs-ret-p{margin-top:var(--e-3);max-width:32em;font-size:1.0625rem;color:var(--texto-2)}
.cvs-resumo{align-self:stretch;margin:var(--e-6) 0 0;padding:var(--e-4);border:1px solid var(--linha);border-radius:var(--r-moldura);color:var(--texto);font-size:var(--t-pequeno);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.cvs-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4);margin-top:var(--e-6)}
.cvs-retorno .cvs-status{margin-top:var(--e-4)}
@media (max-width:479px){
  .cvs-acoes{align-self:stretch;flex-direction:column;align-items:stretch}
  .cvs-acoes .btn-texto{align-self:flex-start}
}
/* o retorno sobe em sequência quando aparece (a animação recomeça a cada vez que deixa de estar hidden) */
.mov .cvs-retorno>*{animation:cvs-sobe 800ms var(--cvs-e) 140ms backwards}
.mov .cvs-retorno>:nth-child(2){animation-delay:210ms}
.mov .cvs-retorno>:nth-child(n+3){animation-delay:280ms}
@keyframes cvs-sobe{from{opacity:0;transform:translate3d(0,18px,0)}}

/* ---------- envio aceito: um corte laranja de 15° varre o painel; a troca acontece debaixo dele ---------- */
.cvs-varre{display:none;position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none}
.cvs-varre>i{position:absolute;top:-2%;bottom:-2%;left:-30%;width:160%;background:var(--marca);transform:skewX(-15deg) translate3d(-112%,0,0)}
.mov .cvs-varrendo .cvs-varre{display:block}
.mov .cvs-varrendo .cvs-varre>i{animation:cvs-varre 1250ms cubic-bezier(.65,0,.35,1) both}
@keyframes cvs-varre{0%{transform:skewX(-15deg) translate3d(-112%,0,0)}40%,60%{transform:skewX(-15deg) translate3d(0,0,0)}100%{transform:skewX(-15deg) translate3d(112%,0,0)}}

/* o polígono fechado da cortina do kit ainda deixa um fio de 1 px: o painel some até a entrada */
.mov .cvs-painel:not(.na-vista){opacity:0}

/* ---------- símbolo ---------- */
.cvs-marca{position:relative}
.cvs-par,.cvs-flutua{position:absolute;inset:0}
.cvs-flutua{transform:translate3d(calc(var(--sx,0)*-14px),calc(var(--sy,0)*-10px),0)}
/* eco: o mesmo desenho em contorno, deslocado; anda mais que o símbolo e dá profundidade */
.cvs-flutua-2{transform:translate3d(calc(16px + var(--sx,0)*-40px),calc(14px + var(--sy,0)*-26px),0)}
.cvs-simbolo{position:absolute;top:0;max-width:none;color:var(--texto);pointer-events:none;overflow:visible}
.cvs-eco{opacity:.55}
/* entrada: o símbolo abre por cortina de 15° e o eco aparece depois */
.mov .cvs-simbolo{transition:clip-path 1200ms cubic-bezier(.65,0,.35,1) 120ms,opacity 700ms var(--curva-entrada) 900ms}
.mov .cvs-marca:not(.na-vista) .cvs-simbolo:not(.cvs-eco){clip-path:polygon(0 0,0 0,-27% 100%,0 100%)}
.mov .cvs-marca.na-vista .cvs-simbolo:not(.cvs-eco){clip-path:polygon(0 0,127% 0,100% 100%,0 100%)}
.mov .cvs-marca:not(.na-vista) .cvs-eco{opacity:0}
/* envio aceito: o eco se abre e some, como uma onda */
.mov .cvs-ok .cvs-eco{animation:cvs-onda 1300ms var(--cvs-e) both}
@keyframes cvs-onda{0%{scale:1;opacity:.55}70%{scale:1.1;opacity:0}71%{scale:1;opacity:0}100%{scale:1;opacity:.55}}

/* ---------- a partir de 560: dois campos por linha; o botão fecha a grade ---------- */
@media (min-width:560px){
  .cvs-painel{padding:var(--e-8)}
  .cvs-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--e-4)}
  .cvs-enviar{align-self:start;margin-top:calc(var(--t-pequeno)*1.4 + 6px)} /* na linha dos campos, abaixo da altura do rótulo */
}

/* ---------- até 1023: o símbolo fecha a seção, depois do formulário ---------- */
@media (max-width:1023px){
  .cvs{padding-bottom:0}
  .cvs-marca{grid-column:1/-1;height:clamp(150px,44vw,360px);margin-top:var(--e-4)}
  .cvs-simbolo{right:calc(-1*var(--margem) - 7vw);width:clamp(260px,72vw,620px);height:auto}
}

/* ---------- a partir de 720: chamada em duas linhas, com o recuo de 15° do hero ---------- */
@media (min-width:720px){
  .cvs{--cvs-f:min(6.3vw,5.67rem)}
  .cvs-titulo{white-space:nowrap}
  .cvs-titulo .lin{display:inline-block;vertical-align:top}
  .cvs-l1{margin-left:calc(.98em*var(--tan15))}
  .cvs-corpo{margin-top:40px}
}

/* ---------- a partir de 1024: formulário nas colunas 1 a 6, símbolo livre nas colunas 8 a 12 ---------- */
@media (min-width:1024px){
  .cvs{--cvs-w:min(100vw - 2*var(--margem),var(--largura))}
  .cvs-painel,.cvs-ou{grid-column:1/span 6}
  .cvs-marca{grid-column:8/span 5;grid-row:1/span 2}
  /* altura: o que sobra ao lado do formulário, mais o respiro da seção e 120 px de sangria por baixo;
     nunca menor que a largura que garante 80 px de sangria pela direita */
  .cvs-simbolo{left:0;width:auto;
    height:max(calc(100% + var(--secao-y) + 120px),calc((50vw - var(--cvs-w)/12 - var(--calha)*7/12 + 80px)/1.088))}
}
@media (min-width:1024px) and (max-width:1239px){
  .cvs-painel{grid-column:1/span 7}
}