/* Arquiteto High Ticket: TODOS os tokens neste bloco. Trocar agente, cor ou fonte = editar só aqui. */
:root {
  /* 3 metais medidos na logo: sombra, base, luz, brilho */
  --ouro-sombra: #6c5121; --ouro: #a78732; --ouro-luz: #e7d285; --ouro-brilho: #fffcb0;
  --prata-sombra: #58554f; --prata: #a3a19b; --prata-luz: #cdccc8; --prata-brilho: #f8f4ec;
  --cobre-sombra: #653a2a; --cobre: #834d39; --cobre-luz: #b2694d; --cobre-brilho: #e8bfa4;

  /* Palco */
  --bg: #000000;
  --chao: #12100c;
  --surface: #0d0c0a;
  --surface-2: #16140f;
  --surface-3: #1e1b15;
  --line: rgba(205, 204, 200, 0.12);
  --line-forte: rgba(167, 135, 50, 0.38);
  --texto: #ece9e2;
  --texto-2: var(--prata);
  --texto-3: #8f8c84; /* 07/10: contraste 5,9:1 no fundo da folha (antes 4,2:1) */
  --tinta-sobre-metal: #120e05;

  /* Marca */
  --metal-gradient: linear-gradient(90deg, var(--ouro), var(--prata), var(--cobre-luz));
  --ouro-escovado: linear-gradient(160deg, var(--ouro-luz) 0%, var(--ouro) 45%, var(--ouro-sombra) 100%);
  --balao-pessoa: linear-gradient(160deg, #3a2f17 0%, #2a2212 100%);
  --glow: 0 0 24px rgba(255, 252, 176, 0.32);

  /* Tipografia: display serifada fina (traço da logo) + texto neutro. Escala 1.25, corpo nunca abaixo de 16px. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-text: "Figtree", system-ui, sans-serif; /* escolhida na V2.4: humanista, aberta, boa leitura em chat; ver README */
  --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem;
  --fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem); --fs-2xl: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);
  --lh-titulo: 1.08; --lh-texto: 1.6; --medida: 62ch;
  --tracking-titulo: -0.01em; --tracking-rotulo: 0.1em;

  /* Geometria (escala de 8) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --raio: 16px; --raio-sm: 10px; --traco: 1px;
  --toque: 44px;
  --coluna: 740px;
  --gutter: 18px;
  --pilula: #2b2a28;
  --titulo-cor: #f4f2ee;
  --balao-agente: #171511;
  --balao-max: 640px;
  /* Escala das respostas (régua de proporção: ChatGPT mobile). Celular sobrescreve abaixo. */
  --fs-t1: 1.625rem; --fs-t2: 1.3125rem; --fs-t3: 1.125rem; --fs-corpo: clamp(1rem, .97rem + .15vw, 1.0625rem); --lh-corpo: 1.6;
  --balao-pad: 16px 18px; --balao-gap: 10px; --titulo-antes: 1.1em; --titulo-depois: .35em;
  --filete-metal: linear-gradient(135deg, rgba(167,135,50,.45), rgba(163,161,155,.18) 50%, rgba(178,105,77,.35));

  /* Movimento: micro 120ms, UI 260ms, saída mais curta */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 120ms; --t-ui: 260ms;

  /* Ebook (template fixo da Magna). A cor escolhida troca só --eb-acc. */
  --eb-acc: #d4a08a;
  --eb-bg: #0a0806; --eb-card: #141210; --eb-texto: #f6efe9; --eb-texto-2: rgba(246, 239, 233, 0.62);
  --eb-display: "Playfair Display", Georgia, serif; --eb-text: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--texto); font-family: var(--font-text); font-size: var(--fs-md);
  line-height: var(--lh-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--ouro-luz); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ouro-luz); outline-offset: 2px; }

/* ---------- Telas de acesso e abertura ---------- */
.acesso {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s5) var(--s3);
  background: radial-gradient(ellipse at 50% 110%, var(--chao) 0%, var(--bg) 60%);
}
.cartao { width: 100%; max-width: 420px; animation: sobe var(--t-ui) var(--ease) both; }
.cartao .logo { display: block; width: 120px; height: 120px; margin: 0 auto var(--s3); object-fit: cover; }
.cartao h1 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-2xl); line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo); text-align: center; margin: 0 0 var(--s2); color: var(--texto); text-wrap: balance;
}
.cartao .sub { text-align: center; color: var(--texto-2); font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.rotulo { display: block; text-align: center; font-size: var(--fs-xs); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--ouro-luz); margin-bottom: var(--s2); }
.filete { height: var(--traco); background: var(--metal-gradient); opacity: .6; margin: 0 auto var(--s4); width: 96px; }
.campo { display: block; margin-bottom: var(--s3); }
.campo span { display: block; font-size: var(--fs-xs); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s2); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 0 var(--s3); background: var(--surface); border: var(--traco) solid var(--line);
  border-radius: var(--raio-sm); outline: none; transition: border-color var(--t-micro) var(--ease); font-size: var(--fs-md);
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--prata) 50%), linear-gradient(135deg, var(--prata) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo input:focus, .campo select:focus { border-color: var(--ouro); }
.termos { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--fs-xs); color: var(--texto-2); margin: 0 0 var(--s4); }
.termos input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ouro); flex: none; }
.aviso-salvo { font-size: var(--fs-xs); color: var(--texto-2); border-left: var(--traco) solid var(--line-forte); padding: var(--s1) 0 var(--s1) var(--s3); margin: 0 0 var(--s4); }
.btn {
  width: 100%; min-height: 52px; border: 0; border-radius: var(--raio-sm); cursor: pointer;
  background: var(--ouro-escovado); color: var(--tinta-sobre-metal); font-weight: 700; letter-spacing: .02em;
  transition: transform var(--t-micro) var(--ease), filter var(--t-ui);
}
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(.6) brightness(.6); cursor: default; }
.btn.fantasma { background: transparent; color: var(--ouro-luz); border: var(--traco) solid var(--line-forte); }
.link { background: none; border: 0; color: var(--texto-2); font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; min-height: var(--toque); width: 100%; }
.msg { min-height: 1.4em; font-size: var(--fs-sm); text-align: center; margin: var(--s3) 0 0; color: var(--cobre-brilho); }
.msg.ok { color: var(--ouro-luz); }
.passo { text-align: center; font-size: var(--fs-xs); color: var(--texto-3); margin: var(--s3) 0 0; letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }

/* Abertura: 3 passos */
.frase { text-align: center; color: var(--texto-2); margin: 0 auto var(--s4); max-width: 34ch; text-wrap: balance; }
.frase b { color: var(--ouro-luz); font-weight: 600; }
.passos { list-style: none; padding: 0; margin: 0 0 var(--s5); counter-reset: p; }
.passos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: var(--traco) solid var(--line); counter-increment: p; }
.passos li:last-child { border-bottom: var(--traco) solid var(--line); }
.passos li::before { content: counter(p); font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; color: var(--ouro-luz); }
.passos b { display: block; font-weight: 600; margin-bottom: 2px; }
.passos span { color: var(--texto-2); font-size: var(--fs-sm); }

/* Escolha do modo */
.modos { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.modo { display: block; position: relative; padding: var(--s3) var(--s4) var(--s3) 52px; border: var(--traco) solid var(--line); border-radius: var(--raio-sm);
  background: var(--surface); cursor: pointer; transition: border-color var(--t-micro) var(--ease), background var(--t-ui) var(--ease); }
.modo input { position: absolute; left: var(--s3); top: 20px; width: 20px; height: 20px; accent-color: var(--ouro); margin: 0; }
.modo b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.modo span { color: var(--texto-2); font-size: var(--fs-sm); }
.modo:has(input:checked) { border-color: var(--ouro); background: var(--surface-2); }

/* ---------- Chat ---------- */
.app { height: var(--vvh, 100dvh); display: flex; flex-direction: column; background: var(--bg); }
.topo { border-bottom: var(--traco) solid var(--line); background: rgba(0,0,0,.88); backdrop-filter: blur(4px); position: relative; z-index: 5; }
.topo-linha { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--gutter); min-height: 64px; max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; }
.topo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: var(--traco) solid var(--line-forte); }
.topo .nome { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.1; }
.topo .por { font-size: var(--fs-xs); color: var(--texto-2); }
.icone { width: var(--toque); height: var(--toque); display: grid; place-items: center; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--prata-luz);
  transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.icone:active { transform: scale(.92); background: var(--surface-2); }
.icone svg { width: 22px; height: 22px; }
.topo .icone { margin-left: auto; }

.medidor { max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--s2); }
.medidor .trilho { height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.medidor .cheio { height: 100%; width: 0; background: var(--metal-gradient); transition: width .6s var(--ease); }
.medidor .legenda { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--texto-3); margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.medidor.alto .cheio { background: linear-gradient(90deg, var(--cobre-luz), var(--cobre-brilho)); }
.medidor.alto .legenda { color: var(--cobre-brilho); }

.mensagens { flex: 1; overflow-y: auto; scrollbar-gutter: stable both-edges; padding: var(--s4) var(--gutter) var(--s6); scroll-padding-bottom: var(--s6); }
.mensagens > * { max-width: var(--coluna); margin-left: auto; margin-right: auto; }
.grupo { display: flex; flex-direction: column; margin-bottom: var(--s5); }
.grupo.user { align-items: flex-end; }
.grupo.model { align-items: flex-start; position: relative; padding-left: 40px; }
/* Avatar da logo só ao lado do primeiro balão da sequência (agrupamento estilo WhatsApp) */
.grupo.model > .avatar { position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: var(--traco) solid var(--line-forte); }
.b { font-size: var(--fs-corpo); line-height: var(--lh-corpo); word-wrap: break-word; animation: entra var(--t-ui) var(--ease) both; }
/* V2.2: balões estilo WhatsApp premium. Pessoa à direita em metal escovado escuro. */
.grupo.user .b { max-width: min(80%, 560px); background: var(--balao-pessoa); border: var(--traco) solid rgba(231,210,133,.18);
  padding: 12px 18px; border-radius: 18px 6px 18px 18px; white-space: pre-wrap; }
/* Agente: um balão largo por mensagem da sequência, grafite com filete metálico finíssimo */
.grupo.model .b { color: var(--texto); width: fit-content; max-width: min(100%, var(--balao-max)); padding: var(--balao-pad);
  border-radius: 6px 18px 18px 18px; border: var(--traco) solid transparent;
  background: linear-gradient(var(--balao-agente), var(--balao-agente)) padding-box, var(--filete-metal) border-box; }
.grupo.model .b + .b { margin-top: var(--balao-gap); }
.b p { margin: 0 0 .75em; } .b p:last-child { margin-bottom: 0; }
.b strong { color: var(--titulo-cor); font-weight: 600; }
.b ul, .b ol { margin: .25em 0 .75em; padding-left: 1.4em; }
.b li { margin: .3em 0; padding-left: .2em; } .b li::marker { color: var(--ouro-luz); }
.b a { color: var(--ouro-luz); font-weight: 600; }
/* Hierarquia das respostas (# ## ###): sans forte, quase branco. Ver config/estilo-resposta.md */
.b .t { font-family: var(--font-text); color: var(--titulo-cor); letter-spacing: -0.01em; text-wrap: balance; margin: var(--titulo-antes) 0 var(--titulo-depois); }
.b .t:first-child { margin-top: 0; }
.b .t1 { font-size: var(--fs-t1); font-weight: 700; line-height: 1.2; }
.b .t2 { font-size: var(--fs-t2); font-weight: 700; line-height: 1.25; }
.b .t3 { font-size: var(--fs-t3); font-weight: 600; line-height: 1.3; }

.acoes { display: flex; gap: 2px; margin: 6px 0 0 4px; animation: entra var(--t-ui) var(--ease) both; }
.acoes button { width: var(--toque); height: var(--toque); display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--texto-3); cursor: pointer;
  transition: color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease), background var(--t-micro); }
.acoes button:hover { color: var(--prata-luz); background: var(--surface-2); }
.acoes button svg { width: 17px; height: 17px; }
.acoes button:active { transform: scale(.88); background: var(--surface-2); }
.acoes button.on { color: var(--ouro-luz); }
.acoes button.on svg { fill: currentColor; }
.acoes .feito { font-size: var(--fs-xs); color: var(--ouro-luz); align-self: center; padding-left: var(--s1); }

/* Respostas rápidas (ex.: Básico ou Avançado) */
.rapidas { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; margin-bottom: var(--s5); animation: entra var(--t-ui) var(--ease) both; }
.rapidas button { min-height: var(--toque); padding: 0 22px; border-radius: 22px; border: var(--traco) solid var(--line-forte); background: transparent; color: var(--ouro-luz);
  font-weight: 600; cursor: pointer; transition: transform var(--t-micro) var(--ease), background var(--t-micro); }
.rapidas button:hover { background: var(--surface-2); }
.rapidas button:active { transform: scale(.96); }

/* "Arquiteto pensando": reflexo de luz passando pelo metal (aprovado, refinado) */
.pensando { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); padding: 10px var(--s3); border-radius: var(--raio); background: var(--surface);
  border: var(--traco) solid var(--line); animation: entra var(--t-ui) var(--ease) both; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--ouro-luz); box-shadow: 0 0 10px rgba(255,252,176,.7); animation: respira 1.6s ease-in-out infinite; }
.pensando span {
  background: linear-gradient(100deg, var(--prata) 0%, var(--prata) 38%, var(--ouro-brilho) 48%, var(--prata-brilho) 52%, var(--prata) 62%, var(--prata) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: reflexo 2.2s linear infinite;
}
@keyframes reflexo { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes respira { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.faixa-ebook { max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto var(--s2); padding: 0 var(--gutter); }
.faixa-ebook > div { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s3); border-radius: var(--raio-sm); background: var(--surface-2); border: var(--traco) solid var(--line-forte); }
.faixa-ebook > div { flex-wrap: wrap; }
.faixa-ebook p { margin: 0; flex: 1 1 200px; font-size: var(--fs-sm); color: var(--texto-2); }
.faixa-ebook p b { display: block; color: var(--texto); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; }
.faixa-ebook .btn { width: auto; flex: 1 0 auto; min-height: var(--toque); padding: 0 var(--s4); white-space: nowrap; }

.entrada { border-top: var(--traco) solid var(--line); background: var(--surface);
  padding: var(--s3) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); }
.entrada > * { max-width: var(--coluna); margin-left: auto; margin-right: auto; }
.dica { font-size: var(--fs-xs); color: var(--texto-3); text-align: center; margin: 0 auto var(--s2); }
.dica.aviso { color: var(--cobre-brilho); }
.barra { display: flex; align-items: center; gap: 10px; }
.barra textarea {
  flex: 1; min-width: 0; height: 52px; min-height: 52px; max-height: 160px; resize: none; padding: 14px 20px; font-size: var(--fs-md); line-height: 1.5;
  background: var(--bg); border: var(--traco) solid var(--line); border-radius: 26px; outline: none; transition: border-color var(--t-micro); display: block; overflow-y: hidden; scrollbar-width: none;
}
.barra textarea:focus { border-color: var(--line-forte); }
.enviar { width: 52px; height: 52px; border-radius: 50%; border: var(--traco) solid var(--line-forte); background: transparent; color: var(--ouro-luz); cursor: pointer; flex: none;
  display: grid; place-items: center; transition: transform var(--t-micro) var(--ease); }
.enviar:active { transform: scale(.92); }
.enviar svg { width: 20px; height: 20px; }
.mic {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; flex: none; position: relative;
  background: var(--ouro-escovado); box-shadow: var(--glow); display: grid; place-items: center;
  transition: transform var(--t-micro) var(--ease);
}
.mic:active { transform: scale(.94); }
.mic svg { width: 24px; height: 24px; }
.mic.gravando { background: linear-gradient(160deg, var(--cobre-brilho), var(--cobre-luz) 50%, var(--cobre-sombra)); animation: pulso 1.6s var(--ease) infinite; }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(178,105,77,.5); } 50% { box-shadow: 0 0 0 12px rgba(178,105,77,0); } }
.gravacao { display: flex; align-items: center; gap: var(--s2); flex: 1; min-height: 48px; padding: 0 var(--s3); color: var(--cobre-brilho); font-variant-numeric: tabular-nums; }
.gravacao .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cobre-luz); }
.gravacao button { margin-left: auto; background: none; border: 0; color: var(--texto-2); text-decoration: underline; min-height: var(--toque); cursor: pointer; }

/* ---------- Folha (menu, perfil, cor do ebook, créditos) ---------- */
.veu { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 30; animation: aparece var(--t-ui) var(--ease) both; }
.folha { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 92dvh; overflow-y: auto; background: var(--surface);
  border-top: var(--traco) solid var(--line-forte); border-radius: 20px 20px 0 0; padding: var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  animation: folha var(--t-ui) var(--ease) both; }
.folha::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--surface-3); margin: 0 auto var(--s3); }
.folha h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: var(--lh-titulo); margin: 0 0 var(--s2); text-wrap: balance; }
.folha .sub { color: var(--texto-2); font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.folha > * { max-width: 520px; margin-left: auto; margin-right: auto; }
.menu-lista { list-style: none; padding: 0; margin: 0 auto; }
.menu-lista button { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: 0 var(--s2); background: none; border: 0;
  border-bottom: var(--traco) solid var(--line); text-align: left; cursor: pointer; border-radius: 0; transition: background var(--t-micro); }
.menu-lista button:active { background: var(--surface-2); }
.menu-lista svg { width: 20px; height: 20px; color: var(--ouro-luz); flex: none; }
.menu-lista small { display: block; color: var(--texto-3); font-size: var(--fs-xs); }
.menu-lista .perigo svg { color: var(--cobre-luz); }
@keyframes folha { from { transform: translateY(100%); } to { transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* Seletor de cor do ebook */
.cores { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); margin-bottom: var(--s3); }
.cor { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); transition: transform var(--t-micro) var(--ease); }
.cor:active { transform: scale(.9); }
.cor.on { border-color: var(--prata-brilho); }
.cor.mais { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.personalizar { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.matiz { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; border-radius: 14px; outline: none;
  background: linear-gradient(90deg, hsl(0,60%,60%), hsl(60,60%,60%), hsl(120,60%,60%), hsl(180,60%,60%), hsl(240,60%,60%), hsl(300,60%,60%), hsl(360,60%,60%)); }
.matiz::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--prata-brilho); border: 3px solid var(--bg); cursor: grab; }
.matiz::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--prata-brilho); border: 3px solid var(--bg); cursor: grab; }
.personalizar label { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--texto-2); }
.personalizar input[type=color] { width: 48px; height: 32px; border: var(--traco) solid var(--line); border-radius: 6px; background: none; padding: 2px; }
.mini-capa { display: grid; place-items: center; text-align: center; gap: 6px; aspect-ratio: 210 / 140; border-radius: var(--raio-sm); margin-bottom: var(--s4);
  background: radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--eb-acc) 22%, var(--eb-bg)) 0%, var(--eb-bg) 70%); border: var(--traco) solid color-mix(in srgb, var(--eb-acc) 40%, transparent); padding: var(--s3); }
.mini-capa small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--eb-acc); }
.mini-capa b { font-family: var(--eb-display); font-size: var(--fs-lg); font-weight: 700; color: var(--eb-texto); line-height: 1.15; }
.mini-capa i { width: 48px; height: 1px; background: var(--eb-acc); }
.conta { font-size: var(--fs-xs); color: var(--texto-3); text-align: center; margin: var(--s2) 0 0; }
.pacotes { display: grid; gap: var(--s2); margin-top: var(--s3); }

@media (min-width: 861px) {
  .folha { left: 50%; right: auto; bottom: 50%; width: 520px; transform: translate(-50%, 50%); border-radius: 20px; border: var(--traco) solid var(--line-forte); animation: aparece var(--t-ui) var(--ease) both; }
  .folha::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Escolha de nova conversa */
.escolhas { display: grid; gap: var(--s3); margin-bottom: var(--s2); }
.escolha { text-align: left; padding: var(--s3) var(--s4); border-radius: var(--raio-sm); border: var(--traco) solid var(--line); background: var(--surface-2); cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.escolha:hover { border-color: var(--line-forte); }
.escolha:active { transform: scale(.98); }
.escolha:disabled { opacity: .5; }
.escolha b { display: block; font-weight: 700; margin-bottom: 2px; }
.escolha span { color: var(--texto-2); font-size: var(--fs-sm); }
#pensando .pensando { align-self: flex-start; }

/* Boas-vindas: sans, hierarquia clara, leitura confortável */
.boas { min-height: 100dvh; padding: var(--s6) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 0%, var(--chao) 0%, var(--bg) 60%); }
.boas-col { max-width: 560px; margin: 0 auto; animation: sobe var(--t-ui) var(--ease) both; }
.boas-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: var(--traco) solid var(--line-forte); display: block; margin-bottom: var(--s4); }
.boas h1 { font-family: var(--font-text); font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--titulo-cor); margin: 0 0 var(--s3); }
.boas h2 { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; color: var(--titulo-cor); margin: var(--s5) 0 var(--s2); }
.boas p { margin: 0; color: var(--texto-2); }
.boas .boas-lead { color: var(--texto); font-size: 1.0625rem; }
.boas-passos { list-style: none; padding: 0; margin: 0; counter-reset: p; display: grid; gap: var(--s3); }
.boas-passos li { counter-increment: p; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s3); color: var(--texto-2); }
.boas-passos li::before { content: counter(p); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: var(--traco) solid var(--line-forte); color: var(--ouro-luz); font-weight: 700; font-size: var(--fs-sm); }
.boas-passos b { color: var(--texto); font-weight: 600; }
.boas .btn { margin-top: var(--s5); }
.nw { white-space: nowrap; }

/* Recarga Pix (V2.3) */
.medidor .legenda { align-items: center; }
.recarregar { background: none; border: 0; padding: 4px 0 4px 8px; color: var(--ouro-luz); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qr { display: block; width: min(240px, 70vw); aspect-ratio: 1; margin: 0 auto var(--s3); background: #fff; padding: 10px; border-radius: var(--raio-sm); }
.escolha .preco { float: right; color: var(--ouro-luz); font-weight: 700; }

/* Celular (até 480px): escala menor, proporcional ao ChatGPT mobile */
@media (max-width: 480px) {
  :root { --fs-t1: 1.375rem; --fs-t2: 1.1875rem; --fs-t3: 1.0625rem; --fs-corpo: 1rem; --lh-corpo: 1.55;
    --balao-pad: 14px; --balao-gap: 8px; --titulo-antes: 14px; --titulo-depois: 6px; --gutter: 16px; }
  .grupo.model { padding-left: 34px; }
  .grupo.model > .avatar { width: 26px; height: 26px; }
  .grupo.user .b { padding: 10px 14px; }
}

/* ---------- Popups (pré-seleção e aulão): mesma folha, com X e botão-link ---------- */
.popup { position: fixed; }
.popup .fechar { position: absolute; top: var(--s2); right: var(--s2); width: var(--toque); height: var(--toque); margin: 0; display: grid; place-items: center;
  background: none; border: 0; color: var(--texto-2); cursor: pointer; border-radius: 50%; }
.popup .fechar:hover { color: var(--texto); background: var(--surface-2); }
.popup .fechar svg { width: 20px; height: 20px; }
.popup .rotulo { margin-top: var(--s2); }
.popup h2 { text-align: center; }
.popup .sub { margin-bottom: var(--s3); }
.popup a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: var(--s4); }

/* 07/10/2026: blindagem (aviso de rede, foco visível, perigo, tentar de novo) */
:focus-visible { outline: 2px solid var(--ouro-luz); outline-offset: 2px; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40;
  background: var(--surface); color: var(--texto); border: var(--traco) solid var(--line-forte); border-radius: 12px;
  padding: var(--s2) var(--s3); font-size: var(--fs-sm); max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.btn.perigo { background: var(--cobre-luz); }
.b .tentar { display: inline-flex; align-items: center; min-height: var(--toque); margin-top: var(--s2); padding: 0 var(--s3);
  border: var(--traco) solid var(--line-forte); border-radius: 10px; background: none; color: var(--ouro-luz); font: inherit; cursor: pointer; }

/* Selo da versão ao lado do nome (Arquiteto High Ticket). */
.tag-v { display: inline-block; vertical-align: middle; font-family: var(--font-text); font-size: .55em; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: .3em .55em; border-radius: 999px; background: var(--ouro-escovado); color: #000; margin-left: .3em; }

/* termos: só a caixinha; o texto abre ao tocar em "termos" */
.termos-mini { font-size: 11px; line-height: 1.45; color: var(--texto-3); margin: calc(var(--s2) * -1) 0 var(--s4); }
.termos-mini p { margin: 0 0 var(--s2); }
.termos-mini label { display: flex; gap: var(--s2); align-items: flex-start; }
.termos-mini input { width: 16px; height: 16px; accent-color: var(--ouro); flex: none; margin: 1px 0 0; }

/* Ebook pelo chat: carregamento com frases e popup com as páginas (sem iframe, a política de segurança proíbe). */
#f-confirma-ebook .btn + .btn { margin-top: var(--s2); }
.eb-carga { position: fixed; inset: 0; z-index: 35; display: grid; place-content: center; gap: var(--s3); padding: var(--s4);
  background: rgba(0,0,0,.82); animation: aparece var(--t-ui) var(--ease) both; }
.eb-carga .pensando { justify-self: center; font-size: var(--fs-md, 1rem); }
.eb-progresso { width: min(320px, 80vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; justify-self: center; }
.eb-progresso i { display: block; height: 100%; width: 0; background: var(--ouro-luz); transition: width .8s var(--ease); }
.eb-pop { position: fixed; inset: 0; z-index: 36; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: #1b1916; animation: aparece var(--t-ui) var(--ease) both; }
.eb-pop .barra-eb { padding-top: calc(var(--s2) + env(safe-area-inset-top)); }
.eb-pop .barra-eb .btn { flex: 1 1 40%; }
body.pop-aberto { overflow: hidden; }

/* ---------- Modo grátis (29/10/2026) ---------- */
.selo-gratis { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ouro-luz); border: var(--traco) solid var(--line-forte); border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.tag-previa { display: block; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 4px; }
/* Barreira de conveniência no grátis: sem seleção e sem impressão das respostas (print de tela continua possível). */
body.gratis .grupo.model .b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { body.gratis .mensagens { display: none !important; } }
.anexo { width: 44px; height: 44px; position: relative; }
.enviar.anexo svg { width: 18px; height: 18px; }
.mic { position: relative; }
.cadeado { position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); border: var(--traco) solid var(--line-forte); }
.cadeado::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 6px; top: 4px; border-radius: 1px; background: var(--ouro-luz);
  box-shadow: 0 -4px 0 -1px transparent; }
.cadeado::before { content: ""; position: absolute; left: 50%; top: 3px; width: 6px; height: 6px; margin-left: -3px; border: 1.5px solid var(--ouro-luz); border-bottom: 0; border-radius: 4px 4px 0 0; }
.selo-cupom { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--ouro-escovado); color: var(--tinta-sobre-metal); margin-bottom: var(--s2); }
#f-premium .selo-cupom { display: table; }
.preco-premium { display: flex; align-items: baseline; gap: 10px; margin: 0 0 var(--s3); }
.preco-premium b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ouro-luz); }
.preco-premium span { color: var(--texto-2); font-size: var(--fs-sm); }
#f-premium .btn { margin-bottom: var(--s2); }
.checkout { position: fixed; inset: 0; z-index: 37; display: flex; flex-direction: column; background: var(--surface); }
.checkout-barra { display: flex; gap: var(--s2); padding: calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2); border-bottom: var(--traco) solid var(--line); }
.checkout-barra .btn { flex: 1 1 40%; margin: 0; text-align: center; }
.checkout iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.checkout-espera { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  border-top: var(--traco) solid var(--line); font-size: var(--fs-sm); }
.checkout-espera .link { margin: 0; white-space: nowrap; }

/* ---------- Telas de entrada no padrão MAGNA MASTER GOLD (29/10/2026) ----------
   Tokens de docs/design-system/magna-master-gold/design-tokens.css. Referência viva: página do Copy Master Edition.
   Vale só para as telas de entrada (.acesso); o chat segue no grafite ouro até decisão do Allysson. ---------- */
.acesso {
  --mg-bg: #0a0707; --mg-card: #15110e; --mg-ink: #f4ece4; --mg-ink-soft: #c9bdb1; --mg-ink-mute: #857a70;
  --mg-g1: #d9a37a; --mg-g2: #b97f55; --mg-g3: #8a553a; --mg-gold: #f0c987;
  --mg-line: rgba(217,163,122,.18); --mg-line2: rgba(217,163,122,.08); --mg-linef: rgba(217,163,122,.36); --mg-tint: rgba(217,163,122,.06);
  --mg-display: "Playfair Display", Georgia, serif; --mg-text: "Inter", system-ui, sans-serif;
  --mg-grad: linear-gradient(120deg, var(--mg-gold), var(--mg-g1) 45%, var(--mg-g3));
  background: radial-gradient(1100px 580px at 82% -8%, rgba(217,163,122,.22), transparent 60%), radial-gradient(820px 560px at -8% 108%, rgba(185,127,85,.12), transparent 60%), var(--mg-bg);
  font-family: var(--mg-text); color: var(--mg-ink);
}
.acesso .cartao h1 { font-family: var(--mg-display); font-weight: 800; letter-spacing: -.015em; color: var(--mg-ink); }
.acesso .cartao .sub, .acesso .termos { color: var(--mg-ink-soft); }
.acesso .campo span { color: var(--mg-ink-mute); letter-spacing: .12em; }
.acesso .campo input, .acesso .campo select { background: var(--mg-card); border-color: var(--mg-line); color: var(--mg-ink); font-family: var(--mg-text); }
.acesso .campo input:focus, .acesso .campo select:focus { border-color: var(--mg-g1); box-shadow: 0 0 0 3px rgba(217,163,122,.16); }
.acesso .btn { background: var(--mg-grad); color: #1c1206; font-family: var(--mg-text); font-weight: 700; border-radius: 14px; min-height: 54px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 28px rgba(138,85,58,.38); }
.acesso .btn.fantasma { background: transparent; color: var(--mg-g1); border: 1px solid var(--mg-linef); box-shadow: none; }
.acesso a, .acesso .link { color: var(--mg-g1); }
.acesso .rotulo { color: var(--mg-g1); }
.acesso .filete { background: linear-gradient(90deg, transparent, var(--mg-g2), transparent); width: 64px; }

/* Capa do teste grátis */
.capa { place-items: start center; padding: 0 0 var(--s6); }
.capa .cartao { max-width: 440px; padding: 0 var(--s3); text-align: center; }
.capa-topo { display: flex; align-items: center; justify-content: space-between; height: 58px; margin: 0 calc(var(--s3) * -1) var(--s5); padding: 0 var(--s3); border-bottom: 1px solid var(--mg-line2); }
.capa-nome { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mg-display); font-weight: 700; font-size: .98rem; color: var(--mg-ink); }
.capa-nome::before { content: ""; width: .55rem; height: .55rem; border-radius: 999px; background: linear-gradient(135deg, var(--mg-gold), var(--mg-g3)); box-shadow: 0 0 0 3px rgba(217,163,122,.16); }
.capa-selo { font-family: var(--mg-display); font-size: .68rem; font-weight: 700; color: #1c1206; background: linear-gradient(135deg, var(--mg-gold), var(--mg-g2)); padding: .22rem .6rem; border-radius: 999px; }
.capa-foto { width: 104px; height: 104px; border-radius: 50%; padding: 4px; margin: 0 auto 1.3rem; background: conic-gradient(from 140deg, var(--mg-gold), var(--mg-g1), var(--mg-g3), var(--mg-gold)); box-shadow: 0 0 30px rgba(217,163,122,.4); }
.capa-foto img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--mg-bg); }
.capa-fichas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 var(--s4); }
.capa-fichas li { list-style: none; font-size: .8rem; font-weight: 600; color: var(--mg-ink); background: var(--mg-card); border: 1px solid var(--mg-line); padding: .45rem .85rem; border-radius: 999px; }
.capa-fichas { padding: 0; }
.cartao h1.capa-chamada { margin: 0 0 var(--s3); font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.08; text-wrap: balance; }
.capa-chamada span { display: block; }
.c-n { margin: .05em 0; line-height: 1; }
.c-n em { font-style: italic; font-weight: 600; font-size: .62em; color: var(--mg-g1); margin-right: .2em; }
.c-n b { font-weight: 800; font-size: 1.9em; letter-spacing: -.02em; font-variant-numeric: lining-nums; background: var(--mg-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.c-b { font-style: italic; font-weight: 600; color: var(--mg-g1); margin-top: .08em; }
.c-c { font-family: var(--mg-text); font-weight: 600; font-size: .95rem; line-height: 1.5; letter-spacing: .01em; color: var(--mg-g1); margin-top: var(--s2); }
.capa .sub { margin: 0 0 var(--s4); font-size: 1rem; line-height: 1.6; }
.capa-caixa { text-align: left; background: var(--mg-card); border: 1px solid var(--mg-line); border-radius: 20px; padding: var(--s4) var(--s3) var(--s3); box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35); }
.capa .campo span { text-transform: uppercase; font-size: .7rem; font-weight: 700; }
.capa .campo input { background: var(--mg-bg); }
.capa .link { text-decoration: none; font-weight: 600; font-size: .9rem; }
@media (min-width: 640px) { .capa-topo { margin-left: 0; margin-right: 0; } }

/* Botão flutuante do painel de teste (só o dono vê) */
.b-teste { position: fixed; right: 12px; top: 74px; z-index: 40; font: 600 .72rem/1 var(--font-text, system-ui); padding: .5rem .7rem; border-radius: 999px; border: 1px solid var(--line-forte, #8a553a); background: rgba(10,7,7,.85); color: var(--ouro-luz, #f0c987); opacity: .85; }
.b-teste[hidden] { display: none; }

/* ---------- Chat, acabamento premium sóbrio (29/10/2026) ----------
   Menos metal e brilho, mais silêncio: superfícies lisas, fio de luz finíssimo, cantos generosos, hierarquia por espaço. */
.topo { background: rgba(10,9,8,.72); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); }
.topo img, .grupo.model > .avatar { border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.topo .nome { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.topo .por { color: var(--texto-3); }
.medidor { padding: 0; max-width: none; }
.medidor .trilho { height: 2px; border-radius: 0; background: rgba(255,255,255,.06); }
.medidor .cheio { background: var(--ouro-luz); opacity: .85; }
.medidor.alto .cheio { background: var(--cobre-brilho); }
.medidor .legenda { display: none; }
.medidor.esgotado .legenda { display: flex; max-width: calc(var(--coluna) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s2) var(--gutter); }
.grupo.user .b { background: #2a2419; border: 0; border-radius: 22px 22px 6px 22px; padding: 12px 18px; }
.grupo.model .b { background: #181614; border: 0; border-radius: 22px 22px 22px 6px; padding: 14px 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.05); }
.b strong { color: var(--titulo-cor); }
.b li::marker { color: var(--prata); }

/* ---------- Chat e folhas no padrão MAGNA MASTER GOLD (mesmos tokens da capa) ---------- */
:root {
  --bg: #0a0707; --chao: #0f0b0a; --surface: #15110e; --surface-2: #1b1612; --surface-3: #261e18;
  --line: rgba(217,163,122,.14); --line-forte: rgba(217,163,122,.36);
  --texto: #f4ece4; --texto-2: #c9bdb1; --texto-3: #9a8e83; --titulo-cor: #f4ece4;
  --ouro: #b97f55; --ouro-luz: #f0c987; --ouro-brilho: #f6d9a3; --cobre-luz: #d9a37a; --cobre-brilho: #e8bfa4;
  --font-text: "Inter", system-ui, sans-serif; --font-display: "Playfair Display", Georgia, serif;
  --metal-gradient: linear-gradient(120deg, #f0c987, #d9a37a 45%, #8a553a);
  --ouro-escovado: linear-gradient(120deg, #f0c987, #d9a37a 45%, #8a553a);
  --balao-agente: #15110e;
}
body { background: radial-gradient(1000px 520px at 85% -10%, rgba(217,163,122,.14), transparent 60%), #0a0707; }
.app { background: transparent; }
.topo { background: rgba(10,7,7,.72); border-bottom-color: rgba(217,163,122,.10); }
.topo .nome { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.medidor .cheio { background: var(--metal-gradient); opacity: 1; }
.grupo.user .b { background: linear-gradient(135deg, #3a2a1c, #2b2016); box-shadow: 0 0 0 1px rgba(217,163,122,.20); }
.grupo.model .b { background: #15110e; box-shadow: 0 0 0 1px rgba(217,163,122,.10); }
.b .t, .b h1, .b h2, .b h3 { font-family: var(--font-display); }
.btn:not(.fantasma) { background: var(--metal-gradient); color: #1c1206; font-weight: 700; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(138,85,58,.34); }
.btn.fantasma { color: #d9a37a; border-color: rgba(217,163,122,.36); }
.folha { background: #15110e; border-color: rgba(217,163,122,.18); }
.folha h2 { font-family: var(--font-display); font-weight: 800; }
.mic { background: var(--metal-gradient); }

/* ---------- DESIGN SYSTEM OFICIAL v3 "Luxo Futurista" (30/10/2026) ----------
   Fonte: apps/agente-arquiteto/design-system/ (só v3). Esta camada vence as anteriores.
   Ink quente, ouro champagne único acento, Urbanist única fonte, squircle em tudo, sem caixa alta espaçada. */
:root {
  --ink-0: #0B0A09; --ink-1: #121110; --ink-2: #1A1816; --ink-3: #23201D; --ink-4: #2E2A26; --ink-5: #3A352F;
  --gold-100: #F6E7CF; --gold-200: #ECD3AC; --gold-300: #DDB98A; --gold-400: #C89B62; --gold-500: #A97B45;
  --gold-gradient: linear-gradient(135deg, #F3DDB8 0%, #D6AE7B 48%, #A87A47 100%);
  --fg-1: #F4EEE6; --fg-2: #B5ADA2; --fg-3: #8C857B; --fg-on-gold: #1A140D;
  --shadow-gold: 0 10px 30px rgba(201,155,98,.24);
  --ease-lux: cubic-bezier(.22,.8,.24,1);

  --bg: var(--ink-0); --chao: var(--ink-1); --surface: var(--ink-1); --surface-2: var(--ink-2); --surface-3: var(--ink-3);
  --line: rgba(221,185,138,.10); --line-forte: rgba(221,185,138,.22);
  --texto: var(--fg-1); --texto-2: var(--fg-2); --texto-3: var(--fg-3); --titulo-cor: var(--fg-1);
  --ouro: var(--gold-400); --ouro-luz: var(--gold-300); --ouro-brilho: var(--gold-100); --ouro-sombra: var(--gold-500);
  --prata: var(--fg-2); --prata-luz: var(--fg-2); --prata-brilho: var(--fg-1);
  --cobre-luz: #D98273; --cobre-brilho: #E9A497;
  --tinta-sobre-metal: var(--fg-on-gold);
  --font-text: "Urbanist", system-ui, sans-serif; --font-display: "Urbanist", system-ui, sans-serif;
  --metal-gradient: var(--gold-gradient); --ouro-escovado: var(--gold-gradient);
  --balao-agente: var(--ink-2); --pilula: var(--ink-3);
  --raio: 20px; --raio-sm: 16px;
  --ease: var(--ease-lux);
}
body { background: radial-gradient(900px 480px at 85% -10%, rgba(221,185,138,.08), transparent 60%), var(--ink-0); font-family: var(--font-text); font-weight: 500; }
:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

/* Telas de entrada: as variáveis Master Gold passam a apontar para o v3 */
.acesso {
  --mg-bg: var(--ink-0); --mg-card: var(--ink-2); --mg-ink: var(--fg-1); --mg-ink-soft: var(--fg-2); --mg-ink-mute: var(--fg-3);
  --mg-g1: var(--gold-300); --mg-g2: var(--gold-400); --mg-g3: var(--gold-500); --mg-gold: var(--gold-100);
  --mg-line: rgba(221,185,138,.10); --mg-line2: rgba(221,185,138,.06); --mg-linef: rgba(221,185,138,.22); --mg-tint: rgba(221,185,138,.05);
  --mg-display: "Urbanist", system-ui, sans-serif; --mg-text: "Urbanist", system-ui, sans-serif;
  --mg-grad: var(--gold-gradient);
  background: radial-gradient(900px 520px at 80% -10%, rgba(221,185,138,.10), transparent 60%), var(--ink-0);
}
.acesso .cartao h1, .cartao h1 { font-family: var(--font-text); font-weight: 600; letter-spacing: -.02em; }
.cartao .logo { width: 72px; height: 72px; border-radius: 24px; box-shadow: 0 14px 40px rgba(201,155,98,.25); }
.filete { display: none; }
.rotulo, .campo span, .acesso .campo span, .capa .campo span, .passo, .tag-previa {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600;
}
.rotulo { color: var(--gold-300); }
.campo span { color: var(--fg-2); }
.campo input, .campo select, .acesso .campo input, .acesso .campo select, .capa .campo input {
  background: var(--ink-2); border: 1px solid transparent; border-radius: 16px; min-height: 52px; color: var(--fg-1);
}
.campo input:focus, .campo select:focus, .acesso .campo input:focus, .acesso .campo select:focus { border-color: rgba(221,185,138,.55); box-shadow: 0 0 0 3px rgba(221,185,138,.12); }
.termos input, .termos-mini input, .modo input { accent-color: var(--gold-300); }
.aviso-salvo { border-left: 0; background: var(--ink-2); border-radius: 14px; padding: var(--s2) var(--s3); }

/* Botões squircle: primário em gradiente, secundário em ink */
.btn, .acesso .btn, .btn:not(.fantasma) {
  border-radius: 16px; min-height: 52px; background: var(--gold-gradient); color: var(--fg-on-gold);
  font-family: var(--font-text); font-weight: 700; letter-spacing: 0; box-shadow: var(--shadow-gold);
}
.btn.fantasma, .acesso .btn.fantasma { background: var(--ink-3); color: var(--fg-1); border: 0; box-shadow: none; }
.btn.fantasma:hover { background: var(--ink-4); }
.btn.perigo { background: #D98273; color: var(--fg-on-gold); box-shadow: none; }
.link, .acesso .link, .acesso a { color: var(--gold-300); }
.link { text-decoration: none; font-weight: 600; }
.msg { color: #E9A497; } .msg.ok { color: var(--gold-300); }

/* Capa do teste grátis */
.capa-topo { border-bottom: 0; }
.capa-nome { font-family: var(--font-text); font-weight: 700; font-size: 1rem; gap: .6rem; }
.capa-nome::before { width: 28px; height: 28px; border-radius: 9px; box-shadow: none;
  background: url(/arquiteto/app/_assets/marca.svg) center/contain no-repeat; }
.capa-selo { font-family: var(--font-text); font-weight: 700; font-size: .75rem; border-radius: 10px; padding: .35rem .65rem; background: rgba(221,185,138,.14); color: var(--gold-300); }
.capa-foto { width: 104px; height: 104px; padding: 0; border-radius: 34px; background: none; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
.capa-foto img { border-radius: 34px; border: 0; }
.capa-fichas li { background: var(--ink-2); border: 0; border-radius: 12px; color: var(--fg-2); font-weight: 600; }
.c-a, .c-m { font-weight: 600; }
.c-n em { font-style: normal; font-weight: 500; color: var(--fg-2); }
.c-n b { font-weight: 300; letter-spacing: -.03em; background: none; -webkit-text-fill-color: currentColor; color: var(--gold-300); }
.c-b { font-style: normal; font-weight: 600; color: var(--gold-300); }
.c-c { font-family: var(--font-text); color: var(--fg-2); font-weight: 500; }
.capa-caixa { background: var(--ink-1); border: 0; border-radius: 28px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.capa .campo input { background: var(--ink-2); }

/* Abertura e escolhas: cards sólidos sem borda */
.modo, .escolha { border: 0; border-radius: 20px; background: var(--ink-2); }
.modo:has(input:checked) { background: var(--ink-3); box-shadow: 0 0 0 1px rgba(221,185,138,.55); }
.escolha:hover { background: var(--ink-3); }
.modo b { font-family: var(--font-text); font-weight: 700; }
.passos li { border: 0; background: var(--ink-2); border-radius: 18px; padding: var(--s3); margin-bottom: var(--s2); }
.passos li:last-child { border: 0; }
.passos li::before { font-family: var(--font-text); font-weight: 300; }

/* Boas-vindas */
.boas { background: radial-gradient(900px 480px at 50% -10%, rgba(221,185,138,.08), transparent 60%), var(--ink-0); }
.boas-logo { width: 72px; height: 72px; border-radius: 24px; border: 0; box-shadow: 0 14px 40px rgba(201,155,98,.25); }
.boas h1, .boas h2 { font-family: var(--font-text); }
.boas h1 { font-weight: 600; letter-spacing: -.02em; }
.boas-passos li::before { border: 0; border-radius: 12px; background: var(--ink-3); color: var(--gold-300); font-weight: 300; font-size: 1rem; }

/* Chat */
.topo { background: rgba(11,10,9,.78); border-bottom: 0; backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); }
.topo img { width: 40px; height: 40px; border-radius: 13px; border: 0; box-shadow: 0 8px 20px rgba(201,155,98,.18); }
.topo .nome { font-family: var(--font-text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.topo .por { color: var(--fg-3); font-weight: 500; }
.icone { border-radius: 14px; color: var(--fg-2); }
.icone:hover, .icone:active { background: var(--ink-2); }
.medidor .trilho { background: var(--ink-2); height: 3px; }
.medidor .cheio { background: var(--gold-gradient); opacity: 1; }
.medidor.alto .cheio { background: #D98273; }
.grupo.model > .avatar { border-radius: 10px; border: 0; box-shadow: none; }
.grupo.user .b { background: var(--gold-gradient); color: var(--fg-on-gold); font-weight: 600; border: 0; box-shadow: none; border-radius: 20px 20px 6px 20px; }
.grupo.user .b a, .grupo.user .b strong { color: var(--fg-on-gold); }
.grupo.model .b { background: var(--ink-2); border: 0; box-shadow: none; border-radius: 20px 20px 20px 6px; }
.b .t, .b h1, .b h2, .b h3 { font-family: var(--font-text); }
.b .t1, .b .t2 { font-weight: 700; letter-spacing: -.015em; }
.b li::marker { color: var(--gold-300); }
.b .tentar { border: 0; background: var(--ink-3); border-radius: 14px; color: var(--gold-300); }
.acoes button { border-radius: 12px; }
.acoes button:hover { background: var(--ink-2); color: var(--fg-1); }
.rapidas button { border: 0; border-radius: 14px; background: var(--ink-3); color: var(--fg-1); font-weight: 600; }
.rapidas button:hover { background: var(--ink-4); }
.pensando { background: var(--ink-2); border: 0; border-radius: 20px 20px 20px 6px; }
.pensando i { background: var(--gold-300); box-shadow: none; }
.pensando span { background: linear-gradient(100deg, var(--fg-2) 0%, var(--fg-2) 38%, var(--gold-100) 48%, var(--gold-300) 52%, var(--fg-2) 62%, var(--fg-2) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.faixa-ebook > div { background: var(--ink-2); border: 0; border-radius: 20px; }
.faixa-ebook p b { font-family: var(--font-text); font-weight: 700; }

/* Composer */
.entrada { background: rgba(11,10,9,.86); border-top: 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.barra textarea { background: var(--ink-2); border: 1px solid transparent; border-radius: 18px; height: 50px; min-height: 50px; padding: 13px 16px; }
.barra textarea:focus { border-color: rgba(221,185,138,.35); }
.barra textarea::placeholder { color: var(--fg-3); }
.enviar { width: 50px; height: 50px; border-radius: 18px; border: 0; background: var(--ink-3); color: var(--gold-300); }
.enviar:hover { background: var(--ink-4); }
.anexo { width: 50px; height: 50px; }
.mic { width: 50px; height: 50px; border-radius: 18px; background: var(--gold-gradient); box-shadow: var(--shadow-gold); }
.mic svg { stroke: var(--fg-on-gold); }
.mic.gravando { background: linear-gradient(135deg, #E9A497, #D98273 55%, #A85A4C); }
.gravacao { color: #E9A497; }
.gravacao .ponto { background: #D98273; }
.cadeado { border-radius: 7px; background: var(--ink-3); border: 0; }
.dica.aviso { color: #E9A497; }

/* Folhas, menu e pop-ups */
.veu { background: rgba(11,10,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.folha { background: var(--ink-1); border: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.5); }
.folha::before { background: var(--ink-4); }
.folha h2 { font-family: var(--font-text); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.menu-lista { display: grid; gap: 4px; }
.menu-lista button { border-bottom: 0; border-radius: 16px; min-height: 60px; padding: 8px; }
.menu-lista button:hover, .menu-lista button:active { background: var(--ink-2); }
.menu-lista svg { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--ink-2); color: var(--gold-300); }
.menu-lista button:hover svg { background: var(--ink-3); }
.menu-lista span { font-weight: 600; }
.menu-lista small { font-weight: 500; }
.menu-lista .perigo svg { color: #E9A497; }
.popup .fechar { border-radius: 14px; }
.popup .fechar:hover { background: var(--ink-2); }
.selo-gratis { text-transform: none; letter-spacing: 0; border: 0; border-radius: 8px; background: rgba(221,185,138,.14); color: var(--gold-300); font-size: 11px; font-weight: 700; padding: 3px 8px; }
.selo-cupom { text-transform: none; letter-spacing: 0; border-radius: 10px; background: rgba(221,185,138,.14); color: var(--gold-300); }
.preco-premium b { font-family: var(--font-text); font-weight: 300; font-size: 2.25rem; letter-spacing: -.03em; color: var(--fg-1); }
.tag-v { font-family: var(--font-text); border-radius: 8px; background: rgba(221,185,138,.14); color: var(--gold-300); letter-spacing: 0; }
.toast { background: var(--ink-3); border: 0; border-radius: 16px; }
.qr { border-radius: 20px; }
.cor { border-radius: 14px; }
.cor.on { border-color: var(--gold-300); }
.checkout { background: var(--ink-1); }
.checkout-barra, .checkout-espera { border-color: transparent; background: var(--ink-1); }
.eb-pop { background: var(--ink-1); }
.eb-progresso { background: var(--ink-3); }
.eb-progresso i { background: var(--gold-gradient); }
.b-teste { border-radius: 12px; border: 0; background: var(--ink-3); color: var(--gold-300); }

@media (min-width: 861px) {
  .folha { border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
}

/* ---------- Central da conta premium (31/10/2026, design system v3) ---------- */
.topo #b-menu { margin-left: 0; }
.central { min-height: 100dvh; padding: calc(var(--s4) + env(safe-area-inset-top)) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  background: radial-gradient(900px 480px at 85% -10%, rgba(221,185,138,.08), transparent 60%), var(--ink-0); }
.central-col { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; animation: sobe var(--t-ui) var(--ease) both; }
.central-topo { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.central-ola { margin: 0; color: var(--fg-3); font-size: var(--fs-sm); font-weight: 500; }
.central h1 { margin: 2px 0 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.cen-heroi { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 16px; border: 0; border-radius: 26px; cursor: pointer; text-align: left;
  background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: 0 14px 40px rgba(201,155,98,.22); transition: transform var(--t-micro) var(--ease); }
.cen-heroi:active { transform: scale(.98); }
.cen-heroi img { width: 52px; height: 52px; border-radius: 18px; flex: none; box-shadow: 0 0 0 2px rgba(26,20,13,.18); }
.cen-heroi span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cen-heroi b { font-size: 1.0625rem; font-weight: 700; }
.cen-heroi small { font-size: var(--fs-sm); font-weight: 600; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cen-heroi .seta { width: 22px; height: 22px; flex: none; }
.cen-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cen-numeros > div { background: var(--ink-2); border-radius: 22px; padding: 16px 18px; display: grid; gap: 2px; }
.cen-numeros b { font-size: 2.25rem; font-weight: 200; line-height: 1; letter-spacing: -.03em; color: var(--fg-1); }
.cen-numeros span { color: var(--fg-3); font-size: var(--fs-sm); }
.cen-card, .cen-ferr { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: var(--ink-2);
  text-align: left; cursor: pointer; color: var(--fg-1); transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.cen-card:hover, .cen-ferr:hover { background: var(--ink-3); }
.cen-card:active, .cen-ferr:active { transform: scale(.985); }
.cen-card:not(.vazio) { cursor: default; }
.cen-card:not(.vazio):hover { background: var(--ink-2); }
.cen-card:not(.vazio):active { transform: none; }
.central .tile { position: relative; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--ink-3); color: var(--gold-300); display: grid; place-items: center; }
.central .tile svg { width: 22px; height: 22px; }
.cen-txt { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.cen-txt b { font-size: 1rem; font-weight: 700; }
.cen-txt > span { color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }
.cen-card.vazio .cen-txt > span { color: var(--fg-3); }
.cen-etapas { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: e; }
.cen-etapas li { counter-increment: e; display: flex; gap: 10px; align-items: baseline; color: var(--fg-2); font-size: .9375rem; }
.cen-etapas li::before { content: counter(e); color: var(--gold-300); font-weight: 300; font-size: 1.125rem; min-width: 1ch; }
.cen-h { margin: 16px 0 0; font-size: 1.0625rem; font-weight: 700; }
.cen-ferramentas { display: grid; gap: 12px; }
.cen-ferr .cen-txt > span { color: var(--gold-300); font-weight: 600; }
.cen-ferr.livre .cen-txt > span { color: #A9D1B2; }
.tranca { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 8px; background: var(--gold-gradient); color: var(--fg-on-gold); display: grid; place-items: center; }
.tranca svg { width: 13px; height: 13px; }
.calc-tile { display: grid; place-items: center; width: 64px; height: 64px; margin: var(--s2) auto var(--s3); border-radius: 22px; background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: var(--shadow-gold); }
.calc-tile svg { width: 30px; height: 30px; }
#f-calc h2, #f-calc .sub { text-align: center; }
#f-calc .preco-premium { justify-content: center; }
#f-calc .btn { margin-bottom: var(--s2); }
#b-calc-comprar:disabled { background: var(--ink-3); color: var(--fg-3); box-shadow: none; filter: none; }
@media (min-width: 861px) {
  .central { padding-top: var(--s6); }
  .central-col { max-width: 720px; grid-template-columns: 1fr 1fr; }
  .central-topo, .cen-heroi, .cen-h, .cen-ferramentas, .cen-numeros { grid-column: 1 / -1; }
  .cen-ferramentas { grid-template-columns: 1fr 1fr; }
}

/* ---------- Partes da mentoria na central (31/10/2026, design system v3) ---------- */
.cen-dica { margin: -4px 0 0; color: var(--fg-3); font-size: var(--fs-sm); }
.cen-partes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; padding: 4px 0 8px; }
.cen-parte { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--fg-2); cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25; text-align: center; transition: transform var(--t-micro) var(--ease); }
.cen-parte:active { transform: scale(.94); }
.central .cen-parte .tile { width: 64px; height: 64px; border-radius: 22px; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(221,185,138,.14); transition: background var(--t-micro) var(--ease); }
.central .cen-parte .tile svg { width: 28px; height: 28px; }
.cen-parte:hover .tile { background: var(--ink-3); }
.cen-parte.vazio { color: var(--fg-3); }
.cen-parte.vazio .tile { color: var(--fg-3); box-shadow: none; }
#cen-promessa:not(.vazio) { cursor: pointer; }
.parte-topo { display: flex; margin-bottom: 4px; }
.parte-cab { display: flex; align-items: center; gap: 14px; }
.parte-cab h1 { margin: 0; }
.central .parte-cab .tile { width: 56px; height: 56px; border-radius: 20px; background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: var(--shadow-gold); }
.central .parte-cab .tile svg { width: 26px; height: 26px; }
.parte-corpo { display: grid; gap: 12px; margin-top: 8px; }
.parte-bloco { background: var(--ink-2); border-radius: 22px; padding: 18px; }
.parte-bloco h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--gold-300); }
.parte-bloco p { margin: 0; color: var(--fg-1); font-size: 1rem; line-height: 1.55; }
.parte-bloco ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.parte-bloco li { position: relative; padding-left: 18px; color: var(--fg-1); font-size: .9375rem; line-height: 1.5; }
.parte-bloco li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--gold-300); }
.parte-espera { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; color: var(--fg-3); text-align: center; }
.parte-espera p { margin: 0; }
.parte-espera .pontos { display: flex; gap: 6px; }
.parte-espera .pontos i { width: 8px; height: 8px; border-radius: 3px; background: var(--gold-300); animation: respira 1.2s var(--ease) infinite; }
.parte-espera .pontos i:nth-child(2) { animation-delay: .15s; }
.parte-espera .pontos i:nth-child(3) { animation-delay: .3s; }
.parte-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.parte-acoes .btn { margin: 0; }
.parte-acoes .parte-calc { grid-column: 1 / -1; }
.parte-acoes .parte-calc[hidden] { display: none; }
.parte .msg:empty { display: none; }
@media (min-width: 861px) {
  .cen-dica, .cen-partes { grid-column: 1 / -1; }
  .cen-partes { grid-template-columns: repeat(6, 1fr); }
  .parte .central-col { grid-template-columns: 1fr; }
  .parte-corpo.swot { grid-template-columns: 1fr 1fr; }
}

/* ---------- Navegação do app (31/10/2026, design system v3): rodapé no celular, barra lateral no computador ---------- */
:root { --nav-h: 72px; }
.nav-app { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: var(--nav-h); padding: 0 6px; border-radius: 26px;
  background: rgba(22,19,16,.97); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(221,185,138,.10); animation: sobe var(--t-ui) var(--ease) both; }
.nav-app[hidden], body.teclado .nav-app { display: none; }
.nav-app button { display: grid; justify-items: center; gap: 3px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--fg-3); font: inherit; }
.nav-app .tile { width: 44px; height: 36px; border-radius: 14px; display: grid; place-items: center; transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease); }
.nav-app svg { width: 22px; height: 22px; }
.nav-app small { font-size: .6875rem; font-weight: 600; line-height: 1; }
.nav-app button:active .tile { transform: scale(.92); }
.nav-app button.ativo { color: var(--gold-300); }
.nav-app button.ativo .tile { background: rgba(221,185,138,.12); }
.nav-app .nav-ouro .tile { width: 56px; height: 48px; border-radius: 18px; background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: var(--shadow-gold); }
.nav-app .nav-ouro small { display: none; }
body.com-nav .central { padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }
body.com-nav .app { height: calc(var(--vvh, 100dvh) - var(--nav-h) - 16px - env(safe-area-inset-bottom)); }
body.com-nav.teclado .app { height: var(--vvh, 100dvh); }
body.com-nav #b-central { display: none; }
body.com-nav .toast { bottom: calc(96px + var(--nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 861px) {
  :root { --nav-w: 92px; }
  .nav-app { left: 16px; right: auto; top: 16px; bottom: 16px; width: calc(var(--nav-w) - 16px); height: auto; padding: 18px 0;
    grid-template-columns: 1fr; grid-auto-rows: 64px; align-content: center; gap: 10px; border-radius: 28px; }
  .nav-app .nav-ouro small { display: block; }
  body.com-nav { padding-left: var(--nav-w); }
  body.com-nav .central { padding-bottom: var(--s6); }
  body.com-nav .app, body.com-nav.teclado .app { height: var(--vvh, 100dvh); }
  body.com-nav .toast { bottom: calc(96px + env(safe-area-inset-bottom)); left: calc(50% + var(--nav-w) / 2); }
  body.teclado .nav-app:not([hidden]) { display: grid; }
}

/* Grátis: central inteira visível, tudo com cadeado (31/10/2026) */
.travada .cen-card { cursor: pointer; }
.travada .cen-card:hover { background: var(--ink-3); }
.travada .cen-txt > span { color: var(--fg-3); }

/* ---------- Calculadora Científica de Mentoria (31/10/2026, design system v3) ---------- */
.calc-esq, .calc-dir { display: contents; }
.calc-topo { display: flex; align-items: center; gap: 10px; order: 0; }
.calc-topo h1 { flex: 1; margin: 0; font-size: 1.25rem; font-weight: 700; }
.central .tile.ouro { background: var(--gold-gradient); color: var(--fg-on-gold); }
.calc-modos { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 17px; background: var(--ink-2); }
.calc-modos button { height: 42px; border: 0; border-radius: 13px; background: transparent; color: var(--fg-3); font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.calc-modos button.on { background: var(--ink-3); color: var(--fg-1); }
.calc-heroi { order: 2; position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 5; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 24px;
  background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.calc-heroi > span:first-child { flex: 1; min-width: 0; display: grid; gap: 4px; }
.calc-heroi small { font-size: .8125rem; font-weight: 600; opacity: .7; }
.calc-heroi b { font-size: 2.375rem; font-weight: 200; line-height: 1; letter-spacing: -.03em; }
.calc-heroi strong { font-weight: 700; }
.calc-vendas { width: 76px; flex: none; display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 18px; background: var(--fg-on-gold); }
.calc-vendas b { font-size: 1.625rem; font-weight: 300; color: var(--gold-200); letter-spacing: 0; }
.calc-vendas small { color: var(--fg-2); opacity: 1; font-size: .6875rem; text-align: center; }
.calc-faixas { order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.calc-faixas button { display: grid; justify-items: center; gap: 3px; padding: 12px 4px; border: 0; border-radius: 18px; background: #121110; color: var(--fg-1); cursor: pointer; font-family: inherit; }
.calc-faixas small { font-size: .75rem; font-weight: 600; color: var(--fg-3); }
.calc-faixas b { font-size: 1rem; font-weight: 400; }
.calc-faixas button.on { background: var(--ink-2); box-shadow: 0 0 0 1.5px var(--gold-300); }
.calc-faixas button.on small { color: var(--gold-300); }
.calc-faixas button.on b { color: var(--gold-200); font-weight: 700; }
.calc-card, .calc-resumo { order: 4; display: grid; gap: 18px; padding: 18px; border-radius: 26px; background: var(--ink-2); }
.calc-card h2, .calc-resumo h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.0625rem; font-weight: 700; }
.central .calc-card h2 .tile, .central .calc-resumo h2 .tile { width: 38px; height: 38px; border-radius: 13px; }
.central .calc-card h2 .tile svg, .central .calc-resumo h2 .tile svg { width: 18px; height: 18px; }
.calc-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.calc-op { display: grid; justify-items: center; gap: 8px; padding: 12px 4px; border: 0; border-radius: 18px; background: #121110; color: var(--fg-2); cursor: pointer; font-family: inherit; font-size: .8125rem; font-weight: 700; line-height: 1.2; }
.central .calc-op .tile { width: 38px; height: 38px; border-radius: 13px; background: var(--ink-2); }
.central .calc-op .tile svg { width: 18px; height: 18px; }
.calc-op.on { background: var(--ink-3); color: var(--fg-1); }
.central .calc-op.on .tile { background: var(--gold-gradient); color: var(--fg-on-gold); }
.calc-rot { margin: 0 0 8px; font-weight: 600; }
.calc-sl { display: grid; gap: 8px; }
.calc-sl-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.calc-sl-cab > span { display: grid; gap: 2px; }
.calc-sl-cab b { font-size: .9375rem; font-weight: 600; }
.calc-sl-cab small { font-size: .75rem; color: var(--fg-3); }
.calc-sl output { font-size: 1.3125rem; font-weight: 300; color: var(--gold-200); white-space: nowrap; }
.calc-sl input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.calc-sl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #DDB98A 0, #C89B62 var(--p, 50%), #2E2A26 var(--p, 50%)); }
.calc-sl input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #DDB98A 0, #C89B62 var(--p, 50%), #2E2A26 var(--p, 50%)); }
.calc-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border: 0; border-radius: 11px; background: var(--fg-1); box-shadow: 0 0 0 4px var(--ink-2), 0 6px 14px rgba(0,0,0,.45); }
.calc-sl input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 11px; background: var(--fg-1); box-shadow: 0 0 0 4px var(--ink-2), 0 6px 14px rgba(0,0,0,.45); }
.calc-pre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-pre button { height: 36px; border: 0; border-radius: 12px; background: var(--ink-3); color: var(--fg-2); font-family: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.calc-pre button.on { background: var(--gold-gradient); color: var(--fg-on-gold); }
.calc-extras { display: grid; gap: 2px; }
.calc-extras button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; border: 0; background: none; color: var(--fg-1); cursor: pointer; text-align: left; font-family: inherit; font-size: .9375rem; font-weight: 600; }
.central .calc-extras .tile { width: 38px; height: 38px; border-radius: 13px; }
.central .calc-extras .tile svg { width: 18px; height: 18px; }
.calc-extras button > span:nth-child(2) { flex: 1; }
.calc-sw { width: 48px; height: 30px; flex: none; display: flex; padding: 3px; border-radius: 11px; background: #2E2A26; transition: background var(--t-micro) var(--ease); }
.calc-sw i { width: 24px; height: 24px; border-radius: 8px; background: var(--fg-3); transition: transform var(--t-micro) var(--ease); }
.calc-extras [aria-checked=true] .calc-sw { background: var(--gold-gradient); }
.calc-extras [aria-checked=true] .calc-sw i { background: var(--fg-on-gold); transform: translateX(18px); }
.calc-manual { display: grid; gap: 8px; font-weight: 600; }
.calc-manual input { height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--ink-3); color: var(--gold-200); font-family: inherit; font-size: 1.25rem; font-weight: 300; }
.calc-h { order: 5; margin: 8px 4px 0; font-size: 1.1875rem; font-weight: 700; }
.calc-stats { order: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-stat { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--ink-2); }
.central .calc-stat .tile { width: 34px; height: 34px; border-radius: 12px; }
.central .calc-stat .tile svg { width: 16px; height: 16px; }
.calc-stat b { font-size: 1.625rem; font-weight: 300; line-height: 1; }
.calc-stat em { font-style: normal; font-size: .8125rem; color: var(--fg-3); }
.calc-stat.ouro b span { color: var(--gold-200); }
.calc-stat small { font-size: .75rem; line-height: 1.35; color: var(--fg-3); }
.calc-resumo { order: 7; gap: 8px; }
.calc-resumo > b { font-size: .9375rem; line-height: 1.4; }
.calc-resumo p { margin: 0 0 8px; color: var(--fg-2); font-size: .875rem; line-height: 1.55; }
.calc .msg:empty { display: none; }
#t-calc .msg { order: 8; }
@media (min-width: 861px) {
  .calc .calc-col { max-width: 1040px; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 20px; }
  .calc-topo { grid-column: 1 / -1; }
  .calc-esq, .calc-dir { display: grid; gap: 14px; align-content: start; }
  .calc-dir { position: sticky; top: var(--s6); }
  .calc-heroi { position: static; }
}

/* Celular: a tela nunca arrasta para o lado (31/10/2026). Texto longo quebra, tabela rola dentro do balão. */
html, body { overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; }
.app, .central, .acesso, .boas, .mensagens { overflow-x: clip; }
.b { overflow-wrap: anywhere; min-width: 0; }
.b pre, .b table { display: block; max-width: 100%; overflow-x: auto; }
.b img { max-width: 100%; height: auto; }

/* ---------- Vitrine dos agentes e conversa do agente (31/10/2026, design system v3) ---------- */
.cen-pacote { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 24px; cursor: pointer; text-align: left;
  background: var(--gold-gradient); color: var(--fg-on-gold); box-shadow: 0 14px 40px rgba(201,155,98,.22); font-family: inherit; transition: transform var(--t-micro) var(--ease); }
.cen-pacote:active { transform: scale(.98); }
.central .cen-pacote .tile { background: var(--fg-on-gold); color: var(--gold-200); }
.cen-pacote > span:last-child { display: grid; gap: 3px; min-width: 0; }
.cen-pacote b { font-size: 1.0625rem; font-weight: 700; }
.cen-pacote small { font-size: var(--fs-sm); font-weight: 600; opacity: .75; }
.cen-agentes { display: grid; gap: 10px; }
.cen-agente { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 22px; background: var(--ink-2); color: var(--fg-1);
  text-align: left; cursor: pointer; font-family: inherit; transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.cen-agente:hover { background: var(--ink-3); }
.cen-agente:active { transform: scale(.985); }
.cen-agente .cen-txt { flex: 1; padding: 0; }
.cen-agente .cen-txt b { font-size: .9375rem; }
.cen-agente .cen-txt > span { font-size: .8125rem; line-height: 1.4; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cen-agente em { flex: none; font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--gold-300); }
.cen-agente.livre em { color: #A9D1B2; }
.ag-tile { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--gold-gradient); color: var(--fg-on-gold); }
.ag-tile svg { width: 20px; height: 20px; }
#t-agente .topo-linha { gap: 10px; }
#t-agente .topo-linha > div { min-width: 0; flex: 1; }
#t-agente .nome, #t-agente .por { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo.model > .avatar.ag-tile { display: grid; width: 30px; height: 30px; border-radius: 10px; }
.grupo.model > .avatar.ag-tile svg { width: 17px; height: 17px; }
.ag-vazio { display: grid; justify-items: center; gap: 8px; max-width: 420px; margin: 8vh auto 0; text-align: center; }
.ag-vazio .ag-tile { width: 64px; height: 64px; border-radius: 22px; box-shadow: var(--shadow-gold); }
.ag-vazio .ag-tile svg { width: 30px; height: 30px; }
.ag-vazio b { font-size: 1.125rem; margin-top: 6px; }
.ag-vazio p { margin: 0; color: var(--fg-3); font-size: .9375rem; line-height: 1.5; }
.ag-inicio { display: grid; gap: 8px; width: 100%; margin-top: 12px; }
.ag-inicio button { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--ink-2); color: var(--fg-1); font-family: inherit; font-size: .9375rem; text-align: left; cursor: pointer; }
.ag-inicio button:hover { background: var(--ink-3); }
@media (min-width: 861px) {
  .cen-pacote, .cen-agentes, #cen-agentes-h { grid-column: 1 / -1; }
  .cen-agentes { grid-template-columns: 1fr 1fr; }
}
#f-agente h2, #f-agente .sub { text-align: center; }
#f-agente .btn { margin-bottom: var(--s2); }

/* ---------- Resposta com cara de gente (02/11/2026): cada palavra entra com leve desfoque, uma depois da outra ---------- */
.b.digitando .w { display: inline; opacity: 0; filter: blur(3px); animation: palavra .32s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--passo, 40ms)); }
@keyframes palavra { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .b.digitando .w { animation: none; opacity: 1; filter: none; } }

/* ---------- Oferta relâmpago dos agentes no grátis (31/10/2026): contador discreto ---------- */
.cen-relogio { font-variant-numeric: tabular-nums; opacity: 1 !important; font-weight: 700 !important; }
.cen-agente.so-nome .cen-txt > span { display: none; }
.cen-agente.so-nome { padding: 12px 16px; }
.chip-relampago { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-left: auto; border: 0; border-radius: 11px; background: rgba(221,185,138,.12); color: var(--gold-300); font-family: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip-relampago b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-200); }
.chip-relampago[hidden] { display: none; }

/* ---------- Grátis, pergunta primeiro (31/10/2026): chat sem conta até o contato ---------- */
body.anonimo #b-anexo, body.anonimo #b-menu, body.anonimo #b-central, body.anonimo #medidor, body.anonimo #chip-relampago, body.anonimo #faixa-ebook { display: none !important; }
body.anonimo #dica a { color: var(--gold-300); }
#f-contato h2 { text-align: center; }
#f-contato .campo { margin-top: var(--s3); }
#f-contato .btn { margin-top: var(--s2); }

/* ---------- Calculadora: contador e prévia travada (31/10/2026) ---------- */
.calc-heroi b, .calc-vendas b, .calc-faixas b, .calc-stat b, #calc-h-sub { font-variant-numeric: tabular-nums; }
.calc-selo { display: none; }
#t-calc.travada-calc .calc-heroi > span, #t-calc.travada-calc .calc-faixas b, #t-calc.travada-calc .calc-stat b, #t-calc.travada-calc .calc-resumo > b, #t-calc.travada-calc .calc-resumo p {
  filter: blur(4px); opacity: .5; transform: translateZ(0); backface-visibility: hidden; user-select: none; }
#t-calc.travada-calc .calc-stat, #t-calc.travada-calc .calc-faixas button, #t-calc.travada-calc .calc-resumo { background: color-mix(in srgb, var(--ink-2) 70%, #000); }
#t-calc.travada-calc #b-calc-copiar { display: none; }
#t-calc.travada-calc .calc-dir { cursor: pointer; }
#t-calc.travada-calc .calc-selo { position: absolute; inset: 0; margin: auto; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; height: 40px; padding: 0 16px;
  border: 0; border-radius: 14px; background: var(--fg-on-gold); color: var(--gold-200); font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.calc-selo svg { width: 16px; height: 16px; }
@media (min-width: 861px) { .calc-heroi { position: relative; } }

/* Pagamento do premium pela InfinitePay (31/10/2026): abre em outra aba; aqui só a espera da confirmação */
#checkout.externo #ck-frame { display: none; }
#checkout.externo .checkout-espera { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s3); text-align: center; padding: var(--s4); }

/* Premium de teste (01/11/2026) */
.aviso-termos { margin: 4px 0 12px; font-size: var(--fs-sm); color: var(--fg-3); text-align: center; }
.aviso-termos a { color: var(--gold-300); }

/* ---------- Calculadora de Tráfego (01/11/2026, design system v3) ---------- */
.calc-sl[hidden] { display: none; }
.tr-usar { justify-self: start; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 13px; background: rgba(221,185,138,.12); color: var(--gold-300); font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; text-align: left; }
.tr-usar[hidden] { display: none; }
.tr-tabela { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.tr-lin { display: grid; grid-template-columns: 1.2fr .8fr .8fr .9fr 1.3fr; gap: 6px; padding: 10px 4px; border-radius: 12px; font-size: .875rem; color: var(--fg-1); }
.tr-lin:nth-child(odd):not(.tr-cab) { background: rgba(255,255,255,.03); }
.tr-lin span:last-child { text-align: right; color: var(--gold-200); font-weight: 600; }
.tr-cab { color: var(--fg-3); font-size: .75rem; font-weight: 600; padding-bottom: 4px; }
.tr-cab span:last-child { color: var(--fg-3); }
#t-trafego.travada-calc .calc-heroi > span, #t-trafego.travada-calc .calc-stat b, #t-trafego.travada-calc .tr-lin:not(.tr-cab), #t-trafego.travada-calc .calc-resumo > b, #t-trafego.travada-calc .calc-resumo p {
  filter: blur(4px); opacity: .5; transform: translateZ(0); backface-visibility: hidden; user-select: none; }
#t-trafego.travada-calc .calc-stat, #t-trafego.travada-calc .calc-resumo { background: color-mix(in srgb, var(--ink-2) 70%, #000); }
#t-trafego.travada-calc #b-tr-copiar { display: none; }
#t-trafego.travada-calc .calc-dir { cursor: pointer; }
#t-trafego.travada-calc .calc-selo { position: absolute; inset: 0; margin: auto; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; height: 40px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--fg-on-gold); color: var(--gold-200); font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
#f-calc #b-calc-combo { margin-top: 0; }

/* ---------- Instalar como app (01/11/2026): fluxo copiado da área de membros da Fábrica Black (clientes/fabrica-black/area-membros),
   com a marca e as cores do Arquiteto (design system v3). Pergunta uma vez e mostra o passo a passo animado do sistema da pessoa. ---------- */
.sheet { --accent: #DDB98A; --accent-rgb: 221, 185, 138; --accent-soft: #ECD3AC; --accent-glow: rgba(221, 185, 138, .16); --accent-gradient: var(--gold-gradient);
  --accent-text: var(--fg-on-gold); --bg-active: var(--ink-3); --bg-elevated: var(--ink-2); --border-default: rgba(255, 255, 255, .08); --border-strong: rgba(221, 185, 138, .2);
  --ink-rgb: 11, 10, 9; --text-primary: var(--fg-1); --text-secondary: var(--fg-2); font-family: inherit; }
.sheet-card { font-family: Urbanist, system-ui, sans-serif; color: var(--fg-1); }
.sheet .sheet-ic { border-radius: 18px; border: 0; background: none; }
.sheet .sheet-btns .btn { margin: 0; }
.sheet .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ── INSTALAR COMO APP (pop-up de baixo, com fundo escurecido) ── */
.sheet { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-end; justify-content: center; padding: var(--s2); padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom)); pointer-events: none; }
.sheet::before { content: ''; position: absolute; inset: 0; background: rgba(var(--ink-rgb), .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; }
.sheet.on { pointer-events: auto; }
.sheet.on::before { opacity: 1; }
.sheet-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--s3); border-radius: 24px; background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: 0 -10px 60px rgba(0,0,0,.55), 0 0 60px var(--accent-glow); transform: translateY(40px); opacity: 0; transition: transform .55s var(--ease), opacity .35s ease; }
.sheet.on .sheet-card { transform: none; opacity: 1; }
.sheet-top { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.sheet-ic { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--bg-active); border: 1px solid var(--border-default); }
.sheet-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.sheet p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.sheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin-top: var(--s3); }
.sheet-card > .btn { display: flex; }
.sheet-card > .btn + .sheet-btns { margin-top: var(--s1); }
.sheet-card .btn .ic { fill: none; stroke: currentColor; }
.sheet-btns .btn { height: 52px; font-size: 15px; }
.sheet-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); counter-reset: st; }
.sheet-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; counter-increment: st; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.sheet-steps li::before { content: counter(st); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .6); font-size: 14px; font-weight: 700; color: var(--accent); }
.sheet-steps li > span { padding-top: 4px; }
.sheet-steps b { font-weight: 600; }
.sheet-steps .ic { display: inline-block; width: 18px; height: 18px; margin: 0 2px; vertical-align: -3px; color: var(--accent); }


/* ── GUIA ANIMADO DE INSTALAÇÃO (iPhone e Android desenhados em código, na cor e com o ícone do cliente) ── */
.guide { position: relative; height: 252px; margin-bottom: var(--s2); border-radius: 20px; overflow: hidden; background: #0b0b0d; border: 1px solid var(--border-default); font-family: -apple-system, 'SF Pro Text', Inter, system-ui, sans-serif; color: #fff; --g: 12s; }
.scn { position: absolute; inset: 0; opacity: 0; animation: scn var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n)) - .02s); }
@keyframes scn { 0% { opacity: 0; transform: scale(1.03); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
.guide[data-n="3"] { --n: 3; } .guide[data-n="4"] { --n: 4; }
.guide[data-n="3"] .scn { animation-name: scn3; } .guide[data-n="3"] .gcap > span { animation-name: scn3; }
@keyframes scn3 { 0% { opacity: 0; transform: scale(1.03); } 5%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
.gcap { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 5; background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,0)); }
.gcap > span { position: absolute; left: 12px; right: 12px; bottom: 9px; text-align: center; font-size: 13px; font-weight: 600; opacity: 0; animation: scn var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n)) - .02s); }
.fk-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 70% 0%, rgba(var(--accent-rgb), .45), transparent 60%), #111; filter: blur(1px); }
.fk-menu, .fk-list, .fk-add { position: absolute; left: 14px; right: 14px; background: #2a2a2d; border-radius: 16px; overflow: hidden; }
.fk-menu { top: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.fk-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 14px; font-size: 14px; border-bottom: 1px solid #3a3a3d; }
.fk-row:last-child { border-bottom: 0; }
.fk-row .ic { width: 17px; height: 17px; color: #fff; opacity: .9; }
.fk-row.hi { background: rgba(var(--accent-rgb), .28); font-weight: 600; }
.tap { position: absolute; right: 22px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 2px solid var(--accent-soft); background: rgba(var(--accent-rgb), .35); opacity: 0; animation: tap var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n)) + .9s); }
@keyframes tap { 0% { opacity: 0; transform: scale(.4); } 3% { opacity: 1; transform: scale(1); } 8% { transform: scale(.8); } 12%, 100% { opacity: 0; transform: scale(1.5); } }
.guide[data-n="3"] .tap { animation-name: tap3; }
@keyframes tap3 { 0% { opacity: 0; transform: scale(.4); } 4% { opacity: 1; transform: scale(1); } 9% { transform: scale(.8); } 14%, 100% { opacity: 0; transform: scale(1.5); } }
.fk-apps { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; gap: 16px; animation: fkapps var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n))); }
@keyframes fkapps { 0%, 4% { opacity: 1; } 14%, 25%, 100% { opacity: 0; } }
.guide[data-n="3"] .fk-apps { animation-name: fkapps3; } @keyframes fkapps3 { 0%, 5% { opacity: 1; } 17%, 33%, 100% { opacity: 0; } }
.fk-apps b { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #4aa3ff, #2563eb); }
.fk-apps b:nth-child(2) { background: linear-gradient(135deg, #7ee27e, #32a852); } .fk-apps b:nth-child(3) { background: linear-gradient(135deg, #8fd0ff, #3a7bd5); } .fk-apps b:nth-child(4) { background: #f3f3f3; }
.fk-list { top: 74px; bottom: 0; border-radius: 16px 16px 0 0; animation: fkscroll var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n))); }
@keyframes fkscroll { 0%, 4% { transform: translateY(0); } 14%, 25%, 100% { transform: translateY(-62px); } }
.guide[data-n="3"] .fk-list { animation-name: fkscroll3; } @keyframes fkscroll3 { 0%, 5% { transform: translateY(0); } 17%, 33%, 100% { transform: translateY(-62px); } }
.fk-add { top: 14px; bottom: 14px; background: #1c1c1e; padding: 12px; }
.fk-addtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fk-addtop > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.fk-addtop .x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #3a3a3d; font-weight: 400; }
.fk-addtop .go { position: relative; flex: none; padding: 7px 14px; border-radius: 999px; background: #3b82f6; font-size: 13px; font-weight: 700; }
.fk-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #2a2a2d; }
.fk-card img { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; }
.fk-card .nm { font-size: 15px; font-weight: 600; } .fk-card .url { margin-top: 3px; font-size: 11px; color: #8e8e93; }
.fk-tg { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 11px 12px; border-radius: 12px; background: #2a2a2d; font-size: 13px; }
.fk-tg i { width: 40px; height: 24px; border-radius: 999px; background: #34c759; position: relative; } .fk-tg i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.fk-home { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; align-content: start; padding: 22px 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), .35), transparent 65%), #0d0d10; }
.fk-home b { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, #3a3f4a, #23262d); }
/* iPhone (Safari atual, vídeo do Allysson 31/10/2026): ••• no canto de baixo à direita > Compartilhar > Ver Mais > Adicionar à Tela de Início > Adicionar */
.guide[data-n="5"] { --n: 5; --g: 15s; }
.guide[data-n="5"] .scn, .guide[data-n="5"] .gcap > span { animation-name: scn5; }
@keyframes scn5 { 0% { opacity: 0; transform: scale(1.03); } 2.5%, 18% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; } }
.guide[data-n="5"] .tap { animation-name: tap5; }
@keyframes tap5 { 0% { opacity: 0; transform: scale(.4); } 2.5% { opacity: 1; transform: scale(1); } 5.5% { transform: scale(.8); } 9%, 100% { opacity: 0; transform: scale(1.5); } }
.guide[data-n="5"] .fk-apps, .guide[data-n="5"] .fk-list { animation: none; }
.guide[data-n="5"] .fk-list { top: 14px; bottom: auto; border-radius: 16px; }
.fk-safari { position: absolute; left: 12px; right: 12px; bottom: 52px; display: flex; align-items: center; gap: 8px; }
.fk-safari .u { flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #2a2a2d; font-size: 12px; color: #c7c7cc; overflow: hidden; white-space: nowrap; }
.fk-safari .d { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2a2a2d; }
.fk-safari .d .tap { right: 5px; }
.fk-pop { position: absolute; right: 12px; bottom: 50px; width: 72%; background: #2a2a2d; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.fk-acts { position: absolute; left: 10px; right: 10px; top: 84px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 10px; line-height: 1.2; color: #e5e5ea; }
.fk-acts > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fk-acts .c { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #2a2a2d; }
.fk-acts .c .ic { width: 18px; height: 18px; }
.fk-acts .hi .c { background: rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 2px var(--accent-soft); }
.fk-acts .hi .tap { top: 22px; right: auto; left: 50%; margin-left: -15px; }
.fk-acts .dn, .ic.h { transform: rotate(90deg); }
/* destaque: escurece todo o resto e acende só o que tocar, com seta na cor da marca (pedido do Allysson 31/10/2026) */
.guide[data-n="5"] .fk-pop, .guide[data-n="5"] .fk-list { overflow: visible; }
.guide[data-n="5"] .fk-row:first-child { border-radius: 16px 16px 0 0; } .guide[data-n="5"] .fk-row:last-child { border-radius: 0 0 16px 16px; }
.guide[data-n="5"] .fk-row.hi, .guide[data-n="5"] .fk-safari .d, .guide[data-n="5"] .fk-acts .hi .c, .guide[data-n="5"] .fk-addtop .go { position: relative; z-index: 4; box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(var(--accent-rgb), .7), 0 0 0 999px rgba(0,0,0,.62); }
.guide[data-n="5"] .fk-row.hi { border-radius: 10px; background: #3a3a3d; }
.guide[data-n="5"] .fk-acts .hi { z-index: 4; }
.arw { display: none; }
.guide[data-n="5"] .arw { display: block; position: absolute; z-index: 6; width: 24px; height: 32px; bottom: calc(100% + 4px); left: 50%; margin-left: -12px; fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8)); animation: arw 1s ease-in-out infinite; }
.guide[data-n="5"] .arw.up { bottom: auto; top: calc(100% + 4px); transform: rotate(180deg); animation-name: arwup; }
.guide[data-n="5"] .fk-row .arw { left: auto; right: 12px; margin-left: 0; }
.guide[data-n="5"] .fk-safari .arw { left: auto; right: 8px; margin-left: 0; }
@keyframes arw { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 3px; } }
@keyframes arwup { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -3px; } }
.fk-home .me { position: relative; aspect-ratio: 1; }
.fk-home .me img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .8); animation: pop var(--g) infinite; animation-delay: calc(var(--i) * (var(--g) / var(--n))); }
.fk-home .me span { position: absolute; left: -6px; right: -6px; top: calc(100% + 4px); text-align: center; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pop { 0%, 6% { transform: scale(.3); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .0), 0 0 30px rgba(var(--accent-rgb), .9); } 17%, 24% { transform: scale(1); opacity: 1; box-shadow: 0 0 22px rgba(var(--accent-rgb), .7); } 100% { opacity: 1; } }
.fk-btnui { position: absolute; left: 14px; right: 14px; bottom: 50px; height: 50px; border-radius: 14px; background: var(--accent-gradient); color: var(--accent-text); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; }
.fk-btnui .ic { width: 18px; height: 18px; color: inherit; }
.fk-btnui .tap { right: 22%; }
.fk-dialog { position: absolute; left: 20px; right: 20px; top: 26px; padding: 16px; border-radius: 18px; background: #2a2a2d; text-align: center; }
.fk-dialog h4 { margin: 10px 0 4px; font-size: 15px; } .fk-dialog p { margin: 0 0 14px; font-size: 12px; color: #aaa; }
.fk-dialog img { width: 54px; height: 54px; border-radius: 13px; }
.fk-dlgbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fk-dlgbtns span { position: relative; padding: 10px; border-radius: 12px; background: #3a3a3d; font-size: 13px; font-weight: 600; } .fk-dlgbtns span.hi { background: #3b82f6; }

.sheet-steps li::before { border-radius: 10px; } /* squircle do v3 */

/* ---------- Vitrine dos agentes em grade com capa (02/11/2026, design system v3) ----------
   2 colunas no celular, 3 no computador. A capa ocupa o topo do cartão e se funde no ink embaixo (nunca com cara de
   recortada); travado: capa mais apagada e cadeado dourado sobre ela; fora de venda: selo "Em breve". */
.cen-agentes.grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 861px) { .cen-agentes.grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ag-card { position: relative; display: grid; grid-template-rows: auto 1fr; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: var(--ink-2); color: var(--fg-1); text-align: left; cursor: pointer; font-family: inherit;
  transition: transform var(--t-micro) var(--ease), background var(--t-micro) var(--ease); }
.ag-card:hover { background: var(--ink-3); }
.ag-card:active { transform: scale(.98); }
.ag-capa { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--ink-3); overflow: hidden; }
.ag-capa img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .3s var(--ease), transform .5s var(--ease); }
.ag-card:hover .ag-capa img { transform: scale(1.03); }
.ag-capa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(26,24,22,0) 52%, var(--ink-2) 100%); }
.ag-card:hover .ag-capa::after { background: linear-gradient(180deg, rgba(35,32,29,0) 52%, var(--ink-3) 100%); }
.ag-capa .ag-ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-300); }
.ag-capa .ag-ico svg { width: 40px; height: 40px; }
.ag-card.travado .ag-capa img { filter: saturate(.7) brightness(.7); }
.ag-card .tranca { top: 10px; right: 10px; bottom: auto; width: 30px; height: 30px; border-radius: 11px; z-index: 1; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.ag-card .tranca svg { width: 16px; height: 16px; }
.ag-selo { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 5px 9px; border-radius: 10px; background: rgba(11,10,9,.8); color: var(--gold-300); font-size: .75rem; font-weight: 700; }
.ag-info { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 2px 14px 14px; }
.ag-info b { font-size: .9375rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-info small { font-size: .8125rem; line-height: 1.4; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-info em { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--gold-300); }
.ag-card.livre .ag-info em { color: #A9D1B2; }
@media (max-width: 380px) { .ag-info small { display: none; } }
.ag-tile.com-capa { background: var(--ink-3); overflow: hidden; }
.ag-tile.com-capa img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ---------- Folhas novas (02/11/2026): agentes retreinados, como usar os agentes, indique um amigo ---------- */
#f-ag-aviso, #f-ag-uso, #f-indique { text-align: left; }
#f-ag-aviso h2, #f-ag-aviso .sub, #f-indique h2, #f-indique > .sub, #f-ag-uso > h2, #f-ag-uso > .sub { text-align: center; }
.uso-op { display: grid; gap: 8px; margin-top: var(--s3); padding: 16px; border-radius: 20px; background: var(--ink-2); }
.uso-op h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.uso-op p { margin: 0; color: var(--fg-2); font-size: .9375rem; line-height: 1.5; }
.uso-op .preco { color: var(--gold-300); font-weight: 700; }
.uso-op .btn { margin: 4px 0 0; }
.uso-op .campo { margin: 4px 0 0; }
.uso-op[hidden], #uso-codigo[hidden] { display: none; }
.ind-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s3) 0 0; }
.ind-num div { padding: 12px 8px; border-radius: 16px; background: var(--ink-2); text-align: center; }
.ind-num b { display: block; font-family: Urbanist, sans-serif; font-weight: 300; font-size: 28px; color: var(--gold-200); line-height: 1.1; }
.ind-num span { font-size: 13px; color: var(--fg-2); }
.indique-link { display: block; margin: var(--s3) 0 var(--s2); padding: 14px 16px; border-radius: 16px; background: var(--ink-2); color: var(--gold-200); font-weight: 600; overflow-wrap: anywhere; }
.indique-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.indique-acoes .btn { margin: 0; }

/* ---------- Módulos, Aulas e Conteúdo (02/11/2026, design system v3) ---------- */
.mod-cab { min-width: 0; display: grid; gap: 4px; }
.mod-cab p { margin: 0; color: var(--fg-3); font-size: var(--fs-sm); line-height: 1.45; }
.mod-cab p:empty { display: none; }
.mod-lista { display: grid; gap: 10px; margin-top: 8px; }
.mod-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 22px; background: var(--ink-2);
  color: var(--fg-1); text-align: left; cursor: pointer; font-family: inherit; transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.mod-item:hover { background: var(--ink-3); }
.mod-item:active { transform: scale(.985); }
.mod-item .cen-txt { flex: 1; padding: 0; }
.mod-item .cen-txt > span { font-size: .875rem; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mod-item .cen-txt small { font-size: .75rem; font-weight: 600; color: var(--gold-300); }
.mod-item .cen-txt small.pronto { color: #A9D1B2; }
.mod-item .seta { width: 20px; height: 20px; flex: none; color: var(--fg-3); }
#mod-acoes[hidden] { display: none; }

/* ---------- Chat no modelo v3 (03/11/2026, Onda V): bolhas, áudio com onda, composer e digitando do protótipo ---------- */
#t-chat #msgs .grupo { margin-bottom: 8px; gap: 8px; }
#t-chat #msgs .grupo + .grupo { margin-top: 8px; }
#t-chat .grupo.model { padding-left: 0; }
#t-chat .grupo.model > .avatar { display: none; }
#t-chat .grupo.model .b + .b { margin-top: 0; }
#t-chat .grupo .b { padding: 11px 14px; font-size: 15px; line-height: 1.45; max-width: 82%; }
#t-chat .grupo.model .b { font-weight: 500; background: var(--ink-2); color: var(--fg-1); border-radius: 20px 20px 20px 6px; }
#t-chat .grupo.user .b { font-weight: 600; background: var(--gold-gradient); color: var(--fg-on-gold); border-radius: 20px 20px 6px 20px; }
#t-chat .grupo.user .b.audio { width: 276px; max-width: 82%; padding: 10px 12px 9px 10px; display: flex; flex-direction: column; gap: 6px; }
.b.audio arq-audio { display: block; white-space: normal; line-height: normal; }
.b.audio .aud-txt { font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(26,20,13,.72); padding: 0 4px; }
.b.audio .aud-txt .tentar { background: rgba(26,20,13,.12); color: var(--fg-on-gold); }
/* Digitando: três pontos dourados na bolha do Arquiteto */
#pensando { margin-bottom: 8px; padding-left: 0; }
.pensando { display: inline-flex; align-items: center; gap: 5px; padding: 15px 16px; border-radius: 20px 20px 20px 6px; background: var(--ink-2); border: 0; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-300); box-shadow: none; animation: azPonto 1.2s infinite; }
.pensando i:nth-child(2) { animation-delay: .15s; } .pensando i:nth-child(3) { animation-delay: .3s; }
.pensando span { background: none; -webkit-text-fill-color: currentColor; color: var(--fg-3); font-size: 13px; animation: none; margin-left: 6px; }
.pensando span:empty { display: none; }
@keyframes azPonto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pensando i { animation: none; opacity: .7; } }
/* Composer: campo ink com anexo dentro e um botão dourado só (microfone ou enviar) */
.entrada { background: var(--ink-1); }
#barra-texto, #barra-grav { gap: 10px; align-items: flex-end; }
.campo-msg { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; min-height: 50px; padding: 0 6px; border-radius: 18px; background: var(--ink-2); box-shadow: 0 0 0 1.5px transparent; transition: box-shadow .2s; }
.campo-msg:focus-within { box-shadow: 0 0 0 1.5px var(--gold-300); }
.campo-msg .enviar.anexo { width: 38px; height: 50px; border-radius: 12px; background: none; color: var(--fg-3); }
.campo-msg .enviar.anexo:hover { background: none; color: var(--gold-300); }
.campo-msg textarea { flex: 1; min-width: 0; background: none !important; border: 0 !important; box-shadow: none; outline: none; padding: 14px 4px; height: 50px; min-height: 50px; font: 500 16px/1.35 var(--font-text); color: var(--fg-1); resize: none; }
#b-enviar { background: var(--gold-gradient); color: var(--fg-on-gold); width: 50px; height: 50px; border-radius: 18px; }
#b-enviar svg { stroke: var(--fg-on-gold); }
#barra-texto #b-enviar { display: none; }
#barra-texto.com-texto #b-enviar { display: flex; align-items: center; justify-content: center; }
#barra-texto.com-texto #b-mic { display: none; }
.mic, #b-enviar { box-shadow: none; }
/* Gravando: campo com ponto vermelho, tempo e onda ao vivo; botão dourado maior para enviar */
#barra-grav .gravacao { flex: 1; min-width: 0; height: 50px; min-height: 50px; gap: 12px; padding: 0 14px; border-radius: 18px; background: var(--ink-2); color: var(--fg-1); font: 600 16px var(--font-text); }
#barra-grav .gravacao .ponto { flex: none; background: #D98273; animation: azGrava 1.1s infinite; }
#barra-grav .onda-viva { flex: 1; min-width: 0; height: 28px; }
#barra-grav .gravacao button { margin-left: 0; color: var(--fg-3); text-decoration: none; font: 600 13px var(--font-text); }
#b-parar.mic.gravando { background: var(--gold-gradient); transform: scale(1.15); box-shadow: 0 0 0 8px rgba(221,185,138,.14); animation: none; }
@keyframes azGrava { 0% { box-shadow: 0 0 0 0 rgba(217,130,115,.6); } 100% { box-shadow: 0 0 0 10px rgba(217,130,115,0); } }