/* ==========================================================================
   Entrar / criar conta — a caixa é a barra lateral
   Carrega depois de app.css e theme.css: a grade em duas colunas (painel +
   cérebro) e o texto de abertura vêm do app; a caixa de entrada é nossa e usa
   o material da barra lateral — o degradê azul para o quase preto, o fio de
   luz no topo, a sobrelinha em serifa itálica, as abas de texto com o fio
   laranja, o campo escuro com o anel laranja no foco e o botão do tema.
   Três formulários na mesma caixa: entrar, criar conta e esqueci a senha.
   ========================================================================== */

/* ---- marca e sobrelinha, como no topo da barra ---- */
.pc-entrada-pagina .login-brand { margin-bottom: clamp(36px, 7vh, 88px); }
.pc-entrada-marca { text-decoration: none; gap: 11px; }
.pc-entrada-marca svg { width: 54px; height: 54px; }
.pc-entrada-marca .pc-src-wordmark { font-size: 27px; }
.pc-entrada-conheca { font-size: 13px; color: #93a7c9; text-decoration: none; white-space: nowrap; transition: color var(--t-quick) var(--ease-out); }
.pc-entrada-conheca:hover { color: var(--pc-accent); }
.pc-entrada-pagina .login-promise { margin-bottom: 26px; }
.pc-entrada-pagina .login-promise p { color: #a5b4cd; max-width: 52ch; }

/* ---- a caixa ---- */
.pc-entrada {
  position: relative; width: 100%; max-width: 440px; margin: 2vh 0 0;
  padding: 18px 22px 22px; border-radius: 18px;
  border: 1px solid rgba(138, 170, 235, .22);
  background: linear-gradient(180deg, rgba(23, 38, 66, .97), rgba(10, 17, 32, .98));
  box-shadow:
    inset 0 1px 0 rgba(180, 222, 255, .10),
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(239, 127, 47, .05);
  animation: pc-entrada-sobe var(--t-slow) var(--ease-out) both; animation-delay: 240ms;
}
@keyframes pc-entrada-sobe { from { opacity: 0; transform: translateY(12px); } }
.pc-entrada-cab { display: flex; flex-direction: column; gap: 6px; }
.pc-entrada-cab .pc-src-eyebrow { margin: 0; }
.pc-entrada-abas { gap: 18px; }
.pc-entrada-abas .pc-src-tab { font-size: 15.5px; padding: 6px 1px 9px; }
.pc-entrada-abas .pc-src-tab:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; border-radius: 3px; }
/* na tela de "esqueci a senha" as abas apagam: é um desvio, não uma terceira aba */
.pc-entrada[data-modo="esqueci"] .pc-entrada-abas .pc-src-tab { color: #93a7c9; opacity: .45; }
.pc-entrada[data-modo="esqueci"] .pc-entrada-abas .pc-src-tab::before { display: none; }

/* ---- os formulários ---- */
.pc-entrada-form { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; animation: pc-entrada-troca var(--t-base) var(--ease-out) both; }
@keyframes pc-entrada-troca { from { opacity: 0; transform: translateY(6px); } }
.pc-entrada-campo { display: flex; flex-direction: column; gap: 6px; }
.pc-entrada-campo > span:first-child { font-size: 12px; font-weight: 500; color: #93a7c9; }
.pc-entrada-campo input {
  width: 100%; padding: 11px 12px; border-radius: 11px;
  border: 1px solid rgba(138, 170, 235, .18); background: rgba(3, 9, 20, .62);
  color: var(--text); font-size: 14.5px; outline: none;
  transition: border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);
}
.pc-entrada-campo input::placeholder { color: #5f7399; }
.pc-entrada-campo input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-entrada-campo input.invalido { border-color: rgba(242, 112, 138, .7); }
.pc-entrada-campo input.invalido:focus { box-shadow: 0 0 0 3px rgba(242, 112, 138, .16); }
/* senha com o olho dentro do campo */
.pc-entrada-senha { position: relative; display: block; }
.pc-entrada-senha input { padding-right: 44px; }
.pc-entrada-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: none; color: #7f93b8; cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
.pc-entrada-olho:hover, .pc-entrada-olho[aria-pressed="true"] { color: #eef5ff; background: rgba(138, 170, 235, .12); }
.pc-entrada-olho svg { width: 18px; height: 18px; display: block; }
/* força da senha: quatro traços e uma palavra */
.pc-entrada-forca { display: flex; align-items: center; gap: 4px; height: 14px; margin-top: 1px; }
.pc-entrada-forca i { flex: 1; height: 3px; border-radius: 2px; background: rgba(138, 170, 235, .16); transition: background var(--t-base) var(--ease-out); }
.pc-entrada-forca b { min-width: 46px; margin-left: 6px; font-size: 11px; font-weight: 500; color: #778bb0; text-align: right; white-space: nowrap; }
.pc-entrada-forca[data-nivel="1"] i:nth-child(-n+1) { background: #f2708a; }
.pc-entrada-forca[data-nivel="2"] i:nth-child(-n+2) { background: #f5a531; }
.pc-entrada-forca[data-nivel="3"] i:nth-child(-n+3) { background: #a3e635; }
.pc-entrada-forca[data-nivel="4"] i:nth-child(-n+4) { background: #57d68a; }

.pc-entrada-linha { display: flex; justify-content: flex-end; margin-top: -6px; }
.pc-entrada-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: #93a7c9;
  text-decoration: underline; text-decoration-color: rgba(147, 167, 201, .4); text-underline-offset: 3px;
  transition: color var(--t-quick) var(--ease-out), text-decoration-color var(--t-quick) var(--ease-out);
}
.pc-entrada-link:hover { color: var(--pc-accent); text-decoration-color: currentColor; }

/* o botão: o mesmo material do "Fazer upgrade", ocupando a largura */
.pc-entrada-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 2px; padding: 13px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 190, 140, .45);
  background: linear-gradient(118deg, var(--pc-accent-deep), var(--pc-accent));
  color: #1b1205; font-family: var(--font-sans); font-weight: 600; font-size: 14.5px;
  box-shadow: 0 8px 24px rgba(239, 127, 47, .28);
  transition: transform var(--t-quick) var(--ease-out), box-shadow var(--t-base) var(--ease-out), opacity var(--t-quick) var(--ease-out);
}
.pc-entrada-btn::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 45%; transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.pc-entrada-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(239, 127, 47, .4); filter: none; }
.pc-entrada-btn:hover:not(:disabled)::after { animation: pc-brilho 760ms var(--ease-out); }
.pc-entrada-btn:active:not(:disabled) { transform: translateY(0); }
.pc-entrada-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.pc-entrada-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.pc-entrada-miuda { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: #778bb0; }
.pc-entrada-miuda .pc-entrada-link { font-size: inherit; color: #b9c7e4; }
.pc-entrada-titulo { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: #eef5ff; }
.pc-entrada-texto { margin: -6px 0 0; font-size: 13.5px; line-height: 1.55; color: #a5b4cd; }

/* aviso (chegou o link) e erro */
.pc-entrada-aviso {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 11px;
  font-size: 13px; line-height: 1.5; color: #f3e6da;
  background: rgba(239, 127, 47, .10); border: 1px solid rgba(239, 127, 47, .28);
  animation: pc-entrada-troca var(--t-base) var(--ease-out) both;
}
.pc-entrada-erro { margin: 12px 0 0; font-size: 13px; color: var(--danger); animation: pc-entrada-troca var(--t-base) var(--ease-out) both; }

/* ---- o código que foi para o e-mail (js/codigo.js): seis caixas, o relógio de
        expiração e o voo dos dígitos; as abas apagam, é uma etapa ---- */
.pc-entrada[data-modo="codigo"] .pc-entrada-abas .pc-src-tab { color: #93a7c9; opacity: .45; }
.pc-entrada[data-modo="codigo"] .pc-entrada-abas .pc-src-tab::before { display: none; }
.pc-entrada-texto b { color: #eef5ff; font-weight: 600; }
.pc-entrada-link:disabled { color: #5f7399; cursor: default; text-decoration-color: transparent; }

/* o campo de verdade fica por cima, invisível; as caixas mostram o que está nele */
.pc-codigo { position: relative; margin-top: 2px; }
.pc-codigo input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; outline: none; background: transparent; cursor: text;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px; letter-spacing: 0;
}
/* o campo nunca pinta nada: nem o anel de foco que o app põe em todo input (ele aparecia em volta da linha quando as caixas se desfazem) */
.pc-codigo input, .pc-codigo input:focus, .pc-codigo input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
.pc-codigo input::selection { background: transparent; }
.pc-codigo input:disabled { cursor: default; }
.pc-codigo-caixas { display: flex; gap: 8px; }
.pc-codigo-caixas span {
  position: relative; flex: 1 1 0; min-width: 0; height: 58px; border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid rgba(138, 170, 235, .2); background: rgba(3, 9, 20, .62);
  font-family: var(--font-sans); font-size: 26px; font-weight: 600; line-height: 1; color: #ffd4a8;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out), color 200ms var(--ease-out), opacity 260ms var(--ease-out);
}
.pc-codigo-caixas span:nth-child(3) { margin-right: 8px; }   /* dois grupos de três, como no e-mail */
.pc-codigo-caixas span.cheia { border-color: rgba(255, 176, 122, .42); background: rgba(14, 22, 40, .92); }
.pc-codigo-caixas span.vez { border-color: var(--pc-accent); box-shadow: 0 0 0 3px rgba(239, 127, 47, .16); }
.pc-codigo-caixas span.vez:empty::after { content: ""; width: 2px; height: 24px; border-radius: 1px; background: var(--pc-accent); animation: pc-codigo-cursor 1s steps(1) infinite; }
@keyframes pc-codigo-cursor { 50% { opacity: 0; } }
/* conferindo: as caixas respiram em onda */
.pc-codigo.conferindo .pc-codigo-caixas span { animation: pc-codigo-confere 900ms ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes pc-codigo-confere { 50% { border-color: rgba(255, 176, 122, .8); box-shadow: 0 0 16px rgba(239, 127, 47, .28); } }
/* errado: vermelho e o balanço */
.pc-codigo.errado .pc-codigo-caixas { animation: pc-codigo-nao 420ms var(--ease-out) both; }
.pc-codigo.errado .pc-codigo-caixas span { border-color: rgba(242, 112, 138, .9); color: #ff9aae; background: rgba(60, 12, 24, .5); box-shadow: 0 0 0 3px rgba(242, 112, 138, .14); }
@keyframes pc-codigo-nao { 15% { transform: translateX(-8px); } 35% { transform: translateX(7px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }
/* certo: acendem um a um; depois as caixas se desfazem e os dígitos voam */
.pc-codigo.certo .pc-codigo-caixas span { border-color: var(--pc-accent); color: #fff3e6; background: rgba(239, 127, 47, .16); box-shadow: 0 0 0 3px rgba(239, 127, 47, .2), 0 0 22px rgba(239, 127, 47, .35); transition-delay: calc(var(--i) * 35ms); }
/* o número some da caixa na hora (quem voa é a cópia dele); a caixa se desfaz em seguida, uma a uma */
.pc-codigo.voou .pc-codigo-caixas span { color: transparent; border-color: rgba(239, 127, 47, 0); background: transparent; box-shadow: none; transition-property: border-color, background, box-shadow, opacity; transition-delay: calc(var(--i) * 50ms); }
/* expirou: apagadas, tracejadas */
.pc-codigo.morto .pc-codigo-caixas span { opacity: .4; border-style: dashed; }

/* embaixo das caixas: o relógio de expiração (anel que esvazia) e o reenviar */
.pc-codigo-pe { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; }
.pc-codigo-relogio { display: inline-flex; align-items: center; gap: 10px; }
.pc-codigo-anel { flex: none; width: 38px; height: 38px; transform: rotate(-90deg); }
.pc-codigo-anel circle { fill: none; stroke-width: 3; }
.pc-codigo-anel .trilho { stroke: rgba(138, 170, 235, .16); }
.pc-codigo-anel .resto { stroke: var(--pc-accent); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(239, 127, 47, .6)); transition: stroke-dashoffset 260ms linear, stroke 300ms var(--ease-out); }
.pc-codigo-relogio-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.pc-codigo-rotulo { font-size: 11px; font-weight: 500; color: #7f93b8; }
.pc-codigo-tempo { font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: #eef5ff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pc-codigo-relogio.fim .resto { stroke: #f2708a; filter: drop-shadow(0 0 3px rgba(242, 112, 138, .65)); }
.pc-codigo-relogio.fim .pc-codigo-tempo { color: #ffb4c1; }
.pc-codigo-relogio.fim .pc-codigo-anel { animation: pc-codigo-urge 1s ease-in-out infinite; }
@keyframes pc-codigo-urge { 50% { opacity: .5; } }
.pc-codigo-relogio.acabou .pc-codigo-tempo, .pc-codigo-relogio.acabou .pc-codigo-rotulo { color: #f2708a; }
.pc-codigo-pe .pc-entrada-link { font-variant-numeric: tabular-nums; }
.pc-codigo-pe .pc-entrada-link.destaque { color: var(--pc-accent); font-weight: 600; text-decoration-color: currentColor; }

/* o voo (uma camada fixa por cima de tudo): os dígitos, os pontos que viram
   neurônios, o cérebro, a onda, o clarão na cena e a tinta que cobre a troca */
.pc-voo { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.pc-voo-cerebro { position: fixed; display: block; will-change: transform, opacity; filter: drop-shadow(0 0 16px rgba(239, 127, 47, .55)) drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.pc-voo-cerebro svg, .pc-redefinir-cerebro svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-voo-cerebro .corpo { transform-box: fill-box; transform-origin: 50% 50%; }
.pc-voo-digito { position: fixed; display: grid; place-items: center; font-family: var(--font-sans); font-weight: 600; line-height: 1; color: #fff3e6; text-shadow: 0 0 12px rgba(255, 176, 122, .9); will-change: transform, opacity; }
.pc-voo-ponto { position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #ffd4a8, 0 0 20px rgba(239, 127, 47, .9); will-change: transform, opacity; }
.pc-voo-onda { position: fixed; border-radius: 50%; border: 2px solid rgba(255, 176, 122, .75); box-shadow: 0 0 24px rgba(239, 127, 47, .35); }
.pc-voo-clarao { position: fixed; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 228, 196, .95) 0, rgba(255, 176, 122, .55) 22%, rgba(239, 127, 47, .18) 48%, transparent 70%); }
.pc-voo-tinta { position: fixed; inset: 0; background: #04060c; opacity: 0; }

/* senha nova: o selo de e-mail confirmado, com o cérebro que se formou */
.pc-redefinir-selo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 176, 122, .25); background: rgba(239, 127, 47, .08); font-size: 13px; line-height: 1.45; color: #d9c6b5; }
.pc-redefinir-selo b { color: #fff3e6; font-weight: 600; }
.pc-redefinir-cerebro { flex: none; display: block; width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(239, 127, 47, .5)); }
a.pc-entrada-btn { text-decoration: none; }

/* a caixa balança de leve quando o envio falha */
.pc-entrada.errou { animation: pc-entrada-nao 380ms var(--ease-out) both; }
@keyframes pc-entrada-nao { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }


/* ---- a coluna do cérebro: tinta, não o azul do app ---- */
.pc-entrada-cena { background: #04060c; }
.pc-entrada-cena .neural-iframe { background: #04060c; }
.pc-entrada-cena::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;   /* a costura com o painel */
  background: linear-gradient(90deg, rgba(7, 14, 29, .55), transparent 14%);
}

/* em tela baixa a coluna encurta em vez de rolar: menos ar entre a marca, a
   promessa e a caixa, e o título um degrau menor */
/* (o limite era 940 px; com a faixa das IAs e o rodapé embaixo da caixa, a coluna
   encurta a partir de 1320 px de altura, para continuar sem rolagem) */
@media (max-height: 1320px) and (min-width: 960px) {
  .pc-entrada-pagina .login-panel { padding-top: 26px; padding-bottom: 22px; }
  .pc-entrada-pagina .login-brand { margin-bottom: 26px; }
  .pc-entrada-pagina .login-promise { margin-bottom: 16px; }
  .pc-entrada-pagina .login-promise h1 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 10px; }
  .pc-entrada-pagina .login-promise p { font-size: 14.5px; }
  .pc-entrada { margin-top: 0; padding: 14px 20px 18px; }
  .pc-entrada-form { gap: 11px; padding-top: 12px; }
}
@media (max-width: 959px) {
  .pc-entrada { max-width: none; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-entrada, .pc-entrada-form, .pc-entrada-aviso, .pc-entrada-erro, .pc-entrada.errou { animation: none; }
  .pc-codigo.conferindo .pc-codigo-caixas span, .pc-codigo.errado .pc-codigo-caixas, .pc-codigo-relogio.fim .pc-codigo-anel { animation: none; }
}


/* ==========================================================================
   Em volta da caixa: a faixa das IAs, os três fatos e o rodapé. Na coluna do
   cérebro: as memórias que acendem em volta dele e a legenda. Nada disso
   mexe no que já estava; só acrescenta.
   ========================================================================== */
.pc-entrada-ias { margin-top: 22px; }
.pc-entrada-ias-rotulo { display: block; margin-bottom: 8px; font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #7f93b8; }
.pc-entrada-ias ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-entrada-ias li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  border: 1px solid rgba(138, 170, 235, .2); background: rgba(6, 14, 30, .55); color: #c9d7ef; font-size: 12px; font-weight: 500;
}
.pc-entrada-ias li.texto { padding-left: 10px; color: #9fb0d4; }
.pc-entrada-ias .cp-ias-glifo { width: 13px; height: 13px; }
.pc-entrada-fatos { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(138, 170, 235, .12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc-entrada-fatos li { display: flex; flex-direction: column; gap: 2px; }
.pc-entrada-fatos b { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: #eef5ff; }
.pc-entrada-fatos span { font-size: 11.5px; color: #7f93b8; }
.pc-entrada-pe { margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(138, 170, 235, .12); font-size: 12px; color: #7f93b8; }
.pc-entrada-pe nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.pc-entrada-pe a { color: #9fb0d4; text-decoration: none; }
.pc-entrada-pe a:hover { color: #fff; }
.pc-entrada-pe p { margin: 0; line-height: 1.5; max-width: 60ch; }
.pc-entrada-pe p a { text-decoration: underline; text-underline-offset: 2px; }

/* as memórias que acendem em volta do cérebro: um ponto, um fio e o título, cada uma na sua vez */
.pc-entrada-memorias { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pc-entrada-memorias li {
  position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px;
  opacity: 0; animation: pc-mem-acende 9.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.pc-entrada-memorias li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffd4a8; box-shadow: 0 0 10px rgba(255, 176, 122, .9), 0 0 24px rgba(239, 127, 47, .5); }
.pc-entrada-memorias li::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, rgba(255, 176, 122, .9), rgba(255, 176, 122, 0)); order: 1; }
.pc-entrada-memorias li span { order: 2; font-family: var(--font-serif); font-size: 14px; color: #fff3e6; text-shadow: 0 1px 8px rgba(3, 8, 20, 1); white-space: nowrap; }
.pc-entrada-memorias li small { order: 3; font-size: 11px; color: #d9b899; text-shadow: 0 1px 6px rgba(3, 8, 20, 1); white-space: nowrap; }
/* .dir: o rótulo sai do ponto para a direita; .esq: para a esquerda (pontos na metade direita) */
.pc-entrada-memorias li.esq { flex-direction: row-reverse; transform: translateX(-100%); }
.pc-entrada-memorias li.esq::before { background: linear-gradient(270deg, rgba(255, 176, 122, .9), rgba(255, 176, 122, 0)); }
@keyframes pc-mem-acende { 0%, 6% { opacity: 0; transform: translateY(4px); } 12%, 28% { opacity: 1; transform: translateY(0); } 36%, 100% { opacity: 0; } }
.pc-entrada-memorias li.esq { animation-name: pc-mem-acende-esq; }
@keyframes pc-mem-acende-esq { 0%, 6% { opacity: 0; transform: translate(-100%, 4px); } 12%, 28% { opacity: 1; transform: translate(-100%, 0); } 36%, 100% { opacity: 0; } }
/* a legenda: o que o cérebro é */
.pc-entrada-legenda {
  position: absolute; left: 50%; bottom: clamp(22px, 5vh, 48px); z-index: 3; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: calc(100% - 40px);
}
.pc-entrada-legenda span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 176, 122, .25); background: rgba(4, 6, 12, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: var(--font-serif); font-style: italic; font-size: 12.5px; color: #e8d6c4; }
.pc-entrada-legenda i { width: 7px; height: 7px; border-radius: 50%; background: #ffb07a; box-shadow: 0 0 8px rgba(255, 176, 122, .8); }
.pc-entrada-legenda span:nth-child(2) i { background: #ffd4a8; }
.pc-entrada-legenda span:nth-child(3) i { background: #f5a531; }

/* em tela baixa, o que foi acrescentado some por partes, do menos ao mais importante,
   para a página continuar sem rolagem (a caixa e a promessa nunca saem) */
@media (max-height: 1320px) and (min-width: 960px) {
  .pc-entrada-ias { margin-top: 14px; }
  .pc-entrada-fatos { margin-top: 10px; padding-top: 10px; }
  .pc-entrada-pe { margin-top: 12px; padding-top: 8px; }
}
@media (max-height: 1060px) and (min-width: 960px) {
  .pc-entrada-fatos { display: none; }
}
@media (max-height: 960px) and (min-width: 960px) {
  .pc-entrada-ias-rotulo { display: none; }
  .pc-entrada-pe p { display: none; }
}
@media (max-height: 840px) and (min-width: 960px) {
  .pc-entrada-ias { display: none; }
}
@media (max-width: 959px) {
  .pc-entrada-memorias, .pc-entrada-legenda { display: none; }
}
@media (max-width: 520px) {
  .pc-entrada-fatos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc-entrada-fatos li { flex-direction: row; align-items: baseline; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-entrada-memorias li { animation: none; opacity: .9; }
}