/* ==========================================================================
   RECADO EM AUDIO  ·  prefixo .tva-
   --------------------------------------------------------------------------
   Existe porque escrever e a barreira. Quem tem 70 anos, tremor nas maos ou
   pouca escolaridade desiste de um formulario e nao desiste de falar.

   Tres decisoes que mandam no desenho:
   1. UM botao principal por vez na tela: grava, ouve, envia.
   2. O estado gravando precisa ser obvio SEM cor: ponto pulsando, relogio
      correndo e as barras mexendo. Quem nao distingue vermelho ainda ve.
   3. Alvo grande em tudo. O botao de gravar tem 96px, os outros 56px.

   19/09/2026: ESTE ARQUIVO E O DESENHO DO GRAVADOR EM TODO O SITE. Antes
   havia tres roupas diferentes (home, /contato escura e o modal do
   microfone), e a escura da /contato so tinha sido desenhada ate o estado
   "gravando": na revisao, rotulos, aceite e "Gravar de novo" saiam em tinta
   escura sobre o verde escuro e sumiam. As outras paginas agora so mudam
   MOLDURA (fundo, borda, espaco), nunca cor de botao ou de texto.
   Linguagem de cor, a mesma do resto do site:
     gravar, parar e o ponto pulsando: vermelho do microfone do cabecalho
       (#B5462E, `.agc-mic`), o sinal universal de "rec";
     enviar: verde profundo com creme (acao sobre superficie clara);
     gravar de novo: contorno neutro, secundario;
     abrir o WhatsApp: verde do WhatsApp um degrau mais fundo (4,6:1).

   Prefixo `tva-` e nao `tv-`: `gt-chrome.css` ja define `.tv-btn` global e
   ganharia o desempate (esta escrito no CLAUDE.md, ja quebrou o layout uma vez).
   ========================================================================== */

.tva{
  --tva-rec:#B5462E;
  --tva-rec-d:#963721;
  --tva-acao:#1B3129;
  --tva-acao-d:#122720;
  --tva-terra-ink:#6F5C44;
  --tva-ink:#162620;
  --tva-ink2:#3F4A44;
  --tva-line:#DBD1C4;
  --tva-card:#FAF9F8;
  --tva-pa:#F3F0EC;
  --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}

/* ── cabecalho ─────────────────────────────────────────────────────────── */
.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(181,70,46,.10);color:var(--tva-rec);font-size:21px
}
.tva__t{margin:0;font-size:19px;font-weight:600;line-height:1.3;color:var(--tva-acao)}
.tva__s{margin:5px 0 0;font-size:16px;line-height:1.5;color:var(--tva-ink2)}

/* ── palcos: so um aparece por vez ─────────────────────────────────────── */
.tva__palco[hidden]{display:none}

/* ── botoes ────────────────────────────────────────────────────────────── */
.tva-b{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;min-height:56px;padding:14px 24px;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{
  min-height:96px;font-size:19px;
  background:var(--tva-rec);color:#F7F5F2;
  box-shadow:0 16px 30px -18px rgba(150,55,33,.8)
}
.tva-b--rec:hover{background:var(--tva-rec-d)}
.tva-b--rec i{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.16);font-size:21px
}
@media (prefers-reduced-motion:no-preference){
  .tva-b--rec i{animation:tvaAnel 2.2s cubic-bezier(.22,1,.36,1) infinite}
}
@keyframes tvaAnel{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.42)}
  60%    {box-shadow:0 0 0 12px rgba(255,255,255,0)}
}
.tva-b--parar{background:var(--tva-rec);color:#F7F5F2}
.tva-b--parar:hover{background:var(--tva-rec-d)}
.tva-b--env{background:var(--tva-acao);color:#F7F5F2}
.tva-b--env:hover{background:var(--tva-acao-d)}
.tva-b--of{
  background:transparent;color:var(--tva-ink);
  border:1.5px solid var(--tva-line)
}
.tva-b--of:hover{border-color:var(--tva-terra-ink);background:var(--tva-pa)}
.tva-b--zap{background:var(--tva-zap);color:#fff}
.tva-b--zap:hover{background:#0E6E3B}
.tva-b[disabled]{opacity:.55;cursor:default}
/* Enquanto nao chega aos 20 segundos o botao de parar fica travado mostrando
   quanto falta. Opacidade sozinha nao basta: em vermelho a 55% ele ainda
   parece clicavel para quem enxerga pouco. Fica neutro, e volta ao vermelho no
   momento em que a gravacao pode ser encerrada. */
.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)}

/* principal em cima, secundario embaixo, os dois na largura toda */
.tva__acts{display:grid;gap:10px}

/* ── gravando ──────────────────────────────────────────────────────────── */
.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(181,70,46,.5)}
  50%    {transform:scale(1.14);box-shadow:0 0 0 9px rgba(181,70,46,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)}

/* a onda: canvas, porque sao dezenas de barras a 60 quadros e DOM nao aguenta */
.tva-onda{
  width:100%;height:88px;display:block;border-radius:12px;
  background:var(--tva-pa);border:1px solid var(--tva-line);margin-bottom:14px
}
/* barra de tempo restante: mostra que a gravacao tem fim, sem contar ao contrario */
.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}

/* ── ouvir o que gravou ────────────────────────────────────────────────── */
.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}

/* ── nome e whatsapp ───────────────────────────────────────────────────── */
.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:#fff;
  border:1.5px solid var(--tva-line);border-radius:12px
}
.tva-f input:focus{border-color:var(--tva-acao);outline:none;box-shadow:0 0 0 4px rgba(27,49,41,.13)}
@media(min-width:620px){.tva__dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}}

/* a isca fica FORA da tela, nunca com display:none: leitor de tela pula pelo
   aria-hidden e o preenchimento automatico do navegador nao a enxerga aqui */
.tva-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* o aceite e um cartao inteiro clicavel, como no questionario e no popup */
.tva-lgpd{
  display:flex;gap:12px;align-items:flex-start;margin:2px 0 16px;padding:14px;
  border:1.5px solid var(--tva-line);border-radius:14px;background:#fff;cursor:pointer;
  font-size:15.5px;line-height:1.5;color:var(--tva-ink2)
}
.tva-lgpd:has(input:checked){border-color:var(--tva-acao);background:#F6F8F6}
.tva-lgpd input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--tva-acao)}

/* ── recados de estado ─────────────────────────────────────────────────── */
.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:#FBEFEC;border:1px solid #EBC6BB;color:#8E2F1C}
.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:600;color:var(--tva-acao)}
.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}
}

/* No escuro (a secao de contato da home e vinho) o cartao continua claro de
   proposito: campo de formulario claro e o que este publico reconhece. */
.tvh-sec--dark .tva{box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}

/* Na /contato o gravador e o caminho alternativo ao formulario: um filete
   vermelho no topo e sombra o destacam do papel em volta sem trocar a cor
   de nada la dentro (era um cartao escuro inteiro, e metade dele ficava
   ilegivel). */
#ct .tva{
  border-top:4px solid var(--tva-rec);
  box-shadow:0 24px 50px -34px rgba(12,22,18,.45)
}