

.tva{
  --tva-vinho:#09172E;
  --tva-terra:#9A6C31;
  --tva-terra-ink:#815A29;
  --tva-rec:#2E4771;
  --tva-ink:#121B2A;
  --tva-ink2:#394760;
  --tva-line:#DFD3B1;
  --tva-card:#FAFBFB;
  --tva-pa:#F4F4F1;
  --tva-zap:#128C4B;

  border:1.5px solid var(--tva-line);border-radius:16px;
  background:var(--tva-card);padding:clamp(18px,2.4vw,26px);
  color:var(--tva-ink)
}
.tva[hidden]{display:none}

.tva__hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.tva__ic{
  flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:13px;
  background:rgba(154,108,49,.12);color:var(--tva-terra-ink);font-size:21px
}
.tva__t{margin:0;font-size:19px;font-weight:700;line-height:1.3;color:var(--tva-vinho)}
.tva__s{margin:5px 0 0;font-size:16px;line-height:1.5;color:var(--tva-ink2)}

.tva__palco[hidden]{display:none}

.tva-b{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:56px;padding:14px 26px;border:0;border-radius:14px;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background-color .18s,border-color .18s,transform .18s
}
.tva-b:active{transform:translateY(1px)}
.tva-b--rec{
  width:100%;min-height:96px;font-size:19px;
  background:var(--tva-vinho);color:#F6F7F9
}
.tva-b--rec:hover{background:#162136}
.tva-b--rec i{font-size:26px}
.tva-b--parar{width:100%;background:var(--tva-rec);color:#fff}
.tva-b--parar:hover{background:#263A5C}
.tva-b--env{flex:1 1 auto;background:var(--tva-terra);color:#fff}
.tva-b--env:hover{background:var(--tva-terra-ink)}
.tva-b--of{
  flex:0 0 auto;background:transparent;color:var(--tva-ink);
  border:1.5px solid var(--tva-line)
}
.tva-b--of:hover{border-color:var(--tva-terra);background:var(--tva-pa)}
.tva-b--zap{width:100%;background:var(--tva-zap);color:#fff}
.tva-b--zap:hover{background:#0E6E3B}
.tva-b[disabled]{opacity:.55;cursor:default}

.tva-b--parar[disabled]{
  opacity:1;background:var(--tva-pa);color:var(--tva-ink2);
  border:1.5px solid var(--tva-line);cursor:default
}
.tva-b--parar[disabled]:hover{background:var(--tva-pa)}

.tva-rec__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tva-rec__pt{
  flex:none;width:15px;height:15px;border-radius:50%;background:var(--tva-rec);
  animation:tva-pulso 1.1s ease-in-out infinite
}
@keyframes tva-pulso{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,71,113,.5)}
  50%    {transform:scale(1.14);box-shadow:0 0 0 9px rgba(46,71,113,0)}
}
.tva-rec__lb{font-size:17px;font-weight:700;color:var(--tva-rec);letter-spacing:.02em}
.tva-rec__t{
  margin-left:auto;font-size:22px;font-weight:700;color:var(--tva-ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em
}
.tva-rec__t small{font-size:15px;font-weight:600;color:var(--tva-ink2)}

.tva-onda{
  width:100%;height:88px;display:block;border-radius:12px;
  background:var(--tva-pa);border:1px solid var(--tva-line);margin-bottom:14px
}

.tva-rec__bar{height:6px;border-radius:3px;background:var(--tva-line);overflow:hidden;margin-bottom:16px}
.tva-rec__fill{display:block;height:100%;width:0;background:var(--tva-rec);transition:width .25s linear}

.tva-ouv{
  display:grid;gap:13px;padding:15px;border-radius:13px;
  background:var(--tva-pa);border:1px solid var(--tva-line);margin-bottom:16px
}
.tva-ouv__lb{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;color:var(--tva-ink)}
.tva-ouv__lb i{color:var(--tva-terra-ink)}
.tva-ouv audio{width:100%;min-height:44px}
.tva__acts{display:flex;flex-wrap:wrap;gap:11px}

.tva-f{display:grid;gap:7px;margin-bottom:15px}
.tva-f label,.tva-f .tva-f__lb{display:block;font-size:16px;font-weight:650;color:var(--tva-ink)}
.tva-f input{
  width:100%;min-height:56px;padding:14px 16px;font:inherit;font-size:17px;
  color:var(--tva-ink);background:var(--tva-pa);
  border:1.5px solid var(--tva-line);border-radius:12px
}
.tva-f input:focus{border-color:var(--tva-terra);outline:none;box-shadow:0 0 0 3px rgba(154,108,49,.16)}
@media(min-width:620px){.tva__dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}}

.tva-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tva-lgpd{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;
  font-size:15px;line-height:1.5;color:var(--tva-ink2)
}
.tva-lgpd input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--tva-terra)}

.tva-msg{
  display:none;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:12px;
  font-size:16px;line-height:1.5;margin-bottom:15px
}
.tva-msg.on{display:flex}
.tva-msg--erro{background:#EFF0F3;border:1px solid #AFC3E7;color:#20314e}
.tva-msg--ok{background:#EDF6EF;border:1px solid #B9DCC3;color:#1C5C31}
.tva-msg i{margin-top:2px;flex:none}

.tva-fim{text-align:center;padding:6px 0 2px}
.tva-fim__ic{
  width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:#EDF6EF;color:#1C5C31;font-size:28px
}
.tva-fim__t{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--tva-vinho)}
.tva-fim__s{margin:0 0 18px;font-size:16px;line-height:1.55;color:var(--tva-ink2)}

.tva__dica{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--tva-ink2)}

@media(prefers-reduced-motion:reduce){
  .tva-rec__pt{animation:none}
  .tva-b:active{transform:none}
}

.tvh-sec--dark .tva{box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}

.tva-tr{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  background:var(--tva-pa);border:1px solid var(--tva-line)
}
.tva-tr__lb{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font-size:15px;font-weight:700;color:var(--tva-terra-ink)
}
.tva-tr__lb i{font-size:14px}
.tva-tr__tx{
  margin:0;max-height:104px;overflow-y:auto;
  font-size:16px;line-height:1.55;color:var(--tva-ink);
  
  min-height:1.55em
}
.tva-tr__tx:empty::after{
  content:"Pode falar…";color:var(--tva-ink2);font-style:normal
}

.tva-f--tr{margin-bottom:14px}
.tva-f--tr textarea{
  width:100%;padding:12px 14px;border-radius:12px;resize:vertical;
  border:1.5px solid var(--tva-line);background:#fff;
  font:inherit;font-size:16px;line-height:1.55;color:var(--tva-ink)
}
.tva-f--tr textarea:focus-visible{
  outline:0;border-color:var(--tva-terra);box-shadow:0 0 0 4px rgba(154,108,49,.15)
}
.tva-f--tr .tva-f__lb b{color:var(--tva-terra-ink);font-weight:700}
.tva-f__hint{
  display:block;margin-top:6px;font-size:15px;line-height:1.45;color:var(--tva-ink2)
}
