/* ============================================================
   VEKTRA - COMPONENTES
   Peças reutilizáveis por qualquer página: botões, cabeçalho
   de seção, campos de formulário, chassi de mockup e o ponto
   pulsante de "ao vivo".
   ============================================================ */

/* ---------- Botões ---------- */
.btn{
  --bg-b:var(--clay);
  --fg:var(--const-ink);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 27px;
  background:var(--bg-b);color:var(--fg);
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  border:1px solid var(--bg-b);border-radius:8px;cursor:pointer;
  overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s ease;
  will-change:transform;
}
.btn span{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:10px;
}
/* preenchimento que sobe no hover */
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--btn-fill);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover::after{ transform:translateY(0) }
.btn:hover{ color:var(--btn-fill-tx); box-shadow:0 16px 38px -18px rgba(193,102,57,.7) }
.btn:active{ transform:scale(.985) }

/* A borda cinza quase sumia no celular e o botão não parecia botão */
.btn-ghost{ --bg-b:transparent; --fg:var(--text); border-color:var(--clay) }
.btn-sm{ padding:11px 19px;font-size:13.5px;border-radius:7px }
.btn-lg{ padding:19px 34px;font-size:16px;border-radius:9px }
.btn-block{ width:100% }

.btn .arw{ transition:transform .35s var(--ease) }
.btn:hover .arw{ transform:translateX(4px) }


/* ---------- Selos de credencial (hero) ---------- */
.selos{ display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0 }
.selo{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--recess);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--text-2);
}
.selo svg{ flex:none;color:var(--clay) }
.selo b{ color:var(--text);font-weight:600 }

/* ---------- Siglas com explicação ----------
   O balão é criado uma vez pelo core.js e posicionado com position:fixed,
   assim ele nunca é cortado por um card com overflow:hidden. */
.sigla{
  color:var(--clay);font-weight:600;
  border-bottom:1px dashed var(--clay);border-radius:4px;
  padding:0 3px;margin:0 -1px;
  cursor:help;
  transition:background .2s ease, color .2s ease;
}
/* ao passar o mouse a própria sigla acende, igual ao balão */
.sigla:hover,
.sigla:focus-visible{
  background:var(--clay-forte);color:var(--const-white);
  border-bottom-color:transparent;
}
.sigla:focus-visible{ outline:2px solid var(--clay);outline-offset:2px }

.dica{
  position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  max-width:300px;padding:13px 16px;
  background:var(--clay-forte);color:var(--const-white);
  border:0;border-radius:11px;
  box-shadow:0 20px 44px -18px rgba(178,91,50,.75), 0 8px 20px -10px rgba(0,0,0,.45);
  font-size:13px;font-weight:600;line-height:1.5;letter-spacing:0;text-transform:none;
  opacity:0;transition:opacity .18s ease;
}
.dica.vis{ opacity:1 }

/* ---------- Texto só para leitor de tela ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Seção e cabeçalho ---------- */
.sec{ padding:76px 0 }
.sec-alt{ background:var(--bg-alt-sec) }

.sec-head{ margin-bottom:46px; max-width:780px }
.sec-head h2{
  font-size:clamp(28px,6.8vw,48px);font-weight:800;
  line-height:1.1;letter-spacing:-.038em;text-wrap:balance;
}
.sec-head p{
  margin:20px 0 0;
  font-size:16.5px;font-weight:300;line-height:1.68;
  color:var(--text-2);max-width:58ch;
}
.sec-head.center{ margin-left:auto;margin-right:auto;text-align:center }
.sec-head.center .eyebrow{ justify-content:center }
.sec-head.center p{ margin-left:auto;margin-right:auto }

/* ---------- Ponto "ao vivo" ---------- */
.dot-live{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--clay);
  box-shadow:0 0 0 0 rgba(193,102,57,.6);
  animation:pulseDot 2.2s infinite;
}
@keyframes pulseDot{
  0%  { box-shadow:0 0 0 0   rgba(193,102,57,.55) }
  70% { box-shadow:0 0 0 9px rgba(193,102,57,0) }
  100%{ box-shadow:0 0 0 0   rgba(193,102,57,0) }
}

/* ---------- Chassi dos mockups de interface ---------- */
.mock{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);position:relative;
}
.mock-bar{
  display:flex;align-items:center;gap:7px;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);background:var(--recess);
}
.mock-bar i{ width:8px;height:8px;border-radius:50%;background:var(--line);display:block }
.mock-bar i:first-child{ background:var(--clay);opacity:.75 }
.mock-bar span{
  margin-left:8px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);
}
.mock-body{ padding:20px 18px }
.mock-label{
  margin:0;
  font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-2);
}

/* ---------- Campos de formulário ---------- */
.field{ margin-bottom:16px }
.field label{
  display:block;margin-bottom:9px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);
}
.field input,
.field select{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line-soft);border-radius:9px;
  padding:14px;font-size:15px;color:var(--text);
  appearance:none;-webkit-appearance:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field select,
.sim-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C979A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:40px;
}
.field input:focus,
.field select:focus{
  outline:none;border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(193,102,57,.18);
}
.field input::placeholder{ color:var(--text-2); opacity:.65 }

.field.err input,
.field.err select{ border-color:var(--clay) }
.field .msg-err{
  display:none;margin-top:8px;
  font-size:11px;font-weight:500;color:var(--clay);
}
.field.err .msg-err{ display:block }

.form-row{ display:grid; gap:0 }

.consent{ display:flex;gap:12px;align-items:flex-start;margin:8px 0 22px }
.consent input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;margin-top:2px;
  border:1.5px solid var(--line);border-radius:5px;
  background:var(--panel);cursor:pointer;
  display:grid;place-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.consent input:checked{ background:var(--clay); border-color:var(--clay) }
.consent input:checked::after{
  content:"";width:9px;height:5px;
  border:2px solid var(--const-ink);border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);
}
.consent label{
  font-size:12.5px;font-weight:300;line-height:1.55;
  color:var(--text-2);cursor:pointer;
}

.form-status{
  margin:16px 0 0;
  font-size:12.5px;color:var(--text-2);text-align:center;line-height:1.6;
}
.form-status.ok{ color:var(--clay); font-weight:500 }

/* ---------- Cartão do formulário ----------
   Usado pela home e pela página de contato. Ficava no home.css, que
   só a home carrega - por isso o formulário da página de contato
   aparecia sem cartão, solto sobre o fundo. */
.form-card{
  position:relative;
  background:var(--card-sunken);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 44px 90px -46px var(--glow-clay), 0 18px 44px -28px rgba(0,0,0,.35);
  padding:30px 24px;
}
/* fio de cobre no topo, para o formulário ser o ponto final da leitura */
.form-card::before{
  content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--clay),transparent);
}
.form-card h3{ font-size:clamp(23px,5.4vw,32px);font-weight:800;line-height:1.12;letter-spacing:-.035em }
.form-card > p{ margin:14px 0 26px;color:var(--text-2);font-size:14.5px;font-weight:300;line-height:1.65 }
.form-card .btn{ width:100% }

/* ============================================================
   FAQ
   Usado pela home e pela página de dúvidas.
   ============================================================ */
.faq-list{ border-top:1px solid var(--line-soft) }
.faq-item{ border-bottom:1px solid var(--line-soft) }
.faq-q{
  width:100%;position:relative;padding:24px 46px 24px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font);font-weight:600;font-size:clamp(15.5px,3.8vw,19px);
  line-height:1.42;letter-spacing:-.02em;color:var(--text);
  transition:color .3s ease;
}
.faq-q:hover{ color:var(--clay) }
.faq-q .ic{ position:absolute;right:0;top:50%;transform:translateY(-50%);width:22px;height:22px }
.faq-q .ic::before,
.faq-q .ic::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--clay);border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s ease;
}
.faq-q .ic::before{ width:14px;height:2px;transform:translate(-50%,-50%) }
.faq-q .ic::after { width:2px;height:14px;transform:translate(-50%,-50%) }
.faq-item.open .faq-q .ic::after{ transform:translate(-50%,-50%) rotate(90deg);opacity:0 }

/* abertura suave sem altura fixa: 0fr -> 1fr */
.faq-a{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease) }
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-a > div{ overflow:hidden }
.faq-a p{
  margin:0;padding:0 0 28px;
  color:var(--text-2);font-size:15px;font-weight:300;line-height:1.72;max-width:70ch;
}

/* ---------- Aviso de conteúdo ilustrativo ----------
   Usado na A Vektra, no método e nas dúvidas. */
.aviso-ficticio{
  margin:34px 0 0;padding:16px 18px;
  border:1px dashed var(--line);border-radius:12px;
  display:flex;gap:11px;align-items:flex-start;
  font-size:13px;font-weight:300;line-height:1.6;color:var(--text-2);
}
.aviso-ficticio svg{ flex:none;margin-top:2px;color:var(--clay) }
.aviso-ficticio b{ color:var(--text);font-weight:600 }

/* ============================================================
   HERO COM FOTO (serviços e dúvidas)
   A foto aparece só no desktop, ao lado do texto, sempre na
   proporção original. O fundo dela é transparente (WebP), então
   ela se adapta ao tema claro e ao escuro.
   Fica aqui, e não no CSS de uma página, porque duas páginas usam.
   ============================================================ */
.hero-duo{ display:grid;gap:32px;align-items:center }
.hero-foto{
  display:none;
  margin:0;position:relative;
  justify-self:center;
}
.hero-foto picture{ display:block }
.hero-foto img{
  display:block;width:100%;height:auto;
  border-radius:20px;
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 100%);
}
/* leve brilho de marca atrás da foto, igual aos cards */
.hero-foto::before{
  content:"";position:absolute;inset:auto -12% -6% -12%;height:62%;
  background:radial-gradient(60% 60% at 50% 100%, var(--glow-clay), transparent 70%);
  z-index:-1;pointer-events:none;
}
/* Cena com mesa e objetos: o esmaecimento da base cortaria a mesa,
   então ela não leva. E, como a foto é panorâmica, ao lado de um texto
   alto ela ficaria baixa demais: o recorte 4:3 (só das laterais) deixa
   as pessoas maiores e a altura perto da do texto. */
.hero-foto.cena img{
  -webkit-mask-image:none;mask-image:none;
  aspect-ratio:4 / 3;object-fit:cover;object-position:50% 50%;
  border:1px solid var(--line-soft);
}

/* ============================================================
   ANIMAÇÃO DO LOGOTIPO (hero da A Vektra)
   Feita aqui, no site, com as artes oficiais em PNG transparente:
   fica nítida em qualquer tela, sem fundo branco e sem vídeo.

   A mesma arte entra três vezes, recortada por região, para cada
   parte animar na ordem do vídeo original:
     símbolo     -> 0 a 23,5% da largura
     "VEKTRA"    -> depois de 23,5%, acima da assinatura
     assinatura  -> faixa de baixo (Inteligência Contábil)
   As medidas vieram da própria arte (900x169), lendo os pixels.
   ============================================================ */
.marca-anim{ display:none;margin:0;justify-self:center }
.marca-anim .ma-tela{ position:relative;display:block;aspect-ratio:900 / 169 }
.marca-anim .ma-grupo{ position:absolute;inset:0 }
.marca-anim .ma-parte{ position:absolute;inset:0;display:block }
.marca-anim img{ position:absolute;inset:0;display:block;width:100%;height:100% }

.ma-simbolo{ clip-path:inset(0 76.5% 0 0) }
.ma-nome{ clip-path:inset(0 0 22% 23.5%) }
.ma-assin{ clip-path:inset(80% 0 0 23.5%) }

/* O símbolo se forma: entra grande e assenta no lugar */
.ma-simbolo{
  transform-origin:18% 50%;
  animation:maSimbolo 7s var(--ease) infinite;
}
@keyframes maSimbolo{
  0%   { opacity:0;transform:scale(1.28) }
  10%  { opacity:1;transform:scale(1) }
  88%  { opacity:1;transform:scale(1) }
  96%  { opacity:0;transform:scale(1.06) }
  100% { opacity:0;transform:scale(1.28) }
}

/* "VEKTRA" é revelado da esquerda para a direita, como no vídeo */
.ma-nome{
  -webkit-mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:230% 100%;mask-size:230% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:maNome 7s var(--ease) infinite;
}
@keyframes maNome{
  0%   { opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0 }
  12%  { opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0 }
  30%  { opacity:1;-webkit-mask-position:0% 0;mask-position:0% 0 }
  88%  { opacity:1;-webkit-mask-position:0% 0;mask-position:0% 0 }
  96%  { opacity:0;-webkit-mask-position:0% 0;mask-position:0% 0 }
  100% { opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0 }
}

/* A assinatura aparece por último */
.ma-assin{ animation:maAssin 7s var(--ease) infinite }
@keyframes maAssin{
  0%   { opacity:0;transform:translateY(5px) }
  30%  { opacity:0;transform:translateY(5px) }
  42%  { opacity:1;transform:translateY(0) }
  88%  { opacity:1;transform:translateY(0) }
  96%  { opacity:0;transform:translateY(0) }
  100% { opacity:0;transform:translateY(5px) }
}

/* Quem pediu menos animação no sistema vê o logotipo pronto e parado */
@media (prefers-reduced-motion:reduce){
  .marca-anim .ma-parte{
    animation:none;opacity:1;transform:none;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* Legenda sobre a foto: cartão laranja na parte de baixo, com bordas
   arredondadas. Fica por cima da imagem de propósito, para o nome e a
   frase aparecerem sem ninguém precisar rolar a página. */
.hero-foto-legenda{
  position:absolute;left:10px;right:10px;bottom:12px;
  padding:13px 16px 15px;border-radius:16px;
  /* letras brancas, a pedido dele. Sobre o laranja da marca o branco
     daria contraste 4,01, abaixo do mínimo de 4,5 nos textos menores,
     então o cartão usa o laranja um tom mais fechado: 4,53. */
  background:var(--clay-forte);color:var(--const-white);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.75);
  text-align:center;
}
.hero-foto-legenda b{
  display:block;
  font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
}
.hero-foto-legenda span{
  display:block;margin-top:2px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.82;
}
.hero-foto-legenda small{
  display:block;margin-top:9px;
  font-size:13px;font-weight:500;line-height:1.45;
}

@media (min-width:900px){
  .hero-duo{ grid-template-columns:1.12fr .88fr;gap:52px }
  .marca-anim{ display:block;width:min(620px, 100%) }
  .hero-foto{ display:block;width:min(380px, 100%) }
  /* Cena em paisagem: colunas iguais e foto maior, para ela ficar
     perto da altura do bloco de texto ao lado. */
  .hero-duo-cena{ grid-template-columns:1fr 1fr;gap:44px }
  .hero-foto.cena{ width:min(620px, 100%) }
}

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .form-row{ grid-template-columns:1fr 1fr; gap:0 14px }
}
@media (min-width:900px){
  .sec{ padding:104px 0 }
  .form-card{ padding:40px 34px }
}

/* ============================================================
   VEKTRABOT
   Botão flutuante e janela de atendimento, presentes em todas
   as páginas. O HTML da janela é montado por vektrabot.js.
   ============================================================ */
.bot-float{
  position:fixed;right:16px;z-index:150;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--clay);color:var(--const-ink);
  display:grid;place-items:center;
  box-shadow:0 14px 34px -12px rgba(193,102,57,.85);
  transition:transform .35s var(--ease);
}
.bot-float:hover{ transform:scale(1.07) }
.bot-float:focus-visible{ outline:2px solid var(--text);outline-offset:3px }
.bot-float svg{ grid-area:1/1;transition:transform .35s var(--ease), opacity .25s ease }
.bot-float .bot-ic-fechar{ opacity:0;transform:rotate(-90deg) scale(.5) }
.bot-float[aria-expanded="true"] .bot-ic-abrir{ opacity:0;transform:rotate(90deg) scale(.5) }
.bot-float[aria-expanded="true"] .bot-ic-fechar{ opacity:1;transform:none }

.bot{
  position:fixed;z-index:210;right:16px;
  bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  width:min(384px, calc(100vw - 32px));
  height:min(590px, calc(100dvh - 120px));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  overflow:hidden;
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .22s ease, transform .35s var(--ease), visibility 0s linear .35s;
}
.bot.aberto{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease, transform .35s var(--ease), visibility 0s;
}

/* O topo é teal nos dois temas, então o símbolo usa sempre a arte clara */
.bot-topo{
  display:flex;align-items:center;gap:12px;
  padding:12px 10px 12px 16px;
  background:var(--teal);color:var(--const-white);
}
.bot-avatar{
  position:relative;flex:none;
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.1);
  display:grid;place-items:center;
}
.bot-avatar img{ display:block;width:28px;height:28px }
.bot-avatar::after{
  content:"";position:absolute;right:-3px;bottom:-3px;
  width:12px;height:12px;border-radius:50%;
  background:#35C77A;border:2px solid var(--teal);
}
.bot-nome b{ display:block;font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.02em }
.bot-nome small{ display:block;margin-top:2px;font-size:12px;font-weight:400;color:rgba(255,255,255,.78) }
.bot-fechar{
  margin-left:auto;flex:none;
  width:44px;height:44px;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--const-white);
  display:grid;place-items:center;
}
.bot-fechar:hover{ background:rgba(255,255,255,.12) }

.bot-msgs{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 14px 10px;
  display:flex;flex-direction:column;gap:10px;
}
.bot-msg{
  max-width:88%;padding:11px 14px;border-radius:14px;
  font-size:14px;font-weight:400;line-height:1.55;
  white-space:pre-line;overflow-wrap:anywhere;
}
.bot-msg.dele{
  align-self:flex-start;border-bottom-left-radius:4px;
  background:var(--recess);border:1px solid var(--line-soft);color:var(--text);
}
.bot-msg.minha{
  align-self:flex-end;border-bottom-right-radius:4px;
  background:var(--clay);color:var(--const-ink);font-weight:500;
}
.bot-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;min-height:44px;padding:9px 14px;border-radius:10px;
  background:var(--teal-fill);color:var(--const-white);
  font-size:13.5px;font-weight:600;white-space:normal;
  transition:background .25s ease;
}
.bot-link:hover{ background:var(--teal-fill-hi) }
.bot-link.wa{ background:var(--clay);color:var(--const-ink) }
.bot-link.wa:hover{ background:var(--clay-forte);color:var(--const-white) }

.bot-digitando{ display:flex;gap:5px;align-items:center;padding:14px 16px }
.bot-digitando i{
  width:7px;height:7px;border-radius:50%;background:var(--text-2);
  animation:botPonto 1.1s infinite ease-in-out;
}
.bot-digitando i:nth-child(2){ animation-delay:.15s }
.bot-digitando i:nth-child(3){ animation-delay:.3s }
@keyframes botPonto{
  0%,80%,100%{ opacity:.3;transform:translateY(0) }
  40%{ opacity:1;transform:translateY(-3px) }
}

/* uma linha só, com rolagem lateral: em tela baixa as sugestões
   não podem empurrar a conversa para fora da janela */
/* ---------- Trilha de perguntas ----------
   As perguntas não caberiam na largura da janela, então a trilha rola
   para o lado: arraste (que no celular já funciona) ou as duas setas
   laranja, que aparecem só quando existe pergunta para aquele lado.
   As setas ficam FORA da área que rola, cada uma no seu espaço, senão
   elas cobririam o chip que passa por baixo. */
.bot-trilha{
  flex:none;display:flex;align-items:center;gap:4px;
  padding:2px 8px 12px;
}
.bot-trilha[hidden]{ display:none }
.bot-sugestoes{
  flex:1;min-width:0;
  display:flex;flex-wrap:nowrap;gap:7px;
  padding:2px 6px;
  overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
.bot-sugestoes::-webkit-scrollbar{ display:none }
.bot-sugestoes[hidden]{ display:none }
.bot-sugestoes button{
  min-height:40px;padding:9px 14px;border-radius:99px;cursor:pointer;
  background:transparent;border:1px solid var(--clay);color:var(--text);
  flex:none;white-space:nowrap;scroll-snap-align:start;
  font-family:var(--font);font-size:13px;font-weight:500;line-height:1.3;
  transition:background .2s ease, color .2s ease;
}
.bot-sugestoes button:hover{ background:var(--clay);color:var(--const-ink) }
.bot-sugestoes button:focus-visible{ outline:2px solid var(--clay);outline-offset:2px }
/* "Outro assunto" é o caminho para o especialista: fica preenchido */
.bot-sugestoes button.outro{ background:var(--clay);color:var(--const-ink);font-weight:600 }
.bot-sugestoes button.outro:hover{ background:var(--clay-forte);color:var(--const-white) }

.bot-seta{
  flex:none;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--clay);color:var(--const-ink);
  display:grid;place-items:center;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
  transition:transform .2s ease, background .2s ease;
}
.bot-seta:hover{ transform:scale(1.08);background:var(--clay-forte);color:var(--const-white) }
.bot-seta:focus-visible{ outline:2px solid var(--clay);outline-offset:2px }
.bot-seta[hidden]{ display:none }

/* ---------- Passo com resposta escrita (nome da empresa) ---------- */
.bot-passo{
  flex:none;
  padding:4px 14px calc(12px + env(safe-area-inset-bottom, 0px));
}
.bot-passo[hidden]{ display:none }
.bot-passo-form{ display:flex;gap:8px;align-items:center }
.bot-passo input{
  flex:1;min-width:0;height:46px;
  padding:0 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line-soft);color:var(--text);
  font-family:var(--font);font-size:16px;     /* 16px: o iPhone não dá zoom */
}
.bot-passo input:focus{ outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(193,102,57,.18) }
.bot-passo input::placeholder{ color:var(--text-2);opacity:.8 }
.bot-passo button{
  flex:none;height:46px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;
  background:var(--clay);color:var(--const-ink);
  font-family:var(--font);font-size:14px;font-weight:600;
}
.bot-passo button:hover{ background:var(--clay-forte);color:var(--const-white) }

.bot-rodape{
  margin:0;padding:0 12px 10px;text-align:center;
  font-size:11px;line-height:1.5;color:var(--text-2);
}
.bot-rodape a{ color:var(--clay);font-weight:600;white-space:nowrap }

/* No celular a janela ocupa a tela e o botão flutuante sai de cima */
@media (max-width:599px){
  .bot-float{ width:54px;height:54px }
  .bot{
    left:8px;right:8px;width:auto;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    height:calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
    border-radius:16px;
  }
  .bot-aberto .bot-float{ opacity:0;pointer-events:none }
  .bot-sugestoes button{ min-height:44px }
  .bot-seta{ width:38px;height:38px }
}
@media (prefers-reduced-motion:reduce){
  .bot,.bot.aberto{ transition:none }
  .bot-digitando i{ animation:none;opacity:.6 }
}


/* ============================================================
   FRASE DE EFEITO (topo das páginas, no lugar das etiquetas)
   ============================================================ */
.frase-efeito,
.page-hero p.frase-efeito{
  margin:28px 0 0;padding:4px 0 4px 16px;
  border-left:3px solid var(--clay);
  font-size:clamp(18px, 2vw, 22px);font-weight:700;letter-spacing:-.025em;line-height:1.3;
  color:var(--text);max-width:34ch;
}
.hero-copy .frase-efeito{ margin:0 0 22px }   /* na home ela vem antes do título */

/* Versão em destaque (Contato e A Vektra): bloco próprio, maior e com cor de marca */
.frase-efeito.destaque,
.page-hero p.frase-efeito.destaque{
  position:relative;margin-top:30px;max-width:22ch;
  padding:20px 26px 20px 24px;
  border-left:5px solid var(--clay);border-radius:0 16px 16px 0;
  background:linear-gradient(90deg, rgba(193,102,57,.18), rgba(193,102,57,.04));
  font-size:clamp(24px, 3vw, 34px);font-weight:800;letter-spacing:-.035em;line-height:1.15;
  color:var(--text);
  box-shadow:0 18px 40px -26px rgba(193,102,57,.7);
}
.frase-efeito.destaque span{ color:var(--clay) }