/* A landing de exemplo (03/10/2026): as correções para conferir antes de irem para a página no ar.
   Só o que é novo: o bilhete de mandar para o computador, os recém-abertos de verdade e o grátis primeiro. */

/* ---------- celular ou computador ---------- */
.so-celular { display: none; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .so-celular { display: grid; }
  .so-computador { display: none; }
}

/* ---------- no celular: mandar o link para o computador, como um bilhete ---------- */
.pro-pc { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: center; margin: 26px 0 0; padding: 16px 16px 16px 14px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 18px 34px -26px rgba(27, 24, 20, .45); rotate: -.4deg; }
.pro-pc-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha), inset 0 0 0 3px var(--papel), inset 0 0 0 4px var(--linha); }
.pro-pc-icone .il { --il-s: 26px; rotate: -6deg; }
.pro-pc-texto { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.pro-pc-texto strong { color: var(--tinta); }
.pro-pc-acoes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pro-pc-tag { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 8px; border: 1px solid var(--tinta); border-radius: 6px; background: var(--branco); font: 700 14px var(--ui); color: var(--tinta); text-decoration: none; white-space: nowrap; cursor: pointer; }
.pro-pc-tag .il { rotate: -7deg; }
.pro-pc-tag + .pro-pc-tag .il { rotate: 6deg; }
.pro-pc-tag:active { transform: translateY(1px); }
.pro-pc-tag[aria-expanded="true"] { background: var(--tinta); color: var(--papel); }
.pro-pc-tag[aria-expanded="true"] .il { filter: invert(1) sepia(.25) brightness(1.04); }
.pro-pc-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding-top: 4px; }
.pro-pc-form[hidden] { display: none; }
.pro-pc-form input { width: 100%; margin: 0; padding: 8px 0; border: 0; border-bottom: 2px solid rgba(27, 24, 20, .2); border-radius: 0; background: transparent; color: var(--tinta); font: 400 16px var(--ui); outline: none; }
.pro-pc-form input:focus { border-bottom-color: var(--tinta); }
.pro-pc-form .botao { padding: 9px 18px; }
.pro-pc-nota { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); }
.pro-pc-nota.feito { color: var(--verde); font-weight: 700; }
.pro-pc-nota.errado { color: var(--tinta); }

/* ---------- os recém-abertos de verdade ---------- */
.rv-busca { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 22px; margin: 28px 0 0; }
.rv-campo { position: relative; display: grid; gap: 2px; min-width: 0; }
.rv-rotulo { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.rv-rotulo .il { rotate: -7deg; }
.rv-campo:nth-child(2) .rv-rotulo .il { rotate: 6deg; }
.rv-campo input, .rv-campo select {
  display: block; width: 100%; margin: 0; padding: 6px 0 8px; border: 0; border-bottom: 2px solid rgba(27, 24, 20, .2); border-radius: 0;
  background: transparent; color: var(--tinta); font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
  font-variation-settings: 'SOFT' 55, 'opsz' 40; outline: none; -webkit-appearance: none; appearance: none;
}
.rv-campo select { padding-right: 26px; cursor: pointer; text-overflow: ellipsis; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.2 1.6c1.9 1.7 3.8 3.6 5.9 5.6 2-2.1 3.9-4 5.8-5.9' fill='none' stroke='%231B1814' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center; }
.rv-campo select option, .rv-campo select optgroup { font-family: var(--ui); font-size: 15px; }
.rv-campo input::placeholder { color: rgba(90, 86, 77, .55); }
.rv-campo input:focus, .rv-campo select:focus { border-bottom-color: var(--tinta); }
.rv-ver { grid-column: 1 / -1; justify-self: start; }

.rv-sugestoes { position: absolute; z-index: 20; top: 100%; left: 0; right: auto; min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 32px)); margin: 6px 0 0; padding: 6px; list-style: none; background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 22px 40px -22px rgba(27, 24, 20, .5); }
.rv-sugestoes button { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; align-items: baseline; gap: 14px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--tinta); font: 600 15px var(--ui); text-align: left; cursor: pointer; }
.rv-sugestoes button small { font-weight: 400; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.rv-sugestoes button:hover, .rv-sugestoes button.ativa { background: var(--papel); }

.rv-pontos { margin-top: 30px; }

/* o livro: o número grande, o que mais abriu e o convite */
.recem-vivo .recem-cabeca { flex-wrap: wrap; }
.rv-numero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 18px 2px 16px; border-bottom: 1px dashed var(--linha); transition: opacity .2s steps(2, end); }
.rv-n { font-family: var(--display); font-weight: 600; font-size: 68px; line-height: .9; letter-spacing: -0.02em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 80; font-variant-numeric: lining-nums; }
.rv-frase { display: grid; gap: 4px; min-width: 0; }
.rv-frase strong { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; text-wrap: balance; }
.rv-frase small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.rv-frase small .il { rotate: -6deg; }
.rv-numero.trocando .rv-frase { opacity: .35; }
.rv-numero.trocando .rv-n { letter-spacing: .08em; color: var(--tinta-3); }
.rv-numero.assenta .rv-n, .rv-numero.assenta .rv-frase { animation: rvAssenta .3s steps(3, end) both; }
@keyframes rvAssenta { from { translate: 0 12px; } to { translate: 0 0; } }

.rv-sub { margin: 14px 2px 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.rv-fichas li { display: block; padding: 0; }
.rv-fichas button { display: grid; grid-template-columns: 46px minmax(0, 1fr) 48px; gap: 14px; align-items: center; width: 100%; padding: 10px 2px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rv-fichas button:hover .il, .rv-fichas button:focus-visible .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.rv-fichas button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.rv-fichas li:nth-child(odd) .recem-ramo .il { rotate: -5deg; }
.rv-fichas li:nth-child(even) .recem-ramo .il { rotate: 5deg; }
.rv-conta { justify-self: end; min-width: 44px; padding: 3px 4px; border: 1.5px solid var(--tinta-3); border-radius: 50% 46% 52% 48% / 52% 50% 48% 50%; text-align: center; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta-2); font-variant-numeric: lining-nums; }
.rv-fichas li.escolhida .rv-conta { border-color: var(--verde); color: var(--verde); }
.rv-fichas li.escolhida .recem-nome strong::after { content: ' ·  o seu'; font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde); }

/* a cidade sem recém-abertos nos ramos: o lugar reservado tracejado, nunca um cartão vazio */
.rv-vazio { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; margin: 12px 0 2px; padding: 16px 14px; border: 1.5px dashed rgba(27, 24, 20, .22); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.rv-vazio .il { --il-s: 32px; rotate: -6deg; justify-self: center; }
.rv-erro { margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; background: color-mix(in srgb, var(--papel-2) 80%, transparent); font-size: 14px; color: var(--tinta); rotate: -.3deg; }
.rv-erro[hidden], .rv-vazio[hidden] { display: none; }

.rv-acao { display: grid; justify-items: start; gap: 10px; margin: 18px 0 2px; }
.rv-acao-nota { margin: 0; font-size: 12.5px; color: var(--tinta-2); }

@media (max-width: 760px) {
  .rv-busca { grid-template-columns: 1fr; gap: 16px; }
  .rv-ver { justify-self: stretch; }
  .rv-sugestoes { width: 100%; max-width: none; }
  .rv-n { font-size: 56px; }
  .rv-frase strong { font-size: 18px; }
  .rv-fichas button { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 10px; }
  .rv-acao .botao { justify-self: stretch; }
}

/* ---------- os planos: o grátis primeiro, os pagos depois ---------- */
#planos .plano-faixa { margin: 34px auto 0; }
#planos .plano-faixa + .planos { margin-top: 20px; }

/* ---------- a faixa que diz que é exemplo ---------- */
.exemplo-faixa { max-width: 640px; margin: 0 auto 28px; padding: 12px 16px; background: color-mix(in srgb, var(--papel-2) 80%, transparent); border-radius: 6px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); text-align: center; text-wrap: balance; }
.exemplo-faixa a { color: var(--tinta); }
@media (max-width: 760px) { .exemplo-faixa { margin: 0 16px 24px; } }
@media (prefers-reduced-motion: reduce) { .rv-numero.assenta .rv-n, .rv-numero.assenta .rv-frase { animation: none; } }
.rv-frase small[hidden] { display: none; }
/* o carimbo fica no canto do livro: a cabeça desce para ele não cobrir o "abertos desde" */
.recem-vivo .recem-cabeca { padding-top: 16px; }
.recem-vivo .rv-pontos { margin-bottom: 18px; }
.rv-erro { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
/* o grátis tem 4 vistos e 2 X: em duas colunas, as fileiras fecham sem buraco */
@media (min-width: 761px) { #planos .plano-faixa .faixa-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } }

/* até onde procurar: tags (retângulo de canto arredondado, ícone torto), como a busca do app */
.rv-escopos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-escopo { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); font: 700 13.5px var(--ui); color: var(--tinta-2); cursor: pointer; }
.rv-escopo .il { rotate: -7deg; }
.rv-escopo:nth-child(2) .il { rotate: 6deg; }
.rv-escopo:hover { color: var(--tinta); border-color: rgba(27, 24, 20, .3); }
.rv-escopo:hover .il { animation: ilVivo 250ms steps(3, jump-end) infinite; }
.rv-escopo.escolhido { border-color: var(--tinta); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.rv-escopo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (max-width: 760px) {
  .rv-escopos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rv-escopo { justify-content: center; padding: 8px 4px; font-size: 12.5px; gap: 5px; white-space: nowrap; }
  .rv-escopo .il { --il-s: 18px; }
}
/* no celular, "com as vizinhas" é o mais comprido: a coluna do meio é mais larga */
@media (max-width: 760px) { .rv-escopos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); } }
/* o Enviar acompanha as tags do bilhete */
.pro-pc-form .botao { border-radius: 6px; }

/* o dia do modo autônomo (03/10/2026): um bilhete de horas, no lugar da seção do relógio */
.dia-autonomo { padding: 22px 24px; }
.dia-lista { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dia-lista::before { content: ''; position: absolute; left: 62px; top: 8px; bottom: 8px; width: 1px; background: var(--linha); }
.dia-lista li { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 24px; align-items: baseline; font-size: 14.5px; line-height: 1.45; color: var(--tinta-2); }
.dia-lista li::after { content: ''; position: absolute; left: 59px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 1.5px var(--tinta-3); }
.dia-lista time { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; font-variation-settings: 'SOFT' 55, 'opsz' 24; }
.dia-lista b { color: var(--tinta); font-weight: 600; }
.dia-lista li.dia-chama::after { background: var(--tinta); box-shadow: 0 0 0 1.5px var(--tinta); }
.dia-lista li.dia-chama span { color: var(--tinta); font-weight: 600; }
.dia-lista li.dia-dorme { opacity: .65; }
/* a sua IA, para quem usa Claude Code ou Codex: uma linha, sem vender pelo nome */
.na-sua-ia { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 8px auto 0; padding: 14px 18px; border: 1px dashed var(--linha); border-radius: 10px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }
.na-sua-ia .il { flex: none; rotate: -6deg; }
.na-sua-ia a { color: var(--tinta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }

/* o ramo (03/10/2026, o Vitor: a lista do navegador "tá horrível"): um botão no lugar do select, e o painel da casa
   com a busca e os ramos em tags, por setor, com o ícone a lápis do setor. O select escondido guarda o valor. */
.rv-select-escondido { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rv-ramo-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 6px 4px 8px 0; border: 0; border-bottom: 2px solid rgba(27, 24, 20, .2); background: transparent; color: var(--tinta); font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; font-variation-settings: 'SOFT' 55, 'opsz' 40; text-align: left; cursor: pointer; }
.rv-ramo-botao:focus-visible, .rv-ramo-botao[aria-expanded="true"] { border-bottom-color: var(--tinta); outline: none; }
.rv-ramo-botao span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-seta { flex: none; width: 14px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.2 1.6c1.9 1.7 3.8 3.6 5.9 5.6 2-2.1 3.9-4 5.8-5.9' fill='none' stroke='%231B1814' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; transition: rotate .2s steps(2, end); }
.rv-ramo-botao[aria-expanded="true"] .rv-seta { rotate: 180deg; }
.rv-ramos { position: absolute; z-index: 25; top: calc(100% + 6px); right: 0; width: min(520px, calc(100vw - 32px)); padding: 12px; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 26px 48px -24px rgba(27, 24, 20, .5); }
.rv-ramos[hidden] { display: none; }
.rv-campo .rv-ramos-busca { display: block; height: auto; font-variation-settings: normal; letter-spacing: 0; -webkit-appearance: none; appearance: none; width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--tinta); font: 400 15px var(--ui); outline: none; }
.rv-campo .rv-ramos-busca:focus { border-color: var(--tinta); }
.rv-ramos-lista { display: grid; gap: 12px; max-height: 340px; overflow-y: auto; padding: 2px 2px 4px; overscroll-behavior: contain; }
.rv-ramos-setor { display: grid; gap: 7px; }
.rv-ramos-setor[hidden] { display: none; }
.rv-ramos-setor-nome { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.rv-ramos-setor-nome .il { --il-s: 18px; rotate: -6deg; }
.rv-ramos-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-ramo-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); color: var(--tinta); font: 600 13.5px var(--ui); cursor: pointer; }
.rv-ramo-tag[hidden] { display: none; }
.rv-ramo-tag:hover { border-color: var(--tinta-3); }
.rv-ramo-tag.escolhido { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.rv-ramo-tag:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.rv-ramos-vazio { margin: 4px 2px; font-size: 13.5px; color: var(--tinta-2); }
@media (max-width: 760px) { .rv-ramos { left: 0; right: 0; width: auto; } .rv-ramos-lista { max-height: 300px; } }

/* a seção viva (03/10/2026, o Vitor: "mais animadinha, bonitinha, com cuidado e carinho"): o Ponto procura e
   comemora, fala o que achou num balão ao lado dele, o número conta subindo em passos, as fichas entram de novo, o
   carimbo bate de novo, e cada ramo tem a barrinha a lápis do tamanho real perto do que mais abriu. */
.rv-experimente { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.rv-experimente span { margin-right: 2px; }
.rv-experimente button { padding: 4px 10px; border: 1px dashed var(--linha); border-radius: 6px; background: transparent; color: var(--tinta-2); font: 600 12.5px var(--ui); cursor: pointer; }
.rv-experimente button:hover { border-style: solid; border-color: var(--tinta-3); color: var(--tinta); }
.rv-experimente button:nth-child(odd) { rotate: -1deg; }
.rv-experimente button:nth-child(even) { rotate: 1deg; }

.rv-fala { position: absolute; z-index: 3; top: -58px; right: 104px; max-width: min(300px, 70%); margin: 0; padding: 8px 13px; background: var(--branco); color: var(--tinta); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(27, 24, 20, .4); font-size: 14px; line-height: 1.35; font-weight: 600; }
.rv-fala::after { content: ''; position: absolute; right: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: var(--branco); border-top: 1px solid var(--linha); border-right: 1px solid var(--linha); transform: rotate(45deg); }
.rv-fala[hidden] { display: none; }
.rv-fala.entra { animation: rvFala .3s steps(3, end) both; }
@keyframes rvFala { from { opacity: 0; translate: 8px 4px; } to { opacity: 1; translate: 0 0; } }

.rv-barra { display: block; height: 4px; margin-top: 5px; width: var(--p, 0%); max-width: 100%; border-radius: 3px; background: repeating-linear-gradient(105deg, var(--tinta-3) 0 2px, transparent 2px 4px); opacity: .7; transition: width .45s steps(4, end); }
.rv-fichas li.escolhida .rv-barra { background: repeating-linear-gradient(105deg, var(--verde) 0 2px, transparent 2px 4px); opacity: 1; }
.recem-vivo .rv-fichas li { animation: none; }
.recem-vivo.recontando .rv-fichas li { animation: recemFicha .375s steps(3, jump-end) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
.recem-vivo.recontando .recem-carimbo { animation: recemCarimbo .375s steps(3, jump-end) backwards; animation-delay: .5s; }
.rv-n { font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 760px) { .rv-fala { right: 92px; top: -60px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .rv-fala.entra, .recem-vivo.recontando .rv-fichas li, .recem-vivo.recontando .recem-carimbo { animation: none; } .rv-barra { transition: none; } }

/* (03/10/2026, o Vitor: "o seletor é imenso e vaza pra fora de tudo e corta") a seção não corta o painel, e o painel
   fica compacto, com a lista rolando dentro dele */
.bloco.recem-vivo { overflow: visible; }
.rv-ramos { width: min(400px, calc(100vw - 32px)); padding: 10px; }
.rv-ramos-lista { max-height: 250px; gap: 10px; }
.rv-ramos-setor { gap: 5px; }
.rv-ramo-tag { padding: 4px 9px; font-size: 12.5px; }
.rv-campo .rv-ramos-busca { padding: 7px 10px; margin-bottom: 8px; font-size: 14px; }
@media (max-width: 760px) { .rv-ramos-lista { max-height: 230px; } }

/* o MCP sem ambiguidade (03/10/2026, o Vitor: "parece um eco do plano de R$ 10"): diz que é um servidor MCP, mostra o
   comando e separa do "conectar a sua assinatura ao app" */
.na-sua-ia { align-items: flex-start; }
.na-sua-ia .il { margin-top: 2px; }
.na-sua-ia-texto { display: grid; gap: 8px; min-width: 0; }
.na-sua-ia-texto p { margin: 0; }
.na-sua-ia-texto strong { color: var(--tinta); }
.na-sua-ia-exemplo { display: grid; gap: 4px; }
.na-sua-ia-exemplo code { justify-self: start; max-width: 100%; overflow-x: auto; padding: 6px 10px; border-radius: 6px; background: var(--branco); border: 1px solid var(--linha); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12.5px; color: var(--tinta); white-space: nowrap; }
.na-sua-ia-exemplo span { font-size: 13.5px; }
.na-sua-ia-nota { font-size: 13px; color: var(--tinta-3); }
@media (max-width: 760px) { .na-sua-ia-exemplo code { white-space: normal; overflow-wrap: anywhere; } }

/* o MCP como peça (03/10/2026): texto à esquerda, terminal em tinta à direita */
.mcp-peca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; max-width: 1040px; margin: 40px auto 0; padding: 32px; background: var(--branco); border: 1px solid var(--linha); border-radius: 16px; }
.mcp-rotulo { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.mcp-rotulo .il { rotate: -6deg; }
.mcp-titulo { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 60; }
.mcp-titulo b { font-weight: 700; }
.mcp-sub { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.mcp-diferenca { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--papel); font-size: 13px; line-height: 1.5; color: var(--tinta-2); rotate: -.3deg; }
.mcp-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mcp-terminal { margin: 0; padding: 0 0 14px; background: var(--tinta); border-radius: 12px; box-shadow: 0 26px 48px -28px rgba(27, 24, 20, .6); overflow: hidden; rotate: .4deg; }
.mcp-terminal-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(250, 247, 240, .12); }
.mcp-terminal-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(250, 247, 240, .22); }
.mcp-terminal-barra span { margin-left: 8px; font: 600 11.5px ui-monospace, 'Cascadia Code', Consolas, monospace; color: rgba(250, 247, 240, .5); }
.mcp-linhas { display: grid; gap: 7px; margin: 0; padding: 14px 18px 4px; list-style: none; font: 400 13px/1.5 ui-monospace, 'Cascadia Code', Consolas, monospace; color: rgba(250, 247, 240, .82); }
.mcp-linhas li { overflow-wrap: anywhere; }
.mcp-prompt { color: rgba(250, 247, 240, .45); margin-right: 4px; }
.mcp-cmd, .mcp-pedido { color: var(--papel); }
.mcp-pedido { margin-top: 6px; }
.mcp-ok { color: #8FD3A8; }
.mcp-ok::before { content: 'ok  '; color: #8FD3A8; font-weight: 700; }
.mcp-passo { padding-left: 16px; color: rgba(250, 247, 240, .62); }
.mcp-passo span { color: #A9B8FF; margin-right: 6px; }
.mcp-passo::before { content: '·'; margin-right: 8px; color: rgba(250, 247, 240, .4); }
.mcp-fim { margin-top: 6px; color: var(--papel); font-family: var(--ui); font-size: 14px; }
.mcp-terminal figcaption { padding: 6px 18px 0; font-size: 11.5px; color: rgba(250, 247, 240, .4); }
/* as linhas se escrevem uma a uma, em passos, quando a peça aparece */
.mcp-peca.espera .mcp-linhas li { visibility: hidden; }
.mcp-peca.escreve .mcp-linhas li { animation: mcpLinha .25s steps(2, end) backwards; animation-delay: calc(var(--i) * 420ms); }
@keyframes mcpLinha { from { visibility: hidden; opacity: 0; } 50% { visibility: visible; opacity: .5; } to { visibility: visible; opacity: 1; } }
@media (max-width: 860px) { .mcp-peca { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px 18px; margin-top: 28px; } .mcp-titulo { font-size: 24px; } .mcp-linhas { font-size: 12px; padding: 12px 14px 4px; } .mcp-terminal { rotate: none; } }
@media (prefers-reduced-motion: reduce) { .mcp-peca.espera .mcp-linhas li { visibility: visible; } .mcp-peca.escreve .mcp-linhas li { animation: none; } }

/* o dia do modo autônomo como a linha do tempo do app (03/10/2026, o Vitor: "refletir a interface do próprio prospect,
   que tem os ícones"): o nó a lápis num círculo, a etiqueta pelo tom, o texto e a hora; o Hoje com o resumo */
.dia-autonomo { padding: 16px 16px 10px; --al-bom: #2F7D55; --al-atencao: #8A6A00; }
.al-dia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px 46px; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.al-dia-nome { color: var(--tinta-2); }
.al-dia-resumo { letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: 12px; }
.al-lista { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.al-lista::before { content: ''; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 1px; background: var(--linha); }
.al-evento { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 7px 0; }
.al-no { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--branco); box-shadow: 0 0 0 1px var(--linha); }
.al-no .il { --il-s: 18px; }
.al-evento:nth-child(odd) .al-no .il { rotate: -6deg; }
.al-evento:nth-child(even) .al-no .il { rotate: 5deg; }
.al-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 5px; min-width: 0; }
.al-etiqueta { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--linha); border-radius: 4px; background: var(--papel); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.tom-bom .al-etiqueta { color: var(--al-bom); border-color: rgba(47, 125, 85, .3); background: rgba(47, 125, 85, .07); }
.tom-atencao .al-etiqueta { color: var(--al-atencao); border-color: rgba(138, 106, 0, .3); background: rgba(138, 106, 0, .07); }
.tom-atencao .al-no { box-shadow: 0 0 0 1.5px var(--al-atencao); }
.al-texto { font-size: 13.5px; line-height: 1.4; color: var(--tinta); }
.al-texto b { font-weight: 650; }
.al-evento time { padding-top: 6px; font-size: 12px; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .al-evento { grid-template-columns: 30px minmax(0, 1fr); } .al-evento time { grid-column: 2; padding-top: 0; } }

/* o MCP: o que a sua IA faz por lá, e os dois jeitos lado a lado */
.mcp-pode { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.mcp-pode li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.mcp-pode li:nth-child(odd) .il { rotate: -6deg; }
.mcp-pode li:nth-child(even) .il { rotate: 6deg; }
.mcp-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.mcp-jeito { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 11px 12px; border: 1px dashed var(--linha); border-radius: 10px; }
.mcp-jeito.forte { border-style: solid; border-color: var(--tinta); }
.mcp-jeito p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); }
.mcp-jeito b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--tinta); }
.mcp-jeito:first-child .il { rotate: -6deg; }
.mcp-jeito.forte .il { rotate: 6deg; }
.mcp-diferenca { display: none; }
@media (max-width: 520px) { .mcp-dois { grid-template-columns: minmax(0, 1fr); } }
.al-corpo { display: grid; justify-items: start; gap: 4px; }

/* os dois jeitos sem cara de botão (03/10/2026, o Vitor: "parece um botão o dentro do app"): uma comparação com o fio
   no meio, sem moldura */
.mcp-dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.mcp-dois-rotulo { grid-column: 1 / -1; margin: 0 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.mcp-col { padding: 0 16px 0 0; }
.mcp-col + .mcp-col { padding: 0 0 0 16px; border-left: 1px solid var(--linha); }
.mcp-col p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
.mcp-col .mcp-col-nome { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.mcp-col .mcp-col-nome .il { rotate: -4deg; }
.mcp-col.atual .mcp-col-nome .il { rotate: 4deg; }
.mcp-col-nome span { padding: 0 6px; border: 1px solid var(--tinta); border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 520px) { .mcp-dois { grid-template-columns: minmax(0, 1fr); gap: 12px; } .mcp-col, .mcp-col + .mcp-col { padding: 0; border-left: 0; } .mcp-col + .mcp-col { padding-top: 12px; border-top: 1px solid var(--linha); } }

/* (03/10/2026) os ícones no tamanho do desenho (20 px; 18 cortava o quadro do lado) e as duas colunas do mesmo
   tamanho, com o título e o texto na mesma linha de base */
.mcp-dois { grid-template-rows: auto auto; align-items: start; }
.mcp-col { display: grid; grid-template-rows: 24px auto; row-gap: 6px; }
.mcp-col .mcp-col-nome { height: 24px; margin: 0; }
.mcp-col-nome span { margin-left: 2px; line-height: 16px; }
.mcp-col .mcp-col-nome .il { rotate: none !important; }
.mcp-col .mcp-col-nome { font-family: var(--display); font-size: 16px; font-variation-settings: 'SOFT' 55, 'opsz' 30; gap: 8px; }

/* o saiba mais do uso da IA (03/10/2026): leva à medição na ajuda */
.plano-saiba { display: inline-block; margin-top: 4px; color: var(--tinta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* o grátis com a riqueza dos pagos (03/10/2026) */
.plano.gratis { display: grid; gap: 18px; max-width: 1040px; margin: 34px auto 0; padding: 26px 28px 22px; }
.gratis-cabeca { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.gratis-cabeca .plano-nome, .gratis-cabeca .plano-preco, .gratis-cabeca .plano-conta { margin: 0; }
.gratis-dia { padding-top: 16px; border-top: 1px solid var(--linha); }
.gratis-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.gratis-numeros li { display: grid; grid-template-columns: 20px auto; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 12px 14px; border: 1px dashed var(--linha); border-radius: 10px; background: var(--papel); }
.gratis-numeros li .il { grid-row: 1 / 3; }
.gratis-numeros li:nth-child(odd) .il { rotate: -6deg; }
.gratis-numeros li:nth-child(even) .il { rotate: 6deg; }
.gratis-numeros b { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 60; }
.gratis-numeros span { font-size: 12.5px; line-height: 1.35; color: var(--tinta-2); }
.gratis-meio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.gratis-meio .plano-secao { margin: 0; }
.gratis-pagos { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--papel); font-size: 13.5px; color: var(--tinta-2); }
.gratis-pagos .il { flex: none; rotate: -6deg; }
@media (max-width: 860px) {
  .plano.gratis { padding: 20px 18px 18px; }
  .gratis-cabeca { grid-template-columns: 32px minmax(0, 1fr); }
  .gratis-cabeca .botao { grid-column: 1 / -1; justify-self: stretch; }
  .gratis-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gratis-meio { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.gratis-numeros li::before { display: none; }
.gratis-numeros li { padding-left: 14px; }

/* o grátis com a mensagem pronta à vista (03/10/2026, o Vitor: "vazio demais") */
.gratis-zap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--papel); border: 1px dashed var(--linha); }
.gratis-zap-bolha { position: relative; margin: 0; padding: 8px 12px; border-radius: 10px 10px 10px 3px; background: var(--branco); border: 1px solid var(--linha); font-size: 13.5px; color: var(--tinta); rotate: -.6deg; }
.gratis-zap-botao { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: 12.5px; font-weight: 700; }
.gratis-zap-botao .il { filter: invert(1) sepia(.25) brightness(1.04); }
.plano.gratis .plano-ia { align-items: start; }
.gratis-meio { align-items: start; }

.gratis-ficha { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--papel); border: 1px dashed var(--linha); }
.gratis-ficha-nome { display: grid; gap: 1px; min-width: 0; }
.gratis-ficha-nome strong { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.gratis-ficha-nome small { font-size: 12.5px; color: var(--tinta-2); }
.gratis-ficha-nota { min-width: 40px; padding: 3px 0; border: 1.5px solid var(--verde); border-radius: 50% 46% 52% 48% / 52% 50% 48% 50%; text-align: center; font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--verde); }

/* o grátis compacto (03/10/2026, o Vitor aprovou o meio-termo): a faixa com o essencial antes dos pagos */
.gratis-faixa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; max-width: 1040px; margin: 34px auto 0; padding: 18px 22px; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; }
.gratis-faixa-preco { display: flex; align-items: center; gap: 12px; }
.gratis-faixa-preco .il { rotate: -6deg; }
.gratis-faixa-preco p { display: grid; margin: 0; }
.gratis-faixa-preco b { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--tinta); font-variation-settings: 'SOFT' 55, 'opsz' 40; }
.gratis-faixa-preco span { font-size: 13px; color: var(--tinta-2); }
.gratis-faixa-itens { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; margin: 0; padding: 0; list-style: none; }
.gratis-faixa-itens li { display: flex; align-items: center; gap: 7px; padding: 0; font-size: 13.5px; color: var(--tinta-2); }
.gratis-faixa-itens li::before { display: none; }
.gratis-faixa-itens li:nth-child(odd) .il { rotate: -6deg; }
.gratis-faixa-itens li:nth-child(even) .il { rotate: 6deg; }
.gratis-faixa-itens b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta); }
.gratis-faixa + .planos { margin-top: 18px; }
@media (max-width: 900px) {
  .gratis-faixa { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .gratis-faixa-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gratis-faixa .botao { justify-self: stretch; }
}

/* quem chega pelo anúncio (exemplo.js, 04/10/2026): os recém-abertos abrem a página. No celular o livro sobe para logo
   depois do título, com espaço para o Ponto sentar e falar em cima dele sem cobrir o título. */
.do-anuncio main > #recem { padding-top: 124px; }
@media (max-width: 900px) { .do-anuncio main > #recem { padding-top: 96px; } }
@media (max-width: 900px) {
  .do-anuncio #t-recem { margin-bottom: 0; }
  .do-anuncio #t-recem + .recem-palco { margin: 104px 0 30px; }
}

/* a cidade que veio do IP (exemplo.js, perto): um "trocar" discreto ao lado do nome, que leva ao campo */
.recem-cidade { flex-wrap: wrap; row-gap: 2px; }
.rv-trocar { margin-left: 4px; padding: 3px 0; border: 0; background: none; color: var(--tinta-3); font: 500 12.5px var(--ui); letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.rv-trocar:hover { color: var(--tinta); }
.rv-trocar[hidden] { display: none; }

/* o botão do livro agora carrega o número e a cidade (exemplo.js, convite): quando quebra, quebra centrado e por igual */
#rv-criar { text-align: center; text-wrap: balance; line-height: 1.25; }

/* o presente do primeiro dia (src/planos.js, RECEITA_PRIMEIRO_DIA): uma etiqueta da casa em cima do botão, retângulo de
   canto arredondado com o selo a lápis torto dentro, para o número ser a primeira coisa que o olho pega */
.rv-presente { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px 7px 10px; border: 1.5px solid var(--tinta); border-radius: 8px; background: var(--papel); color: var(--tinta); font: 500 13.5px/1.3 var(--ui); rotate: -1.2deg; }
.rv-presente .il { flex: none; rotate: -10deg; }
.rv-presente b { font-weight: 700; }
.rv-presente { margin-bottom: 4px; }
.rv-acao-nota { text-wrap: balance; }

/* os 3 mais novos com telefone (exemplo.js): a prova de que a base é de verdade. O nome de quem não tem nome fantasia
   fica riscado a lápis (é o nome da pessoa, só na conta), o telefone mascarado, os dias desde a abertura */
.rv-exemplos { list-style: none; margin: 4px 0 4px; padding: 0; display: grid; gap: 0; }
.rv-exemplos li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px dashed var(--linha); }
.rv-exemplos .rv-ex-titulo { padding: 10px 0 2px; border: 0; font: 600 10.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.rv-ex-nome { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--tinta); line-height: 1.25; }
.rv-ex-oculto { display: inline-block; width: 9.5em; max-width: 70%; height: .78em; vertical-align: -1px; border-radius: 3px; background: repeating-linear-gradient(-58deg, var(--tinta-2) 0 1.5px, transparent 1.5px 4px); opacity: .55; }
.rv-ex-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 500 12.5px var(--ui); color: var(--tinta-2); }
.rv-ex-tel { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; color: var(--tinta); letter-spacing: .02em; }
.rv-ex-tel .il { flex: none; --il-s: 16px; }
.rv-ex-dias { color: var(--tinta-3); }
/* no celular, com os exemplos na tela, o ranking mostra só os 3 primeiros ramos: o botão não fica a três telas */
@media (max-width: 760px) { .rv-exemplos:not([hidden]) ~ .rv-fichas li:nth-child(n+4) { display: none; } }