/* Arquiteto Zeus: 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: #77746d;
  --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: 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: 34px; height: 34px; 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; }
}