/* ═════════════════════════════════════════════════════════════════════
   flw-demo.css — o que é comum à home e às outras páginas e não cabe em
   um só dos dois CSS: a faixa "Demonstração personalizada", a janela do
   formulário com o Flow e os campos de formulário do site.

   Carregado pelo flw-entorno.php em TODAS as páginas, depois do CSS da
   página. ⚠ Mexeu aqui, suba FW_CSS_V no topo do flw-entorno.php.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Campos de formulário (demo e parceiros) ─────────────────────────── */
.fw-form label,.fw-campo{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--petroleo)}
.fw-form input,.fw-form select,.fw-form textarea{
  font-family:var(--fonte);font-size:14.5px;font-weight:400;color:var(--petroleo);
  height:46px;padding:0 14px;border:1px solid var(--linha);border-radius:11px;background:var(--offwhite);
  outline:0;width:100%;transition:border-color .15s,background .15s,box-shadow .15s;
}
.fw-form textarea{height:auto;min-height:74px;padding:11px 14px;resize:vertical;line-height:1.5}
.fw-form input::placeholder,.fw-form textarea::placeholder{color:#8AA5A6}
.fw-form input:focus,.fw-form select:focus,.fw-form textarea:focus{
  border-color:var(--turquesa);background:var(--branco);box-shadow:0 0 0 3px rgba(30,208,192,.16)}
/* Seletor: sem a aparência do sistema, com a seta da marca. Enquanto
   ninguém escolheu (valor vazio + required → :invalid), fica com cara de
   placeholder, não de resposta. */
.fw-form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  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 1.5l5 5 5-5' fill='none' stroke='%230A3B3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px 8px;
}
.fw-form select:invalid{color:#8AA5A6}
.fw-form select option{color:var(--petroleo)}
.fw-opc{font-weight:400;color:var(--texto-2)}
/* Campo-isca contra robô: fora da tela, fora do Tab, fora do leitor. */
.fw-isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Escolha por botões (rádio/checkbox): uma batida em vez de abrir lista. */
.fw-grupo{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.fw-grupo legend{padding:0;margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--petroleo)}
.fw-chips{display:flex;flex-wrap:wrap;gap:7px}
.fw-chip{position:relative;display:inline-flex}
.fw-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fw-chip span{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--linha);background:var(--offwhite);cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--petroleo);transition:background .15s,border-color .15s;
}
.fw-chip span:hover{border-color:var(--turquesa);background:var(--branco)}
.fw-chip input:checked + span{background:var(--turquesa);border-color:var(--turquesa);font-weight:600}
/* Marca de "escolhido" além da cor: quem não distingue cor vê o ✓. */
.fw-chip input:checked + span::before{content:'✓';font-size:12px;font-weight:700}
.fw-chip input:focus-visible + span{outline:2px solid var(--petroleo);outline-offset:2px}

/* ── Palco com a demo embutida ─────────────────────────────────────
   A demo já traz a própria barra de navegador (bolinhas, URL e o selo do
   módulo) ocupando o iframe inteiro. A barra do site por cima dela fazia
   dois navegadores, um dentro do outro: quando o palco tem a demo, a do
   site sai. */
.palco:has(> .palco-demo) > .chrome,
.mod-palco:has(> .palco-demo) > .mod-chrome{display:none}

/* ── Ajustes de celular comuns à home e às outras páginas ─────────── */
.rod-origem .nw{white-space:nowrap}      /* o CNPJ não quebra no meio */
@media (max-width:768px){
  .rod-origem{border-radius:14px;align-items:flex-start;line-height:1.5}
  .rod-origem i{margin-top:4px}
  .rod-legal .sep{display:none}           /* o "·" sobrava sozinho numa linha */
  .capa-num{border-radius:14px;text-align:left}
  .tag-parte{font-size:10px}
  .mapa-no em{font-size:11px}
}

/* ── Faixa "Demonstração personalizada" (antes do rodapé) ──────────── */
.dm-faixa{margin-top:72px}
.dm-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding:44px 48px;border:1px solid var(--linha);border-radius:22px;background:var(--branco);
}
.dm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--profundo)}
.dm-card h2{margin:0 0 14px;font-size:clamp(26px,3.4vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--petroleo)}
.dm-card p{margin:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--texto-2);max-width:48ch}
.dm-card p b{color:var(--petroleo);font-weight:600}
.dm-acoes{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dm-acoes small{font-size:12.5px;color:var(--texto-2)}

/* A conversa de exemplo com o Flow */
.dm-chat{border:1px solid var(--linha);border-radius:18px;background:var(--offwhite);overflow:hidden}
.dm-chat-cab{display:flex;align-items:center;gap:11px;padding:12px 16px;background:var(--petroleo);color:#fff}
/* A "foto" do Flow é o símbolo da Flowin (do vetor, via sprite): turquesa
   sobre petróleo, a versão negativa do manual. */
.dm-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--petroleo);--lg-sim:var(--turquesa)}
.dm-ava svg{width:62%;height:auto;aspect-ratio:166.5/121.7;display:block;margin-top:2%}
/* No cabeçalho do chat, que já é petróleo, inverte. */
.dm-chat-cab .dm-ava{background:var(--turquesa);--lg-sim:var(--petroleo)}
.dm-chat-cab b{display:block;font-size:13.5px;font-weight:600}
.dm-chat-cab small{display:block;font-size:11px;color:var(--mint)}
.dm-chat-cab .fa-whatsapp{margin-left:auto;font-size:18px;color:var(--mint)}
.dm-msgs{display:flex;flex-direction:column;gap:8px;padding:16px;min-height:318px}
.dm-m{max-width:86%;padding:9px 12px;border-radius:13px 13px 13px 4px;background:var(--branco);border:1px solid var(--linha);
  font-size:12.5px;line-height:1.5;color:var(--petroleo);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.dm-m.-eu{align-self:flex-end;border-radius:13px 13px 4px 13px;background:var(--mint);border-color:var(--mint)}
.dm-m.-on{opacity:1;transform:none}
.dm-m small{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--texto-2)}
.dm-m.-conf{border-color:var(--turquesa);display:flex;gap:10px;align-items:flex-start}
.dm-m.-conf i{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--turquesa);color:var(--petroleo);font-size:10px;margin-top:1px}
.dm-m.-conf b{display:block;font-size:12.5px}
.dm-dig{align-self:flex-start;display:none;gap:4px;padding:11px 13px;border-radius:13px 13px 13px 4px;background:var(--branco);border:1px solid var(--linha)}
.dm-dig.-on{display:inline-flex}
.dm-dig i{width:6px;height:6px;border-radius:50%;background:var(--texto-2);animation:dm-dig 1s infinite}
.dm-dig i:nth-child(2){animation-delay:.15s}
.dm-dig i:nth-child(3){animation-delay:.3s}
@keyframes dm-dig{0%,60%,100%{opacity:.25}30%{opacity:1}}

@media (max-width:900px){
  .dm-card{grid-template-columns:1fr;padding:30px 24px;gap:28px}
}
@media (max-width:768px){
  .dm-faixa{margin-top:56px}
  .dm-card{padding:26px 18px}
  .dm-acoes .btn{width:100%;justify-content:center}
  .dm-msgs{min-height:0}
}

/* ── Janela do formulário ─────────────────────────────────────────── */
.dm-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(10,59,62,.46);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
.dm-modal.-aberto{opacity:1;visibility:visible}
.dm-caixa{position:relative;width:min(560px,100%);max-height:calc(100dvh - 36px);overflow:auto;
  border-radius:22px;background:var(--branco);box-shadow:0 30px 80px rgba(10,59,62,.28);
  transform:translateY(10px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.dm-modal.-aberto .dm-caixa{transform:none}
html.dm-trava,html.dm-trava body{overflow:hidden}

.dm-topo{display:flex;align-items:center;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--linha)}
.dm-topo b{display:block;font-size:14px;font-weight:600;color:var(--petroleo)}
.dm-topo small{display:block;font-size:12px;color:var(--texto-2);line-height:1.4}
.dm-fechar{margin-left:auto;align-self:flex-start;width:34px;height:34px;border-radius:10px;border:1px solid var(--linha);
  background:var(--branco);color:var(--petroleo);cursor:pointer;font-size:14px;flex:0 0 auto}
.dm-fechar:hover{background:var(--offwhite)}

.dm-passos{display:flex;gap:6px;padding:16px 22px 0}
.dm-passos i{flex:1;height:4px;border-radius:4px;background:var(--linha);transition:background .2s}
.dm-passos i.-on{background:var(--turquesa)}
/* hidden não vence display declarado no CSS — regra explícita */
.dm-passos[hidden],.dm-rot[hidden],.dm-form[hidden]{display:none}
.dm-rot{padding:10px 22px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2)}

.dm-form{padding:14px 22px 22px}
.dm-etapa{display:none;flex-direction:column;gap:14px}
.dm-etapa.-on{display:flex}
.dm-etapa h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--petroleo)}
.dm-dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dm-dica{margin:-4px 0 0;padding:11px 13px;border-radius:11px;background:var(--offwhite);border:1px dashed var(--linha);
  font-size:13px;line-height:1.5;color:var(--petroleo)}
.dm-dica[hidden]{display:none}
.dm-nav{display:flex;align-items:center;gap:10px;margin-top:6px}
.dm-nav .btn{border:0;font-family:var(--fonte);cursor:pointer}
.dm-nav .dm-voltar{background:transparent;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer;padding:10px 4px}
.dm-nav .dm-voltar:hover{color:var(--petroleo)}
.dm-nav .btn{margin-left:auto}
.dm-lgpd{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--texto-2)}
.dm-lgpd a{color:var(--profundo)}
.dm-erro{margin:0;font-size:12.5px;font-weight:600;color:var(--petroleo)}
.dm-erro[hidden]{display:none}

.dm-ok{display:none;padding:26px 22px 28px;text-align:center}
.dm-ok.-on{display:block}
.dm-ok .dm-ava{width:56px;height:56px;margin:0 auto 14px}
.dm-ok h3{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--petroleo)}
.dm-ok p{margin:0 auto 18px;max-width:40ch;font-size:14.5px;line-height:1.6;color:var(--texto-2)}
.dm-ok a.btn{justify-content:center}

/* Convite na saída: a mesma janela, menor e centrada */
.dm-caixa.-saida{width:min(440px,100%);padding:30px 30px 26px;text-align:center}
.dm-caixa.-saida .dm-fechar{position:absolute;top:14px;right:14px}
.dm-caixa.-saida .dm-ava{width:52px;height:52px;margin:0 auto 14px}
.dm-caixa.-saida .dm-eyebrow{display:flex;justify-content:center;margin-bottom:8px}
.dm-caixa.-saida h3{margin:0 0 10px;font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--petroleo)}
.dm-caixa.-saida p{margin:0 auto 20px;max-width:36ch;font-size:14.5px;line-height:1.6;color:var(--texto-2)}
.dm-saida-acoes{display:flex;flex-direction:column;align-items:center;gap:6px}
.dm-saida-acoes .btn{border:0;font-family:var(--fonte);cursor:pointer}
.dm-saida-acoes .dm-voltar{background:transparent;border:0;font:inherit;font-size:13px;font-weight:500;color:var(--texto-2);cursor:pointer;padding:8px}
.dm-saida-acoes .dm-voltar:hover{color:var(--petroleo)}

@media (max-width:560px){
  .dm-modal{align-items:flex-end;padding:0}
  .dm-caixa{width:100%;max-height:92dvh;border-radius:22px 22px 0 0}
  .dm-dupla{grid-template-columns:1fr}
  .dm-nav .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dm-m{transition:none}
  .dm-dig i{animation:none;opacity:.6}
}