/*
 * Respondaí · telas (19/10/2026)
 * O celular em CSS (proporção real 2,06, aro de titânio, ilha dinâmica), a tela do
 * WhatsApp com o convite e a folha do formulário, os cartões de resposta do topo e as
 * telas da demonstração. Mesmo desenho das telas do vídeo 1 (motor/src/respondai/ui).
 *
 * Regra de cor: DENTRO do WhatsApp, as cores do próprio app; fora dele, a paleta do
 * Respondaí. Dados fictícios (Sua Empresa, Carla Nunes, Paulo Mendes...) e o selo
 * "Dados de exemplo" nos painéis.
 *
 * O celular é todo medido em em: --w (herdado) define a largura e font-size = --w / 30, então
 * a peça inteira cresce e encolhe junto (1em = 10 px num celular de 300 px).
 */
:root {
  --wa-verde: #25d366;
  --wa-verde-escuro: #008069;
  --wa-chat: #efeae2;
  --wa-entra: #fff;
  --wa-sai: #d9fdd3;
  --wa-texto: #111b21;
  --wa-suave: #667781;
  --wa-borda: #e9edef;
  --wa-check: #53bdeb;
}

/* ============================================================ celular === */
.fone {
  /* --w vem de quem contém o celular (topo, cena, mapa do link); sem ele, 300 px */
  position: relative;
  width: var(--w, 300px);
  height: calc(var(--w, 300px) * 2.06);
  font-size: calc(var(--w, 300px) / 30);
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
.fone-lado {
  position: absolute;
  width: 0.55em;
  border-radius: 0.3em;
  background: linear-gradient(90deg, #59606c, #2a303a 60%, #14181f);
}
.fone-lado.e1 {
  left: -0.3em;
  top: 17.5%;
  height: 4.5%;
}
.fone-lado.e2 {
  left: -0.3em;
  top: 24.5%;
  height: 8.5%;
}
.fone-lado.e3 {
  left: -0.3em;
  top: 34.5%;
  height: 8.5%;
}
.fone-lado.d1 {
  right: -0.3em;
  top: 27%;
  height: 13%;
  background: linear-gradient(270deg, #59606c, #2a303a 60%, #14181f);
}
.fone-aro {
  position: absolute;
  inset: 0;
  border-radius: 4.65em;
  padding: 0.32em;
  background: linear-gradient(140deg, #6b7280 0%, #2b313b 14%, #12161d 40%, #0d1117 62%, #2b313b 86%, #5e6573 100%);
  box-shadow: 0 6em 12em -3em rgba(6, 18, 38, 0.55), 0 3em 6em -2.4em rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.fone-borda {
  width: 100%;
  height: 100%;
  border-radius: 4.33em;
  background: #05070b;
  padding: 0.72em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.fone-tela {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 3.65em;
  overflow: hidden;
  background: var(--wa-chat);
  isolation: isolate;
}
.fone-ilha {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 0.75em;
  width: 31%;
  height: 2.15em;
  margin-left: -15.5%;
  border-radius: 1.1em;
  background: #000;
}
.fone-ilha::after {
  content: "";
  position: absolute;
  right: 0.7em;
  top: 0.65em;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a3550, #070a12 70%);
}
.fone-reflexo {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 22%, rgba(255, 255, 255, 0) 34%);
}

/* ======================================================= tela do WhatsApp === */
.wa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-chat);
  color: var(--wa-texto);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.3;
}
.wa-status {
  height: 3.55em;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.05em 0 2.55em;
  background: var(--wa-entra);
  font-size: 1em;
}
.wa-status b {
  font-size: 1.12em;
  font-weight: 700;
}
.wa-status-icones {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.wa-status-icones svg {
  width: 1.3em;
  height: 0.95em;
  fill: var(--wa-texto);
}
.wa-bateria {
  width: 1.85em;
  height: 0.95em;
  border: 0.11em solid var(--wa-texto);
  border-radius: 0.28em;
  padding: 0.1em;
}
.wa-bateria::before {
  content: "";
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 0.12em;
  background: var(--wa-texto);
}
.wa-topo {
  height: 4.5em;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0 1.1em 0 0.75em;
  background: var(--wa-entra);
  border-bottom: 1px solid var(--wa-borda);
}
.wa-topo > svg {
  width: 1.65em;
  height: 1.65em;
  fill: none;
  stroke: var(--wa-texto);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.wa-topo .avatar-empresa {
  --av: 2.9em;
}
.wa-topo .avatar {
  --av: 2.9em;
}
.wa-quem {
  flex: 1;
  min-width: 0;
}
.wa-quem strong {
  display: block;
  font-size: 1.28em;
  font-weight: 700;
  white-space: nowrap;
}
.wa-quem span {
  display: block;
  font-size: 0.95em;
  color: var(--wa-suave);
  white-space: nowrap;
}
.wa-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6em;
  padding: 0 0.75em 0.5em;
  overflow: hidden;
}
.wa-data {
  align-self: center;
  background: var(--wa-entra);
  border-radius: 0.6em;
  padding: 0.3em 0.9em;
  font-size: 0.95em;
  font-weight: 500;
  color: var(--wa-suave);
  box-shadow: 0 1px 0.6px rgba(11, 20, 26, 0.14);
}
.wa-convite {
  align-self: flex-start;
  width: 84%;
  background: var(--wa-entra);
  border-radius: 0.3em 1.05em 1.05em 1.05em;
  padding: 0.3em;
  box-shadow: 0 1px 0.6px rgba(11, 20, 26, 0.14);
}
.wa-capa {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 0.75em;
  background: #dce8f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0 1.15em;
}
.wa-capa::before {
  content: "";
  position: absolute;
  right: -3em;
  bottom: -5.2em;
  width: 14em;
  height: 14em;
  border-radius: 50%;
  border: 1.35em solid #c9dbee;
}
.wa-capa::after {
  content: "";
  position: absolute;
  right: 2.8em;
  top: 1.6em;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  background: #c9dbee;
}
.wa-capa .avatar-empresa {
  --av: 3.7em;
  position: relative;
  z-index: 1;
}
.wa-capa div {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.wa-capa strong {
  display: block;
  font: 700 1.55em/1.1 "Manrope", Arial, sans-serif;
  letter-spacing: -0.03em;
  color: var(--tinta);
  white-space: nowrap;
}
.wa-capa div span {
  display: block;
  margin-top: 0.3em;
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.2;
  color: #47607c;
}
.wa-corpo {
  padding: 0.5em 0.45em 0;
  font-size: 1.15em;
  line-height: 1.36;
}
.wa-hora {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3em;
  padding: 0.1em 0.45em 0;
  font-size: 0.88em;
  color: var(--wa-suave);
}
.wa-hora svg {
  width: 1.4em;
  height: 0.95em;
  fill: none;
  stroke: var(--wa-check);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wa-botao {
  position: relative;
  margin: 0.45em -0.3em -0.3em;
  height: 3.3em;
  border-top: 1px solid var(--wa-borda);
  border-radius: 0 0 1.05em 1.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: var(--wa-verde-escuro);
  font-size: 1.12em;
  font-weight: 600;
}
.wa-botao svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}
.wa-msg {
  max-width: 82%;
  padding: 0.45em 0.65em 0.3em;
  font-size: 1.15em;
  line-height: 1.36;
  box-shadow: 0 1px 0.6px rgba(11, 20, 26, 0.14);
}
.wa-msg .wa-hora {
  font-size: 0.77em;
  padding: 0.1em 0 0;
}
.wa-entra {
  align-self: flex-start;
  background: var(--wa-entra);
  border-radius: 0.26em 0.9em 0.9em 0.9em;
}
.wa-sai {
  align-self: flex-end;
  background: var(--wa-sai);
  border-radius: 0.9em 0.26em 0.9em 0.9em;
}
.wa-compositor {
  height: 4.4em;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 0.6em 0.4em;
}
.wa-campo {
  flex: 1;
  height: 3.25em;
  border-radius: 1.65em;
  background: var(--wa-entra);
  box-shadow: 0 1px 0.6px rgba(11, 20, 26, 0.14);
  display: flex;
  align-items: center;
  padding: 0 1.2em;
  color: var(--wa-suave);
  font-size: 1.12em;
}
.wa-mic {
  width: 3.25em;
  height: 3.25em;
  border-radius: 50%;
  background: var(--wa-verde-escuro);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wa-mic svg {
  width: 1.45em;
  height: 1.45em;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ---- folha do formulário (sobe dentro da conversa) ---- */
.wa-veu {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(11, 20, 26, 0.42);
  opacity: 0;
}
.wa-folha {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 4.4em;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-entra);
  border-radius: 1.35em 1.35em 0 0;
  overflow: hidden;
  transform: translateY(104%);
}
.wa-folha-topo {
  height: 3.9em;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.9em;
  padding: 0 1.35em;
  border-bottom: 1px solid var(--wa-borda);
}
.wa-folha-topo svg {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  fill: none;
  stroke: var(--wa-suave);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.wa-folha-topo svg.pontos {
  width: 0.4em;
  fill: var(--wa-suave);
  stroke: none;
}
.wa-folha-topo span {
  flex: 1;
  text-align: center;
  font-size: 1.15em;
  font-weight: 700;
  white-space: nowrap;
}
.wa-telas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.wa-tela {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-entra);
}
.wa-tela-2 {
  transform: translateX(100%);
}
.wa-tela-corpo {
  flex: 1;
  padding: 1.35em 1.5em 0.6em;
}
.wa-pergunta {
  font-size: 1.36em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wa-opcoes {
  margin-top: 0.6em;
}
.wa-opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: 3.35em;
  margin: 0 -0.7em;
  padding: 0 0.7em;
  border-bottom: 1px solid var(--wa-borda);
  border-radius: 0.55em;
}
.wa-opcao:last-child {
  border-bottom: 0;
}
.wa-opcao span {
  flex: 1;
  font-size: 1.22em;
}
.wa-radio {
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  border: 0.17em solid #8696a0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wa-radio::after {
  content: "";
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: var(--wa-verde-escuro);
  transform: scale(0);
}
.wa-opcao.on {
  background: rgba(0, 128, 105, 0.08);
}
.wa-opcao.on .wa-radio {
  border-color: var(--wa-verde-escuro);
}
.wa-opcao.on .wa-radio::after {
  transform: scale(1);
}
.wa-nota {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55em;
  margin-top: 1.15em;
}
.wa-nota i {
  font-style: normal;
  font-size: 1.2em;
  height: 2.45em;
  border-radius: 0.7em;
  border: 1px solid #d1d7db;
  display: grid;
  place-items: center;
  font-weight: 500;
  background: var(--wa-entra);
}
/* legenda da escala e campo de resposta escrita (opcional), como no formulário do WhatsApp */
.wa-nota-legenda {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.75em;
  font-size: 0.98em;
  color: var(--wa-suave);
}
.wa-texto {
  position: relative;
  height: 6.2em;
  margin-top: 2.1em;
  border: 1px solid #8696a0;
  border-radius: 0.6em;
}
.wa-texto span {
  position: absolute;
  left: 0.8em;
  top: -0.7em;
  max-width: calc(100% - 1.6em);
  padding: 0 0.35em;
  background: var(--wa-entra);
  font-size: 1em;
  color: var(--wa-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-nota i.on {
  border: 2px solid var(--wa-verde-escuro);
  background: var(--wa-sai);
  color: var(--wa-verde-escuro);
  font-weight: 700;
}
.wa-folha-base {
  flex: none;
  padding: 0.5em 1.5em 0.85em;
}
.wa-continuar {
  position: relative;
  font-size: 1.18em;
  height: 2.8em;
  border-radius: 1.4em;
  background: var(--wa-verde-escuro);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.wa-gerenciada {
  margin-top: 0.6em;
  text-align: center;
  font-size: 0.92em;
  color: var(--wa-suave);
  white-space: nowrap;
}
/* o toque: um círculo que chega, aperta e solta */
.wa-dedo {
  position: absolute;
  z-index: 30;
  width: 3.2em;
  height: 3.2em;
  margin: -1.6em 0 0 -1.6em;
  border-radius: 50%;
  background: rgba(11, 36, 66, 0.26);
  border: 0.16em solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.5em 1.2em rgba(11, 36, 66, 0.22);
  opacity: 0;
  pointer-events: none;
}

/* ---- variantes estáticas ---- */
/* demonstração, etapa 03: a folha aberta na nota, com o 9 marcado */
.fone--folha .wa-veu {
  opacity: 1;
}
.fone--folha .wa-folha {
  transform: none;
}
.fone--folha .wa-tela-1 {
  display: none;
}
.fone--folha .wa-tela-2 {
  transform: none;
}

/* ================================================== laço do topo (12 s) ===
 * 0–6 %: o convite chega · 8–16 %: toque em "Responder pesquisa" · 15–20 %: a folha
 * sobe · 23–34 %: "Ótimo" e "Continuar" · 35–39 %: a segunda tela entra · 43–54 %:
 * o 9 e "Enviar" · 56–61 %: a folha desce · 61–65 %: chega o obrigado · 92–100 %:
 * a conversa se recolhe para o laço recomeçar. Parado por padrão; o estado sem
 * animação (movimento reduzido) é a conversa com o convite.
 */
.fone--laco .wa-convite {
  animation: laco-convite 12s infinite;
}
.fone--laco .wa-obrigado {
  max-height: 0;
  margin-top: -0.6em;
  opacity: 0;
  overflow: hidden;
  animation: laco-obrigado 12s infinite;
}
.fone--laco .wa-botao {
  animation: laco-botao 12s infinite;
}
.fone--laco .dedo-a {
  left: 58%;
  top: 50%;
  animation: laco-dedo-a 12s infinite;
}
.fone--laco .wa-veu {
  animation: laco-veu 12s infinite;
}
.fone--laco .wa-folha {
  animation: laco-folha 12s infinite;
}
.fone--laco .wa-tela-1 {
  animation: laco-tela-1 12s infinite;
}
.fone--laco .wa-tela-2 {
  animation: laco-tela-2 12s infinite;
}
.fone--laco .wa-tela-1 .wa-opcao.vai {
  animation: laco-otimo 12s infinite;
}
.fone--laco .wa-tela-1 .wa-opcao.vai .wa-radio::after {
  animation: laco-radio 12s infinite;
}
.fone--laco .wa-tela-1 .wa-continuar {
  animation: laco-continuar-1 12s infinite;
}
.fone--laco .wa-nota i.vai {
  animation: laco-nove 12s infinite;
}
.fone--laco .wa-tela-2 .wa-continuar {
  animation: laco-continuar-2 12s infinite;
}
.fone--laco .dedo-b {
  left: 30%;
  top: 14%;
  animation: laco-dedo-b 12s infinite;
}
.fone--laco .dedo-c {
  left: 57.6%;
  top: 21%;
  animation: laco-dedo-c 12s infinite;
}
.fone--laco.is-parado *,
.fone--laco.is-parado *::before,
.fone--laco.is-parado *::after,
.fone--laco.fora-da-tela *,
.fone--laco.fora-da-tela *::before,
.fone--laco.fora-da-tela *::after {
  animation-play-state: paused !important;
}
@keyframes laco-convite {
  0%,
  1.5% {
    opacity: 0;
    transform: translateY(1.2em) scale(0.96);
  }
  6%,
  91% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(-1em);
  }
}
@keyframes laco-obrigado {
  0%,
  60.5% {
    max-height: 0;
    margin-top: -0.6em;
    opacity: 0;
    transform: translateY(1em);
  }
  64%,
  91% {
    max-height: 12em;
    margin-top: 0;
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    max-height: 12em;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-1em);
  }
}
@keyframes laco-botao {
  0%,
  11.5%,
  16%,
  100% {
    background: transparent;
  }
  12.5%,
  14% {
    background: rgba(0, 128, 105, 0.14);
  }
}
@keyframes laco-dedo-a {
  0%,
  7.5% {
    opacity: 0;
    transform: translateY(2.4em) scale(1);
  }
  10.5% {
    opacity: 1;
    transform: none;
  }
  12% {
    opacity: 1;
    transform: scale(0.84);
  }
  13.5% {
    opacity: 1;
    transform: scale(1);
  }
  16%,
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes laco-veu {
  0%,
  15% {
    opacity: 0;
  }
  19%,
  56% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
@keyframes laco-folha {
  0%,
  15% {
    transform: translateY(104%);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  20.5%,
  56% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3);
  }
  60.5%,
  100% {
    transform: translateY(104%);
  }
}
@keyframes laco-tela-1 {
  0%,
  35% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  38.5%,
  60.6% {
    transform: translateX(-28%);
    opacity: 0;
  }
  60.7%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes laco-tela-2 {
  0%,
  35% {
    transform: translateX(100%);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  38.5%,
  60.6% {
    transform: translateX(0);
  }
  60.7%,
  100% {
    transform: translateX(100%);
  }
}
@keyframes laco-otimo {
  0%,
  26%,
  60.7%,
  100% {
    background: transparent;
  }
  27%,
  60.6% {
    background: rgba(0, 128, 105, 0.08);
  }
}
@keyframes laco-radio {
  0%,
  26.2% {
    transform: scale(0);
  }
  27.5%,
  60.6% {
    transform: scale(1);
  }
  60.7%,
  100% {
    transform: scale(0);
  }
}
@keyframes laco-continuar-1 {
  0%,
  33%,
  35%,
  100% {
    transform: none;
    background: var(--wa-verde-escuro);
  }
  33.8% {
    transform: scale(0.96);
    background: #006a57;
  }
}
@keyframes laco-nove {
  0%,
  46.2%,
  60.7%,
  100% {
    border: 1px solid #d1d7db;
    background: var(--wa-entra);
    color: var(--wa-texto);
    font-weight: 500;
    transform: none;
  }
  47% {
    border: 2px solid var(--wa-verde-escuro);
    background: var(--wa-sai);
    color: var(--wa-verde-escuro);
    font-weight: 700;
    transform: scale(1.08);
  }
  48.5%,
  60.6% {
    border: 2px solid var(--wa-verde-escuro);
    background: var(--wa-sai);
    color: var(--wa-verde-escuro);
    font-weight: 700;
    transform: none;
  }
}
@keyframes laco-continuar-2 {
  0%,
  53%,
  55%,
  100% {
    transform: none;
    background: var(--wa-verde-escuro);
  }
  53.8% {
    transform: scale(0.96);
    background: #006a57;
  }
}
/* dedo da tela 1: "Ótimo" (30 %, 14 %) e depois "Continuar" (62 %, 91,5 %) */
@keyframes laco-dedo-b {
  0%,
  22.5% {
    opacity: 0;
    left: 30%;
    top: 14%;
    transform: translateY(2.4em);
  }
  25.5% {
    opacity: 1;
    left: 30%;
    top: 14%;
    transform: none;
  }
  26.6% {
    opacity: 1;
    left: 30%;
    top: 14%;
    transform: scale(0.84);
  }
  27.8% {
    opacity: 1;
    left: 30%;
    top: 14%;
    transform: none;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  32% {
    opacity: 1;
    left: 62%;
    top: 91.5%;
    transform: none;
  }
  33.6% {
    opacity: 1;
    left: 62%;
    top: 91.5%;
    transform: scale(0.84);
  }
  35%,
  100% {
    opacity: 0;
    left: 62%;
    top: 91.5%;
    transform: scale(1.05);
  }
}
/* dedo da tela 2: o "9" (57,6 %, 21 %) e depois "Enviar" (62 %, 91,5 %) */
@keyframes laco-dedo-c {
  0%,
  42.5% {
    opacity: 0;
    left: 57.6%;
    top: 21%;
    transform: translateY(2.4em);
  }
  45.5% {
    opacity: 1;
    left: 57.6%;
    top: 21%;
    transform: none;
  }
  46.6% {
    opacity: 1;
    left: 57.6%;
    top: 21%;
    transform: scale(0.84);
  }
  47.8% {
    opacity: 1;
    left: 57.6%;
    top: 21%;
    transform: none;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  52% {
    opacity: 1;
    left: 62%;
    top: 91.5%;
    transform: none;
  }
  53.6% {
    opacity: 1;
    left: 62%;
    top: 91.5%;
    transform: scale(0.84);
  }
  55%,
  100% {
    opacity: 0;
    left: 62%;
    top: 91.5%;
    transform: scale(1.05);
  }
}

/* ============================================= cartões de resposta (topo) === */
.resposta-card {
  position: absolute;
  z-index: 3;
  font-size: calc(var(--w) / 25);
  width: 17em;
  padding: 1.05em 1.15em 1.15em;
  border-radius: 1.25em;
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 2.2em 4.4em -1.2em rgba(3, 12, 26, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.resposta-rotulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--suave);
  white-space: nowrap;
}
.resposta-rotulo .icon {
  width: 1.35em;
  height: 1.35em;
  color: var(--cor);
  stroke-width: 2;
}
.resposta-pergunta {
  margin-top: 0.55em;
  font: 600 1.05em/1.3 "Manrope", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.resposta-opcoes {
  margin-top: 0.7em;
  display: grid;
  gap: 0.4em;
}
.resposta-opcoes li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.7em;
  border-radius: 0.7em;
  background: var(--papel);
  font-size: 0.95em;
  color: var(--suave);
}
.resposta-opcoes li::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 0.14em solid #a3adb7;
  flex-shrink: 0;
}
.resposta-opcoes li.on {
  background: var(--chip);
  color: var(--tinta);
  font-weight: 600;
}
.resposta-opcoes li.on::before {
  border-color: var(--cor);
  background: radial-gradient(circle, var(--cor) 0 42%, transparent 46%);
}
.resposta-escala {
  margin-top: 0.75em;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 0.22em;
}
.resposta-escala i {
  font-style: normal;
  font-size: 0.82em;
  height: 2.2em;
  border-radius: 0.5em;
  display: grid;
  place-items: center;
  background: var(--papel);
  color: var(--suave);
  font-weight: 600;
}
.resposta-escala i.on {
  background: var(--cor);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0.4em 0.9em rgba(23, 105, 196, 0.35);
}
.resposta-nota-legenda {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5em;
  font-size: 0.74em;
  color: var(--suave);
}
.resposta-quem {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.7em;
}
.resposta-quem .avatar {
  --av: 2.3em;
}
.resposta-quem strong {
  font-size: 0.95em;
  font-weight: 600;
}
.resposta-texto {
  margin-top: 0.55em;
  font: 500 1.08em/1.4 "Manrope", Arial, sans-serif;
  letter-spacing: -0.015em;
}

/* pessoa em cartão redondo (padrão da série: nunca foto de tela cheia) */
.pessoa-redonda {
  position: relative;
  width: var(--d, 140px);
  height: var(--d, 140px);
  flex-shrink: 0;
}
.pessoa-redonda::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(205, 231, 255, 0.28);
}
.pessoa-redonda img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--noite-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}
.pessoa-redonda .pilula {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  background: var(--noite-2);
  border: 1px solid rgba(205, 231, 255, 0.22);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.pessoa-redonda .pilula .icon {
  color: var(--destaque);
}
.pessoa-redonda.no-claro::before {
  border-color: rgba(23, 105, 196, 0.22);
}
.pessoa-redonda.no-claro img {
  background: var(--papel-2);
  box-shadow: var(--sombra);
}
.pessoa-redonda.no-claro .pilula {
  background: var(--branco);
  color: var(--tinta);
  border-color: var(--linha);
  box-shadow: var(--sombra);
}
.pessoa-redonda.no-claro .pilula .icon {
  color: var(--cor);
}

/* ===================================================== Hoje (cinza) === */
.hoje-canais {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.hoje-canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--branco);
  border: 1px solid var(--cinza-claro);
}
.hoje-canal > .icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: var(--cinza-fundo);
  color: var(--cinza);
}
.hoje-canal div {
  flex: 1;
  min-width: 0;
}
.hoje-canal strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #3f4954;
}
.hoje-canal span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--cinza);
}
.hoje-canal em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza);
  background: var(--cinza-fundo);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.hoje-decisao {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px dashed #c5ccd5;
}
.hoje-decisao div {
  flex: 1;
}
.hoje-decisao small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cinza);
}
.hoje-decisao strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  font-weight: 600;
  color: #3f4954;
}
.hoje-decisao b {
  font: 700 38px/1 "Manrope", Arial, sans-serif;
  color: #9aa4ae;
}

/* o convite como ele chega (na virada) */
.convite-mini {
  font-size: 12.5px;
  width: min(100%, 33em);
  color: var(--wa-texto);
  padding: 1.6em;
  border-radius: 18px;
  background: var(--wa-chat);
}
.convite-mini .wa-convite {
  width: 100%;
}

/* ======================================================= cenas da demonstração === */
.cena-cartao {
  background: var(--branco);
  color: var(--tinta);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 70px rgba(2, 10, 24, 0.45);
}
.cena-flutua {
  position: absolute;
  z-index: 3;
}

/* 01 · prévia do formulário */
.previa {
  position: relative;
  width: min(480px, 92%);
  margin: 0 auto;
  padding: 20px 22px 18px;
  transform: rotate(-1.5deg);
}
.previa-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.previa-topo .avatar-empresa {
  --av: 40px;
}
.previa-topo div {
  flex: 1;
}
.previa-topo strong {
  display: block;
  font: 700 17px/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.previa-topo div span {
  display: block;
  font-size: 13px;
  color: var(--suave);
}
.previa-telas {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.previa-telas li {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--papel);
  border: 1px solid var(--linha);
}
.previa-telas small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--acao);
}
.previa-telas strong {
  display: block;
  margin-top: 4px;
  font: 600 15px/1.3 "Manrope", Arial, sans-serif;
  letter-spacing: -0.015em;
}
.previa-opcoes,
.previa-nota {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.previa-opcoes i {
  font-style: normal;
  font-size: 12.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--suave-2);
}
.previa-nota {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
}
.previa-nota i {
  font-style: normal;
  font-size: 11px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--suave-2);
}
.previa-campo {
  display: block;
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: var(--branco);
  font-size: 12.5px;
  color: var(--suave);
}
.previa-rodape {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--suave);
}
/* cena estreita (761–1150 px): a prévia vai para a direita e os tipos ficam à esquerda dela */
@media (min-width: 761px) and (max-width: 1150px) {
  .previa {
    width: min(480px, 80%);
    margin-right: 0;
  }
}
/* telas baixas: a prévia inteira cabe entre a linha de cima e a barra de etapas */
@media (min-width: 1000px) and (max-height: 760px) {
  .previa {
    padding: 15px 20px 13px;
  }
  .previa-topo {
    padding-bottom: 10px;
  }
  .previa-telas {
    gap: 8px;
    margin-top: 10px;
  }
  .previa-telas li {
    padding: 9px 13px;
  }
}
.cena-aprova {
  right: -2%;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 15px;
  background: var(--destaque);
  color: var(--noite);
  box-shadow: 0 20px 45px rgba(2, 10, 24, 0.4);
  transform: rotate(-3deg);
}
.cena-aprova > .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--acao);
  color: #fff;
  stroke-width: 2.4;
}
.cena-aprova span {
  font-size: 12.5px;
}
.cena-aprova strong {
  display: block;
  font-size: 16px;
  margin-top: 1px;
}
.cena-tipos {
  left: -3%;
  top: 6px;
  display: grid;
  gap: 8px;
  transform: rotate(-4deg);
}
.cena-tipos span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  background: var(--noite-2);
  border: 1px solid rgba(205, 231, 255, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
.cena-tipos .icon {
  width: 16px;
  height: 16px;
  color: var(--destaque);
}

/* 02 · envio no seu ritmo */
.envio-card {
  position: relative;
  width: min(500px, 94%);
  margin: 26px auto 0;
  padding: 20px 22px 14px;
  transform: rotate(-1deg);
}
.envio-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.envio-topo > .icon {
  width: 22px;
  height: 22px;
  color: var(--cor);
}
.envio-topo strong {
  flex: 1;
  font: 700 17px/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.envio-regras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.envio-regras div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linha);
}
.envio-regras dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
}
.envio-regras dd {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.envio-lista {
  margin-top: 10px;
}
.envio-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  font-weight: 600;
}
.envio-lista li:last-child {
  border-bottom: 0;
}
.envio-lista li > span:not(.avatar):not(.chip) {
  flex: 1;
}
.envio-lista .avatar {
  --av: 32px;
}
.envio-aviso {
  right: -3%;
  top: -18px;
  width: min(300px, 64%);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--wa-texto);
  box-shadow: 0 22px 50px rgba(2, 10, 24, 0.45);
  transform: rotate(2deg);
}
@media (min-width: 1000px) and (max-height: 800px) {
  .envio-aviso {
    top: 10px;
    right: -5%;
    width: min(280px, 58%);
  }
  .envio-card {
    margin-top: 62px;
  }
  .envio-lista li {
    padding-block: 8px;
  }
}
.envio-aviso .avatar-empresa {
  --av: 34px;
}
.envio-aviso div {
  min-width: 0;
}
.envio-aviso small {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--wa-suave);
}
.envio-aviso strong {
  display: block;
  font-size: 13.5px;
}
.envio-aviso p {
  font-size: 13px;
  line-height: 1.4;
  color: #3b4a54;
}

/* 03 · a pessoa responde */
.cena-responde .fone {
  --w: min(236px, calc((100svh - 262px) / 2.06));
  margin: 0 auto 0 8%;
}
.responde-ia {
  right: 0;
  top: 22px;
  width: min(290px, 48%);
  padding: 16px;
  border-radius: 18px;
  background: var(--wa-chat);
  box-shadow: 0 22px 50px rgba(2, 10, 24, 0.45);
  transform: rotate(1.5deg);
}
.responde-ia-rotulo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3d5671;
}
.responde-ia-rotulo .icon {
  width: 16px;
  height: 16px;
  color: var(--cor);
}
.responde-ia .wa-msg {
  font-size: 13.5px;
  max-width: 90%;
}
.responde-ia .wa-msg + .wa-msg {
  margin-top: 8px;
}
.responde-ia > div {
  display: flex;
  flex-direction: column;
}
.responde-obrigado {
  right: 4%;
  bottom: 26px;
  width: min(300px, 50%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 17px;
  border-radius: 16px;
  background: var(--destaque);
  color: var(--noite);
  box-shadow: 0 20px 45px rgba(2, 10, 24, 0.4);
  transform: rotate(-2deg);
}
.responde-obrigado > .icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: var(--acao);
  color: #fff;
  stroke-width: 2.4;
}
.responde-obrigado p {
  font-size: 14px;
  line-height: 1.4;
}
.responde-obrigado strong {
  display: block;
  font-size: 15px;
}

/* 04 · o painel mede */
.painel {
  position: relative;
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 18px 20px 20px;
  transform: rotate(-0.8deg);
}
.painel-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.painel-topo strong {
  font: 700 18px/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.painel-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.painel-numeros div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--linha);
}
.painel-numeros dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--suave);
}
.painel-numeros dd {
  margin-top: 2px;
  font: 600 24px/1.1 "Manrope", Arial, sans-serif;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.painel-numeros div:last-child {
  background: var(--chip);
  border-color: #c9dcf1;
}
.painel-numeros div:last-child dd {
  color: var(--acao);
}
.painel-grade {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.painel-bloco {
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid var(--linha);
}
.painel-bloco > small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--suave);
}
.painel-bloco > strong {
  display: block;
  margin-top: 4px;
  font: 600 14.5px/1.3 "Manrope", Arial, sans-serif;
  letter-spacing: -0.015em;
}
.barras {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.barras li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  font-size: 13.5px;
}
.barras b {
  font: 700 13.5px/1.3 "Manrope", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.barras i {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 8px;
  background: var(--papel-2);
  overflow: hidden;
}
.barras i::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--v) * var(--b, 1) * 100%);
  border-radius: 8px;
  background: var(--cor);
  transform-origin: left center;
}
.nps {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.nps-anel {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.nps-anel svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.nps-anel circle {
  fill: none;
  stroke-width: 12;
}
.nps-anel .trilho {
  stroke: var(--papel-2);
}
.nps-anel .p {
  stroke: var(--bom);
}
.nps-anel .n {
  stroke: var(--atencao-traco);
}
.nps-anel .d {
  stroke: var(--ruim);
}
.nps-anel div {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.nps-anel b {
  font: 700 30px/1 "Manrope", Arial, sans-serif;
  letter-spacing: -0.05em;
}
.nps-anel span {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--suave);
}
.nps-legenda {
  display: grid;
  gap: 6px;
  font-size: 12.5px;
}
.nps-legenda li {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.nps-legenda li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--bom);
}
.nps-legenda li:nth-child(2)::before {
  background: var(--atencao-traco);
}
.nps-legenda li:nth-child(3)::before {
  background: var(--ruim);
}
.nps-legenda b {
  font-family: "Manrope", Arial, sans-serif;
  margin-left: auto;
  padding-left: 6px;
}

/* 05 · a resposta vira conversa */
.decide-conversa {
  position: relative;
  flex-shrink: 0;
  width: min(470px, 86%);
  margin: 0 0 0 2%;
  overflow: hidden;
  transform: rotate(-1deg);
}
.decide-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}
.decide-topo .avatar {
  --av: 38px;
}
.decide-topo div {
  flex: 1;
  min-width: 0;
}
.decide-topo strong {
  display: block;
  font: 700 16px/1.2 "Manrope", Arial, sans-serif;
  letter-spacing: -0.02em;
}
.decide-topo div span {
  display: block;
  font-size: 12.5px;
  color: var(--suave);
}
.decide-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 44px;
  background: var(--papel);
}
.form-respondido {
  align-self: flex-start;
  width: 88%;
  padding: 12px 14px;
  border-radius: 4px 14px 14px 14px;
  background: var(--branco);
  border: 1px solid var(--linha);
}
.form-respondido > small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acao);
}
.form-respondido > small .icon {
  width: 15px;
  height: 15px;
}
.form-respondido dl {
  margin-top: 8px;
  display: grid;
  gap: 7px;
}
.form-respondido dt {
  font-size: 12px;
  color: var(--suave);
}
.form-respondido dd {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bolha-equipe {
  align-self: flex-end;
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px 4px 14px 14px;
  background: var(--destaque);
  font-size: 14px;
  line-height: 1.4;
}
.bolha-equipe small {
  display: block;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acao);
}
.cena-decide .planilha {
  position: relative;
  flex-shrink: 0;
  width: min(430px, 76%);
  margin: -30px -2% 0 auto;
  overflow: hidden;
  transform: rotate(1.5deg);
}
.planilha-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
  font-weight: 600;
}
.planilha-topo > .icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: var(--chip);
  color: var(--acao);
}
.planilha-topo span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planilha-botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--acao);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.planilha-botao .icon {
  width: 14px;
  height: 14px;
}
.planilha table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.planilha th {
  text-align: left;
  padding: 7px 10px;
  background: var(--papel-2);
  color: var(--suave-2);
  font-weight: 700;
  font-size: 11.5px;
}
.planilha td {
  padding: 7px 10px;
  border-top: 1px solid var(--linha);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planilha th:nth-child(1),
.planilha td:nth-child(1) {
  width: 34%;
  font-weight: 600;
}
.planilha th:nth-child(2),
.planilha td:nth-child(2) {
  width: 15%;
  text-align: center;
}
/* telas baixas (notebook de 720 px): a cena 05 inteira cabe sem descer sobre as etapas */
@media (min-width: 1000px) and (max-height: 760px) {
  .decide-topo {
    padding-block: 10px;
  }
  .decide-chat {
    gap: 8px;
    padding: 10px 16px 30px;
  }
  .form-respondido {
    padding: 9px 12px;
  }
  .form-respondido dl {
    margin-top: 6px;
    gap: 5px;
  }
  .bolha-equipe {
    padding: 8px 12px;
  }
  .cena-decide .planilha {
    margin-top: -22px;
  }
  .planilha-topo {
    padding-block: 8px;
  }
  .planilha th,
  .planilha td {
    padding-block: 5px;
  }
}
@media (max-width: 760px) {
  .planilha th:nth-child(1),
  .planilha td:nth-child(1) {
    width: 41%;
  }
  .planilha th:nth-child(2),
  .planilha td:nth-child(2) {
    width: 13%;
  }
}

/* ============================================ formulário em miniatura (abas) === */
.form-mini {
  font-size: 11px;
  width: min(100%, 31em);
  margin: 0 auto;
  border-radius: 1.8em;
  overflow: hidden;
  background: var(--wa-entra);
  color: var(--wa-texto);
  box-shadow: 0 2.4em 5em rgba(11, 36, 66, 0.16);
  border: 1px solid var(--linha);
}
.form-mini .wa-tela {
  position: static;
}
.form-mini .wa-tela-corpo {
  padding-bottom: 1em;
}
.form-mini .wa-folha-topo {
  border-radius: 0;
}