/* O sistema da landing do bots. Os bots de papel existem: cada capítulo é uma fotografia deles trabalhando, impressa
   na página branca como uma cópia, com a conversa do dia ao lado. O resultado de cada tarefa sai num cartão de papel
   com a folha de trás aparecendo embaixo, como as cabeças dos bots (duas folhas, a de trás deslocada). Tinta fria, uma
   cor elétrica (a luz da tela) e só duas pranchas escuras: a da senha e o fecho. */
@font-face{font-family:"Geist";src:url("/lp/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --papel:#ffffff;
  --papel-2:#f2f5f5;
  --papel-3:#e7eded;
  --tinta:#0b1113;
  --tinta-2:#455154;
  --tinta-3:#5c696c;
  --fio:rgba(11,17,19,.09);
  --fio-2:rgba(11,17,19,.17);
  --tela:#136f7a;
  --tela-viva:#1c99a7;
  --menta:#9be8ea;
  --noite:#050a0b;
  --ligado:#1d7a45;
  --atencao:#8a5a06;
  --atencao-fundo:rgba(138,90,6,.1);
  --margem:clamp(20px,4.4vw,64px);
  --largura:1360px;
  --suave:cubic-bezier(.16,1,.3,1);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
  interpolate-size:allow-keywords;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:var(--tela-viva);color:#fff}
:focus-visible{outline:2px solid var(--tela);outline-offset:3px;border-radius:6px}
.prancha :focus-visible,.rodape :focus-visible{outline-color:var(--menta)}
code{font-family:var(--mono);font-size:.84em;padding:.12em .42em;border-radius:6px;background:var(--papel-2);color:var(--tinta);white-space:nowrap}
.pular{position:fixed;z-index:60;left:var(--margem);top:12px;padding:10px 15px;border-radius:10px;background:var(--tinta);color:#fff;font-weight:500;transform:translateY(-200%)}
.pular:focus-visible{transform:none}
.ic{width:18px;height:18px;flex:none}

.dentro{max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:0 var(--margem)}

/* ---------- botões e elos ---------- */
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.botao{display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:var(--tinta);color:#fff;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .18s,transform .15s var(--suave)}
.botao:hover{background:var(--tela)}
.botao:active{transform:scale(.97)}
.botao .ic{width:17px;height:17px;transition:transform .25s var(--suave)}
.botao:hover .ic{transform:translateX(3px)}
.botao-p{height:38px;padding:0 16px;font-size:14px}
.botao-g{height:54px;padding:0 24px 0 27px;font-size:17px}
.botao-claro{background:#fff;color:var(--tinta)}
.botao-claro:hover{background:#dff4f5}
.elo{font-weight:500;padding-block:10px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--fio-2);transition:text-decoration-color .15s}
.elo:hover{text-decoration-color:var(--tinta)}
.elo-claro{color:rgba(255,255,255,.9);text-decoration-color:rgba(255,255,255,.4)}
.elo-claro:hover{color:#fff;text-decoration-color:#fff}
.nota{margin-top:14px;font-size:13.5px;color:var(--tinta-3)}

/* ---------- a lista de espera: o e-mail e, depois, o que a pessoa deixaria com o bot ---------- */
.lista{width:min(30rem,100%)}
.lista-campo{display:flex;align-items:stretch;gap:8px}
.lista-campo input{flex:1;min-width:0;height:54px;padding:0 20px;border:1px solid var(--fio-2);border-radius:999px;background:#fff;color:var(--tinta);font:inherit;font-size:16px;outline:0;transition:border-color .15s,box-shadow .15s}
.lista-campo input::placeholder{color:var(--tinta-3)}
.lista-campo input:focus{border-color:var(--tela);box-shadow:0 0 0 3px rgba(28,153,167,.18)}
button.botao{border:0;font:inherit;cursor:pointer}
.lista-campo .botao{flex:none}
.lista.enviando .lista-campo .botao{opacity:.6;cursor:progress}
.botao-claro-borda{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--fio-2)}
.botao-claro-borda:hover{background:var(--papel-2)}
.lista-erro{margin-top:10px;font-size:14px;color:#b42318}
.lista-erro:empty{display:none}
.isca{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.lista-feito:focus{outline:0}
.lista-ok{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:var(--ligado)}
.lista-ok .ic{width:18px;height:18px}
.lista-uso{margin-top:18px}
.lista-uso label{display:block;margin-bottom:10px;font-size:15px;color:var(--tinta-2)}
.lista-obrigado{margin-top:10px;font-size:15px;color:var(--tinta-2)}
.capa-acoes .nota{max-width:30rem}
.capa-elo{display:inline-block;margin-top:6px}
/* na prancha do fecho: campo claro sobre o escuro, botão branco */
.prancha .lista{margin-top:36px}
.prancha .lista-campo input{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff}
.prancha .lista-campo input::placeholder{color:rgba(255,255,255,.55)}
.prancha .lista-campo input:focus{border-color:var(--menta);box-shadow:0 0 0 3px rgba(155,232,234,.22)}
.prancha .lista-campo .botao{background:#fff;color:var(--tinta)}
.prancha .lista-campo .botao:hover{background:#dff4f5}
.prancha .botao-claro-borda,.prancha .lista-campo .botao-claro-borda{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.prancha .lista-erro{color:#ffb4a8}
.prancha .lista-ok{color:#7ee2a8}
.prancha .lista-uso label,.prancha .lista-obrigado{color:rgba(255,255,255,.8)}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .2s}
.topo.rolou{border-bottom-color:var(--fio)}
.topo-dentro{max-width:calc(var(--largura) + 2 * var(--margem));margin:0 auto;padding:0 var(--margem);height:64px;display:flex;align-items:center;gap:34px}
.marca{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:19px;letter-spacing:-.035em}
.marca .rosto{width:28px;height:28px;margin-top:-3px}
.topo-links{display:flex;gap:26px;font-size:14.5px}
.topo-links a{color:var(--tinta-2);transition:color .15s}
.topo-links a:hover{color:var(--tinta)}
.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14.5px}
.lingua{font-size:12.5px;font-weight:600;color:var(--tinta-2);padding:4px 9px;border:1px solid var(--fio-2);border-radius:999px;transition:color .15s,border-color .15s}
.lingua:hover{color:var(--tinta);border-color:var(--tinta-3)}

/* ---------- os bots de papel do app (app/src/estilo/bots.css): respiram, piscam e olham pro cursor ---------- */
.rosto{display:inline-block;flex:none;line-height:0;vertical-align:middle}
.rosto svg{width:100%;height:100%;overflow:visible}
.bot .pose{transform-origin:20px 22px;transform:rotate(var(--incl))}
.bot .folha{transform-origin:20px 22px}
.bot .olhos{transform:translate(var(--ox,0px),var(--oy,0px));transition:transform .25s ease}
.bot .status{display:none}
.bot.esperando .olho{transform:scale(1.18)}
.bot.vivo .frente{animation:bot-respirar 3.4s ease-in-out infinite;animation-delay:var(--atraso)}
.bot.vivo .tras{animation:bot-respirar 3.4s ease-in-out infinite;animation-delay:calc(var(--atraso) + .18s)}
@keyframes bot-respirar{0%,100%{transform:translateY(0)}50%{transform:translateY(-.55px)}}
.bot.vivo .palpebra{animation:bot-piscar 5.2s ease-in-out infinite;animation-delay:calc(var(--atraso) * 1.7)}
@keyframes bot-piscar{0%,93%,100%{transform:translateY(0)}95.5%,97%{transform:translateY(5.3px)}}
.bot.vivo .antena{animation:bot-balancar 4.6s ease-in-out infinite;animation-delay:var(--atraso)}
@keyframes bot-balancar{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
.bot.vivo.esperando .pose{animation:bot-chamar 3.2s ease-in-out infinite;animation-delay:var(--atraso)}
@keyframes bot-chamar{0%,78%,100%{transform:rotate(var(--incl)) translateY(0)}83%{transform:rotate(calc(var(--incl) - 5deg)) translateY(-2.4px)}88%{transform:rotate(calc(var(--incl) + 4deg)) translateY(-.6px)}93%{transform:rotate(calc(var(--incl) - 2deg)) translateY(-1.2px)}}
.bot.vivo.cutucado .pose{animation:bot-cutucar .5s cubic-bezier(.3,1.5,.5,1) 1}
@keyframes bot-cutucar{0%{transform:rotate(var(--incl)) scale(1)}30%{transform:rotate(var(--incl)) scale(1.1,.88)}65%{transform:rotate(var(--incl)) scale(.95,1.07)}100%{transform:rotate(var(--incl)) scale(1)}}
/* trabalhando: os olhos leem da esquerda pra direita; dormindo: olhos fechados e a cabeça caída de lado */
.bot.vivo.trabalhando .palpebra{animation:none}
.bot.vivo.trabalhando .olho{animation:bot-ler 1.8s ease-in-out infinite}
@keyframes bot-ler{0%,100%{transform:translateX(-1.1px)}50%{transform:translateX(1.1px)}}
.bot.dormindo .olho{transform:scaleY(.12)}
.bot.dormindo .pose{transform:rotate(calc(var(--incl) + 6deg)) translateY(1px)}
.bot.dormindo .antena{transform:rotate(14deg)}
.bot.vivo.dormindo .palpebra,.bot.vivo.dormindo .olho,.bot.vivo.dormindo .antena{animation:none}
.bot.vivo.dormindo .frente,.bot.vivo.dormindo .tras{animation-duration:5.6s}
/* enquanto você digita um código no navegador do bot, ele fecha os olhos e vira o rosto */
.rosto.tapando .bot .olho{animation:none;transform:scaleY(.12);transition:transform .18s ease}
.rosto.tapando .bot .palpebra{animation:none}
.rosto.tapando .bot .pose{animation:none;transform:rotate(calc(var(--incl) - 8deg)) translateX(-.8px);transition:transform .3s var(--suave)}

/* ---------- a cópia: a fotografia impressa na página ---------- */
.copia figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:12px;font-size:13.5px;color:var(--tinta-3)}
.papel-foto{overflow:hidden;border-radius:6px;background:#0b1214}
.papel-foto img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.js .copia.revela .papel-foto img{filter:brightness(.55) saturate(.35);transform:scale(1.05);transition:filter 1.5s var(--suave),transform 1.8s var(--suave)}
.js .copia.revela.vista .papel-foto img{filter:none;transform:none}

/* ---------- capa ---------- */
.capa{padding-top:clamp(36px,6vh,72px)}
.capa-titulo{margin-left:-.045em;font-weight:600;font-size:clamp(3.4rem,9vw,8.75rem);line-height:.9;letter-spacing:-.06em;text-wrap:balance}
.capa-linha{display:grid;grid-template-columns:minmax(0,37rem) auto;justify-content:space-between;align-items:end;gap:28px 64px;margin-top:clamp(22px,2.6vw,36px)}
.capa-sub{font-size:clamp(18px,1.5vw,20.5px);line-height:1.45;color:var(--tinta-2);text-wrap:pretty}
.copia-capa{margin-top:clamp(32px,3.6vw,52px)}
.copia-capa .papel-foto img{aspect-ratio:21/9;object-position:50% 92%;animation:revelar 1.9s var(--suave) .15s both}
@keyframes revelar{from{filter:brightness(.5) saturate(.3);transform:scale(1.06)}to{filter:none;transform:none}}

/* ---------- seções ---------- */
.secao{padding:clamp(104px,11vw,168px) 0}
.secao h2,.secao-cabeca h2{font-weight:600;font-size:clamp(2.5rem,5.2vw,5rem);line-height:.96;letter-spacing:-.052em;text-wrap:balance}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--tinta-2);max-width:36em;text-wrap:pretty}
.secao-cabeca .lead{margin-top:24px}

/* um dia de trabalho: um capítulo por bot, com a hora, a foto e a conversa */
.capitulo{margin-top:clamp(72px,8vw,120px);padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--tinta)}
.cap-rotulo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;color:var(--tinta-2)}
.cap-rotulo time{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinta);margin-right:6px}
.cap-rotulo .rosto{width:26px;height:26px}
.cap-rotulo b{font-weight:600;color:var(--tinta)}
.cap-titulo{margin-top:14px;margin-left:-.04em;max-width:17ch;font-weight:600;font-size:clamp(2.1rem,4.4vw,4.1rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.cap-corpo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px clamp(32px,5vw,80px);align-items:start;margin-top:clamp(28px,3.4vw,48px)}
.inverso .cap-corpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.inverso .copia{order:2}
/* a foto acompanha a conversa enquanto ela rola, como uma cópia presa ao lado do texto */
.cap-corpo > .copia{position:sticky;top:92px}
.cap-p{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--tinta-2);max-width:40ch;text-wrap:pretty}

/* a conversa do dia, com o rosto de cada bot */
.fio{margin-top:26px;border-top:1px solid var(--fio-2)}
.fio .msg{display:grid;grid-template-columns:26px minmax(0,1fr);gap:0 12px;padding:13px 0;border-bottom:1px solid var(--fio)}
.fio .av{width:24px;height:24px;margin-top:1px}
.fio .av .rosto{width:24px;height:24px}
.voce-av{display:grid;place-items:center;border-radius:50%;background:var(--tinta);color:#fff;font-size:11px;font-weight:600;line-height:1}
.fio .av-icone{display:grid;place-items:center;color:var(--tinta-3)}
.fio .av-icone .ic{width:17px;height:17px}
.fio .msg-cab{display:flex;align-items:baseline;gap:8px;font-size:13.5px;line-height:1.3}
.fio .msg-cab b{font-weight:600}
.fio .msg-cab time{color:var(--tinta-3);font-variant-numeric:tabular-nums}
.fio .msg-texto{margin-top:3px;font-size:16.5px;line-height:1.45;text-wrap:pretty}
.fio .msg.fato .msg-texto{font-size:15.5px;color:var(--tinta-2)}
.fio .msg-cartao{display:block;padding:16px 0 20px 38px}

/* o resultado num cartão de papel: a folha de trás aparece embaixo, como nas cabeças dos bots */
.recorte{padding:16px 18px 17px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--fio-2),0 5px 0 -1px var(--papel-3),0 5px 0 0 var(--fio-2),0 22px 32px -22px rgba(11,17,19,.35)}
.rec-titulo{font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.rec-meta{margin-top:3px;font-size:13.5px;color:var(--tinta-3)}
.rec-botoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mini-botao{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:500;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--fio-2);cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .12s var(--suave)}
.mini-botao:hover{box-shadow:inset 0 0 0 1px var(--tinta-3)}
.mini-botao:active{transform:scale(.97)}
.mini-botao.escuro{background:var(--tinta);color:#fff;box-shadow:none}
.mini-botao.escuro:hover{background:var(--tela)}
.mini-botao .ic{width:15px;height:15px}
/* o pedido que espera você pisca em âmbar, como no app; resolvido, o cartão vira o carimbo verde */
.rec-espera{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--atencao)}
.rec-espera i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--atencao-fundo);animation:pulsar-ponto 1.8s ease-in-out infinite}
@keyframes pulsar-ponto{0%,100%{opacity:1}50%{opacity:.4}}
.rec-feito:focus{outline:0}
.rec-detalhe{margin-top:12px}
.rec-detalhe li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--fio);font-size:14.5px}
.rec-detalhe li span{color:var(--tinta-2)}
.rec-detalhe li span + span{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-detalhe li span:only-child{line-height:1.5}
.cod-topo{display:flex;align-items:flex-start;gap:12px}
.cod-icone{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;background:var(--atencao-fundo);color:var(--atencao)}
.cod-icone .ic{width:16px;height:16px}
.cod-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:14px}
.cod-form label{display:grid;gap:6px;font-size:12.5px;color:var(--tinta-3)}
.cod-form input{width:9.5ch;height:40px;padding:0 10px;border:1px solid var(--fio-2);border-radius:10px;background:#fff;color:var(--tinta);font:600 18px/1 var(--mono);letter-spacing:.3em;text-align:center;outline:0;transition:border-color .15s,box-shadow .15s}
.cod-form input:focus{border-color:var(--tela);box-shadow:0 0 0 3px rgba(28,153,167,.18)}
.cod-form .mini-botao{height:40px;padding:0 16px}
.cod-form.erro input{animation:sacudir .4s ease-in-out 1}
@keyframes sacudir{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.cod-nota{margin-top:10px;font-size:13px;color:var(--tinta-3)}
.rec-arquivos{display:flex;flex-wrap:wrap;gap:6px}
.rec-arquivos li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;background:var(--papel-2);font-size:12.5px}
.rec-arquivos li b{font-weight:500}
.rec-arquivos li span{color:var(--tinta-3)}
.rec-arquivos .ic{width:14px;height:14px;color:var(--tinta-3)}
.so-leitor{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rec-feito{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--fio-2);font-size:13.5px;font-weight:500;color:var(--ligado)}
.rec-feito .ic{width:15px;height:15px}
.rec-tabela{margin-top:10px}
.rec-tabela div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-top:1px solid var(--fio);font-size:14.5px}
.rec-tabela dt{color:var(--tinta-2)}
.rec-tabela dd{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-tabela .alta dd{color:var(--atencao)}
.delta{display:inline-block;margin-right:8px;padding:1px 7px;border-radius:999px;background:var(--atencao-fundo);font-size:12px;font-weight:600}
.rec-tabela .total{border-top:1.5px solid var(--tinta)}
.rec-tabela .total dt{color:var(--tinta);font-weight:600}
.rec-nota{margin-top:8px;font-size:13.5px;color:var(--atencao)}
.rec-id{font-size:12.5px;font-weight:600;color:var(--tela)}
.rec-id + .rec-titulo{margin-top:4px}
.rec-passos{margin-top:12px;counter-reset:passo;display:grid;gap:5px}
.rec-passos li{counter-increment:passo;display:grid;grid-template-columns:20px minmax(0,1fr);font-size:14px;color:var(--tinta-2)}
.rec-passos li::before{content:counter(passo) ".";color:var(--tinta-3);font-variant-numeric:tabular-nums}
.rec-anexo{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 11px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--fio-2);font-size:13px;color:var(--tinta-2)}
.rec-anexo .ic{width:15px;height:15px}

/* sem o bot e com o bot, lado a lado */
.resultado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:28px}
.resultado > div{padding-top:12px;border-top:2px solid var(--tinta)}
.resultado .antes{border-top-color:var(--fio-2)}
.resultado dt{font-size:13px;color:var(--tinta-3)}
.resultado dd{margin-top:4px;font-size:clamp(17px,1.45vw,20px);font-weight:600;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.resultado .antes dd{font-weight:500;color:var(--tinta-3)}

/* a conversa chega quando o capítulo aparece */
.js .capitulo .fio .msg{opacity:0;transform:translateY(8px);transition:opacity .45s var(--suave),transform .5s var(--suave)}
.js .capitulo .fio .msg.chegou{opacity:1;transform:none}

/* ---------- pranchas escuras: a senha e o fecho ---------- */
.prancha{position:relative;isolation:isolate;overflow:hidden;background:var(--noite);color:#fff;padding:clamp(120px,15vw,220px) 0 clamp(88px,10vw,140px)}
.prancha-foto{position:absolute;inset:0;z-index:-1}
.prancha-foto img{width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.prancha-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,11,.94) 0%,rgba(5,10,11,.82) 32%,rgba(5,10,11,.25) 62%,rgba(5,10,11,0) 82%),linear-gradient(180deg,rgba(5,10,11,.4) 0%,rgba(5,10,11,0) 28%,rgba(5,10,11,0) 70%,rgba(5,10,11,.7) 100%)}
.prancha .dentro > *{max-width:600px}
.prancha h2{margin-left:-.045em;font-weight:600;font-size:clamp(2.8rem,6vw,5.9rem);line-height:.93;letter-spacing:-.055em;text-wrap:balance}
.prancha .lead{margin-top:24px;color:rgba(255,255,255,.82)}
.prancha code{background:rgba(255,255,255,.1);color:var(--menta)}
.fatos{margin-top:clamp(44px,5vw,72px);border-top:1px solid rgba(255,255,255,.22)}
.fatos li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.fatos h3{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em}
.fatos p{margin-top:6px;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.7)}
.fecho .acoes{margin-top:36px}
.fecho .nota{color:rgba(255,255,255,.6)}
.fecho .prancha-foto img{object-position:72% 30%}

/* ---------- a AraraHQ por dentro: o espaço de verdade, clicável ---------- */
.por-dentro{padding-top:0}
.dentro-cabeca{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px clamp(32px,5vw,80px);align-items:end;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--tinta)}
.dentro-cabeca .lead{margin-top:24px}
.fatos-claros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px);margin-top:clamp(64px,7vw,104px)}
.fatos-claros li{padding-top:18px;border-top:1px solid var(--tinta)}
.fatos-claros h3{font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.fatos-claros p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--tinta-2);text-wrap:pretty}
.selo{display:inline-flex;vertical-align:middle;margin-left:6px;padding:2px 9px;border:1px dashed var(--fio-2);border-radius:999px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--tinta-2);white-space:nowrap}
.sites{margin-top:clamp(40px,4vw,56px);max-width:62em;font-size:14px;line-height:1.55;color:var(--tinta-3)}

/* o espaço é o app, escuro, impresso na página como uma cópia: a folha de trás aparece embaixo, como nos cartões e nas
   cabeças dos bots. Os tokens são os do app (app/src/estilo/minha.css), com o cinza mais fraco um pouco mais claro pra
   ler bem no tamanho pequeno. O layout segue a largura do próprio espaço (container), não a da tela */
.espaco{container-type:inline-size;margin-top:clamp(40px,4.4vw,64px)}
.espaco > figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:20px;font-size:13.5px;color:var(--tinta-3)}
.app{
  --a-fundo:#050a0b;--a-solido:#0d1719;--a-vidro:rgba(255,255,255,.04);--a-vidro-2:rgba(255,255,255,.06);--a-vidro-3:rgba(255,255,255,.1);
  --a-texto:#f5f5f7;--a-texto-2:#a6a6ab;--a-texto-3:#85858b;--a-fio:rgba(255,255,255,.07);--a-fio-2:rgba(255,255,255,.14);
  --a-acento:#1c99a7;--a-acento-forte:#9be8ea;--a-ligado:#30d158;--a-ligado-texto:#5fe08a;--a-atencao:#ffb340;--a-atencao-suave:rgba(255,179,64,.14);
  position:relative;isolation:isolate;display:grid;grid-template-columns:52px 244px minmax(0,1fr) 280px;height:clamp(560px,80vh,720px);overflow:hidden;border-radius:14px;
  background:radial-gradient(900px 560px at 0% 0%,rgba(255,255,255,.08),transparent 62%),radial-gradient(800px 560px at 100% 100%,rgba(28,153,167,.13),transparent 60%),var(--a-fundo);
  color:var(--a-texto);font-size:13px;line-height:1.45;color-scheme:dark;
  box-shadow:0 0 0 1px #0b1113,0 7px 0 -1px var(--papel-3),0 7px 0 0 var(--fio-2),0 44px 80px -44px rgba(11,17,19,.6);
}
.app :focus-visible{outline-color:var(--a-acento-forte)}
.app .ic{width:15px;height:15px}
.app-trilho{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;background:var(--a-solido);border-right:1px solid var(--a-fio)}
.trilho-espaco{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--a-acento);color:var(--a-fundo);font-size:11.5px;font-weight:650;letter-spacing:.02em}
.trilho-espaco::before{content:"";position:absolute;left:-9px;top:8px;width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--a-texto)}
.trilho-mais{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px dashed var(--a-fio-2);color:var(--a-texto-2)}
.trilho-mais .ic{width:14px;height:14px}

/* lateral: o Chief of Staff no alto com o que espera você, depois canais e mensagens diretas */
.app-lateral{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0 6px;background:var(--a-vidro);border-right:1px solid var(--a-fio)}
.lat-topo{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 6px 8px}
.lat-espaco{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--a-texto-2)}
.lat-espaco .ic{width:11px;height:11px}
.lat-busca{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a-vidro-2);color:var(--a-texto)}
.lat-busca .ic{width:14px;height:14px}
.lat-lista{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 0 12px;scrollbar-width:thin;scrollbar-color:var(--a-fio-2) transparent}
.lat-secao{display:flex;align-items:center;gap:4px;padding:12px 6px 3px;font-size:11.5px;font-weight:500;color:var(--a-texto-3)}
.lat-secao .ic{width:11px;height:11px}
.item{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:4px 8px 4px 6px;border:0;border-radius:7px;background:transparent;color:var(--a-texto-2);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s}
.item:hover{background:var(--a-vidro-2);color:var(--a-texto)}
.item.ativo{background:var(--a-vidro-3);color:var(--a-texto)}
.item:active{transform:scale(.99)}
.item-nome{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0}
.item-nome b{flex:none;max-width:100%;overflow:hidden;font-size:13px;font-weight:450;white-space:nowrap;text-overflow:ellipsis}
.item-nome small{min-width:0;overflow:hidden;font-size:11.5px;color:var(--a-texto-3);white-space:nowrap;text-overflow:ellipsis}
.item.novo b,.item.chefe b{font-weight:600;color:var(--a-texto)}
.item.chefe{margin:4px 0 2px}
.item-icone{display:grid;place-items:center;flex:none;width:20px;height:20px;color:var(--a-texto-3)}
.item-icone .ic{width:14px;height:14px}
.item-rosto{position:relative;flex:none;width:20px;height:20px}
.item-rosto .rosto{width:20px;height:20px}
.ponto{position:absolute;right:-3px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--a-texto-3);box-shadow:0 0 0 2px #0c1314}
.ponto.p-disponivel{background:var(--a-ligado)}
.ponto.p-trabalhando{background:var(--a-ligado);animation:pulsar-ponto 1.6s ease-in-out infinite}
.ponto.p-esperando{background:var(--a-atencao)}
.ponto.p-dormindo{background:#0c1314;box-shadow:0 0 0 2px #0c1314,inset 0 0 0 1.5px var(--a-texto-3)}
.marca-conta{display:grid;place-items:center;flex:none;min-width:18px;height:18px;margin-left:auto;padding:0 5px;border-radius:999px;background:var(--a-atencao);color:#2a1a00;font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
.marca-novo{flex:none;width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--a-acento-forte)}

/* a conversa, no tamanho do app */
.app-conversa{display:flex;flex-direction:column;min-width:0;min-height:0}
.conv-cab{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-bottom:1px solid var(--a-fio)}
.conv-titulo{grid-column:2;display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:3px 12px 3px 4px;border:1px solid var(--a-fio);border-radius:999px;background:var(--a-vidro-2);font-size:12.5px;font-weight:600;line-height:1.4;white-space:nowrap}
.conv-titulo .rosto{width:20px;height:20px}
.conv-titulo:focus:not(:focus-visible){outline:0}
.conv-hash{display:grid;place-items:center;width:20px;height:20px;color:var(--a-texto-2)}
.conv-hash .ic{width:13px;height:13px}
.conv-voltar,.conv-sobre,.pn-fechar{display:none;align-items:center;justify-content:center;gap:4px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--a-texto-2);font:inherit;cursor:pointer}
.conv-voltar{grid-column:1;justify-self:start;margin-left:-4px;padding:0 8px 0 4px;font-size:12.5px}
.conv-sobre{grid-column:3;justify-self:end;width:30px}
.conv-voltar:hover,.conv-sobre:hover,.pn-fechar:hover,.conv-sobre[aria-expanded="true"]{background:var(--a-vidro-2);color:var(--a-texto)}
.conv-voltar .ic,.conv-sobre .ic,.pn-fechar .ic{width:16px;height:16px}
.conv-lista{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px max(24px,calc((100% - 660px) / 2)) 12px;scrollbar-width:thin;scrollbar-color:var(--a-fio-2) transparent}
.conv-dia{align-self:center;padding:2px 0;font-size:11px;color:var(--a-texto-3)}
/* como num chat: com pouca conversa, as mensagens ficam embaixo, perto da caixa */
.conv-lista > :first-child{margin-top:auto}
.app .msg{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;max-width:620px}
.app .av{width:22px;height:22px;margin-top:1px}
.app .av .rosto{width:22px;height:22px}
.app .voce-av{background:rgba(255,255,255,.14);color:var(--a-texto);font-size:10px}
.app .msg-cab{display:flex;align-items:baseline;gap:7px;font-size:11.5px;line-height:1.4}
.app .msg-cab b{font-weight:600}
.app .msg-cab span,.app .msg-cab time{color:var(--a-texto-3);font-variant-numeric:tabular-nums}
.app .msg-texto{margin-top:2px;font-size:13.5px;line-height:1.5;text-wrap:pretty}
.app .msg.eu{display:block;align-self:flex-end;max-width:min(72%,460px)}
.app .bolha{padding:7px 12px;border-radius:14px 14px 4px 14px;background:rgba(255,255,255,.12);font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.app .msg.fato .av-icone{display:grid;place-items:center;border-radius:6px;background:var(--a-vidro-3);color:var(--a-texto-2)}
.app .msg.fato .av-icone .ic{width:13px;height:13px}
.app .msg.fato .msg-texto{font-size:12.5px;color:var(--a-texto-2)}
.app .msg-cartao{display:block;width:100%;max-width:600px;padding-left:32px}
.app .msg.nova{animation:msg-entrar .4s var(--suave) both}
@keyframes msg-entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.app .msg-cta{margin-top:10px}
.app .digitando .msg-texto{display:inline-flex;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;color:var(--a-texto-3)}
.pontos{display:inline-flex;gap:3px}
.pontos i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:ponto-digitar 1.2s ease-in-out infinite}
.pontos i:nth-child(2){animation-delay:.15s}
.pontos i:nth-child(3){animation-delay:.3s}
@keyframes ponto-digitar{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.app .recorte{padding:11px 13px 12px;border:1px solid var(--a-fio);border-radius:12px;background:var(--a-vidro-2);box-shadow:none}
.app .rec-titulo{font-size:13px}
.app .rec-meta{margin-top:2px;font-size:12px;color:var(--a-texto-2)}
.app .rec-espera{margin-bottom:7px;font-size:11.5px;color:var(--a-atencao)}
.app .rec-espera i{box-shadow:0 0 0 3px var(--a-atencao-suave)}
.app .rec-botoes{margin-top:11px;gap:6px}
.app .mini-botao{height:28px;padding:0 12px;font-size:12.5px;color:var(--a-texto);box-shadow:inset 0 0 0 1px var(--a-fio-2)}
.app .mini-botao:hover{background:var(--a-vidro-3)}
.app .mini-botao.escuro{background:var(--a-acento);color:var(--a-fundo);box-shadow:none}
.app .mini-botao.escuro:hover{background:var(--a-acento-forte)}
.app .rec-feito{margin-top:11px;padding-top:10px;border-top-color:var(--a-fio-2);font-size:12.5px;color:var(--a-ligado-texto)}
.app .rec-detalhe li{border-top-color:var(--a-fio);font-size:12.5px}
.app .rec-detalhe li span{color:var(--a-texto-2)}
.app .rec-detalhe li span + span{color:var(--a-texto)}
.app .rec-tabela div{padding:7px 0;border-top-color:var(--a-fio);font-size:12.5px}
.app .rec-tabela dt{color:var(--a-texto-2)}
.app .rec-tabela .alta dd,.app .rec-nota{color:var(--a-atencao)}
.app .delta{background:var(--a-atencao-suave)}
.app .rec-tabela .total{border-top-color:var(--a-texto-2)}
.app .rec-tabela .total dt{color:var(--a-texto)}
.app .rec-nota{font-size:12px}
.app .rec-id{color:var(--a-acento-forte)}
.app .rec-passos li{font-size:12.5px;color:var(--a-texto-2)}
.app .rec-passos li::before{color:var(--a-texto-3)}
.app .rec-anexo{box-shadow:inset 0 0 0 1px var(--a-fio-2);font-size:12px;color:var(--a-texto-2)}
.app .cod-icone{width:28px;height:28px;border-radius:8px;background:var(--a-atencao-suave);color:var(--a-atencao)}
.app .cod-form label{color:var(--a-texto-2);font-size:11.5px}
.app .cod-form input{height:34px;border-color:var(--a-fio-2);background:var(--a-vidro);color:var(--a-texto);font-size:16px}
.app .cod-form input:focus{border-color:var(--a-acento);box-shadow:0 0 0 3px rgba(28,153,167,.22)}
.app .cod-form .mini-botao{height:34px}
.app .cod-nota{font-size:11.5px;color:var(--a-texto-3)}
.app .rec-arquivos li{border:1px solid var(--a-fio);background:var(--a-vidro-2);font-size:12px}
.app .rec-arquivos li span,.app .rec-arquivos .ic{color:var(--a-texto-3)}
.recorte.lista ul{display:grid;gap:2px;margin:8px -6px 0}
.recorte.lista button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--a-texto);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:background-color .12s}
.recorte.lista button:hover{background:var(--a-vidro-3)}
.recorte.lista .rosto{width:20px;height:20px}
.recorte.lista button > span:not(.rosto){flex:1;min-width:0}
.recorte.lista button .ic{color:var(--a-texto-3)}
.recorte.lista button.resolvido > span:not(.rosto){color:var(--a-texto-3);text-decoration:line-through;text-decoration-color:var(--a-texto-3)}
.recorte.lista button.resolvido .ic{color:var(--a-ligado)}
.caixa{display:flex;align-items:center;gap:6px;min-height:46px;margin:4px max(24px,calc((100% - 660px) / 2)) 14px;padding:5px 6px 5px 14px;border:1px solid var(--a-fio);border-radius:12px;background:var(--a-vidro-2);transition:border-color .15s}
.caixa:focus-within{border-color:var(--a-acento)}
.caixa input{flex:1;min-width:0;padding:6px 0;border:0;outline:0;background:transparent;color:var(--a-texto);font:inherit;font-size:13.5px}
.caixa input::placeholder{color:var(--a-texto-3)}
.caixa-enviar{display:grid;place-items:center;flex:none;width:32px;height:32px;border:0;border-radius:8px;background:var(--a-vidro-3);color:var(--a-texto-2);cursor:pointer;transition:background-color .15s,color .15s}
.caixa:focus-within .caixa-enviar,.caixa-enviar:hover{background:var(--a-acento);color:var(--a-fundo)}
.caixa-enviar .ic{stroke-width:2.2}

/* o painel: quem é o bot ou quem está no canal */
.app-painel{position:relative;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 20px;background:var(--a-vidro);border-left:1px solid var(--a-fio);scrollbar-width:thin;scrollbar-color:var(--a-fio-2) transparent}
.pn-fechar{position:absolute;top:8px;right:8px;width:30px}
.pn-topo{display:grid;justify-items:center;gap:2px;padding:36px 0 14px;text-align:center}
.pn-topo .rosto-g{width:60px;height:60px;margin-bottom:10px}
.pn-hash{display:grid;place-items:center;width:56px;height:56px;margin-bottom:10px;border-radius:16px;background:var(--a-vidro-3);color:var(--a-texto-2)}
.pn-hash .ic{width:24px;height:24px}
.pn-nome{font-size:15px;font-weight:600}
.pn-sub{font-size:12px;color:var(--a-texto-2)}
.pn-topo .presenca{margin-top:8px}
.presenca{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--a-texto-2)}
.presenca i{width:7px;height:7px;border-radius:50%;background:var(--a-texto-3)}
.presenca.p-disponivel i,.presenca.p-trabalhando i{background:var(--a-ligado)}
.presenca.p-trabalhando i{box-shadow:0 0 0 3px rgba(48,209,88,.14)}
.presenca.p-esperando{color:var(--a-atencao)}
.presenca.p-esperando i{background:var(--a-atencao);box-shadow:0 0 0 3px var(--a-atencao-suave)}
.presenca.p-dormindo i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--a-texto-3)}
.pn-dados,.pn-membros{display:grid;padding:2px 12px;border:1px solid var(--a-fio);border-radius:10px;background:var(--a-vidro-2)}
.pn-dados{margin-top:6px}
.pn-dados div{display:grid;gap:2px;padding:9px 0}
.pn-dados div + div,.pn-membros li + li{border-top:1px solid var(--a-fio)}
.pn-dados dt{font-size:11px;color:var(--a-texto-3)}
.pn-dados dd{font-size:12.5px;line-height:1.45}
.pn-dados small{display:block;margin-top:1px;font-size:11px;color:var(--a-texto-3)}
.pn-desc{padding:0 6px;font-size:12.5px;color:var(--a-texto-2);text-align:center;text-wrap:pretty}
.pn-rotulo{padding:18px 4px 6px;font-size:11px;font-weight:500;color:var(--a-texto-3)}
.pn-membros li{display:flex;align-items:center;gap:10px;padding:7px 0}
.pn-membros .rosto,.pn-membros .voce-av{width:24px;height:24px}
.pn-membros p{display:grid;min-width:0}
.pn-membros b{font-size:12.5px;font-weight:500}

/* mais estreito: o painel vira gaveta por cima da conversa; no celular, uma tela por vez (lista ou conversa) */
@container (max-width:1060px){
  .app{grid-template-columns:52px 236px minmax(0,1fr)}
  .app-painel{position:absolute;top:0;right:0;bottom:0;z-index:3;width:min(300px,100%);background:var(--a-solido);visibility:hidden;transform:translateX(100%);transition:transform .25s var(--suave),visibility 0s .25s}
  .app[data-painel="aberto"] .app-painel{visibility:visible;transform:none;transition:transform .25s var(--suave);box-shadow:-18px 0 40px rgba(0,0,0,.45)}
  .conv-sobre,.pn-fechar{display:inline-flex}
}
@container (max-width:700px){
  .app{grid-template-columns:minmax(0,1fr);height:clamp(520px,80svh,680px)}
  .app-trilho{display:none}
  .app-lateral,.app-conversa{grid-area:1 / 1}
  .app-lateral{border-right:0;background:transparent}
  .app[data-tela="lista"] .app-conversa,.app[data-tela="conversa"] .app-lateral{display:none}
  .conv-voltar{display:inline-flex}
  .conv-lista{padding:12px 14px 10px}
  .caixa{margin:4px 12px 12px}
  .item{min-height:40px}
  .app .msg-cartao{padding-left:0}
  .app .msg.eu{max-width:86%}
}

/* ---------- perguntas ---------- */
.perguntas{padding-top:clamp(40px,5vw,80px);border-top:1px solid var(--fio)}
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,7vw,112px);align-items:start;padding-top:clamp(64px,6vw,96px)}
.faq h2{position:sticky;top:104px;max-width:10ch}
.faq-lista details{border-bottom:1px solid var(--fio-2)}
.faq-lista details:first-child{border-top:1px solid var(--tinta)}
.faq-lista summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.4vw,19px);font-weight:500;letter-spacing:-.012em;line-height:1.4}
.faq-lista summary::-webkit-details-marker{display:none}
.mais{position:relative;flex:none;width:14px;height:14px;color:var(--tinta-3);transition:transform .3s var(--suave)}
.mais::before,.mais::after{content:"";position:absolute;left:0;right:0;top:6.25px;height:1.5px;border-radius:1px;background:currentColor}
.mais::after{transform:rotate(90deg)}
details[open] .mais{transform:rotate(45deg);color:var(--tinta)}
.faq-lista details::details-content{height:0;overflow:clip;transition:height .35s var(--suave),content-visibility .35s allow-discrete}
.faq-lista details[open]::details-content{height:auto}
.resposta{padding:0 44px 24px 0}
.resposta p{font-size:16.5px;line-height:1.6;color:var(--tinta-2);max-width:40em;text-wrap:pretty}

/* ---------- rodapé ---------- */
.rodape{background:var(--noite);color:rgba(255,255,255,.66);font-size:14.5px}
.rodape-colunas{display:grid;grid-template-columns:minmax(0,6fr) repeat(2,minmax(0,2.2fr));gap:32px;padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(40px,4vw,56px)}
.rodape .marca{color:#fff}
.rodape-marca p{max-width:34ch;margin-top:14px}
.rodape h3{font-size:14px;font-weight:600;color:#fff}
.rodape ul{display:grid;margin-top:8px}
.rodape li a{display:inline-flex;align-items:center;min-height:38px;transition:color .15s}
.rodape a:hover{color:#fff}
.rodape-legal{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;padding-top:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.5)}
.rodape-legal p{flex:1 1 30ch;max-width:80ch}
.rodape-legal a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.rodape-legal ul{display:flex;gap:20px;margin:0}
.rodape-legal ul a{text-decoration:none}

/* ---------- telas menores ---------- */
@media (max-width:1080px){
  .topo-links{display:none}
  .capa-linha{grid-template-columns:minmax(0,1fr);justify-content:start}
}
@media (max-width:900px){
  .cap-corpo,.inverso .cap-corpo{grid-template-columns:minmax(0,1fr)}
  .inverso .copia{order:0}
  .cap-corpo > .copia{position:static}
  .faq{grid-template-columns:minmax(0,1fr)}
  .faq h2{position:static;max-width:14ch}
  .dentro-cabeca{grid-template-columns:minmax(0,1fr);align-items:start}
  .fatos-claros{grid-template-columns:minmax(0,1fr);gap:0}
  .fatos-claros li{padding:18px 0 22px}
  .rodape-colunas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape-marca{grid-column:1 / -1}
  /* no celular a foto vem inteira em cima e o texto embaixo: o bot de costas pra tela é o argumento da prancha */
  .prancha{padding-top:0}
  .prancha-foto{position:relative;inset:auto;z-index:0;margin-bottom:8px}
  .prancha-foto img{height:auto;aspect-ratio:4/3;object-position:62% 55%}
  .prancha-foto::after{background:linear-gradient(180deg,rgba(5,10,11,0) 50%,var(--noite) 100%)}
}
@media (max-width:620px){
  body{font-size:16px}
  .topo-dentro{gap:14px}
  .topo-acoes{gap:12px}
  .topo-entrar{display:none}
  .marca{font-size:18px}
  .capa .acoes{gap:6px 20px}
  .lista-campo{flex-direction:column}
  .lista-campo input{flex:none;height:50px}
  .lista-campo .botao{justify-content:center}
  .botao-g{height:50px;padding:0 20px 0 22px;font-size:16px}
  .copia-capa .papel-foto img{aspect-ratio:4/3;object-position:62% 70%}
  .fio .msg-cartao{padding-left:0}
  .resultado{grid-template-columns:minmax(0,1fr)}
  .resposta{padding-right:4px}
  .rodape-legal ul{gap:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .copia.revela .papel-foto img{filter:none;transform:none}
  .js .capitulo .fio .msg{opacity:1;transform:none}
}