/* Página de vendas do ImobTrack. Identidade "concreto e latão" do painel
 * (web/app/globals.css), no tema escuro: projeta melhor em apresentação.
 * Sem estilo inline: a CSP do lp/Caddyfile só aceita 'self'. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --fundo: #141716;
  --fundo-alt: #181c1b;
  --sup: #1d2120;
  --sup-2: #272c2a;
  --tinta: #e8ebe6;
  --tinta-2: #9aa098;
  --linha: #373d3a;
  --latao: #d9b15a;
  --latao-fill: #b8892b;
  --sobre-latao: #1b1608;
  --ia: #8dbbc8;
  --equipe: #e09b7e;
  --ganho: #8fcb96;
  --perdido: #b6a9c0;
  --perigo: #e38a7c;
  --raio: 6px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --titulo: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --corpo: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 58px;
}
body { margin: 0; overflow-x: hidden; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-stretch: 92%;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 3.2rem); }
h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
h1 em, h2 em { font-style: normal; color: var(--latao); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; border-radius: 3px; }

.pular {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--latao); color: var(--sobre-latao); padding: 8px 12px; border-radius: var(--raio);
}
.pular:focus { left: 8px; }

/* ---------- barra do topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: 60px; padding: 0 clamp(16px, 4vw, 48px);
  background: rgb(20 23 22 / 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--curva);
}
.topo.rolou { border-bottom-color: var(--linha); }
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--titulo); font-stretch: 92%; font-weight: 650; font-size: 1.2rem;
  letter-spacing: -0.02em; text-decoration: none;
}
.marca svg { width: 1.15em; height: 1.15em; flex: none; }
.marca b { color: var(--latao); font-weight: inherit; }
.marca-p { font-size: 0.95rem; }
.topo-links { display: flex; gap: 22px; margin-left: auto; font-size: 0.88rem; }
.topo-links a { color: var(--tinta-2); text-decoration: none; transition: color 0.18s; }
.topo-links a:hover, .topo-links a.aqui { color: var(--tinta); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--raio); border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: transform 0.18s var(--curva), background 0.18s, border-color 0.18s, box-shadow 0.25s;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--latao); color: var(--sobre-latao); box-shadow: 0 0 0 0 rgb(217 177 90 / 0.4); }
.btn-primario:hover { background: #e6c170; box-shadow: 0 0 0 6px rgb(217 177 90 / 0.14); }
.btn-fantasma { border-color: var(--linha); background: transparent; }
.btn-fantasma:hover { border-color: var(--tinta-2); background: rgb(255 255 255 / 0.03); }
.btn-p { padding: 9px 15px; font-size: 0.88rem; }
.btn-g { padding: 17px 30px; font-size: 1.12rem; }

/* ---------- seções ---------- */
.sec {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 104px 0 80px;
}
.sec-alt { background: var(--fundo-alt); border-block: 1px solid rgb(55 61 58 / 0.55); }
.miolo { width: min(1200px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
.miolo.estreito { width: min(820px, 100% - 2 * clamp(16px, 4vw, 48px)); }
.miolo.centro { text-align: center; }
.duas { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.col-texto > * + * { margin-top: 18px; }
.col-texto p { color: var(--tinta-2); max-width: 46ch; }

.sobre {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--latao); margin-bottom: 16px;
}
.lide { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--tinta-2); max-width: 56ch; margin-top: 22px; }
.lide-2 { font-size: 1.1rem; color: var(--tinta-2); max-width: 62ch; margin-top: 16px; }
.centro .lide { margin-inline: auto; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.centro .acoes { justify-content: center; }
.nota { margin-top: 16px; font-size: 0.86rem; color: var(--tinta-2); }
.fecho { margin-top: 40px; font-size: 1.15rem; color: var(--tinta-2); max-width: 62ch; }
.fecho strong { color: var(--tinta); font-weight: 600; }

/* entrada ao rolar: só quando há script (pre.js põe .js no <html>) */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--curva), transform 0.7s var(--curva); }
.js .revela.dentro { opacity: 1; transform: none; }
.trio > .revela:nth-child(2), .agentes > .revela:nth-child(2), .linha > .revela:nth-child(2), .travas > .revela:nth-child(2) { transition-delay: 0.08s; }
.trio > .revela:nth-child(3), .agentes > .revela:nth-child(3), .linha > .revela:nth-child(3), .travas > .revela:nth-child(3) { transition-delay: 0.16s; }
.agentes > .revela:nth-child(4), .linha > .revela:nth-child(4), .travas > .revela:nth-child(4) { transition-delay: 0.24s; }
.agentes > .revela:nth-child(5), .linha > .revela:nth-child(5) { transition-delay: 0.32s; }
.linha > .revela:nth-child(6) { transition-delay: 0.4s; }

/* inclinação 3D ao passar o mouse (lp.js escreve --rx/--ry) */
.incl, .incl-leve {
  --rx: 0deg; --ry: 0deg;
  transform-style: preserve-3d;
}
.js .incl.dentro, .js .incl-leve.dentro { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); }
.js .incl.movendo, .js .incl-leve.movendo { transition: transform 0.08s linear 0s !important; }

/* ---------- hero ---------- */
.hero { overflow: hidden; padding-top: 120px; }
.hero-cena { position: absolute; inset: 0 0 0 auto; width: 68%; height: 100%; display: block; }
.hero-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--fundo) 0%, var(--fundo) 34%, rgb(20 23 22 / 0.86) 50%, rgb(20 23 22 / 0) 72%),
    linear-gradient(0deg, var(--fundo) 0%, rgb(20 23 22 / 0) 22%);
}
.hero-miolo { position: relative; }
.hero-miolo h1 { max-width: 15.5ch; }
.hero-miolo .lide { max-width: 50ch; }
.hero-legenda {
  position: absolute; right: clamp(16px, 4vw, 48px); bottom: 28px;
  display: flex; gap: 20px; font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-2);
}
.hero-legenda li { display: flex; align-items: center; gap: 8px; }
.p { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.p-ia { background: var(--ia); box-shadow: 0 0 10px var(--ia); }
.p-latao { background: var(--latao); box-shadow: 0 0 10px var(--latao); }

/* ---------- cartões ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.cartao {
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 28px 26px 30px;
}
.cartao .num { font-family: var(--mono); font-size: 0.78rem; color: var(--latao); display: block; margin-bottom: 26px; }
.cartao h3 { font-size: 1.35rem; margin-bottom: 12px; }
.cartao p { color: var(--tinta-2); }

/* ---------- conversa + ficha ---------- */
.palco {
  display: grid; grid-template-columns: auto minmax(240px, 1fr); gap: clamp(18px, 3vw, 40px);
  align-items: center; perspective: 1400px;
}
.fone {
  --rx: 5deg; --ry: -16deg;
  width: 300px; height: 590px; flex: none;
  display: flex; flex-direction: column;
  background: #0d1110; border: 1px solid #454d49; border-radius: 34px;
  padding: 10px; overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.25s var(--curva);
  box-shadow: 28px 34px 60px rgb(0 0 0 / 0.5), inset 0 0 0 2px #1d2221;
}
.fone-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 10px; background: #1a2422; border-radius: 24px 24px 0 0;
  font-size: 0.82rem;
}
.fone-topo small { display: block; color: var(--ganho); font-size: 0.68rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--latao); color: var(--sobre-latao); font-weight: 700; font-size: 0.7rem;
}
.fone-chat {
  flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 12px 10px; background: #111817; border-radius: 0 0 24px 24px;
}
.bolha {
  position: relative; max-width: 86%; padding: 7px 10px 17px; border-radius: 10px;
  font-size: 0.78rem; line-height: 1.38;
  transition: opacity 0.3s, transform 0.3s var(--curva);
}
.bolha time { position: absolute; right: 8px; bottom: 3px; font-size: 0.58rem; opacity: 0.55; font-family: var(--mono); }
.bolha.lead { align-self: flex-start; background: #232c2a; border-top-left-radius: 2px; }
.bolha.ia { align-self: flex-end; background: #1f4a45; border-top-right-radius: 2px; }
.bolha.oculta { display: none; }
.bolha.nova { animation: sobe 0.32s var(--curva); }
@keyframes sobe { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 6px; }
.fotos i { aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, #3f6f6a, #9c8450); }
.fotos i:nth-child(2) { background: linear-gradient(135deg, #53636b, #c6a25a); }
.fotos i:nth-child(3) { background: linear-gradient(135deg, #7b6b4a, #2f5a63); }
.fotos i.planta {
  background:
    linear-gradient(#cfd6d2, #cfd6d2) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#cfd6d2, #cfd6d2) 0 55% / 100% 1px no-repeat,
    #33403d;
  border: 1px solid #cfd6d2;
}
.digitando { align-self: flex-end; display: flex; gap: 4px; padding: 10px 12px; background: #1f4a45; border-radius: 10px; }
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: var(--tinta); opacity: 0.4; animation: pisca 1s infinite; }
.digitando i:nth-child(2) { animation-delay: 0.15s; }
.digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pisca { 40% { opacity: 1; transform: translateY(-2px); } }

.ficha { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 22px; }
.ficha header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--titulo); font-stretch: 92%; }
.selo-ia, .selo-demo {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.selo-ia { color: var(--ia); border: 1px solid rgb(141 187 200 / 0.4); }
.selo-demo { color: var(--tinta-2); border: 1px dashed var(--linha); }
.ficha dl { margin: 0; }
.ficha dl > div {
  display: grid; grid-template-columns: 7.6em 1fr; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--linha); font-size: 0.86rem;
}
.ficha dt { color: var(--tinta-2); }
.ficha dd { margin: 0; font-weight: 500; transition: opacity 0.4s, color 1.4s; }
.ficha .vazio dd { opacity: 0.18; }
.ficha .chegou dd { color: var(--latao); }

/* ---------- gestão: perguntas + painel ---------- */
.perguntas, .seletor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
/* as perguntas acompanham a rolagem: o painel é mais alto que a tela */
.perguntas {
  position: sticky; top: 60px; z-index: 5; padding: 10px 0; background: var(--fundo);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.perguntas::-webkit-scrollbar { display: none; }
.perguntas button { flex: none; padding: 9px 13px; font-size: 0.86rem; }
.perguntas button, .seletor button {
  padding: 10px 16px; border-radius: 99px; background: transparent;
  border: 1px solid var(--linha); color: var(--tinta-2); font-size: 0.92rem;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.perguntas button:hover, .seletor button:hover { color: var(--tinta); border-color: var(--tinta-2); }
.perguntas button[aria-selected="true"], .seletor button[aria-selected="true"] {
  background: var(--latao); border-color: var(--latao); color: var(--sobre-latao); font-weight: 600;
}
.resposta { min-height: 3.2em; margin-top: 18px; font-size: 1.08rem; max-width: 70ch; color: var(--tinta); }

.painel {
  margin-top: 18px; background: var(--sup); border: 1px solid var(--linha); border-radius: 10px;
  overflow: hidden; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7);
}
.painel-barra {
  display: flex; align-items: center; gap: 20px; padding: 11px 18px;
  background: #121717; border-bottom: 1px solid var(--linha);
}
.abas { display: flex; gap: 4px; font-size: 0.8rem; color: var(--tinta-2); }
.abas i { font-style: normal; padding: 4px 10px; border-radius: 4px; }
.abas .ativa { background: var(--sup-2); color: var(--tinta); }
.painel-barra .selo-demo { margin-left: auto; }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--linha); }
.kpi { padding: 16px 18px; border-right: 1px solid var(--linha); }
.kpi:last-child { border-right: 0; }
.kpi small { display: block; font-size: 0.72rem; color: var(--tinta-2); }
.kpi > b { display: block; font-family: var(--titulo); font-stretch: 92%; font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.tend { font-size: 0.7rem; color: var(--tinta-2); }
.tend.ok { color: var(--ganho); }

.grade { display: grid; grid-template-columns: repeat(12, 1fr); }
.quadro { padding: 18px 20px 20px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); transition: opacity 0.35s, background 0.35s; }
.q-resposta { grid-column: span 5; }
.q-origem { grid-column: span 7; border-right: 0; }
.q-funil { grid-column: span 5; border-bottom: 0; }
.q-espera { grid-column: span 3; border-bottom: 0; }
.q-perda { grid-column: span 4; border-right: 0; border-bottom: 0; }
.quadro h3 { font-family: var(--corpo); font-stretch: 100%; font-size: 0.86rem; font-weight: 600; letter-spacing: 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.quadro h3 small { font-weight: 400; color: var(--tinta-2); font-size: 0.72rem; }
.quadro h3.sub { margin-top: 20px; margin-bottom: 4px; }
.leitura { margin-top: 14px; font-size: 0.8rem; color: var(--latao); }
.grande { font-family: var(--titulo); font-stretch: 92%; font-size: 2.1rem; font-weight: 650; line-height: 1.1; color: var(--perigo); }
.grande small { font-family: var(--corpo); font-size: 0.78rem; font-weight: 400; color: var(--tinta-2); }

/* foco: a pergunta escolhida acende um quadro e esmaece os outros */
.painel:not([data-foco-atual="tudo"]) [data-cartao] { opacity: 0.28; }
.painel[data-foco-atual="resposta"] [data-cartao="resposta"],
.painel[data-foco-atual="origem"] [data-cartao="origem"],
.painel[data-foco-atual="funil"] [data-cartao="funil"],
.painel[data-foco-atual="espera"] [data-cartao="espera"],
.painel[data-foco-atual="perda"] [data-cartao="perda"] { opacity: 1; background: rgb(217 177 90 / 0.045); }
.kpis { transition: opacity 0.35s, background 0.35s; }

.barras li { display: grid; grid-template-columns: 5.2em 1fr 2.4em; align-items: center; gap: 10px; font-size: 0.82rem; padding: 4px 0; }
.barras.finas li { grid-template-columns: 11.5em 1fr 2.6em; }
.barras i, .funil i {
  --l: 0%;
  display: block; height: 12px; border-radius: 2px; background: var(--ia);
  width: var(--l); min-width: 3px; transform-origin: left; transform: scaleX(0);
  transition: transform 1s var(--curva);
}
.dentro .barras i, .dentro .funil i { transform: scaleX(1); }
.barras li:nth-child(2) i, .funil li:nth-child(2) i { transition-delay: 0.08s; }
.barras li:nth-child(3) i, .funil li:nth-child(3) i { transition-delay: 0.16s; }
.barras li:nth-child(4) i, .funil li:nth-child(4) i { transition-delay: 0.24s; }
.barras li:nth-child(5) i, .funil li:nth-child(5) i { transition-delay: 0.32s; }
.funil li:nth-child(6) i { transition-delay: 0.4s; }
.barras i.alerta { background: var(--latao); }
.barras i.critico { background: var(--perigo); }
.barras b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.barras.finas i { height: 8px; background: var(--perdido); }
.barras.finas i.critico { background: var(--perigo); }

.q-origem table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.q-origem th { text-align: right; font-weight: 400; color: var(--tinta-2); font-size: 0.72rem; padding: 0 0 8px; }
.q-origem th:first-child, .q-origem td:first-child { text-align: left; }
.q-origem td { text-align: right; padding: 8px 0; border-top: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.q-origem td + td, .q-origem th + th { padding-left: 16px; }
.q-origem .bom { color: var(--ganho); font-weight: 600; }
.q-origem .ruim td { color: var(--perigo); }

.funil li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 0; font-size: 0.82rem; }
.funil i { position: absolute; left: 0; top: 3px; bottom: 3px; height: auto; background: rgb(141 187 200 / 0.22); border-left: 2px solid var(--ia); }
.funil i.queda { background: rgb(227 138 124 / 0.2); border-left-color: var(--perigo); }
.funil i.ganho { background: rgb(143 203 150 / 0.25); border-left-color: var(--ganho); }
.funil span { position: relative; padding-left: 10px; }
.funil b { position: relative; font-variant-numeric: tabular-nums; }

.fila li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linha); font-size: 0.8rem; }
.fila li:first-child { border-top: 0; padding-top: 0; }
.fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila .ok { color: var(--ganho); }
.fila .alerta { color: var(--latao); }
.fila .critico { color: var(--perigo); }

.tambem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; font-size: 0.9rem; color: var(--tinta-2); }
.tambem b { display: block; color: var(--tinta); font-family: var(--titulo); font-stretch: 92%; font-size: 1.05rem; margin-bottom: 4px; }
.tambem li { border-top: 2px solid var(--latao); padding-top: 12px; }

/* ---------- modelos de número ---------- */
.modelo { margin-top: 26px; display: grid; gap: 28px; }
.fluxo {
  display: grid; grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: stretch; background: var(--sup); border: 1px solid var(--linha); border-radius: 10px; padding: 24px;
}
.etapa { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.etapa > small { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.fichas { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: center; }
.fichas span {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--raio);
  background: var(--sup-2); border: 1px solid var(--linha); font-size: 0.84rem;
  animation: sobe 0.4s var(--curva) backwards;
}
.fichas span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ganho); flex: none; }
.fichas span.principal { border-color: var(--latao); }
.fichas span.principal::before { background: var(--latao); }
.fichas span:nth-child(2) { animation-delay: 0.06s; }
.fichas span:nth-child(3) { animation-delay: 0.12s; }
.fichas span:nth-child(4) { animation-delay: 0.18s; }
.fichas span:nth-child(5) { animation-delay: 0.24s; }
.no {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 16px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--sup-2);
}
.no b { font-family: var(--titulo); font-stretch: 92%; font-size: 1.08rem; }
.no span { font-size: 0.8rem; color: var(--tinta-2); }
.no-ia { border-color: rgb(141 187 200 / 0.5); }
.no-ia b { color: var(--ia); }
.no-equipe { border-color: rgb(224 155 126 / 0.5); }
.no-equipe b { color: var(--equipe); }
.no-painel { border-color: var(--latao); background: rgb(217 177 90 / 0.08); }
.no-painel b { color: var(--latao); }
.seta { position: relative; align-self: center; height: 2px; margin-top: 22px; background: var(--linha); overflow: hidden; }
.seta i { position: absolute; top: 0; left: -12px; width: 12px; height: 2px; background: var(--latao); animation: corre 1.5s linear infinite; }
.seta i:nth-child(2) { animation-delay: 0.5s; }
.seta i:nth-child(3) { animation-delay: 1s; }
@keyframes corre { to { transform: translateX(72px); } }
.modelo-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 48px; }
.modelo-texto h3 { font-size: 1.5rem; grid-column: 1; }
.modelo-texto p { color: var(--tinta-2); grid-column: 1; }
.modelo-texto ul { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 10px; align-content: start; }
.modelo-texto li { padding-left: 22px; position: relative; font-size: 0.95rem; }
.modelo-texto li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 2px; background: var(--latao); }

/* ---------- roleta ---------- */
.duas-roleta { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.regras { counter-reset: r; display: grid; gap: 10px; }
.regras li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr; color: var(--tinta-2); font-size: 0.95rem; }
.regras li::before { content: counter(r); font-family: var(--mono); color: var(--latao); font-size: 0.8rem; padding-top: 2px; grid-row: span 2; }
.regras b { display: block; color: var(--tinta); }
.roda { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px; align-items: center; }
.roda-palco { position: relative; aspect-ratio: 1 / 0.92; }
.roda-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.roda-reserva { position: absolute; inset: 12%; border-radius: 50%; border: 2px solid var(--latao); display: none;
  background: conic-gradient(#2a3331 0 20%, #343f3c 0 40%, #2a3331 0 60%, #343f3c 0 80%, #2a3331 0); }
.sem-webgl .roda-reserva { display: block; }
.sem-webgl .roda-palco canvas, .sem-webgl .hero-cena { display: none; }
.roda-lado { display: grid; gap: 14px; }
.corretores { display: grid; gap: 6px; }
.corretores li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--sup);
  font-size: 0.86rem; transition: border-color 0.3s, background 0.3s, transform 0.3s var(--curva);
}
.corretores li small { color: var(--tinta-2); font-size: 0.7rem; }
.corretores li b { font-family: var(--mono); font-weight: 500; font-size: 0.8rem; min-width: 2.2em; text-align: right; }
.corretores li.fora { opacity: 0.5; }
.corretores li.fora small { color: var(--perigo); }
.corretores li.vez { border-color: var(--latao); background: rgb(217 177 90 / 0.1); transform: translateX(-6px); }
.registro { display: grid; gap: 6px; min-height: 5.6em; font-family: var(--mono); font-size: 0.72rem; color: var(--tinta-2); align-content: start; }
.registro li { animation: sobe 0.4s var(--curva); }
.registro li:first-child { color: var(--tinta); }
.registro li b { color: var(--latao); font-weight: 500; }

/* ---------- agentes ---------- */
.agentes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; }
.agente { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 20px 24px; }
.agente h3 { margin: 18px 0 10px; }
.agente p { font-size: 0.9rem; color: var(--tinta-2); }
.etq { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--latao); color: var(--latao); }
.etq-ia { border-color: var(--ia); color: var(--ia); }
.capaz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 36px; margin-top: 40px; color: var(--tinta-2); font-size: 0.95rem; }
.capaz li { padding-left: 20px; position: relative; }
.capaz li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--latao); }
.capaz b { color: var(--tinta); font-weight: 600; }

/* ---------- visitas ---------- */
.linha { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 46px; position: relative; }
.linha::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--linha); }
.linha li { position: relative; padding: 0 18px 0 0; }
.linha li::before {
  content: ""; position: absolute; left: 0; top: 24px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--fundo); border: 2px solid var(--latao);
}
.quando { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--latao); height: 24px; }
.linha h3 { margin-top: 34px; margin-bottom: 8px; }
.linha p { font-size: 0.88rem; color: var(--tinta-2); }

/* ---------- controle ---------- */
.travas { display: grid; gap: 0; border-top: 1px solid var(--linha); }
.travas li { display: grid; grid-template-columns: 13em 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--linha); }
.travas b { font-family: var(--titulo); font-stretch: 92%; font-size: 1.1rem; }
.travas span { color: var(--tinta-2); font-size: 0.95rem; }

/* ---------- faq ---------- */
.faq { margin-top: 34px; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--titulo); font-stretch: 92%; font-size: 1.2rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.5rem; color: var(--latao); transition: transform 0.25s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 22px 0; color: var(--tinta-2); max-width: 62ch; }

/* ---------- final e rodapé ---------- */
.final { background: radial-gradient(60% 60% at 50% 100%, rgb(217 177 90 / 0.14), transparent 70%), var(--fundo); }
.final h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 26px clamp(16px, 4vw, 48px); border-top: 1px solid var(--linha);
  font-size: 0.78rem; color: var(--tinta-2);
}

/* ---------- modo apresentação ---------- */
.pontos { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; gap: 9px; }
.pontos a { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--tinta-2); display: block; transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.pontos a:hover { transform: scale(1.3); }
.pontos a.aqui { background: var(--latao); border-color: var(--latao); }
.pontos a span {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 0.7rem; padding: 3px 8px; border-radius: 4px; background: var(--sup-2); border: 1px solid var(--linha);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.pontos a:hover span, .pontos a:focus-visible span { opacity: 1; }
.dica {
  position: fixed; left: 16px; bottom: 14px; z-index: 40; font-size: 0.7rem; color: var(--tinta-2);
  padding: 5px 10px; border-radius: 99px; background: rgb(29 33 32 / 0.85); border: 1px solid var(--linha);
  transition: opacity 0.6s; pointer-events: none;
}
.dica.some { opacity: 0; }
kbd { font-family: var(--mono); font-size: 0.68rem; padding: 1px 5px; border: 1px solid var(--linha); border-radius: 3px; margin-right: 3px; }

/* ---------- telas menores ---------- */
@media (max-width: 1080px) {
  .agentes { grid-template-columns: repeat(3, 1fr); }
  .linha { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .linha::before { display: none; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(n + 4) { border-top: 1px solid var(--linha); }
  .q-resposta, .q-origem, .q-funil, .q-espera, .q-perda { grid-column: span 12; border-right: 0; border-bottom: 1px solid var(--linha); }
  .fluxo { grid-template-columns: 1fr; gap: 14px; }
  .seta { display: none; }
  .roda { grid-template-columns: 1fr; }
  .tambem { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  html { font-size: 16px; }
  .topo-links, .pontos, .dica, .hero-legenda, h2 br { display: none; }
  .topo .btn { margin-left: auto; }
  .sec { min-height: 0; padding: 84px 0 64px; }
  .hero { min-height: 100svh; }
  .hero-cena { width: 100%; opacity: 0.5; }
  .hero-veu { background: linear-gradient(0deg, var(--fundo) 0%, rgb(20 23 22 / 0.55) 60%, rgb(20 23 22 / 0.75) 100%); }
  .duas, .duas-roleta, .trio, .capaz, .modelo-texto { grid-template-columns: 1fr; }
  .modelo-texto ul { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .palco { grid-template-columns: 1fr; justify-items: center; }
  .fone { --ry: 0deg; --rx: 0deg; }
  .ficha { width: 100%; }
  .agentes { grid-template-columns: 1fr 1fr; }
  .linha { grid-template-columns: 1fr 1fr; }
  .travas li { grid-template-columns: 1fr; gap: 6px; }
  .abas { display: none; }
  .barras.finas li { grid-template-columns: 8.5em 1fr 2.6em; }
}
@media (max-width: 520px) {
  .agentes, .linha, .tambem { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--linha); }
  .q-origem td:first-child { max-width: 9.5em; }
  .acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .barras i, .funil i { transform: none; transition: none; }
  .seta i, .digitando i { animation: none; }
  .fone { transition: none; }
}