/* =====================================================================
   BluHertz · faixa "Ficou com alguma dúvida?" (tema Sinal) · bloco reutilizável
   Markup: entre <!-- bh:duvida:start --> e <!-- bh:duvida:end --> (igual em todas as páginas; muda só o texto da mensagem do link).
   Depende de: /css/brand.css (tokens e fontes), /js/brand.js (toca a conversa quando entra
   na tela; o <script data-bh-sinal> do <head> arma antes da 1ª pintura) e /js/main.js (evento whatsapp_click e barra móvel que se esconde aqui).
   Classes com prefixo bh-duvida para não colidir com o .duvida/.chat legado do styles.css.
   Estado padrão = conversa completa (sem JS, com movimento reduzido e no fim da animação).
   ===================================================================== */
.bh-duvida{position:relative;margin:0;padding:96px 0;background:var(--gelo);color:var(--tinta);font-family:var(--font-texto);text-align:left;border-top:1px solid var(--linha)}
.bh-duvida *,.bh-duvida *::before,.bh-duvida *::after{box-sizing:border-box}
.bh-duvida p{margin:0}
.bh-duvida__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.bh-duvida__rotulo{margin:0 0 18px!important;font:500 12px/1.6 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--grafite)}
.bh-duvida .bh-duvida__titulo{margin:0;font:600 clamp(30px,3.4vw,44px)/1.15 var(--font-titulo);letter-spacing:-.02em;color:var(--tinta);text-transform:none}
.bh-duvida__sub{max-width:34ch;margin:18px 0 28px!important;font-size:17px;line-height:1.65;color:var(--grafite)}
.bh-duvida__botao{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:15px 24px;border:1px solid transparent;border-radius:var(--raio);background:var(--azul);color:var(--branco)!important;font:500 15px/1.4 var(--font-texto);text-decoration:none!important;text-align:center;transition:box-shadow .3s ease,transform .2s ease}
.bh-duvida__botao:hover{box-shadow:0 0 0 4px #00e5ff14,0 0 22px #00e5ff26;transform:translateY(-1px)}
.bh-duvida__botao:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
.bh-duvida__wa{width:20px;height:20px;flex:none}
.bh-duvida__micro{margin-top:14px!important;font-size:13px;line-height:1.6;color:var(--grafite)}

/* Painel da conversa (ilustração, aria-hidden) */
.bh-duvida__painel{width:100%;max-width:440px;justify-self:end;background:var(--navy-900);border:1px solid var(--linha-noite);border-radius:var(--raio);overflow:hidden;color:var(--nevoa);box-shadow:0 26px 60px #06123333}
.bh-duvida__barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--linha-noite);font:500 12px/1.5 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--aco)}
.bh-duvida__selo{padding:2px 7px;border:1px solid var(--linha-noite);border-radius:4px}
.bh-duvida__contato{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linha-noite);background:var(--navy)}
.bh-duvida__contato img{display:block;width:48px;height:48px;border-radius:50%;flex:none;max-width:none}
.bh-duvida__contato p{display:grid;gap:1px;line-height:1.3}
.bh-duvida__contato strong{font:600 16px/1.3 var(--font-titulo);color:var(--branco);letter-spacing:0}
.bh-duvida__contato small{font:500 12px/1.4 var(--font-mono);color:var(--aco)}
.bh-duvida__msgs{display:flex;flex-direction:column;gap:12px;min-height:212px;padding:20px 18px 24px;background-color:var(--navy-900);background-image:linear-gradient(#1d346166 1px,transparent 1px),linear-gradient(90deg,#1d346166 1px,transparent 1px);background-size:32px 32px}
.bh-duvida__msg{max-width:86%;padding:11px 14px;border:1px solid var(--linha-noite);font-size:16px;line-height:1.45;color:var(--nevoa)}
.bh-duvida__msg--voce{align-self:flex-end;background:var(--linha-noite);border-radius:12px 12px 4px 12px}
.bh-duvida__resposta{display:grid;justify-items:start}
.bh-duvida__resposta>*{grid-area:1/1}
.bh-duvida__msg--nos{background:var(--navy);border-left:2px solid var(--ciano);border-radius:12px 12px 12px 4px}
.bh-duvida__msg--digitando{display:flex;align-self:start;gap:5px;padding:14px 16px;background:var(--navy);border-radius:12px 12px 12px 4px;opacity:0}
.bh-duvida__msg--digitando span{width:7px;height:7px;border-radius:50%;background:var(--aco)}

/* Antes de tocar (html.sinal-arma só existe quando o movimento é permitido) */
html.sinal-arma .bh-duvida__painel:not(.is-playing) .bh-duvida__msg--voce,html.sinal-arma .bh-duvida__painel:not(.is-playing) .bh-duvida__msg--nos{opacity:0;transform:translateY(8px)}
/* !important: as páginas legadas zeram animações com .bh-site.bh-legacy-page * (brand.css). */
@media (prefers-reduced-motion:no-preference){
  .bh-duvida__painel.is-playing .bh-duvida__msg--voce{animation:bh-duvida-entra .4s .3s both!important}
  .bh-duvida__painel.is-playing .bh-duvida__msg--digitando{animation:bh-duvida-digita 1.4s 1s both!important}
  .bh-duvida__painel.is-playing .bh-duvida__msg--digitando span{animation:bh-duvida-ponto .9s 1s 2 both!important}
  .bh-duvida__painel.is-playing .bh-duvida__msg--digitando span:nth-child(2){animation-delay:1.15s!important}
  .bh-duvida__painel.is-playing .bh-duvida__msg--digitando span:nth-child(3){animation-delay:1.3s!important}
  .bh-duvida__painel.is-playing .bh-duvida__msg--nos{animation:bh-duvida-entra .4s 2.35s both!important}
}
@keyframes bh-duvida-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bh-duvida-digita{0%{opacity:0;transform:translateY(6px)}14%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bh-duvida-ponto{0%,60%,100%{transform:none}30%{transform:translateY(-3px)}}

@media (max-width:860px){
  .bh-duvida{padding:72px 0}
  .bh-duvida__inner{grid-template-columns:1fr;gap:40px}
  .bh-duvida__painel{justify-self:start}
}
@media (max-width:560px){
  .bh-duvida{padding:60px 0}
  .bh-duvida .bh-duvida__titulo{font-size:30px;line-height:1.2}
  .bh-duvida__botao{width:100%;min-height:58px;font-size:15px}
  .bh-duvida__msgs{min-height:196px}
}
@media (prefers-reduced-motion:reduce){.bh-duvida__botao{transition:none}.bh-duvida__botao:hover{transform:none}}
